/* ==========================================================================
   Header & footer — the site chrome.

   These were Astro `<style>` blocks scoped to Header.astro and Footer.astro.
   Jinja has no style scoping, so they live here as ordinary global rules. That
   removes one whole class of bug the old build kept hitting (a scoped style
   silently not applying to markup rendered by JavaScript) and introduces the
   ordinary one in its place: these class names are now global, so keep them
   prefixed and specific.

   Tokens only. No raw hex in this file — see global.css :root.
   ========================================================================== */

/* --- Header ------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-brand);
  color: var(--color-text-invert);
  border-bottom: 3px solid var(--color-accent);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: var(--header-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-text-invert);
}

.brand-mark {
  width: 2.75rem;
  height: 2.75rem;
  /* No border: mark-compact carries its own gold ring, which is what gives it
     an edge against the header — its disc is the same navy as the bar. */
}

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

.brand-name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.25rem;
  letter-spacing: var(--tracking-tight);
}

.brand-sub {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-text-invert-muted);
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
  padding: 0;
}

.nav-link {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-text-invert);
  font-weight: 600;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-sm);
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: var(--space-sm);
  right: var(--space-sm);
  bottom: 0.15rem;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-fast);
}

.nav-link:hover,
.nav-link[aria-current='page'] {
  color: var(--color-text-invert);
}

.nav-link:hover::after,
.nav-link[aria-current='page']::after {
  transform: scaleX(1);
}

/* --- Hamburger ---------------------------------------------------------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 1.35rem;
  height: 2px;
  margin-inline: auto;
  background: var(--color-text-invert);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.nav-toggle[aria-expanded='true'] .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded='true'] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded='true'] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

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

  .primary-nav {
    position: absolute;
    inset: var(--header-height) 0 auto 0;
    background: var(--color-brand);
    border-bottom: 3px solid var(--color-accent);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
  }

  .primary-nav[data-open='true'] {
    max-height: 80vh;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-sm) var(--space-lg) var(--space-lg);
  }

  .nav-link {
    display: block;
    padding: var(--space-md) var(--space-xs);
    font-size: var(--text-base);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav-link::after {
    display: none;
  }
}

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  background: var(--color-bg-invert);
  color: var(--color-text-invert);
  border-top: 3px solid var(--color-accent);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--space-2xl);
  padding-block: var(--space-2xl);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
}

.footer-brand .brand-mark {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--color-text-invert);
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: 1.25rem;
  border: 2px solid var(--color-accent);
}

.footer-tagline {
  color: var(--color-text-invert-muted);
  font-size: var(--text-sm);
  max-width: 34ch;
}

.footer-heading {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-sm);
}

.footer-nav ul,
.social-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.footer-nav a,
.social-list a {
  color: var(--color-text-invert-muted);
  font-weight: 600;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.footer-nav a:hover,
.social-list a:hover,
.footer-email:hover {
  /* gold-400, not --color-accent (gold-500): the footer sits on navy, and
     gold-400 is the gold used for text on dark grounds throughout. */
  color: var(--gold-400);
}

.footer-email {
  display: inline-block;
  margin-top: var(--space-md);
  color: var(--color-text-invert);
  font-weight: 600;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: var(--space-md);
}

.footer-bottom p {
  color: var(--color-text-invert-muted);
  font-size: var(--text-xs);
  text-align: center;
}

@media (max-width: 720px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}