/* Custom CSS — RKE Contractors / Project-specific styles. Do NOT edit template CSS directly.
   Load order: mainstyle.css -> brand.css -> custom.css
   ---------------------------------------------------------------------------
   NOTE (compose, Task 02): the DesignCode source was 100% inline styles. Per the
   Option B decision, page markup keeps its inline utility styles for now; brand
   tokens get extracted into classes in brand-css (Task 03) + per-page builds.
   This file currently holds the SIGNATURE custom CSS lifted from the homepage
   <style> block: hero slideshow + agency marquee animations, reduced-motion
   guards, and the homepage responsive rules. */

/* ---- base (from homepage helmet <style>) ---- */
/* Link color lives in brand.css (token-driven: var(--brand-primary)); not repeated here. */
* { box-sizing: border-box; }
html, body { overflow-x: hidden; }
body { margin: 0; background: #fff; }
img { max-width: 100%; }

/* ---- signature animations: agency marquee + hero slideshow ---- */
@keyframes rke-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rke-heroFade { 0% { opacity: 0; } 5% { opacity: 1; } 25% { opacity: 1; } 31% { opacity: 0; } 100% { opacity: 0; } }
@keyframes rke-heroZoom { from { transform: scale(1.05); } to { transform: scale(1.2); } }

@media (prefers-reduced-motion: reduce) {
  [data-rke-hero-slide] { animation: none !important; opacity: 1 !important; }
  [data-rke-hero-slide]:not(:first-child) { opacity: 0 !important; }
  [data-rke-hero-slide] img { animation: none !important; }
}

/* ---- homepage responsive rules (from source; deeper mobile tuning — full-bleed
        images + tighter side padding — is applied per-page during builds + Task 18) ---- */
@media (max-width: 860px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 760px) {
  [data-rke-projects] { flex-direction: column !important; }
  [data-rke-projects] > a { flex: 1 1 auto !important; }
  [data-rke-news] { flex-direction: column !important; }
  [data-rke-news] > div { flex: 1 1 auto !important; }
  [data-rke-heronav] { flex-wrap: wrap !important; }
  [data-rke-featgrid] { flex-direction: column !important; }
  [data-rke-featgrid] > a { flex: 1 1 auto !important; }
}
@media (max-width: 620px) {
  [style*="max-width:1200px"] { padding-left: 16px !important; padding-right: 16px !important; }
  h1 { font-size: clamp(34px, 9vw, 56px) !important; line-height: 1.03 !important; }
  h2 { font-size: clamp(26px, 7vw, 38px) !important; }
}

/* ================= HEADER / NAV (from Header.dc.html — sc-if desktop/mobile resolved to CSS) ================= */
.rke-navlink { transition: color .2s ease, border-color .2s ease; }
.rke-navlink:hover { color: #C20104 !important; border-bottom-color: #C20104 !important; }
.rke-bid-cta:hover { background: #9c0103 !important; }
.rke-social-compact { transition: color .15s; }
.rke-social-compact:hover { color: #C20104 !important; }
.rke-social-pill { transition: color .15s, background .15s; }
.rke-social-pill:hover { background: #C20104 !important; color: #fff !important; }

/* desktop nav shows by default; hamburger + mobile menu hidden */
.rke-mobile-toggle { display: none; }
.rke-mobile-menu { display: none; }
.rke-mobile-menu.is-open { display: flex; }

@media (max-width: 940px) {
  .rke-desktop-nav { display: none !important; }   /* hides nav links + Request-a-Bid CTA */
  .rke-topbar-desktop { display: none !important; } /* hides cert line + compact social on the dark top bar */
  .rke-mobile-toggle { display: flex; }
}

/* ================= Task 07 chrome polish (2026-07-28) ================= */
/* Top-bar phone: underline on hover + brighten (review-meeting request). */
.rke-topbar-phone { transition: color .15s ease; }
.rke-topbar-phone:hover { color: #fff !important; text-decoration: underline !important; text-underline-offset: 3px; }
/* Employee Portal chrome link: red on hover; the disabled state is a span (no dead href) until the Miter URL lands. */
.rke-portal-link { transition: color .15s ease; }
.rke-portal-link:hover { color: var(--brand-primary) !important; }

/* ================= Task 17 — mobile deep scan (2026-09-08) ================= */
/* Keyboard focus visibility, sitewide: UA default was the only affordance (11e-5). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid #C20104 !important; outline-offset: 2px; }
/* Project-detail hero: 4:3 sources in a ~2.2:1 cover slot cropped dead-center (11e-4b). */
.rke-prhero img, img.rke-prhero { object-position: center 35% !important; }
/* Touch hit-areas on coarse pointers: enlarge without moving layout. */
@media (pointer: coarse) {
  footer a, .rke-topbar-phone, .rke-portal-link, .rke-bandmore, .rke-store-link {
    padding-block: 12px; margin-block: -12px; display: inline-block; }
  .rke-pjchip { padding-top: 13px !important; padding-bottom: 13px !important; }
}
/* Mobile: standalone content images go full-bleed (cards/timeline stay padded by design). */
@media (max-width: 620px) {
  .rke-praside-img { width: calc(100% + 40px) !important; max-width: none !important; margin-left: -20px !important; }
  /* Breadcrumb wraps into the absolutely-placed hero chips at <=375px - one ellipsized line instead. */
  .rke-prcrumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* And clear the crumb overlay: the bottom-anchored hero content grows past it on tall-content records. */
  .rke-prchips { margin-top: 48px !important; }
}