/* ==========================================================================
   Site chrome — header, primary navigation, mobile drawer,
   sticky mobile CTA, footer.
   Breakpoints: desktop nav ≥ 80em; sticky CTA bar < 48em.
   ========================================================================== */

:root {
  --header-h: 4.25rem;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--paper);
  border-block-end: 1px solid var(--color-border);
}
/* NOTE: no backdrop-filter here. A filter/backdrop-filter on the header
   would become the containing block for the fixed mobile drawer (a
   descendant) and collapse it. Keep the header free of filters. */

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
  white-space: nowrap;
}

.brand__logo {
  display: block;
  width: auto;
  height: clamp(2.5rem, 2rem + 1.4vw, 3rem);   /* ~40–48px inside the 68px header */
}

/* Default (light paper header): show the dark lockup, hide the light one.
   The overlay-header swaps live in media.css alongside the other
   .has-overlay-header chrome rules. */
.brand__logo--light {
  display: none;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* --------------------------------------------------------------------------
   Primary navigation — shared structure
   -------------------------------------------------------------------------- */
.nav__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__toggle {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.5rem;
  font-size: var(--text-small);
  font-weight: 500;
  white-space: nowrap;
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  transition:
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.nav__toggle:hover {
  color: var(--color-text);
}

.nav__toggle[aria-expanded="true"] {
  color: var(--color-text);
  background-color: var(--gray-100);
}

.nav__chevron {
  flex-shrink: 0;
  transition: rotate var(--dur-fast) var(--ease-out);
}

.nav__toggle[aria-expanded="true"] .nav__chevron {
  rotate: 180deg;
}

.nav__menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__menu[hidden] {
  display: none;
}

.nav__menu-link {
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition:
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.nav__menu-link:hover {
  color: var(--color-text);
  background-color: var(--gray-100);
}

.nav__menu-link[aria-current="page"] {
  color: var(--accent);
  font-weight: 600;
}

/* ---- Desktop dropdowns (only when there is genuine room for 7 items) ---- */
@media (min-width: 80em) {
  .nav__item {
    position: relative;
  }

  .nav__menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 17rem;
    padding: var(--space-2);
    background-color: var(--surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }

  /* Last two dropdowns open leftwards so they never overflow the viewport */
  .nav__item:nth-last-child(-n + 2) .nav__menu {
    left: auto;
    right: 0;
  }
}

/* ---- Below desktop: hide the inline nav (the drawer takes over) ---- */
@media (max-width: 79.99em) {
  .nav {
    display: none;
  }

  /* Lock page scroll while the drawer is open */
  html.nav-locked,
  html.nav-locked body {
    overflow: hidden;
  }
}

/* ==========================================================================
   Mobile drawer — a separate full-screen overlay, outside the header.
   Covers the whole viewport (so nothing bleeds through) and sits below
   the header's z-index so the pinned close (X) control stays on top.
   ========================================================================== */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 40;
  height: 100vh;
  height: 100dvh;
  display: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background-color: var(--paper);
  padding: calc(var(--header-h) + var(--space-4)) var(--gutter) var(--space-24);
}

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

@media (min-width: 80em) {
  .drawer {
    display: none !important;
  }
}

.drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.drawer__item {
  border-block-end: 1px solid var(--color-border);
}

.drawer__toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--color-text);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}

.drawer__chevron {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: rotate var(--dur-base) var(--ease-out);
}

.drawer__toggle[aria-expanded="true"] .drawer__chevron {
  rotate: 180deg;
}

.drawer__menu {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-4);
}

.drawer__menu[hidden] {
  display: none;
}

.drawer__link {
  display: block;
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.drawer__link:hover,
.drawer__link[aria-current="page"] {
  color: var(--accent);
}

/* Pin the header whenever the drawer is open (every page) so the close
   control is always reachable. Safe now that the drawer is a sibling of
   the header, not a child. */
.site-header.nav-open {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--paper);
}

/* ---- Burger ----
   Hidden by default; shown only in the drawer breakpoint below. Keeping
   the default `none` makes visibility independent of source order. */
.nav-burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm);
}

@media (max-width: 79.99em) {
  .nav-burger {
    display: flex;
  }
}

.nav-burger__line {
  width: 1.25rem;
  height: 1.5px;
  background-color: currentColor;
  transition: translate var(--dur-fast) var(--ease-out), rotate var(--dur-fast) var(--ease-out);
}

.nav-burger[aria-expanded="true"] .nav-burger__line:nth-child(1) {
  translate: 0 3.25px;
  rotate: 45deg;
}

.nav-burger[aria-expanded="true"] .nav-burger__line:nth-child(2) {
  translate: 0 -3.25px;
  rotate: -45deg;
}

/* --------------------------------------------------------------------------
   Mobile drawer actions (PRD §4) — Partner Login / Become a Partner.
   Phones reach these two entry points here instead of a fixed bottom
   bar: the bar ate scroll space and its pill buttons never had enough
   room at ~320-375px widths, so it was dropped in favour of the drawer.
   -------------------------------------------------------------------------- */
.drawer__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block-end: var(--space-5);
  margin-block-end: var(--space-5);
  border-block-end: 1px solid var(--color-border);
}

.drawer__actions .btn {
  width: 100%;
}

@media (max-width: 47.99em) {
  /* The drawer owns the CTA on phones; drop the header copy of it.
     The sign-out form goes too — hiding only its button would leave an
     empty flex item behind, and the container's gap would still reserve
     space for it beside the burger. */
  .site-header__actions .btn,
  .site-header__logout {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Footer — dark editorial close on every page
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--gray-900);
  color: var(--gray-400);
  padding-block: clamp(4rem, 3rem + 4vw, 7rem) var(--space-8);
  font-size: var(--text-small);
}

.site-footer__logo {
  display: inline-block;
  line-height: 0;
  margin-block-end: var(--space-5);
}

.site-footer__logo img {
  width: clamp(11rem, 26vw, 15rem);   /* 176–240px, scales with viewport */
  height: auto;
}

.site-footer__brand > p {
  max-width: 44ch;
  line-height: 1.7;
}

.site-footer__contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-block-start: var(--space-6);
  font-size: var(--text-small);
}

.site-footer__contact a {
  color: #fff;
}

.site-footer__contact a:hover {
  color: var(--accent-air);
}

.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-block-start: var(--space-5);
  padding: 0;
  list-style: none;
  font-size: var(--text-caption);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-8);
  margin-block: clamp(3rem, 2.5rem + 2vw, 5rem);
  padding-block-start: var(--space-10);
  border-block-start: 1px solid var(--gray-700);
}

.site-footer__heading {
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gray-500);
  margin-block-end: var(--space-4);
}

.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__col li + li {
  margin-block-start: var(--space-3);
}

.site-footer a {
  text-decoration: none;
  color: var(--gray-400);
  transition: color var(--dur-fast) var(--ease-out);
}

.site-footer a:hover {
  color: #fff;
}

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block-start: var(--space-8);
  border-block-start: 1px solid var(--gray-700);
  font-size: var(--text-caption);
  color: var(--gray-500);
}

.site-footer__legal {
  display: flex;
  gap: var(--space-6);
}

/* ==========================================================================
   Cross-document page transitions (View Transitions API).
   Same-origin navigations crossfade as one continuous surface. Browsers
   without support ignore these rules and fall back to a normal load — no
   JS, no dependency. The header and footer are named so they persist
   across the transition (app-like continuity) instead of fading.
   ========================================================================== */
@view-transition {
  navigation: auto;
}

::view-transition-group(root) {
  animation-duration: 0.42s;
  animation-timing-function: var(--ease-out);
}

::view-transition-old(root) {
  animation-name: vt-fade-out;
}

::view-transition-new(root) {
  animation-name: vt-fade-in;
}

@keyframes vt-fade-out {
  to {
    opacity: 0;
  }
}

@keyframes vt-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* Persist the chrome so it doesn't flicker between pages. */
.site-header {
  view-transition-name: site-header;
}

.site-footer {
  view-transition-name: site-footer;
}

/* Honour reduced motion: keep the snapshot, drop the movement → instant. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ==========================================================================
   Cursor companion — a label that trails the pointer over "explore"
   surfaces (built and positioned entirely by js/micro.js). Never shown on
   touch; never hides the native cursor.
   ========================================================================== */
.cursor-companion {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 70;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--gray-900);
  color: #fff;
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-md);
}

@media (hover: none), (pointer: coarse) {
  .cursor-companion {
    display: none;
  }
}