/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE NAVIGATION

   Below 900px every public page hides .nav-links and shows a hamburger button.
   The button had no drawer and no behaviour, so the site had no navigation at
   all on a phone. This is that drawer, shared by every page so there is one
   implementation to keep working rather than five.

   The panel is built at runtime from each page's own .nav-links, so a page that
   changes its links or its active item gets a matching drawer for free.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The one control the whole site depends on at phone size, so it gets a target
   you can actually hit: the bars are 22x1px, which is nowhere near a fingertip. */
.nav-hamburger {
  position: relative;
  z-index: 1202;
  background: none;
  border: none;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  padding: 11px;
  align-items: center;
  justify-content: center;
  margin-right: -8px;   /* keeps the icon optically aligned with the edge */
}
/* The three bars fold into a cross while the drawer is open. */
.nav-hamburger span {
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.18s ease,
              background 0.2s ease;
}
.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-hamburger[aria-expanded="true"] span { background: #71fb78; }

/* The way back to the portal, shown to a signed-in admin browsing the public
   site. The server writes it into the page; it is not in the markup anyone else
   receives. Styled here rather than per page so it looks the same everywhere,
   and named distinctly so no page's own .nav-cta rules land on it. */
.nav-admin-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid rgba(113, 251, 120, 0.45);
  border-radius: 3px;
  background: rgba(113, 251, 120, 0.08);
  color: #71fb78;
  font-family: 'GothamCondensed', 'Arial Narrow', Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.nav-admin-link:hover,
.nav-admin-link:focus-visible {
  background: rgba(113, 251, 120, 0.16);
  border-color: #71fb78;
  color: #b6ffb9;
}
/* The way in for an ambassador who already has an account. Cut from the page
   entirely while the programme's switch is off, like every other link to a
   closed area, and quieter than the admin link so the two can sit side by side
   without competing. */
.nav-signin-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.72);
  font-family: 'GothamCondensed', 'Arial Narrow', Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.nav-signin-link:hover,
.nav-signin-link:focus-visible {
  border-color: rgba(113, 251, 120, 0.55);
  background: rgba(113, 251, 120, 0.08);
  color: #71fb78;
}

/* On a phone they would crowd a bar that is already logo plus menu button; the
   drawer carries a copy instead, put there by site-nav.js. */
@media (max-width: 900px) { .nav-admin-link, .nav-signin-link { display: none; } }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(1, 8, 16, 0.72);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.nav-scrim.open { opacity: 1; pointer-events: auto; }

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1201;
  width: min(320px, 84vw);
  padding: 92px 26px 32px;
  background: #04101d;
  border-left: 1px solid rgba(113, 251, 120, 0.16);
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-drawer.open { transform: translateX(0); }

/* display:flex above would otherwise beat the `hidden` attribute's UA
   display:none, leaving a closed drawer in the layout. */
.nav-drawer[hidden] { display: none; }

.nav-drawer a {
  display: block;
  padding: 15px 14px;
  border-radius: 3px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.72);
  font-family: 'GothamCondensed', 'Arial Narrow', Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: color 0.18s ease, background 0.18s ease;
}
.nav-drawer a:last-of-type { border-bottom: none; }
.nav-drawer a:hover,
.nav-drawer a:focus-visible { color: #fff; background: rgba(113, 251, 120, 0.08); }
.nav-drawer a.active { color: #71fb78; }

/* Copies of controls from outside the link list - Dashboard, Logout. Set apart
   from the links above them, because they act rather than navigate. Selectors are
   descendant-qualified, or `.nav-drawer a` above wins on the anchor and only the
   button ends up at the size set here. */
.nav-drawer .nav-drawer-extra {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 13px 14px;
  border: 1px solid rgba(113, 251, 120, 0.35);
  border-radius: 3px;
  background: transparent;
  color: #71fb78;
  font-family: 'GothamCondensed', 'Arial Narrow', Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.nav-drawer .nav-drawer-extra:first-of-type { margin-top: 18px; }
.nav-drawer a.nav-drawer-extra { border-bottom: 1px solid rgba(113, 251, 120, 0.35); }
.nav-drawer .nav-drawer-extra:hover,
.nav-drawer .nav-drawer-extra:focus-visible { background: rgba(113, 251, 120, 0.1); color: #fff; }

.nav-drawer-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(86, 196, 233, 0.55);
  padding: 0 14px 12px;
}

/* ── FOOTER: LEGAL LINKS ─────────────────────────────────────────────────────
   Terms and Privacy sit on the bottom line beside the copyright, which is where
   people look for them, rather than taking a column of their own. Only index.html
   had any .footer-bottom layout of its own; stating it here gives every page the
   same row. Descendant-qualified so it outranks a page's own bare .footer-bottom,
   which loads after this file. */
footer .footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 26px;
  padding-top: 0;
}
footer .footer-legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-right: auto;   /* sits with the copyright, not pushed to the far edge */
}
footer .footer-legal a {
  font-family: 'GothamCondensed', 'Arial Narrow', Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
  text-decoration: none;
  transition: color 0.2s ease;
}
footer .footer-legal a:hover,
footer .footer-legal a:focus-visible { color: #71fb78; }

/* Keeps the page behind from scrolling while the drawer is open, without the
   jump that setting overflow:hidden alone causes. */
body.nav-open { overflow: hidden; }

/* The top bar is position:fixed with its own z-index, which makes it a stacking
   context - so the button's z-index counts only inside the bar, and the bar as a
   whole sits under the drawer. Without this the close X is buried the moment the
   drawer opens and the only ways out are the scrim or Escape. Lifting the bar
   above the drawer while open puts the X back where the user just tapped. */
body.nav-open nav { z-index: 1202; }

/* The drawer is a small-screen affordance only; above the breakpoint the inline
   links are visible and the button is hidden, so make sure neither can linger. */
@media (min-width: 901px) {
  .nav-drawer, .nav-scrim { display: none; }
}

/* Footer links sit close together on a phone; a little vertical padding is the
   difference between hitting one and hitting its neighbour. Selectors are
   descendant-qualified so they outrank each page's own `.footer-links a`, which
   is loaded after this file. */
@media (max-width: 900px) {
  footer .footer-links a,
  footer .footer-col a { display: inline-block; padding: 7px 0; }

  /* Standalone controls, as opposed to links inside a sentence: those keep their
     natural size so the prose is not pulled apart. */
  .breadcrumb .back-link,
  .report-nav .back-link { padding: 9px 0; }
  footer .motion-toggle { padding: 10px 14px; }
  footer .footer-legal a { display: inline-block; padding: 8px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-drawer, .nav-scrim, .nav-hamburger span { transition: none; }
}