/* Shared site chrome: the header, the footer and the page container.
 *
 * Loaded by BOTH halves of the site — the marketing pages (Astro) and the
 * registration app's shell — so the menu sits in the same place, at the same
 * width, with the same behaviour, whichever half you are on.
 *
 * Deliberately self-contained: no bare element selectors and no generic `.btn`,
 * because the registration app defines its own `.btn` in design-system.css and
 * this file must not reach into it. The header's call to action is `.nav-cta`
 * for exactly that reason.
 */

:root {
  --ink: #14171a;
  --ink-soft: #2a2f34;
  --rule: color-mix(in srgb, var(--color-text) 14%, transparent);
  --wrap: 1200px;
  --gutter: 28px;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: 12px; top: 12px; z-index: 60; background: var(--ink); color: #fff;
  padding: 10px 16px; border-radius: 2px;
}

/* ── header ──────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.site-header[data-stuck="true"] {
  border-bottom-color: var(--rule);
  background: color-mix(in srgb, var(--color-bg) 96%, transparent);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-block: 15px;
}

.wordmark { display: inline-flex; align-items: baseline; gap: 12px; text-decoration: none; color: inherit; }
.wordmark-name {
  font-family: var(--font-heading), system-ui, sans-serif;
  font-weight: 700; font-size: 19px; line-height: 1;
  letter-spacing: .055em; text-transform: uppercase;
}

.site-nav { display: flex; align-items: center; gap: 2px; }
.site-nav a:not(.nav-cta), .site-nav button.nav-link {
  position: relative; padding: 9px 12px; font-size: 14.5px; font-family: inherit;
  color: var(--color-neutral-800); text-decoration: none; border-radius: 2px;
  background: none; border: 0; cursor: pointer; line-height: 1.55;
  transition: color .18s var(--ease);
}
.site-nav a:not(.nav-cta):hover, .site-nav button.nav-link:hover { color: var(--color-text); }
.site-nav a:not(.nav-cta)::after, .site-nav button.nav-link::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px;
  height: 1.5px; background: var(--color-accent-700);
  transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease);
}
.site-nav a:not(.nav-cta):hover::after, .site-nav button.nav-link:hover::after { transform: scaleX(1); }
.site-nav [aria-current="page"] { color: var(--color-text); font-weight: 600; }
.site-nav [aria-current="page"]::after { transform: scaleX(1); }

/* The header's call to action. Its own class, not `.btn`, so it cannot collide
   with the registration app's button styles. */
.nav-cta {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 10px; padding: 11px 20px; font-size: 14.5px; font-weight: 500;
  font-family: inherit; line-height: 1.2; cursor: pointer;
  background: var(--ink); color: #fff; border: 1px solid var(--ink);
  border-radius: 2px; text-decoration: none;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.nav-cta:hover { background: var(--ink-soft); border-color: var(--ink-soft); color: #fff; }
.nav-cta::after { display: none !important; }

.nav-toggle {
  display: none; width: 42px; height: 38px; padding: 10px 9px;
  background: none; border: 1px solid var(--color-neutral-400);
  border-radius: 2px; cursor: pointer; flex-direction: column; justify-content: space-between;
}
.nav-toggle-bar { display: block; height: 1.5px; background: var(--color-text); }

/* ── footer ──────────────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--rule); padding-block: 48px 56px; }
.footer-grid { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.site-footer a { color: var(--color-accent-700); }
.footer-nav { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14.5px; }
.footer-legal { font-size: 13.5px; color: var(--color-neutral-600); margin-top: 26px; }
.footer-address { margin: 0; font-size: 14.5px; color: var(--color-neutral-700); }

@media (max-width: 720px) {
  :root { --gutter: 20px; }
  .nav-toggle { display: flex; }
  .site-header .wrap { flex-wrap: wrap; }
  .site-nav {
    display: none; order: 3; width: 100%; flex-direction: column; align-items: stretch;
    gap: 0; padding-top: 6px; margin-top: 12px; border-top: 1px solid var(--rule);
  }
  .site-header[data-open="true"] .site-nav { display: flex; }
  .site-nav a:not(.nav-cta), .site-nav button.nav-link { padding: 13px 2px; font-size: 16px; text-align: left; }
  .site-nav a:not(.nav-cta)::after, .site-nav button.nav-link::after { display: none; }
  .nav-cta { margin: 10px 0 4px; }
}