/* ==========================================================================
   THE SITE NAV. ONE FILE, FIVE PAGES.
   ==========================================================================

   WHY THIS FILE EXISTS. Until 2026-09-10 the public site carried FOUR
   different navigation bars. index.html and work.html had six links;
   coverage.html had the same bar with Work missing, so the page it linked to
   could not be reached from itself; apply-business.html and apply-creator.html
   dropped to two links each ("Home" plus the other application form), which
   is not a reduced nav, it is a different site. Four bars is four places to
   forget, and the coverage omission is what forgetting looks like.

   website/ HAS NO BUILD STEP -- .github/workflows/cloudflare-marketing.yml
   deploys with a bare `wrangler pages deploy .` and the documented hotfix path
   is the same command from a laptop -- so there is no include to share the
   MARKUP with. What can be shared is the stylesheet and the behaviour, and
   they are shared here. The markup is copied, and
   website/__tests__/sharedSiteNav.test.js fails the PR the moment any of the
   five copies stops being byte-identical to the others (modulo the single
   aria-current that marks the page you are on).

   EVERY COLOUR IS A LITERAL, DELIBERATELY. The five pages disagree about what
   their own variables mean: tokens.css resolves --cream to #FFFFFF, while
   apply-business.html defines --cream: #EDE6D6 in its own :root, and
   apply-business.html does not load tokens.css at all. A bar written against
   var(--cream) would render white text on two pages and warm ivory on three.
   The four values the bar needs are declared once, on .site-nav itself, as
   custom properties nothing outside this file sets.

   REDUCED MOTION. Every transition, transition-delay and transform-on-hover in
   this file is switched off in one block at the bottom. The bar still
   condenses, the underline still marks the current page, the panel still
   opens; none of it moves. Read that block before adding a transition here.
   ========================================================================== */

.site-nav {
  --nav-ink: #F8F5EF;                     /* full-strength type on the bar */
  --nav-dim: rgba(248, 245, 239, 0.72);   /* resting link colour */
  --nav-brass: #C9A96E;                   /* the underline, and only the underline */
  --nav-ground: #1F433D;                  /* the condensed bar, and the panel */

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  /* THE BAR STARTS TRANSPARENT. All five pages open on a dark hero
     (#172E2A on four of them, and the homepage's own hero band), so the
     resting bar is the hero showing through and the type is cream over it. */
  background: transparent;
  box-shadow: none;
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
}

/* CONDENSED, past 40px of scroll. siteNav.js owns the class; this owns the
   look. A translucent ground plus a blur, so the page reads THROUGH the bar
   rather than under a solid block. */
.site-nav.is-condensed {
  background-color: rgba(31, 67, 61, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(248, 245, 239, 0.09), 0 10px 30px rgba(0, 0, 0, 0.14);
}

/* THE BLUR COMES OFF WHILE THE PANEL IS OPEN, AND THIS IS LOAD-BEARING, NOT
   COSMETIC. A backdrop-filter other than `none` makes the element carrying it
   the CONTAINING BLOCK for its `position: fixed` descendants. `.nav-panel`
   below is `position: fixed; inset: 0` and it lives INSIDE `.site-nav`, so
   while the condensed bar carried a blur the panel's `inset: 0` resolved
   against the 60px bar instead of against the viewport: the panel painted a
   108px strip at the top of the screen, the page showed through underneath it,
   and the hamburger -- z-index 10001, deliberately above the panel -- painted
   over that page content. Measured on prod at 390x664, 390x844 and 390x900:
   the panel was 108px tall at ALL THREE heights when it was opened after
   scrolling, and correct at all three when opened at the top of the page. It
   is scroll state that breaks it, not viewport height, which is why narrowing
   a desktop window to 390 and opening the panel at the top of the page did not
   reproduce it, and why it is not a 100vh / dynamic-toolbar problem.

   Dropping the blur rather than moving the panel out of the bar keeps the
   condensed look for the 99% of the time the panel is shut, and costs nothing
   while it is open: the panel is z-index 10000 over a z-index 9999 bar, so the
   bar's translucent ground and its blur are behind an opaque full-screen panel
   in the same --nav-ground green and cannot be seen at all.

   `transition` is restated WITHOUT backdrop-filter on purpose. The base rule
   transitions it over 0.3s, and a blur mid-interpolation is still a non-`none`
   filter, so an animated climb-down would have held the containing block -- and
   the 108px panel -- for the whole 300ms the panel spends fading in. */
.site-nav.panel-open,
.site-nav.panel-open.is-condensed {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.site-nav .nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.55rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  transition: padding 0.3s ease;
}
.site-nav.is-condensed .nav-inner { padding: 0.72rem 1.5rem; }

/* The wordmark shrinks with the bar. */
.site-nav .nav-logo {
  font-family: 'Playfair Display', serif;
  color: var(--nav-ink);
  font-size: 1.35rem;
  line-height: 1.1;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: font-size 0.3s ease;
}
.site-nav.is-condensed .nav-logo { font-size: 1.08rem; }

.site-nav .nav-links {
  display: flex;
  gap: 1.75rem;
  list-style: none;
  align-items: center;
  margin: 0;
  padding: 0;
}
.site-nav .nav-links > li { display: flex; }

/* THE UNDERLINE IS DRAWN IN FROM THE LEFT, it is not switched on. A scaled
   pseudo-element rather than an animated `width`, because scaleX composites
   and width relayouts the link on every frame of a 300ms hover. */
.site-nav .nav-links a {
  position: relative;
  color: var(--nav-dim);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding: 0.4rem 0;
  transition: color 0.3s ease;
}
.site-nav .nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--nav-brass);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}
.site-nav .nav-links a:hover,
.site-nav .nav-links a:focus-visible { color: var(--nav-ink); }
.site-nav .nav-links a:hover::after,
.site-nav .nav-links a:focus-visible::after { transform: scaleX(1); }

/* THE PAGE YOU ARE ON CARRIES THE SAME UNDERLINE, PERMANENTLY. Keyed on
   aria-current rather than on a class, so the mark a screen reader announces
   and the mark an eye sees cannot come apart.
   MATCHED ON THE ATTRIBUTE, NOT ON `="page"`. Four of the five pages ARE a
   nav destination and carry `page`. /apply-creator is not one: the bar's
   creator entry is /#creators, a section on the homepage, and calling that
   link "page" while standing on /apply-creator would be a lie to a screen
   reader. It carries `true` instead -- "the current item in this set" -- and
   both values get the same underline, because to an eye they mean the same
   thing: this is where you are. */
.site-nav .nav-links a[aria-current] { color: var(--nav-ink); }
.site-nav .nav-links a[aria-current]::after { transform: scaleX(1); }

/* THE PROPOSAL BUTTON. It replaces the For Businesses and Contact links,
   because a business owner reading this bar is looking for the thing those
   two links were standing in front of. */
.site-nav .nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  background-color: #E8E0D0;
  color: #1F433D;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  padding: 0.6rem 1.3rem;
  border-radius: 9999px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
/* /apply-business IS the button, so on that page the button is already at its
   hover colour and stays there. It gets no underline: an underline under a
   filled pill reads as an artefact rather than as a mark. */
.site-nav .nav-cta[aria-current] { background-color: #FFFFFF; }
.site-nav .nav-cta:hover,
.site-nav .nav-cta:focus-visible {
  transform: translateY(-1px);
  background-color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* ─────────────────── the hamburger, which becomes an X

   Three spans rather than an inline <svg path>, because "the hamburger
   animates into an X" is two rotations and an opacity, and a path morph is
   neither cheap nor interruptible mid-gesture. */
.site-nav .hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--nav-ink);
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  position: relative;
  /* ABOVE the panel, or the only way out of the panel is the Escape key. */
  z-index: 10001;
}
.site-nav .ham-box { position: relative; display: block; width: 24px; height: 16px; }
.site-nav .ham-bar {
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: top 0.3s ease, transform 0.3s ease, opacity 0.2s ease;
}
.site-nav .ham-bar:nth-child(1) { top: 0; }
.site-nav .ham-bar:nth-child(2) { top: 7px; }
.site-nav .ham-bar:nth-child(3) { top: 14px; }
.site-nav.panel-open .ham-bar:nth-child(1) { top: 7px; transform: rotate(45deg); }
.site-nav.panel-open .ham-bar:nth-child(2) { opacity: 0; }
.site-nav.panel-open .ham-bar:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* ─────────────────── the full-screen panel

   It REPLACES a clipped dropdown. The old one was `max-height: 0` with
   `overflow: hidden`, which is why every one of these pages also needed
   `visibility: hidden` bolted on: clipping hides links visually and leaves
   them focusable (public site audit S3-1). This panel is display-level
   hidden AND inert-by-pointer-events AND visibility-hidden while closed, and
   siteNav.js additionally sets the `inert` attribute, so the links are out of
   the tab order by four separate mechanisms rather than by one. */
.site-nav .nav-panel {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background-color: var(--nav-ground);
  display: flex;
  flex-direction: column;
  padding: 4.75rem 1.5rem 2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.site-nav.panel-open .nav-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.3s ease, visibility 0s;
}

.site-nav .nav-panel-links { list-style: none; margin: 0; padding: 0; }
/* A HAIRLINE BETWEEN THEM -- between, so the last one has no rule under it. */
.site-nav .nav-panel-links > li + li { border-top: 1px solid rgba(248, 245, 239, 0.14); }
.site-nav .nav-panel-links a {
  display: flex;
  align-items: center;
  /* The tap target, and it is the reason for the min-height rather than the
     padding: 2.1rem of Playfair at 1.15 is 38.6px, which is under a thumb. */
  min-height: 56px;
  padding: 0.5rem 0;
  font-family: 'Playfair Display', serif;
  font-size: 2.1rem;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--nav-ink);
  text-decoration: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.site-nav .nav-panel-links a[aria-current] { color: var(--nav-brass); }

.site-nav .nav-panel-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 48px;
  margin-top: 1.75rem;
  background-color: #E8E0D0;
  color: #1F433D;
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  padding: 0.85rem 1.9rem;
  border-radius: 9999px;
  text-decoration: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease, background-color 0.25s ease;
}
.site-nav .nav-panel-cta[aria-current],
.site-nav .nav-panel-cta:hover,
.site-nav .nav-panel-cta:focus-visible { background-color: #FFFFFF; }

/* The email and the phone sit at the BOTTOM. `margin-top: auto` inside the
   flex column, so they are pinned to the floor of the viewport on a tall
   phone and simply follow the links on a short one. */
.site-nav .nav-panel-contact {
  margin-top: auto;
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.site-nav .nav-panel-contact a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: rgba(248, 245, 239, 0.78);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.site-nav .nav-panel-contact a:hover,
.site-nav .nav-panel-contact a:focus-visible { color: var(--nav-ink); }

/* THE STAGGER, ~50ms apart. Applied only while open, so closing takes
   everything out together instead of unwinding the ladder in reverse. */
.site-nav.panel-open .nav-panel-links a,
.site-nav.panel-open .nav-panel-cta,
.site-nav.panel-open .nav-panel-contact { opacity: 1; transform: none; }
.site-nav.panel-open .nav-panel-links > li:nth-child(1) a { transition-delay: 0.05s; }
.site-nav.panel-open .nav-panel-links > li:nth-child(2) a { transition-delay: 0.10s; }
.site-nav.panel-open .nav-panel-links > li:nth-child(3) a { transition-delay: 0.15s; }
.site-nav.panel-open .nav-panel-links > li:nth-child(4) a { transition-delay: 0.20s; }
.site-nav.panel-open .nav-panel-links > li:nth-child(5) a { transition-delay: 0.25s; }
.site-nav.panel-open .nav-panel-cta { transition-delay: 0.30s; }
.site-nav.panel-open .nav-panel-contact { transition-delay: 0.35s; }

/* THE PAGE BEHIND THE PANEL DOES NOT SCROLL. Set on <html> by siteNav.js.
   Both elements, because `overflow: hidden` on <html> alone still lets the
   body scroll in Safari, and on <body> alone still lets the document scroll
   in Chrome. */
html.nav-panel-lock,
html.nav-panel-lock body { overflow: hidden; }

@media (max-width: 768px) {
  .site-nav .nav-links,
  .site-nav .nav-cta { display: none; }
  .site-nav .hamburger { display: flex; }
  /* Shorter tall state on a phone: the 44px hamburger is the floor here, and
     the homepage hero opens at 5.25rem of top padding. */
  .site-nav .nav-inner { padding: 0.9rem 1.25rem; }
  .site-nav.is-condensed .nav-inner { padding: 0.5rem 1.25rem; }
}

@media (max-width: 420px) {
  .site-nav .nav-panel-links a { font-size: 1.9rem; }
}

/* ─────────────────── reduced motion

   Nothing above moves under this query. The states all still apply: the bar
   still gains its ground past 40px, the current page still carries its
   underline, a hover still draws one, the panel still opens and the bars
   still form an X. They just arrive rather than travel. */
@media (prefers-reduced-motion: reduce) {
  .site-nav,
  .site-nav.panel-open,
  .site-nav.panel-open.is-condensed,
  .site-nav .nav-inner,
  .site-nav .nav-logo,
  .site-nav .nav-links a,
  .site-nav .nav-links a::after,
  .site-nav .nav-cta,
  .site-nav .ham-bar,
  .site-nav .nav-panel,
  .site-nav .nav-panel-links a,
  .site-nav .nav-panel-cta,
  .site-nav .nav-panel-contact,
  .site-nav.panel-open .nav-panel,
  .site-nav.panel-open .nav-panel-links > li:nth-child(1) a,
  .site-nav.panel-open .nav-panel-links > li:nth-child(2) a,
  .site-nav.panel-open .nav-panel-links > li:nth-child(3) a,
  .site-nav.panel-open .nav-panel-links > li:nth-child(4) a,
  .site-nav.panel-open .nav-panel-links > li:nth-child(5) a,
  .site-nav.panel-open .nav-panel-cta,
  .site-nav.panel-open .nav-panel-contact {
    transition: none !important;
    animation: none !important;
    transition-delay: 0s !important;
  }
  /* The one pixel of lift is motion too. */
  .site-nav .nav-cta:hover,
  .site-nav .nav-cta:focus-visible { transform: none; }
  /* The nav's own links are the main hash-scroll trigger on this site, and a
     smooth scroll is a 700px animated journey nobody asked for.
     `html:root` RATHER THAN `html`, and that is not decoration: all five
     pages declare `html { scroll-behavior: smooth }` in their own <style>
     block, which the head loads after this sheet, so a bare `html` here is
     the same specificity arriving earlier and loses. Measured smooth under
     reduced motion on 2026-09-10 before this selector changed. (0,1,1)
     against (0,0,1) wins on specificity and does not care about order. */
  html:root { scroll-behavior: auto; }
}