/* ==========================================================
   HEADER — logo, gradient rail, hanging nav.

   Geometry: the logo SVG's viewBox is 282.55 wide x 62 tall.
   --u is one SVG unit in screen pixels. The rail sits 37.15u
   below the top of the logo and is 6.4u thick, exactly where
   the bar was in the original logo. Everything is derived from
   the logo width, so changing --logo-w-* in tokens.css scales
   the whole header in proportion.
   ========================================================== */

.site-header {
  --logo-w: var(--logo-w-mobile);
  --u: calc(var(--logo-w) / 282.55);
  --pad-y: clamp(1.25rem, 3vw, 2.25rem);
  --rail-top: calc(var(--pad-y) + var(--u) * 37.15);
  --rail-h: calc(var(--u) * 6.4);
  --under-rail: calc(var(--rail-top) + var(--rail-h));
  --tab-h: max(3px, var(--u) * 2.4);         /* little tab that drops from the rail */

  position: relative;
  z-index: 10;
  overflow-x: clip;                        /* rail runs to the screen edge, no sideways scroll */
}

@media (min-width: 64em) {
  .site-header { --logo-w: var(--logo-w-desktop); }
}

.site-header__inner {
  position: relative;
  padding: var(--pad-y) var(--gutter);    /* full width: logo pinned to screen left */
}

/* ---------- Logo ---------- */
.brand {
  display: block;
  width: var(--logo-w);
  color: var(--text);
}
.brand .logo { width: 100%; height: auto; }

/* ---------- Rail ---------- */
.rail {
  position: absolute;
  top: var(--rail-top);
  left: var(--gutter);                     /* starts at the logo's left edge */
  right: calc(50% - 50vw);                 /* ends at the right edge of the screen */
  height: var(--rail-h);
  background: linear-gradient(90deg, var(--rail-start), var(--rail-end));
  z-index: 2;
}

/* ---------- Nav (shared) ---------- */
.site-nav {
  position: absolute;
  top: var(--under-rail);
  z-index: 1;
}

.nav-list { list-style: none; }

.nav-list a {
  position: relative;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;               /* matches the SITE SERVICES line of the logo */
}

/* ---------- Desktop: links hang under the rail ---------- */
@media (min-width: 64em) {
  .site-nav {
    /* right edge of the links never goes past --header-max from the left */
    right: max(var(--gutter), 100% - var(--header-max));
    bottom: var(--pad-y);                  /* same bottom as the logo */
  }
  
  .nav-toggle { display: none; }

  .nav-list {
    display: flex;
    height: 100%;
    gap: clamp(1.25rem, var(--u) * 20, 2.75rem);
  }

  .nav-list li { height: 100%; }

  .nav-list a {
    display: flex;
    align-items: center;
    height: 100%;
    padding-top: calc(var(--u) * 5.4);     /* lines text up with SITE SERVICES */
    font-size: max(0.8125rem, var(--u) * 12);
    line-height: 1;
  }

  /* Tab that drops from the rail on hover / current page */
  .nav-list a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    background: var(--accent);
    transition: height 0.18s ease-out;
  }
  .nav-list a:hover::before,
  .nav-list a:focus-visible::before,
  .nav-list a[aria-current="page"]::before {
    height: var(--tab-h);
  }
}

/* ---------- Mobile / tablet: one Menu tab, panel drops from it ---------- */
@media (max-width: 63.99em) {
  .site-nav {
    right: 0;                              /* flush to the screen edge */
    bottom: 0;                             /* tab runs to the header bottom = bigger tap target */
  }

  .nav-toggle {
    position: relative;
    display: flex;
    align-items: flex-start;
    height: 100%;
    min-width: 5.5rem;
    padding: calc(var(--u) * 5.4) var(--gutter) 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: max(0.8125rem, var(--u) * 12);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
  }
  .nav-toggle[hidden] { display: none; }

  /* small tab under the rail, always visible, says "this hangs" */
  .nav-toggle::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--tab-h);
    background: var(--accent);
    transition: height 0.2s ease-out;
  }
  .nav-toggle[aria-expanded="true"] { background: var(--surface); }
  .nav-toggle[aria-expanded="true"]::before { height: calc(var(--tab-h) * 1.6); }

  /* Panel (only when JS is running; without JS see fallback below) */
  .js .nav-list {
    position: absolute;
    top: 100%;
    right: 0;
    width: min(18rem, 100vw);
    background: var(--surface);
    box-shadow: 0 1.25rem 2rem rgba(0, 0, 0, 0.3);
    clip-path: inset(0 0 100% 0);           /* folded up under the tab */
    visibility: hidden;
    transition: clip-path 0.26s ease-out, visibility 0s linear 0.26s;
  }
  .js .site-nav.is-open .nav-list {
    clip-path: inset(0 0 -3rem 0);          /* negative bottom leaves room for the shadow */
    visibility: visible;
    transition: clip-path 0.26s ease-out;
  }

  .nav-list a {
    display: block;
    padding: 0.95rem var(--gutter);
    border-top: 1px solid var(--line);
    font-size: 0.9375rem;
  }
  .nav-list a::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    background: var(--accent);
    transition: width 0.18s ease-out;
  }
  .nav-list a:hover::before,
  .nav-list a:focus-visible::before,
  .nav-list a[aria-current="page"]::before { width: 0.3rem; }
  .nav-list a:focus-visible { outline-offset: -3px; }

  /* No-JS fallback: plain list under the header */
  html:not(.js) .site-nav { position: static; margin-top: 1rem; }
  html:not(.js) .nav-list { display: flex; flex-wrap: wrap; }
  html:not(.js) .nav-list a { border: 0; padding: 0.5rem 1.25rem 0.5rem 0; }
}

/* ---------- First-visit animation: rail grows, links drop ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rail-anim .rail {
    animation: rail-grow 0.9s cubic-bezier(0.6, 0, 0.2, 1) 0.25s both;
  }

  /* hide anything that pokes above the rail while it drops */
  .rail-anim .site-nav { clip-path: inset(0 -100vw -100vh -100vw); }

  .rail-anim .nav-toggle,
  .rail-anim .nav-list li {
    animation: drop 0.42s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(1s + var(--i, 0) * 0.07s);
  }
}

@keyframes rail-grow {
  from { clip-path: inset(0 calc(100% - var(--logo-w)) 0 0); }   /* same length as the logo */
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes drop {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}