/* ============================================================================
   Zambezi Trade Capital — site chrome (header and navigation)
   ----------------------------------------------------------------------------
   The header is present and clickable from first paint on every page,
   including the landing page.

   Over the hero it carries no background at all, so it cannot compete with the
   composition; once the reader is past the hero it takes a solid, blurred
   ground so the links stay legible over prose. assets/site.js toggles
   data-scrolled at that boundary — it is a background change, not a
   reveal, so the links never move and are never unclickable.

   The hero is a reproduction of the approved brand design and none of it may
   be obscured, so --header-h is reserved out of the hero's own vertical budget
   rather than the header being allowed to sit on top of the artwork. See
   --hero-reserve in styles/hero.css.
   ============================================================================ */

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

:root {
  /* The header's height, reserved out of the hero's vertical budget. Stated
     once here because two files need to agree on it. */
  --header-h: 3.4rem;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-s);
  min-height: var(--header-h);
  padding: var(--space-2xs) var(--gutter);
  /* No ground over the hero. The border is transparent rather than absent so
     the header does not change height when it gains one. */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--dur-slow) var(--ease),
    border-color var(--dur-slow) var(--ease),
    box-shadow var(--dur-slow) var(--ease);
}

/* Past the hero, a solid ground so the links stay legible over prose. */
.site-header[data-scrolled] {
  background: rgb(252 253 253 / 0.92);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--rule-soft);
  box-shadow: var(--shadow-s);
}

/* Pages with no hero start solid: there is no composition to stay clear of,
   and a transparent header over body prose would be unreadable. */
.site-header[data-header-static] {
  background: rgb(252 253 253 / 0.92);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--rule-soft);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-right: auto;
  text-decoration: none;
  color: var(--ink);
}

.brand__mark {
  width: auto;
  height: 2.1rem;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.brand__sub {
  margin-top: 0.15em;
  font-family: var(--font-lockup);
  font-weight: 300;
  font-size: var(--step--1);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Top right: the brand takes the left with margin-right:auto, so the nav is
   the last thing in the flex row. */
.site-nav {
  display: flex;
  gap: var(--space-m);
}

.site-nav a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--teal);
}

.site-nav a:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* The current page. Marked with a rule rather than a colour change alone, so
   it does not rely on colour perception. */
.site-nav a[aria-current="page"] {
  color: var(--ink);
}

.site-nav a[aria-current="page"]::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 0.35em;
  border-radius: 2px;
  background: var(--gold);
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--border-panel);
  border-radius: var(--radius-s);
  background: transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  cursor: pointer;
}

.nav-toggle__icon,
.nav-toggle__icon::before,
.nav-toggle__icon::after {
  display: block;
  width: 1rem;
  height: 2px;
  background: currentColor;
}

.nav-toggle__icon {
  position: relative;
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__icon::before { top: -5px; }
.nav-toggle__icon::after { top: 5px; }

@media (max-width: 720px) {
  .nav-toggle {
    display: flex;
  }

  .site-nav {
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    gap: 0;
    padding: var(--space-2xs) var(--gutter) var(--space-s);
    background: rgb(252 253 253 / 0.97);
    border-bottom: 1px solid var(--rule-soft);
  }

  .site-nav:not([data-open]) {
    display: none;
  }

  .site-nav a {
    padding: var(--space-2xs) 0;
  }
}