/* Header for the static pages. The app renders this markup from a
   server component; these pages get the identical classes so the bar is
   the same object on every URL, not a lookalike. Palette variables are
   repeated here because these pages do not load the app stylesheet. */
/* Tokens: /assets/theme.css */

/* ===== SHARED SITE HEADER =====
   Mirrors the marketing site's nav so app pages read as one site.
   Values (Cinzel 11px, 0.12em tracking, gold on near-black) are taken
   from the static site's stylesheet — keep them in step if that changes. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 22px;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-line);
  backdrop-filter: blur(6px);
}
.site-header-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
.site-header-logo img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  object-fit: cover;
}
.site-header-logo span {
  font-family: Cinzel, Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.08em;
  color: var(--gold);
}
.site-header-nav {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.3vw, 26px);
  flex-wrap: nowrap;
  justify-content: flex-end;
  /* The old design styled bare `nav` as a fixed full-width dark bar;
     any page still carrying that rule would stretch THIS nav over the
     logo. Pin every property that rule sets, so the class always wins. */
  position: static;
  top: auto;
  width: auto;
  height: auto;
  background: none;
  border-bottom: none;
  backdrop-filter: none;
  padding: 0;
}
.site-header-nav a {
  font-family: Cinzel, Georgia, serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone);
  text-decoration: none;
  white-space: nowrap;
}
.site-header-nav a:hover,
.site-header-nav a[aria-current="page"] { color: var(--gold); }
.site-header-me {
  border: 1px solid var(--gold-dark);
  border-radius: 4px;
  padding: 7px 13px;
  color: var(--gold-light) !important;
}
.site-header-me:hover { border-color: var(--gold); }

/* The middle links compress on a narrow screen, but the logo AND the
   wordmark stay — WAG's rule: the way home is always in the upper
   left, on every page, at every width. */
/* Twelve links must never wrap (WAG 2026-09-11): they tighten below
   1400px and collapse into the menu button at 1200px. */
@media (max-width: 1400px) {
  .site-header-logo span { font-size: 11px; }
  .site-header-nav { gap: 8px; }
  .site-header-nav a { font-size: 10px; letter-spacing: 0.06em; }
  .site-header-me { padding: 6px 8px; }
}
/* ── Phone navigation: the hamburger ────────────────────────────
   Below 620px the link row can't fit, so the whole nav becomes a
   dropdown opened by the toggle. CSS-only (checkbox pattern): works
   identically on the static pages and the app, no script needed. */
.nav-toggle-box { display: none; }
.nav-toggle-btn {
  display: none;
  border: 1px solid var(--gold-dark);
  border-radius: 4px;
  color: var(--gold-light);
  font-size: 20px;
  line-height: 1;
  padding: 7px 11px;
  cursor: pointer;
  user-select: none;
}
@media (max-width: 1200px) {
  .site-header { padding: 10px 14px; }
  .nav-toggle-btn { display: inline-block; margin-left: auto; }
  .site-header-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--header-bg);
    border-bottom: 1px solid rgba(201, 168, 76, 0.25);
    padding: 6px 0 10px;
  }
  .nav-toggle-box:checked ~ .site-header-nav { display: flex; }
  .site-header-nav a {
    padding: 12px 20px;
    font-size: 13px;
  }
  .site-header-nav .site-header-me {
    margin: 8px 20px 0;
    text-align: center;
  }
  .site-header-nav .account-menu { padding: 8px 20px 0; }
}

/* ── Menu groups (WAG 2026-09-20) ──────────────────────────────
   Thirteen links crowded the bar, so the media pages and the
   background pages sit under two headings. The heading is itself a
   link (its first page), the panel opens on hover and on keyboard
   focus, and below 1200px, inside the hamburger, the panel is simply
   the links laid flat so nothing is buried on a phone. CSS only, so
   the static pages and the app behave the same. */
.nav-group { position: relative; }
.nav-group-trigger::after { content: " \25BE"; font-size: 9px; opacity: 0.7; }
.nav-group-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: -8px;
  min-width: 200px;
  flex-direction: column;
  background: var(--steel-dark);
  border: 1px solid var(--steel);
  border-radius: 6px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
  padding: 6px;
  z-index: 1100;
}
/* An invisible bridge so the pointer can travel from heading to panel. */
.nav-group::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.nav-group:hover .nav-group-panel,
.nav-group:focus-within .nav-group-panel { display: flex; }
.site-header-nav .nav-group-panel a { padding: 9px 12px; border-radius: 4px; font-size: 12px; }
.site-header-nav .nav-group-panel a:hover { background: var(--steel-mid); color: var(--gold-light); }
@media (max-width: 1200px) {
  .nav-group { position: static; display: contents; }
  .nav-group-trigger { display: none; }
  .nav-group::before { display: none; }
  .nav-group-panel {
    display: flex;
    position: static;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    min-width: 0;
  }
  .site-header-nav .nav-group-panel a { padding: 12px 20px; font-size: 13px; border-radius: 0; }
}

/* Account menu — mirrors the app's component. */
.account-menu { position: relative; }
.account-menu-trigger { display: inline-flex; align-items: center; gap: 6px;
  background: none; font-family: Cinzel, Georgia, serif; font-size: 13px;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.account-menu-caret { font-size: 10px; opacity: 0.7; }
.account-menu-panel { position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 170px; background: var(--steel-dark); border: 1px solid var(--steel);
  border-radius: 6px; box-shadow: 0 12px 34px rgba(0,0,0,0.55); padding: 6px; z-index: 1100; }
.account-menu-panel a { display: block; padding: 10px 12px; border-radius: 4px;
  font-family: Cinzel, Georgia, serif; font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone);
  text-decoration: none; white-space: nowrap; }
.account-menu-panel a:hover { background: var(--steel-mid); color: var(--gold-light); }

/* Inline two-column grids on the content pages carry fixed pixel
   columns that no media query can reach — on a phone the second
   column starts past the right edge. This override (stylesheet
   !important beats inline styles) collapses every tagged one. */
@media (max-width: 768px) {
  .collapse-sm {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

/* ── One footer everywhere (2026-09-20): the same rules as the app's ──────────────────────────────
   Mirrors the static pages' footer classes so app pages, public and
   members', end the same way. Dark in both themes via theme.css. */
.app-footer { margin-top: 60px; padding: 56px 24px 30px; background: var(--steel-dark); border-top: 1px solid rgba(201, 168, 76, 0.2); }
.app-footer .footer-inner { max-width: 1160px; margin: 0 auto; }
.app-footer .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(201, 168, 76, 0.1); }
.app-footer .footer-brand-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.app-footer .footer-brand-logo img { width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--gold-dark); object-fit: cover; }
.app-footer .footer-brand-title { font-family: Cinzel, Georgia, serif; font-size: 13px; font-weight: 700; color: var(--gold); line-height: 1.4; }
.app-footer .footer-brand-title span { font-weight: 400; color: var(--ash); font-family: "EB Garamond", Georgia, serif; font-size: 13px; }
.app-footer .footer-brand-desc { font-size: 14px; color: var(--ash); line-height: 1.75; margin-bottom: 16px; }
.app-footer .footer-brand-by { font-size: 13px; color: var(--gold-dark); font-style: italic; margin: 0; }
.app-footer .footer-col-title { font-family: Cinzel, Georgia, serif; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid rgba(201, 168, 76, 0.2); }
.app-footer .footer-links { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; }
.app-footer .footer-links a { font-size: 14px; color: var(--ash); text-decoration: none; font-family: "EB Garamond", Georgia, serif; }
.app-footer .footer-links a:hover { color: var(--gold); }
.app-footer .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.app-footer .footer-copyright { font-size: 13px; color: rgba(138, 141, 148, 0.75); font-family: "EB Garamond", Georgia, serif; }
.app-footer .footer-copyright a { color: inherit; }
.app-footer .footer-cross { color: var(--gold-dark); font-size: 18px; }
@media (max-width: 900px) { .app-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 560px) { .app-footer .footer-grid { grid-template-columns: 1fr; } .app-footer .footer-bottom { flex-direction: column; text-align: center; } }