/* Site header. One component, two themes:
     .site-header--overlay  sits transparent over the homepage hero
     .site-header--solid    sticks to the top of every other page
   Replaces the former .site-header/.nav-shell/.desktop-nav/.mobile-nav set and its
   parallel .route-header/.route-nav/.route-mobile-nav twin. */

.announcement {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--white);
  background: var(--green-800);
  font-size: var(--text-xs);
  letter-spacing: .04em;
}
.announcement a {
  margin-left: var(--space-3);
  color: var(--yellow-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.announcement span[aria-hidden] { color: var(--yellow); }
.announcement-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-round);
  background: var(--yellow);
}
.announcement--compact {
  min-height: 30px;
  gap: 9px;
  color: var(--surface-mint);
  font-size: var(--text-2xs);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.site-header { z-index: 10; }
/* The announcement bar above this was removed, so the header sits at the top. */
.site-header--overlay {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  color: var(--white);
}
.site-header--solid {
  position: sticky;
  top: 0;
  background: var(--surface-page);
}

.nav-shell {
  width: min(var(--shell-width), calc(100% - (var(--shell-gutter) * 2)));
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: auto;
  padding: 0 6px;
}
.site-header--overlay .nav-shell { border-bottom: 1px solid var(--overlay-white-20); }
.site-header--solid .nav-shell { border-bottom: 1px solid var(--border); }

.brand { display: block; flex: 0 0 auto; width: 200px; }
.brand img { display: block; width: 100%; height: auto; aspect-ratio: 400 / 130; }

/* The lockup is a full-colour illustration drawn for a light background. The hero
   tint is deepened and shifted off-green (see --hero-tint-* in tokens.css) so the
   green wordmark separates by hue instead of needing a plate behind it. */
.site-header--overlay .brand img { filter: drop-shadow(0 3px 14px rgba(2, 18, 28, .45)); }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-left: auto;
  margin-right: 30px;
  font-size: var(--text-sm);
  font-weight: 600;
}
.site-nav a, .currency-button { background: transparent; border: 0; }
.site-header--overlay .site-nav a,
.site-header--overlay .currency-button { color: var(--white); opacity: .93; }
.site-header--overlay .site-nav a:hover,
.site-header--overlay .currency-button:hover { color: var(--yellow-soft); opacity: 1; }
.site-header--solid .site-nav a { color: var(--ink-soft); }
.site-header--solid .site-nav a:hover { color: var(--green-700); }
.site-nav a span, .currency-button span { margin-left: var(--space-1); color: var(--yellow); }

.nav-actions { display: flex; align-items: center; gap: var(--space-3); }
.currency-button { padding: var(--space-2) 0; font-size: var(--text-sm); }

.account-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 700;
}
.site-header--overlay .account-button {
  color: var(--ink);
  background: var(--white);
  border: 0;
  box-shadow: var(--shadow-sm);
}
.site-header--overlay .account-button:hover { background: var(--surface-cream); }
.site-header--solid .account-button {
  color: var(--green-800);
  background: transparent;
  border: 1px solid var(--border);
  font-weight: 800;
}
.site-header--solid .account-button:hover { background: var(--surface-mint); border-color: var(--green-700); }
.account-icon {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  color: var(--green-700);
  border: 1px solid var(--green-700);
  border-radius: var(--radius-round);
  font-size: 14px;
}

.menu-button {
  display: none;
  padding: var(--space-2);
  background: transparent;
  border: 0;
  font-size: 21px;
}
.site-header--overlay .menu-button { color: var(--white); }
.site-header--solid .menu-button { color: var(--green-800); }

.site-nav-mobile { display: none; }
.site-nav-mobile a, .site-nav-mobile button {
  display: block;
  width: 100%;
  padding: 11px var(--space-5);
  color: var(--white);
  background: transparent;
  border: 0;
  font-size: var(--text-sm);
  text-align: left;
}
.site-nav-mobile button { color: var(--yellow); font-weight: 800; }

@media (max-width: 720px) {
  .announcement { padding: 6px var(--space-3); text-align: center; }
  .announcement a { display: none; }
  .nav-shell { width: min(100% - 32px, 560px); min-height: 70px; }
  .site-header--solid .nav-shell { width: calc(100% - 32px); min-height: 68px; }
  .brand { width: 160px; }
  .nav-actions { gap: 6px; }
  .account-button { padding: 8px 9px; font-size: 10px; }
  .site-nav, .currency-button { display: none; }
  .menu-button { display: block; padding: 6px; }

  .site-nav-mobile {
    display: block;
    width: min(100% - 32px, 560px);
    margin: auto;
    padding: var(--space-4) 0;
    background: rgba(9, 61, 47, .97);
    border-radius: 0 0 10px 10px;
  }
  .site-header--solid .site-nav-mobile { width: calc(100% - 32px); background: var(--green-800); }
  .site-nav-mobile[hidden] { display: none; }
}

/* Below ~300px the brand (160px) plus the nav actions (108px) exceed the shell,
   so the header steps down again rather than pushing the page wider. */
@media (max-width: 300px) {
  .nav-shell,
  .site-header--solid .nav-shell { width: calc(100% - 16px); }
  .brand { width: 102px; }
  .nav-actions { gap: 2px; }
  .account-button { padding: 6px; font-size: 8px; }
  .menu-button { padding: 3px; font-size: 18px; }
}