/* ---------------------------------------------------------------------------
 * header.css — Crush chrome. The header is transparent and overlays the hero,
 * then gains a solid dark bar once the page scrolls (`.scrolled` from nav.js).
 * Structure comes from the locked starter header; only styling is from Figma.
 * ------------------------------------------------------------------------- */
body.admin-bar {
  --wp-admin-bar-offset: 32px;
}

body.admin-bar .site-header {
  top: var(--wp-admin-bar-offset, 32px);
}

/* Below 783px WordPress makes the admin bar 46px tall AND position:absolute, so
   it scrolls away with the page. Reserving 32px for it left the header 14px
   under the bar at the top and floating over a 32px empty band once scrolled
   (client round 17, logged-in view). Match the real height, then drop the
   offset as soon as the bar is gone. */
@media screen and (max-width: 782px) {
  body.admin-bar {
    --wp-admin-bar-offset: 46px;
  }

  body.admin-bar .site-header.scrolled {
    top: 0;
  }
}

body.nav-open,
body.nav-open-fixed {
  overflow: hidden;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* No backdrop-filter on .site-header (or any ancestor of the mobile drawer):
   it would make the header the containing block for the fixed drawer
   (.site-header__nav) and break its viewport positioning. Legibility over
   photos is handled by a soft pill behind the nav list alone (see .site-nav). */
.site-header.scrolled {
  background: rgba(var(--black-rgb, 0, 0, 0), 0.85);
  box-shadow: 0 12px 30px rgba(var(--black-rgb, 0, 0, 0), 0.25);
}

.site-header__inner {
  display: grid;
  grid-template-columns: minmax(0, max-content) 1fr;
  grid-template-areas:
    "logo utility"
    "logo nav";
  align-items: center;
  column-gap: clamp(24px, 3vw, 40px);
  row-gap: 12px;
  /* Figma floats the nav 83px below the top of the hero. */
  padding-block: 83px 24px;
  transition: padding 0.3s ease;
}

/* Once the page scrolls the bar becomes solid, so it compresses to a normal height. */
.site-header.scrolled .site-header__inner {
  padding-block: 20px;
}

.site-header__top {
  grid-area: utility;
  display: flex;
  justify-content: flex-end;
}

.site-header__utility-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header__utility-menu a {
  color: var(--white, #ffffff);
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 15px;
}

.site-header__middle {
  grid-area: logo;
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  color: var(--white, #ffffff);
}

.site-header__logo img {
  width: min(100%, var(--header-logo-width, 417px)); /* 417px */
  height: auto;
}

.site-header__logo-text {
  font-family: var(--display, system-ui, sans-serif);
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 700;
}

.site-header__nav {
  grid-area: nav;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 19px;
  width: 100%;
}

.site-nav,
.site-nav .sub-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Figma spaces the labels ~44px apart; the client asked for ~5px more air
     across the range (round 17). */
  gap: clamp(29px, calc(2.3vw + 5px), 49px);
}

/* No blur behind the nav links either (client round 3): both the full-header
   blur and a scoped nav-pill veil were tried, and over the bright aerial hero
   any backdrop blur flattens into a muddy grey chip with a visible boundary.
   Legibility relies on the white 900-weight labels; the scrolled state brings
   the solid dark bar. */

.site-nav li {
  position: relative;
}

.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.333;
  color: var(--white, #ffffff);
  transition: transform 0.2s ease;
}

/* Every nav item carries an arrow, hidden until the item is active or hovered.
   Arrow is brand blue, label stays white (client round 3 — supersedes the
   round-2 white arrow). Positioned out of flow so revealing it never shifts
   the label. */
.site-nav > li > a::before {
  content: "";
  position: absolute;
  left: -19px;
  top: 50%;
  width: 13px;
  height: 10px;
  transform: translateY(-50%);
  background-color: var(--brand, #008AF7);
  -webkit-mask-image: url("../img/icons/icon-arrow-right.svg");
  mask-image: url("../img/icons/icon-arrow-right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.site-nav > .current-menu-item > a::before,
.site-nav > .current-menu-ancestor > a::before,
.site-nav > li > a:hover::before,
.site-nav > li > a:focus-visible::before {
  opacity: 1;
}

.site-nav > .menu-item-has-children > a::after {
  content: "";
  margin-left: 8px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
}

/* Active and hover states keep the white label — the current page is marked by
   the white arrow alone, and hover feedback is a small lift. */
.site-nav > li > a:hover,
.site-nav > li > a:focus-visible {
  transform: translateY(-2px);
}

/* Client round 16: the drop-down keeps the nav's own 18px/900 white labels and
   blue arrow, on the same panel treatment the header takes once it scrolls
   (`.site-header.scrolled`) — transparent over a bright hero read as unfinished. */
.site-nav .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  min-width: 240px;
  display: grid;
  gap: 10px;
  /* 32px of left inset so the -19px arrow still lands inside the panel. */
  padding: 18px 24px 18px 32px;
  background: rgba(var(--black-rgb, 0, 0, 0), 0.85);
  border-radius: var(--radius, 3px);
  box-shadow: 0 12px 30px rgba(var(--black-rgb, 0, 0, 0), 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

/* Without a panel the 14px between the parent label and the first child is dead
   space that would drop :hover as the pointer travels down. This bridges it. */
.site-nav .sub-menu::before {
  content: "";
  position: absolute;
  inset: -14px 0 100% 0;
}

.site-nav li:hover > .sub-menu,
.site-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.site-nav .sub-menu a {
  padding: 0;
  color: var(--white, #ffffff);
}

/* Same blue arrow the top-level items use, on the same 19px offset. */
.site-nav .sub-menu a::before {
  content: "";
  position: absolute;
  left: -19px;
  top: 50%;
  width: 13px;
  height: 10px;
  transform: translateY(-50%);
  background-color: var(--brand, #008AF7);
  -webkit-mask-image: url("../img/icons/icon-arrow-right.svg");
  mask-image: url("../img/icons/icon-arrow-right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.site-nav .sub-menu .current-menu-item > a::before,
.site-nav .sub-menu a:hover::before,
.site-nav .sub-menu a:focus-visible::before {
  opacity: 1;
}

.site-nav .sub-menu a:hover,
.site-nav .sub-menu a:focus-visible {
  transform: translateY(-2px);
}

/* Quote CTA + social icons, right of the nav. */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 19px;
}

.site-header__cta {
  position: relative;
  padding: 17px 25px;
  white-space: nowrap;
}

/* The Figma component ships the arrow hidden in the header (it is visible in the
   footer), so it is revealed on hover out of flow — no label shift. */
.site-header__cta .cnm-icon {
  position: absolute;
  left: 8px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.site-header__cta:hover .cnm-icon,
.site-header__cta:focus-visible .cnm-icon {
  opacity: 1;
  /* This arrow only exists while hovered, so the system-wide shrink-on-hover
     from base.css would make it appear pre-shrunk — neutralize it here. */
  transform: none;
}

.site-header__social {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header__social a {
  display: inline-flex;
  color: var(--white, #ffffff);
}

.site-header__social a:hover,
.site-header__social a:focus-visible {
  color: var(--brand, #008AF7);
}

.site-header__social .cnm-icon {
  width: 22px;
  height: 22px;
}

/* Bare hamburger — no ring around it (client round 4). The 48px box stays as
   the touch target. */
.site-header__toggle {
  display: none;
  width: 48px;
  height: 48px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white, #ffffff);
  cursor: pointer;
}

.site-header__toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* The three 2px bars sit on 10px centers (2px bar + 4px block margins), so the
   outer bars must travel the full 10px to cross into an X — anything less reads
   as a ">" chevron. */
.site-header__toggle.is-active span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}

.site-header__toggle.is-active span:nth-child(2) {
  opacity: 0;
}

.site-header__toggle.is-active span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

@media (max-width: 1399px) {
  .site-header__logo img {
    width: min(100%, 304px);
  }

  .site-nav {
    gap: clamp(16px, 1.8vw, 28px);
  }
}

@media (max-width: 991px) {
  .site-header__inner {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "utility utility"
      "logo logo"
      "nav nav";
    padding-block: 16px;
  }

  .site-header.scrolled .site-header__inner {
    padding-block: 16px;
  }

  .site-header__top {
    justify-content: flex-start;
  }

  .site-header__middle {
    width: 100%;
    justify-content: space-between;
  }

  .site-header__logo img {
    width: min(60vw, 224px);
  }

  .site-header__toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 110; /* above the drawer so the X stays clickable */
  }

  /* Side drawer from the right — default mobile menu pattern */
  .site-header__nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 360px;
    height: 100vh;
    background: var(--ink, #212529);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 32px;
    padding: 96px 30px 30px;
    transition: right 0.35s ease;
    overflow-y: auto;
    z-index: 105;
  }

  .site-header__nav.is-open {
    right: 0;
  }

  body.nav-open {
    overflow: hidden;
  }

  .site-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .site-nav > li {
    width: 100%;
    border-bottom: 1px solid rgba(var(--white-rgb, 255, 255, 255), 0.12);
  }

  .site-nav > li > a {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    font-size: 18px;
    color: var(--white, #ffffff);
  }

  .site-nav > li > a::before {
    display: none;
  }

  /* In the drawer the label color never changes, so the current page keeps its
     arrow, placed in the row with an indent instead of out of flow. */
  .site-nav > .current-menu-item > a,
  .site-nav > .current-menu-ancestor > a {
    padding-left: 21px;
  }

  .site-nav > .current-menu-item > a::before,
  .site-nav > .current-menu-ancestor > a::before {
    display: block;
    left: 0;
  }

  /* No hover on touch: the CTA arrow rides in the flex row, always visible. */
  .site-header__cta .cnm-icon {
    position: static;
    opacity: 1;
  }

  .site-header__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
  }

  .site-header__cta {
    width: 100%;
  }

  /* Sub-menu accordion (inline within drawer) — overrides desktop dropdown styles.
     Selectors carry 3 classes to beat the desktop sub-menu specificity. */
  .site-header__nav--mobile-accordion .site-nav > .menu-item-has-children > .sub-menu {
    position: static;
    list-style: none;
    margin: 0;
    padding: 0 0 12px 16px;
    min-width: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: none;
    display: none;
  }

  .site-header__nav--mobile-accordion .site-nav > .menu-item-has-children > .sub-menu::before {
    display: none;
  }

  /* Only the toggled state opens a sub-menu. The current-page selectors used to
     be here too, which meant the drawer opened already expanded on Services and
     on the pages under it (client round 18). */
  .site-header__nav--mobile-accordion .site-nav > .menu-item-has-children.is-open > .sub-menu {
    display: block;
  }

  .site-header__nav--mobile-accordion .site-nav > .menu-item-has-children > .sub-menu li {
    border-bottom: 0;
  }

  .site-header__nav--mobile-accordion .site-nav > .menu-item-has-children > .sub-menu a {
    display: block;
    padding: 10px 0;
    font-size: 15px;
    font-weight: 400;
    color: var(--white, #ffffff);
    text-decoration: none;
    background: transparent;
    opacity: 0.85;
  }

  .site-header__nav--mobile-accordion .site-nav > .menu-item-has-children > .sub-menu a:hover,
  .site-header__nav--mobile-accordion .site-nav > .menu-item-has-children > .sub-menu a:focus-visible {
    opacity: 1;
    background: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav a {
    transition: none;
  }

  .site-nav > li > a:hover,
  .site-nav > li > a:focus-visible {
    transform: none;
  }
}