/* =====================================================================
   GORGEOUS — Site Header (overlay header)  •  STANDALONE FILE
   ---------------------------------------------------------------------
   The child's main header. Transparent and overlaid on the page.

     TOP OF PAGE:  full logo + full navbar; the CTA and light/dark toggle
                   are normal header controls, centred with the menu.
     ON SCROLL:    collapses to the coat SHIELD (left) and a solid
                   full-height button block (right):
                   [Partner With Us] [light/dark] [hamburger]
                   The hamburger opens the full-screen brand menu.

   Loaded directly by inc/Header/site-header.php (outside the Prepros bundle).
   Rides the parent's sticky-shrink (.is-shrunk) engine — no parent edits.
   The full-page menu the hamburger opens is the child's ONE existing
   overlay (src/css/components/_navigation.css, width-agnostic), used at
   every device size; it is not re-declared here. Promoted from "Lab A".
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Solid so the shield and the right block match and show no seam. */
  --hdr-block-bg: var(--color-primary, #5f249f);
  --hdr-block-ink: #ffffff;
  /* The button system's SOLID ( src/css/components/_buttons.css ): brand
     purple with white type, deep plum on hover, on a light top; white with
     plum ink, pink on hover, over a dark top and in dark mode ( below ).
     Solid in every state — it floats over the page. */
  --hdr-cta-bg: var(--color-primary, #5f249f);
  --hdr-cta-ink: #ffffff;
  --hdr-cta-bg-hover: #2c0b46;
  --hdr-cta-ink-hover: #ffffff;
  --hdr-coat: url("../images/grgs-coat--final.svg");
}
:root[data-theme="dark"] {
  --hdr-block-bg: #3a1d6b;
}
.site-header--overlay.is-shrunk {
  /* Scrolled: the CTA is a block beside the purple toggle blocks, in the
     brand pink ( deep ink ), deep plum on hover like every solid button. */
  --hdr-cta-bg: var(--color-accent, #ff45dc);
  --hdr-cta-ink: #160522;
  --hdr-cta-bg-hover: #2c0b46;
  --hdr-cta-ink-hover: #ffffff;
}
:root[data-theme="dark"],
.mobile-nav {
  --hdr-cta-bg: #ffffff;
  --hdr-cta-ink: #2c0b46;
  --hdr-cta-bg-hover: var(--color-accent, #ff45dc);
  --hdr-cta-ink-hover: #160522;
}

/* =====================================================================
   OVERLAID BASE — header transparent, floating on the page
   ===================================================================== */
.site-header--overlay,
.site-header--overlay .site-header__main {
  background: transparent;
  box-shadow: none;
}
.site-header--overlay .site-header__main {
  transition: background 0.35s ease, box-shadow 0.35s ease;
}

/* The main menu bg must NOT change between light and dark (the desktop nav
   otherwise gets a dark pill in dark mode). */
.site-header--overlay .primary-nav:not(.mobile-nav) {
  background-color: transparent !important;
  background-image: none !important;
}

/* White chrome at the top wherever the header floats over a DARK top section:
   the branded page-header every standard
   inner page opens with, a front-page hero, or a services page's hero
   ( .service-hero ). Pages with a light top (e.g.
   the 404's plain section) fall through to the default purple chrome. */
body.has-overlay-header:is(
  :has(#primary > .page-header),
  :has(#primary > .hero),
  :has(#primary > .service-hero)
) .site-header--overlay:not(.is-shrunk) {
  --nav-link-color: #ffffff;
  --nav-link-hover: var(--color-accent, #ff45dc);
  --header-logo-color: #ffffff;
  --toggle-icon-color: #ffffff;
  --toggle-icon-hover: var(--color-accent, #ff45dc);
  --quick-action-color: #ffffff;
  --hdr-cta-bg: #ffffff;
  --hdr-cta-ink: #2c0b46;
  --hdr-cta-bg-hover: var(--color-accent, #ff45dc);
  --hdr-cta-ink-hover: #160522;
}

/* The header is overlaid SITEWIDE: every page rises to the very top so the
   header floats over that page's own top section (page-header bg, hero bg),
   never over a blank band. (The parent otherwise offsets #content by the
   header height, which read as a white fixed header.) */
body.has-overlay-header #content.site-content {
  padding-top: 0 !important;
}

/* Because the top section now starts under the header, grow each top section
   by the header height at the TOP (padding-top AND min-height, since these
   blocks vertically centre their content). That puts the title/hero text back
   exactly where it sat before the offset was removed, so the breathing room
   between the bar and the content is restored. Values mirror each section's
   own rules. The Content Lab hero handles its own clearance (content-lab.css). */
body.has-overlay-header #primary > .page-header--branded {
  /* was clamp(2.75rem, 5.5vw, 5rem): titles sat too close under the bar */
  padding-top: calc(var(--header-h, 90px) + clamp(4rem, 7vw, 6.5rem));
  min-height: calc(var(--header-h, 90px) + clamp(14rem, 24vw, 22rem));
}
body.has-overlay-header #primary > .page-header:not(.page-header--branded) {
  /* was + 2rem: content sat too close under the bar */
  padding-top: calc(var(--header-h, 90px) + 3.5rem);
  min-height: calc(var(--header-h, 90px) + 400px);
}
/* Top sections that only carry the generic 80px .section padding (e.g. the
   404) start UNDER the 90px overlay bar — give them header-aware clearance. */
body.has-overlay-header #primary > .page-404 {
  padding-top: calc(var(--header-h, 90px) + 3.5rem);
}
/* Front-page hero (.hero.opt6: padding-block clamp(5rem,12vw,9rem),
   min-height min(72vh,720px), grid-centred). */
body.has-overlay-header #primary > .hero.opt6 {
  padding-top: calc(var(--header-h, 90px) + clamp(5rem, 12vw, 9rem));
  min-height: calc(var(--header-h, 90px) + min(72vh, 720px));
}
/* Desktop: hero + quicklinks fill the first screen exactly, so the
   quicklinks band rides the bottom edge. --quicklinks-h is the band's height,
   set here in CSS ( the band's floor, _home.css ) so hero and band agree from
   the first paint: measuring it in JS made the hero jump when the script ran,
   and a cache plugin's Delay JS held that until the first scroll. It sits
   above the band's tallest content ( 230–251px across desktop sizes ). The
   content centers in what's left, the same space under the header as above
   the band; a screen too short for it all lets the hero grow. */
@media (min-width: 981px) {
  :root {
    --quicklinks-h: clamp(15.75rem, 22svh, 16.5rem);
  }

  body.has-overlay-header #primary > .hero.opt6 {
    /* The admin bar ( logged in ) takes its height off the first screen too. */
    min-height: calc(100svh - var(--quicklinks-h) - var(--wp-admin--admin-bar--height, 0px));
    padding-top: calc(var(--header-h, 90px) + clamp(1.5rem, 4svh, 3rem));
    padding-bottom: clamp(1.5rem, 4svh, 3rem);
  }
}
/* Phones and tablets: the quicklinks stack below, so the hero is the first
   screen on its own, its content centered under the header. */
@media (max-width: 980px) {
  body.has-overlay-header #primary > .hero.opt6 {
    min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
    padding-top: calc(var(--header-h, 90px) + 2rem);
    padding-bottom: 3rem;
  }
  /* Room for the ADA pause control in the corner, clear of the buttons. */
  body.has-overlay-header #primary > .hero.opt6.gx-has-motion-toggle {
    padding-bottom: 5.5rem;
  }
}

/* Footer arriving → hide the header so its sticky effect doesn't collide with
   the footer's fixed/reveal effect. Toggled by site-header.js. `display` is
   used because the parent's sticky engine pins opacity/transform/visibility. */
/* Gated to the scrolled header: on a short page the footer is in view at
   load, and hiding then would leave the page (e.g. the 404) with no header.
   A fade + small rise instead of display:none, so the blocks slip away as
   the footer CTA arrives rather than blinking off; visibility flips after
   the fade (and instantly on the way back) so the hidden header is truly
   gone for keyboard/AT. The transition list must carry the base rule's
   background/box-shadow pair — this override replaces it. */
.site-header--overlay.is-shrunk {
  transition:
    background 0.35s ease, box-shadow 0.35s ease,
    opacity 280ms ease, transform 280ms ease,
    visibility 0s linear 0s;
}
body.overlay-header-at-footer .site-header--overlay.is-shrunk {
  opacity: 0;
  transform: translateY(-16px);
  visibility: hidden;
  pointer-events: none;
  transition:
    background 0.35s ease, box-shadow 0.35s ease,
    opacity 280ms ease, transform 280ms ease,
    visibility 0s linear 280ms;
}

@media (prefers-reduced-motion: reduce) {
  .site-header--overlay.is-shrunk,
  body.overlay-header-at-footer .site-header--overlay.is-shrunk {
    transition: none;
    transform: none;
  }
}

/* =====================================================================
   CTA BUTTON  (injected into .desktop-actions by the module)
   Sized to the fleet header-button standard (.desktop-actions .btn):
   48px min-height / 0.75rem 1rem / 0.875rem — same height as the 48px
   light/dark toggle. Never underlined, in any state.
   ===================================================================== */
.header-cta,
.header-cta:hover,
.header-cta:focus,
.header-cta:focus-visible {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-inline-start: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid transparent;
  border-radius: 0;
  background: var(--hdr-cta-bg);
  color: var(--hdr-cta-ink);
  font-family: var(--font-headings, sans-serif);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: none;
}
/* The fade runs on hover only. On the base state it also ran when the header
   shrank on scroll, so the 76px block faded from the top state's white to
   pink: a white flash. */
.header-cta:hover,
.header-cta:focus-visible {
  background: var(--hdr-cta-bg-hover);
  color: var(--hdr-cta-ink-hover);
  transition: background 0.2s ease, color 0.2s ease;
}

/* Narrow desktops (1201–1440px): the inline menu is centered on the whole
   bar, so it ran into the logo and the CTA. Here it sits in the middle
   column between them, with tighter links. */
@media (1201px <= width <= 1440px) {
  .site-header--overlay {
    --nav-link-padding-x: 0.7rem; /* parent seam */
  }

  /* Out-ranks the parent's (0,6,0) centering rule. */
  .site-header.site-header--default-wide.site-header--overlay .site-header__main > .container > .primary-nav:not(.mobile-nav) {
    grid-column: 2;
    justify-self: center;
    left: auto;
    position: static;
    transform: none;
  }

  .site-header--overlay .primary-nav:not(.mobile-nav) .nav-menu > li > a {
    font-size: 0.85rem;
  }
}

@media (1201px <= width <= 1300px) {
  .site-header--overlay {
    --nav-link-padding-x: 0.5rem;
  }

  .site-header--overlay .primary-nav:not(.mobile-nav) .nav-menu > li > a {
    font-size: 0.8rem;
  }
}

/* =====================================================================
   DESKTOP (>=1201px)
   ===================================================================== */
@media (width >= 1201px) {

  /* Order on the right, in every state: CTA, light/dark, hamburger. */
  .site-header--overlay .header-cta {
    order: -1;
  }

  /* Drop the phone/map quick actions from the header. */
  .site-header--overlay .desktop-actions .quick-action {
    display: none;
  }

  /* ---------------- SCROLLED (.is-shrunk): shield + button block ------ */
  .site-header--overlay.is-shrunk {
    --hdr-btn-h: var(--header-shrink-h, 76px);
  }

  /* Full-bleed row so the shield/hamburger hug the corners. The parent lays
     this container out with display:grid (and a column-gap); force flex. */
  .site-header--overlay.is-shrunk .site-header__main > .container {
    width: 100%;
    max-width: none;
    padding-inline: 0;
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 0 !important;
    column-gap: 0 !important;
  }

  /* The coat SHIELD, in a solid brand square, top-left. Hovering (or
     keyboard-focusing) the square rolls the block open to the right,
     revealing the full wordmark exactly as it sits before scroll: the
     wordmark is always in the DOM (the logo SVG with its own crest
     clipped off), parked just past the square's edge, and the block's
     animated width + overflow:hidden does the slide. */
  .site-header--overlay.is-shrunk .header-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    flex: 0 0 auto;
    width: var(--header-shrink-h, 76px);
    padding: 0;
    margin: 0;
    background: var(--hdr-block-bg);
    overflow: hidden;
    transition: width 380ms cubic-bezier(0.33, 1, 0.4, 1);
  }
  .site-header--overlay.is-shrunk .header-logo:hover,
  .site-header--overlay.is-shrunk .header-logo:focus-within {
    /* square (76) + slogan inset (24) + "deliciousness" (~172px) + an ~18px
       end pad — measured live (slogan ink ends at 272px); much wider reads
       as empty band trailing the slogan. */
    width: var(--hdr-logo-open-w, 290px);
  }
  .site-header--overlay.is-shrunk .header-logo a {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    flex: 0 0 auto;
  }
  .site-header--overlay.is-shrunk .header-logo img {
    display: none;
  }
  .site-header--overlay.is-shrunk .header-logo a::before {
    content: "";
    display: block;
    flex: 0 0 auto;
    height: 56%;
    aspect-ratio: 568 / 773;
    /* keep the coat exactly where the old centred layout put it:
       (76px − ~31.3px ink) / 2 */
    margin-left: 22px;
    background-color: var(--hdr-block-ink);
    -webkit-mask: var(--hdr-coat) center / contain no-repeat;
            mask: var(--hdr-coat) center / contain no-repeat;
  }
  .site-header--overlay.is-shrunk .header-logo .custom-logo--svg-inline {
    display: none;
  }
  /* The reveal: the "creative deliciousness" slogan lockup (same styling as
     the footer tagline — monotalic-wide, lowercase, two stacked lines) in the
     brand text gradient (white → violet → pink). Parked just past the square's
     76px edge so at rest the block's overflow hides it completely. */
  .site-header--overlay.is-shrunk .header-logo a::after {
    content: "creative\A deliciousness";
    white-space: pre;
    display: block;
    flex: 0 0 auto;
    margin-left: 24px;
    font-family: "monotalic-wide", var(--font-mono, sans-serif);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.05;
    text-transform: lowercase;
    background: linear-gradient(100deg, #fff 8%, var(--text-gradient-mid, #AD96DC) 55%, var(--text-gradient-end, #ff45dc));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  @media (prefers-reduced-motion: reduce) {
    .site-header--overlay.is-shrunk .header-logo {
      transition: none;
    }
  }

  /* Inline menu folds into the hamburger. */
  .site-header--overlay.is-shrunk .primary-nav:not(.mobile-nav) {
    display: none;
  }

  /* Right cluster pushed to the edge; the group (CTA + toggle) and the
     hamburger are DOM siblings, so they sit flush to read as one block. */
  .site-header--overlay.is-shrunk .site-header__group,
  .site-header--overlay.is-shrunk .desktop-actions {
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
  }
  .site-header--overlay.is-shrunk .site-header__group {
    margin-inline-start: auto;
  }

  /* Light/dark: solid block button. Heights are pinned to the header's own
     height var (the nested .desktop-actions won't pass a % through). */
  .site-header--overlay.is-shrunk .theme-toggle {
    /* Same 3.25rem box as the hamburger, icon centred. The parent pins the
       toggle to 38px via min/max-width (which also forced the old 13px pad
       hack to even out the icon gaps), so the box needs !important. With
       equal, centred boxes the CTA→sun and sun→hamburger gaps match on their
       own, and the solid hover bg shows two identical buttons. */
    flex: 0 0 3.25rem !important;
    width: 3.25rem !important;
    min-width: 3.25rem !important;
    max-width: 3.25rem !important;
    height: var(--hdr-btn-h) !important;
    min-height: 0;
    max-height: none !important;
    padding: 0 !important;
    justify-content: center;
    /* The parent's .theme-toggle base carries --transition-base, so this
       state change (48→full height, bg paint) was ANIMATING while the CTA and
       hamburger snap in. No extra effect: appear with the block like the rest. */
    transition: none !important;
    border: none;
    border-radius: 0;
    background: var(--hdr-block-bg) !important;
    color: var(--hdr-block-ink);
  }
  .site-header--overlay.is-shrunk .theme-toggle svg {
    fill: var(--hdr-block-ink);
    color: var(--hdr-block-ink);
  }
  .site-header--overlay.is-shrunk .theme-toggle:hover svg {
    fill: var(--color-accent, #ff45dc);
    color: var(--color-accent, #ff45dc);
  }

  /* CTA grows to the block height ( the bar's own, not the full-screen
     menu's "Partner With Us", which lives inside the header too ). */
  .site-header--overlay.is-shrunk .header-cta:not(.header-cta--menu) {
    height: var(--hdr-btn-h) !important;
    margin: 0;
    padding: 0 1.4rem;
  }

  /* Hamburger: revealed at desktop, same full-height block button. */
  .site-header--overlay.is-shrunk .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 3.25rem;
    height: var(--hdr-btn-h, 76px) !important;
    min-height: 0;
    max-height: none !important;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: var(--hdr-block-bg);
    color: var(--hdr-block-ink);
    position: relative;
    cursor: pointer;
    z-index: 1005;
  }
  .site-header--overlay.is-shrunk .menu-toggle svg {
    width: 26px;
    height: auto;
    fill: currentColor;
  }
  .site-header--overlay.is-shrunk .menu-toggle svg rect {
    fill: currentColor;
  }

  /* Hover on the block (scrolled ONLY): keep the solid brand bg — never
     transparent/white, these are overlaid over the page — and shift the icon
     to accent. At the top of the page the toggle has no hover bg, only a
     hover colour, like every other child site. */
  .site-header--overlay.is-shrunk .theme-toggle:hover,
  .site-header--overlay.is-shrunk .menu-toggle:hover {
    background: var(--hdr-block-bg) !important;
  }
  .site-header--overlay.is-shrunk .menu-toggle:hover {
    color: var(--color-accent, #ff45dc);
  }

  /* The full-page menu itself is the child's existing mobile overlay
     (src/css/components/_navigation.css), which is width-agnostic — the
     hamburger simply opens it at desktop too. Nothing about the menu is
     re-declared here. Only the bits the parent gates to <=1200px follow:
     the open-state X (its morph lives in the parent's mobile block). */
  .menu-open .site-header--overlay .menu-toggle {
    color: var(--color-accent, #ff45dc);
    background: transparent;
  }
  /* Open state: the hamburger becomes a CLOSE (X), mirroring the parent's
     mobile behaviour (which is gated to <=1200px). */
  .site-header--overlay .menu-toggle[aria-expanded="true"] {
    position: relative;
  }
  .site-header--overlay .menu-toggle[aria-expanded="true"] svg {
    display: none;
  }
  .site-header--overlay .menu-toggle[aria-expanded="true"]::before,
  .site-header--overlay .menu-toggle[aria-expanded="true"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 3px;
    background: var(--color-accent, #ff45dc);
    border-radius: 2px;
    transition: background-color 0.2s ease;
  }
  .site-header--overlay .menu-toggle[aria-expanded="true"]::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .site-header--overlay .menu-toggle[aria-expanded="true"]::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .site-header--overlay .menu-toggle[aria-expanded="true"]:hover::before,
  .site-header--overlay .menu-toggle[aria-expanded="true"]:hover::after,
  .site-header--overlay .menu-toggle[aria-expanded="true"]:focus-visible::before,
  .site-header--overlay .menu-toggle[aria-expanded="true"]:focus-visible::after {
    background: #ffffff;
  }
}

/* =====================================================================
   MOBILE / TABLET (<=1200px) — SCROLLED: the same shield + button block as
   desktop. Right block reads [call] [light/dark] [hamburger] (the mobile
   .quick-actions, reordered); "Partner With Us" moves into the menu.
   The top-of-page header is unchanged.
   ===================================================================== */
@media (width <= 1200px) {
  .site-header--overlay.is-shrunk {
    --hdr-btn-h: 60px;
    --quick-action-color: var(--hdr-block-ink);
    --toggle-icon-color: var(--hdr-block-ink);
  }

  .site-header--overlay.is-shrunk .site-header__main > .container {
    display: flex !important;
    align-items: stretch;
    gap: 0 !important;
    width: 100%;
    max-width: none;
    height: var(--hdr-btn-h);
    min-height: var(--hdr-btn-h);
    padding: 0 !important;
  }

  /* Shield square, top-left (no slogan reveal: there is no hover on touch). */
  .site-header--overlay.is-shrunk .header-logo {
    order: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--hdr-btn-h);
    width: var(--hdr-btn-h);
    height: var(--hdr-btn-h);
    margin: 0;
    padding: 0;
    background: var(--hdr-block-bg);
  }
  .site-header--overlay.is-shrunk .header-logo a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  .site-header--overlay.is-shrunk .header-logo a > * {
    display: none !important;
  }
  .site-header--overlay.is-shrunk .header-logo a::before {
    content: "";
    display: block;
    height: 56%;
    aspect-ratio: 568 / 773;
    background-color: var(--hdr-block-ink);
    -webkit-mask: var(--hdr-coat) center / contain no-repeat;
            mask: var(--hdr-coat) center / contain no-repeat;
  }

  /* Right block: call + light/dark, then the hamburger. The CTA lives in
     the menu at these widths (there is no room for it in the row). */
  .site-header--overlay.is-shrunk .quick-actions {
    order: 2;
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0 0 0 auto;
    background: var(--hdr-block-bg);
  }
  .site-header--overlay.is-shrunk .quick-actions .quick-action--phone {
    order: 0;
  }
  .site-header--overlay.is-shrunk .quick-actions .theme-toggle {
    order: 1;
  }
  .site-header--overlay.is-shrunk .quick-actions :is(.quick-action, .theme-toggle),
  .site-header--overlay.is-shrunk .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px !important;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: var(--hdr-btn-h) !important;
    max-height: none !important;
    margin: 0;
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    background: var(--hdr-block-bg) !important;
    color: var(--hdr-block-ink);
    transition: none !important;
  }
  .site-header--overlay.is-shrunk .menu-toggle {
    order: 3;
    flex-basis: 54px !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
  }
  .site-header--overlay.is-shrunk :is(.quick-action, .theme-toggle, .menu-toggle):hover {
    color: var(--color-accent, #ff45dc);
  }
}

/* "Partner With Us" inside the full-screen menu (phones + tablets only; the
   desktop bar already carries it). Same pink CTA, full width. */
.mobile-actions .header-cta--menu {
  width: 100%;
  min-height: 52px;
  margin: 0;
}
@media (width >= 1201px) {
  .mobile-actions:has(> .header-cta--menu:only-child) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header--overlay .site-header__main,
  .header-cta {
    transition: none;
  }
}