/* =======================================================================
   Be Like Ike — shared campaign stylesheet for the marketing site.
   Tokens (light Campaign + OS-dark Midnight), base utilities, the shared
   top bar / buttons / footer. Page-specific styles live in each page.
   Load the Google Fonts <link> per page.
   ======================================================================= */

:root {
  --paper: #F6EFDB; --paper-2: #FCF7E9; --paper-edge: #ECE0C0;
  --ink: #16223F;
  --navy: #1B3A8C; --navy-deep: #122A63; --navy-ink: #0E1F49;
  --red: #C8102E; --red-deep: #9E0C24; --red-bright: #E0233F;
  --gold: #C8A24B; --gold-deep: #9C7A2E; --gold-soft: #E7D199;
  --cream-line: #E2D5B4; --slate: #5E6A78; --slate-deep: #3F4854;

  --font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font-serif:   'DM Serif Display', Georgia, serif;
  --font-ui:      'Libre Franklin', system-ui, sans-serif;
  --font-label:   'Oswald', system-ui, sans-serif;

  --r-sm: 3px; --r-md: 5px; --r-lg: 8px;
  --sh-card:  0 1px 0 var(--paper-edge), 0 2px 6px rgba(22,34,63,0.10);
  --sh-raise: 0 2px 0 rgba(18,42,99,0.18), 0 6px 18px rgba(22,34,63,0.18);
}

/* OS-driven dark mode — the campaign poster reprinted on ink-navy stock. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #131E36; --paper-2: #1C2B4B; --paper-edge: #31436B;
    --ink: #F1E7CB;
    --navy: #5E8BE0; --navy-deep: #3F66B4; --navy-ink: #2A4C8E;
    --red: #F0445A; --red-deep: #C8102E; --red-bright: #FF6378;
    --gold: #E0BC68; --gold-deep: #B58C38; --gold-soft: #F0DCA6;
    --cream-line: #2C3E60; --slate: #93A1B5; --slate-deep: #6B7686;
    --sh-card:  0 1px 0 rgba(255,255,255,0.05), 0 3px 10px rgba(0,0,0,0.50);
    --sh-raise: 0 2px 0 rgba(0,0,0,0.45), 0 10px 26px rgba(0,0,0,0.60);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui); color: var(--ink); background-color: var(--paper);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* paper grain (dark-on-cream in light, cream-on-navy in dark) */
.paper-bg {
  background-color: var(--paper);
  background-image: radial-gradient(circle at 50% 50%, rgba(22,34,63,0.035) 0.6px, transparent 0.7px);
  background-size: 7px 7px;
}
@media (prefers-color-scheme: dark) {
  .paper-bg { background-image: radial-gradient(circle at 50% 50%, rgba(241,231,203,0.05) 0.6px, transparent 0.7px); }
}

.stripes {
  background: repeating-linear-gradient(-45deg,
    var(--red) 0 14px, var(--paper-2) 14px 28px, var(--navy) 28px 42px, var(--paper-2) 42px 56px);
}
.kicker {
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.22em;
  font-weight: 600; font-size: 13px; color: var(--red);
}
.double-rule { border: none; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); height: 5px; margin: 0; }
.star { color: var(--gold); }
::selection { background: var(--gold-soft); color: var(--navy-ink); }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600; font-size: 15px; white-space: nowrap;
  border: 2px solid var(--navy-ink); border-radius: var(--r-md); padding: 11px 22px;
  background: var(--navy); color: #fff; cursor: pointer; text-decoration: none; display: inline-block;
  box-shadow: 0 2px 0 var(--navy-ink);
  transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
}
.btn:hover { background: var(--navy-deep); }
.btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--navy-ink); }
.btn--red { background: var(--red); border-color: var(--red-deep); box-shadow: 0 2px 0 var(--red-deep); }
.btn--red:hover { background: var(--red-deep); }
.btn--ghost { background: transparent; color: var(--navy-ink); box-shadow: 0 2px 0 rgba(18,42,99,0.25); }
.btn--ghost:hover { background: rgba(18,42,99,0.06); }
@media (prefers-color-scheme: dark) {
  .btn--ghost { color: var(--navy); box-shadow: 0 2px 0 rgba(94,139,224,0.30); }
  .btn--ghost:hover { background: rgba(241,231,203,0.07); }
}

/* ---------- Shared top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 50; background: var(--paper-2); border-bottom: 3px solid var(--ink); }
.topbar .stripe-thin { height: 6px; }
.topbar-inner { max-width: 1140px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand-mark { width: 38px; height: 38px; border-radius: var(--r-sm); box-shadow: 0 1px 0 var(--paper-edge), 0 2px 6px rgba(22,34,63,.2); border: 2px solid var(--paper-2); }
.brand-name { font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: .01em; line-height: 1; }
.brand-name em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--red); }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .12em; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; }
.nav-links a:hover { color: var(--red); }
.nav-cta { font-size: 13px !important; padding: 9px 16px; }
/* higher specificity than `.nav-links a` so the red CTA keeps white text */
.nav-links a.nav-cta, .nav-links a.nav-cta:hover { color: #fff; }

/* ---------- Shared footer ---------- */
footer.site { background: var(--navy-ink); color: #c9d3ec; padding: 40px 0 48px; text-align: center; }
footer.site .wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
footer.site .foot-mark { width: 66px; height: 66px; border-radius: 999px; margin: 0 auto 16px; box-shadow: 0 4px 14px rgba(0,0,0,.4); display: block; }
footer.site a { color: var(--gold-soft); text-decoration: none; }
footer.site .foot-links { display: flex; gap: 22px; justify-content: center; margin: 14px 0 18px; font-family: var(--font-label); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; flex-wrap: wrap; }
footer.site .disclaimer { font-size: 12px; max-width: 40em; margin: 18px auto 0; opacity: .6; line-height: 1.5; }
.brand-name.lg { font-size: 26px; }

/* ---------- Footer language switcher ---------- */
footer.site .lang-switch { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin: 4px 0 18px; font-family: var(--font-label); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; }
footer.site .lang-switch a { color: var(--gold-soft); text-decoration: none; opacity: .8; }
footer.site .lang-switch a:hover { opacity: 1; }
footer.site .lang-switch a[aria-current="page"] { color: #fff; opacity: 1; font-weight: 700; }