/* ==========================================================================
   Site header and primary navigation
   --------------------------------------------------------------------------
   Markup: components/site-header.php (the bar) and nav.php (the menu).

   Loaded after brand.css, so every colour, size, space, radius, shadow and
   duration below is a brand token. It previously carried its own palette
   (--nav-ink, --nav-accent and four more) that shadowed the brand ramp, set
   Vollkorn in five places, and used 11 hardcoded hex values, four off-scale
   font sizes and three radii of its own.

   Class names follow the brand pattern: .site-header__* for the bar and
   .site-nav__* for the menu. Until the Webflow stylesheets were retired the
   markup still carried Webflow's names and this sheet had to neutralise what
   those sheets did to them; none of that is needed now.
   ========================================================================== */

:root {
  /* Structural values specific to the header. All on the 8pt grid. */
  --nav-height: 4.5rem;      /* 72px */
  --nav-logo-size: 8.5rem;   /* 136px, larger than the bar on purpose */
  --nav-logo-top: var(--space-2);
  /* Once the page scrolls the mark condenses to fit inside the bar, so the
     emblem stops covering the content it is scrolling over. */
  --nav-logo-condensed: 4rem;    /* 64px, the smallest the wordmark stays legible at */
  /* The gutter reserves room for the widest state of the logo and is a fixed
     value rather than a reference to --nav-logo-size, so condensing the mark
     cannot drag the two link groups sideways on every scroll. */
  --nav-logo-gutter: 8.5rem;
  /* The gap between neighbouring items, and between the innermost item and the
     reserved logo width. The same value everywhere is what makes the bar read
     as one evenly spaced row rather than two pinned ends and a centred middle. */
  --nav-item-gap: var(--space-4);
}

/* --------------------------------------------------------------------------
   Header shell
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background-color: var(--surface-white);
  border-bottom: var(--border-hairline) solid var(--color-border);
  overflow: visible; /* the logo deliberately breaks out of the bar */
  transition: box-shadow var(--duration) var(--ease);
}

/* The bar keeps its height when condensed. Shrinking that too would shorten an
   element still in flow, so everything below it would slide up under the
   pointer mid-scroll. Only the mark moves. */
.site-header.is-scrolled {
  box-shadow: var(--shadow-md);
  --nav-logo-size: var(--nav-logo-condensed);
  --nav-logo-top: calc((var(--nav-height) - var(--nav-logo-condensed)) / 2);
}

/* Constrained row, sharing an edge with --container-xl like the page content
   below it. The outer links sit hard against its inner edges. One element does
   the constraining and the laying out: the export had three nested wrappers
   here, two of them adding padding the bar never asked for. */
.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: var(--container-xl);
  min-height: var(--nav-height);
  margin-inline: auto;
  padding: 0 var(--gutter);
}

/* --------------------------------------------------------------------------
   Centred logo
   Deliberately oversized: it sits in the bar and spills below it, so the mark
   reads as an emblem flowing out of the header rather than an icon inside it.
   -------------------------------------------------------------------------- */

.site-header__brand {
  position: absolute;
  left: 50%;
  /* Anchored near the top of the bar so the mark is never clipped, then
     allowed to run down past it. Condensing moves this to the value that
     centres the smaller mark in the bar. */
  top: var(--nav-logo-top);
  transition: top var(--duration) var(--ease);
  transform: translateX(-50%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* Sized by the mark inside it. The export pinned this to a fixed 100 by 100
     box below 991px, which held the mobile bar at 101px tall whatever size the
     mark was. */
  width: auto;
  height: auto;
  padding: 0;
  z-index: var(--z-base);
}

/* The header sits above the hero's own scrim (z-index 1000 against the hero's
   0-3), so the part of the mark that spills below the bar lands on the raw
   photo rather than the darkened version the hero title gets. The mark itself
   has no single colour that reads against every photo (its "OUT" wordmark is
   solid black with no backing, unlike "IN" on its own dark square), so rather
   than recolouring it, it gets a plate in the header's own white behind it.

   Positioned and sized off the same custom properties that place the mark
   itself, rather than covering its full box: "top" lands exactly on the
   header's own bottom edge, so the plate only exists below that line, over
   the overhang, and collapses to nothing on its own wherever there is no
   overhang (condensed on scroll, or the mobile size that never spills past
   the bar) without needing separate rules for those states.

   z-index: -1 keeps it behind the mark rather than in front of it: the img
   is an ordinary in-flow element, which paints ahead of a positioned
   sibling at the default stack level, so without this the plate covered
   the mark instead of backing it. */
.site-header__brand::before {
  content: "";
  position: absolute;
  top: calc(var(--nav-height) - var(--nav-logo-top));
  right: calc(-1 * var(--space-2));
  /* 3px below the mark, so the wordmark's descenders are not sitting on the
     plate's edge. An optical value, not a spacing step. */
  bottom: -3px;
  left: calc(-1 * var(--space-2));
  z-index: -1;
  background-color: var(--surface-white);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
}

/* Belt and suspenders alongside the geometry above: an explicit cutoff the
   moment the bar condenses, rather than trusting sub-pixel rounding to keep
   the collapsed box at exactly zero. */
.site-header:not(.is-scrolled) .site-header__brand::before {
  opacity: 1;
}

.site-header__logo {
  display: block;
  height: var(--nav-logo-size);
  width: auto;
  margin: 0;
  transition: height var(--duration) var(--ease);
}

/* --------------------------------------------------------------------------
   Menu rows
   Two link groups sit either side of a reserved gutter for the logo, so
   nothing can collide with it at any width.
   -------------------------------------------------------------------------- */

.site-nav {
  width: 100%;
  padding: 0;
}

.site-nav__menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* The logo's reserved width plus one item gap on each side of it, so the
     distance from the last link to the mark is the same as between links. */
  gap: calc(var(--nav-logo-gutter) + var(--nav-item-gap) * 2);
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
}

.site-nav__group {
  position: relative;
  display: flex;
  align-items: center;
  /* The left half packs towards the logo and the right half away from it, so
     the two halves mirror and every item is one gap from its neighbour. The
     previous arrangement pinned About to the container edge and centred the
     dropdown trigger in the space that was left, so the gap on one side of
     the trigger was never the gap on the other. */
  justify-content: flex-end;
  gap: var(--nav-item-gap);
  flex: 1 1 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__group > .site-nav__item {
  display: flex;
  align-items: center;
}

.site-nav__group--end { justify-content: flex-start; }

/* Home is a mobile-only convenience: on desktop the logo is the home link. */
/* Written with the group in the selector so it outranks the .site-nav__group >
   .site-nav__item rule above. As a bare class it lost, and Home showed on
   desktop. */
.site-nav__group > .site-nav__item--mobile { display: none; }

/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */

.site-nav__link,
.site-nav__toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* Padding alone came to 40px, under the minimum target. */
  min-height: 44px;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-button);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  /* Marcellus SC ships one weight. 500 was being synthesised. */
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration) var(--ease),
              background-color var(--duration) var(--ease);
}

/* Underline drawn from the centre outwards. Decorative, so it may use the
   inaccessible orange: it never carries text and never signals state alone. */
.site-nav__link::after,
.site-nav__toggle::before {
  content: "";
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-1);
  height: var(--border-thick);
  border-radius: var(--border-thick);
  background-color: var(--color-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--duration) var(--ease);
}

.site-nav__link:hover,
.site-nav__toggle:hover,
.site-nav__item--has-panel:hover > .site-nav__toggle {
  color: var(--orange-700);
  background-color: var(--surface-cream);
}

.site-nav__link:hover::after,
.site-nav__item--has-panel:hover > .site-nav__toggle::before,
.site-nav__toggle:hover::before { transform: scaleX(1); }

/* Current page. Marked by colour and by the underline together, never by
   colour alone. */
.site-nav__link[aria-current="page"],
.site-nav__toggle[aria-current="page"] { color: var(--color-accent-strong); }

.site-nav__link[aria-current="page"]::after,
.site-nav__toggle[aria-current="page"]::before { transform: scaleX(1); }

.site-nav__link:focus-visible,
.site-nav__toggle:focus-visible,
.site-nav__panel-link:focus-visible,
.site-header__brand:focus-visible,
.site-header__burger:focus-visible {
  outline: var(--border-thick) solid var(--color-focus);
  outline-offset: 3px;
}

.site-header__brand:focus-visible {
  outline-offset: var(--space-2);
  border-radius: var(--radius-card);
}

/* --------------------------------------------------------------------------
   Dropdown trigger chevron
   A drawn caret rather than a ▼ glyph, so it inherits currentColor and sits
   on the text baseline.
   -------------------------------------------------------------------------- */

.site-nav__toggle { padding-right: var(--space-7); }

.site-nav__toggle::after {
  content: "";
  position: absolute;
  right: var(--space-3);
  top: 50%;
  width: var(--space-2);
  height: var(--space-2);
  margin-top: calc(var(--space-2) * -0.75);
  border-right: var(--border-thick) solid currentColor;
  border-bottom: var(--border-thick) solid currentColor;
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform var(--duration) var(--ease);
  opacity: .75;
}

.site-nav__item--has-panel:hover > .site-nav__toggle::after {
  transform: rotate(-135deg);
  margin-top: calc(var(--space-1) * -0.5);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Dropdown panel
   Panels stay softer than buttons and cards, per the shape tokens.
   -------------------------------------------------------------------------- */

.site-nav__item--has-panel { position: relative; }

/* Invisible bridge so the pointer can travel from trigger to panel. */
.site-nav__item--has-panel::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: var(--space-3);
}

.site-nav__panel {
  position: absolute;
  top: calc(100% + var(--space-3));
  left: 50%;
  min-width: 16.5rem;  /* 264px, the width three link labels need */
  margin: 0;
  padding: var(--space-2);
  /* The panel is the grid: title and links are its direct children. */
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  background-color: var(--surface-white);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(calc(var(--space-2) * -0.75));
  transition: opacity var(--duration) var(--ease),
              transform var(--duration) var(--ease),
              visibility var(--duration) var(--ease);
  z-index: var(--z-dropdown);
}

.site-nav__item--has-panel:hover .site-nav__panel,
.site-nav__item--has-panel:focus-within .site-nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Pointer notch. */
.site-nav__panel::before {
  content: "";
  position: absolute;
  top: calc(var(--space-3) * -0.5);
  left: 50%;
  width: var(--space-3);
  height: var(--space-3);
  margin-left: calc(var(--space-3) * -0.5);
  background-color: var(--surface-white);
  border-left: var(--border-hairline) solid var(--color-border);
  border-top: var(--border-hairline) solid var(--color-border);
  transform: rotate(45deg);
}


/* Reads as an eyebrow, and takes the eyebrow's type treatment. A span rather
   than a heading, so the block behaviour has to be spelled out. */
.site-nav__panel-title {
  display: block;
  margin: var(--space-2) var(--space-3) var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-hairline) solid var(--color-border);
  color: var(--color-text-muted);
  font-family: var(--font-heading);
  font-size: var(--text-2xs);
  /* 600 was not a loaded weight either. */
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.site-nav__panel-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-3);
  border-radius: var(--radius-button);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}

.site-nav__panel-link:hover,
.site-nav__panel-link:focus-visible {
  background-color: var(--surface-cream);
  color: var(--orange-700);
}


.site-nav__panel-link[aria-current="page"] { color: var(--color-accent-strong); }

/* --------------------------------------------------------------------------
   Contact button
   The .btn component from brand.css carries the shape, type and colour. Only
   its position in the bar belongs here.
   -------------------------------------------------------------------------- */

/* The trigger before it ends in a chevron set 12px inside its own edge, so the
   button takes one extra gap to sit the same visual distance away. */
.site-nav__group .btn { margin-left: var(--nav-item-gap); }

/* --------------------------------------------------------------------------
   Burger
   Hidden above the collapse breakpoint; sized as a target below it.
   -------------------------------------------------------------------------- */

.site-header__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-button);
  background-color: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--duration) var(--ease);
}

.site-header__burger-icon {
  width: var(--space-5);
  height: var(--space-5);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
}

/* --------------------------------------------------------------------------
   1240px: the widest container stops growing
   The mark and the gaps between items tighten so the row keeps its rhythm in
   the narrower bar.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 1240px) {
  :root {
    --nav-logo-size: 7.5rem;    /* 120px */
    --nav-logo-gutter: 7.5rem;
    --nav-item-gap: var(--space-2);
  }

  .site-nav__link,
  .site-nav__toggle { padding-inline: var(--space-3); }

  .site-nav__toggle { padding-right: var(--space-6); }

  .site-nav__link::after,
  .site-nav__toggle::before {
    left: var(--space-3);
    right: var(--space-3);
  }
}

/* --------------------------------------------------------------------------
   991px: the menu collapses to a burger and the panel stacks
   -------------------------------------------------------------------------- */

@media screen and (max-width: 991px) {
  :root {
    --nav-logo-size: 3.25rem;      /* 52px, no overflow: the mark sits in the bar */
    /* Smaller than the desktop condensed size, which would otherwise make the
       mark grow on scroll rather than shrink. */
    --nav-logo-condensed: 2.5rem;  /* 40px */
  }

  .site-header__inner { justify-content: space-between; }

  .site-header__brand {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
  }

  .site-header__burger { display: flex; }

  .site-header__burger:hover,
  .site-header__burger[aria-expanded="true"] { background-color: var(--surface-cream); }

  /* The panel. The attribute is set by the toggle at the foot of nav.php.
     Hidden with display, so nothing inside it is focusable while it is shut. */
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0 var(--space-4) var(--space-4);
    background-color: transparent;
  }

  .site-nav[data-open] { display: block; }

  .site-nav__menu {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    padding: var(--space-2);
    background-color: var(--surface-white);
    border: var(--border-hairline) solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }

  .site-nav__group {
    position: static;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    width: 100%;
    margin: 0;
    padding: 0;
  }

  /* The panel is a plain stacked list, so neither half packs anywhere. */
  .site-nav__group,
  .site-nav__group--end { justify-content: flex-start; }

  .site-nav__group > .site-nav__item { display: block; }

  .site-nav__group > .site-nav__item--mobile { display: block; }

  .site-nav__link,
  .site-nav__toggle {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-3) var(--space-4);
  }

  /* The centre-out underline reads oddly in a stacked list. */
  .site-nav__link::after,
  .site-nav__toggle::before { content: none; }


  .site-nav__link:hover,
  .site-nav__link[aria-current="page"],
  .site-nav__toggle:hover { background-color: var(--surface-cream); }

  .site-nav__toggle::after {
    right: var(--space-4);
    opacity: .6;
  }

  .site-nav__item--has-panel.is-open > .site-nav__toggle::after {
    transform: rotate(-135deg);
    margin-top: calc(var(--space-1) * -0.5);
  }

  .site-nav__item--has-panel::after { content: none; }

  /* An accordion rather than a floating panel. */
  .site-nav__panel,
  .site-nav__item--has-panel:hover .site-nav__panel {
    position: static;
    min-width: 0;
    max-height: 0;
    margin: 0;
    padding: 0 var(--space-2);
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    transform: none;
    overflow: hidden;
    /* max-height alone left the collapsed links focusable, so the keyboard
       tabbed into three invisible items under each closed section. */
    visibility: hidden;
    transition: max-height var(--duration-slow) var(--ease),
                visibility var(--duration-slow) var(--ease);
  }

  .site-nav__panel::before { content: none; }

  .site-nav__item--has-panel.is-open .site-nav__panel {
    max-height: 26rem;
    padding-bottom: var(--space-2);
    visibility: visible;
  }

  .site-nav__panel-title { margin: var(--space-3) var(--space-3) var(--space-2); }

  .site-nav__group .btn {
    margin: var(--space-2) 0 var(--space-1);
    width: 100%;
  }
}


@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header__brand,
  .site-header__logo,
  .site-nav__link,
  .site-nav__link::after,
  .site-nav__toggle,
  .site-nav__toggle::before,
  .site-nav__toggle::after,
  .site-nav__panel,
  .site-nav__panel-link,
  .site-header__burger,
  .site-nav__group .btn { transition: none !important; }
}