/* ============================================================================
   Arceus Neo — main.css
   Concept: "neon mobile arcade". A dark blue-graphite surface with a neon-crimson
   accent, a condensed display face (Oswald) and a phone-first layout. Header and
   footer are full-bleed; a .bay constrains content. The signature element — unique
   in the network — is the bottom .sticky-cta download bar on mobile. Token
   vocabulary: --bg-base/--bg-card/--neon/--gold and .bay/.masthead/.endbar/.stage/
   .banner/.btn-neo/.tag/.acard/.codebox/.portal. Motif is a "✦" spark.
   ========================================================================== */

/* ── Fonts (self-hosted; strong fallbacks so the theme works before the woff2
   files are dropped into assets/fonts/) ─────────────────────────────────── */
@font-face { font-family:'Oswald';     src:url('../fonts/Oswald-SemiBold.woff2') format('woff2');   font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Onest';      src:url('../fonts/Onest-Regular.woff2') format('woff2');     font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Onest';      src:url('../fonts/Onest-SemiBold.woff2') format('woff2');    font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Space Mono'; src:url('../fonts/SpaceMono-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Space Mono'; src:url('../fonts/SpaceMono-Bold.woff2') format('woff2');    font-weight:700; font-style:normal; font-display:swap; }

/* ── Design tokens (dark blue-graphite + neon crimson — brief §2.2) ────────── */
:root {
  --bg-base:      #12151F;  /* dark blue-graphite page background */
  --bg-card:      #1A1E2C;  /* cards / header / footer */
  --bg-code:      #0C0E16;  /* code blocks */
  --bg-raise:     #222739;  /* slightly raised chips / hover fills */
  --neon:         #FF3B6B;  /* neon crimson — buttons, accents */
  --neon-hi:      #FF5C84;  /* lighter crimson — hover */
  --neon-dim:     #47101F;  /* dark crimson — chip backing */
  --gold:         #F5C242;  /* gold — ONLY the "★ ТОП" flagship badge */
  --ok:           #3ECF8E;  /* "working" */
  --warn:         #F2B94B;  /* "being checked" */
  --text-primary: #F3F2F7;  /* near-white */
  --text-muted:   #8B8FA3;  /* blue-grey secondary */
  --border:       #262B3C;  /* borders */
  --on-neon:      #12151F;  /* text on a crimson button */

  --ff-head: 'Oswald', 'Arial Narrow', system-ui, 'Segoe UI', sans-serif;
  --ff-text: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --ff-code: 'Space Mono', ui-monospace, 'Cascadia Code', 'SFMono-Regular', Consolas, monospace;

  --r-card: 4px;    /* cards (brief §2.4) */
  --r-btn:  6px;    /* buttons (brief §2.4) */
  --r-chip: 3px;    /* chips (brief §2.4) */
  --glow:      0 0 0 1px rgba(255,59,107,.0);
  --glow-hi:   0 8px 26px rgba(255,59,107,.20);
  --shadow:    0 2px 10px rgba(0,0,0,.28);
  --span: 1120px;
  --sticky-h: 76px; /* height reserved under the mobile sticky-CTA */
}

/* ── Reset + layout rules (brief §2.5) ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 20px; }

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--ff-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  /* Sticky footer: body is a flex column and <main> absorbs the free space, so on
     short pages the footer anchors to the viewport bottom instead of floating. */
  display: flex; flex-direction: column; min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main { flex: 1 0 auto; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--ff-head); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; letter-spacing: .2px; }
h1, h2 { text-transform: uppercase; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
strong, b { font-weight: 600; }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }
::selection { background: var(--neon); color: var(--on-neon); }

/* ── Content container (brief §2.5) ────────────────────────────────────── */
.bay { width: 100%; max-width: var(--span); margin: 0 auto; padding: 0 16px; }

/* ── Accessibility helpers ─────────────────────────────────────────────── */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skiplink {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--neon); color: var(--on-neon); padding: 10px 16px; font-weight: 600;
}
.skiplink:focus { left: 8px; top: 8px; border-radius: var(--r-btn); }
.axn-hidden { display: none !important; }

/* ── Header — FULL-BLEED (brief §2.5). .masthead spans 100% with its own card
   background + bottom border; the .bay inside constrains content. No margin
   anywhere on the header → 0px above the bar. ──────────────────────────── */
.masthead {
  width: 100%;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}
/* Mobile-first (brief §1/§14 — min-width queries only): base is the collapsed
   burger nav; the horizontal desktop nav is restored at min-width:861px below. */
.masthead__nav {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  padding: 12px 16px;               /* spacing on the header is padding only */
}
.masthead__nav > :first-child { margin-top: 0; }

.masthead__logo {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: var(--ff-head); font-size: 20px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-primary);
}
.masthead__spark { color: var(--neon); font-size: 18px; line-height: 1; }

.masthead__links {
  order: 4; flex-basis: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  list-style: none; padding: 0; margin: 0;
  max-height: 0; overflow: hidden; transition: max-height .2s ease;
}
.masthead__links li { margin: 0; }
.masthead__links a {
  display: block; padding: 12px; border-radius: var(--r-btn);
  color: var(--text-muted); font-weight: 600; font-size: 15px;
  transition: color .15s, background .15s;
}
.masthead__links a:hover { color: var(--text-primary); background: var(--bg-raise); }
.masthead__links a.is-cur { color: var(--neon); }
.burger__box:checked ~ .masthead__links { max-height: 380px; }

.masthead__cta { order: 3; margin-left: auto; padding: 9px 18px; }

.langpick { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-btn); overflow: hidden; }
.langpick__opt { padding: 6px 10px; font-weight: 600; font-size: 13px; color: var(--text-muted); }
.langpick__opt + .langpick__opt { border-left: 1px solid var(--border); }
.langpick__opt.is-cur { color: var(--on-neon); background: var(--neon); }

/* mobile menu (CSS-only checkbox toggle) — shown by default, hidden on desktop */
.burger__box { display: none; }
.burger { display: flex; order: 2; cursor: pointer; flex-direction: column; gap: 4px; padding: 8px; margin-left: auto; }
.burger__bar { width: 22px; height: 2px; background: var(--text-primary); border-radius: 2px; }

@media (min-width: 861px) {
  .masthead__nav { flex-wrap: nowrap; gap: 18px; }
  .burger { display: none; }
  .masthead__links {
    order: 0; flex-basis: auto; flex-direction: row; align-items: center; gap: 2px;
    margin-left: auto; max-height: none; overflow: visible;
  }
  .masthead__links a { display: inline-block; padding: 8px 12px; }
  .masthead__cta { order: 0; margin-left: 0; }
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn-neo {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  padding: 12px 22px; border-radius: var(--r-btn); font-weight: 600; font-size: 15px;
  font-family: var(--ff-text); cursor: pointer; border: 1px solid transparent;
  min-height: 48px;                 /* touch target (brief §2.4) */
  background: var(--neon); color: var(--on-neon);
  transition: transform .12s, background .15s, box-shadow .15s;
}
.btn-neo:hover { transform: translateY(-1px); background: var(--neon-hi); box-shadow: var(--glow-hi); }
.btn-neo--big { padding: 16px 34px; font-size: 18px; width: 100%; }
@media (min-width: 521px) { .btn-neo--big { width: auto; } }

/* Secondary — outline that fills crimson text on hover. */
.btn-line {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  padding: 12px 22px; border-radius: var(--r-btn); font-weight: 600; font-size: 15px;
  font-family: var(--ff-text); cursor: pointer; min-height: 48px;
  background: transparent; color: var(--text-primary); border: 1px solid var(--border);
  transition: color .15s, border-color .15s, background .15s;
}
.btn-line:hover { color: var(--neon); border-color: var(--neon); background: var(--bg-card); }
.btn-line--big { padding: 16px 30px; font-size: 18px; width: 100%; }
@media (min-width: 521px) { .btn-line--big { width: auto; } }

/* ── Hero (.banner) — a dark band with a crimson glow. ──────────────────── */
.banner {
  width: 100%;
  background:
    radial-gradient(720px 320px at 82% -10%, rgba(255,59,107,.16), transparent 62%),
    radial-gradient(600px 300px at 5% 120%, rgba(255,59,107,.08), transparent 60%),
    linear-gradient(180deg, var(--bg-card), var(--bg-base));
  border-bottom: 1px solid var(--border);
  padding: 58px 0 50px;
}
.banner__h1 { font-size: clamp(32px, 7vw, 56px); max-width: 18ch; }
.banner__h1 .banner__spark { color: var(--neon); }
.banner__sub { color: var(--text-muted); font-size: clamp(16px, 2.4vw, 20px); max-width: 58ch; }
.banner__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.banner__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; align-items: center; }
.banner__note { color: var(--text-muted); font-size: 13px; margin: 18px 0 0; font-family: var(--ff-code); }

/* ── Page scaffolding ─────────────────────────────────────────────────── */
.stage { padding-top: 34px; padding-bottom: 22px; }
.pagelead { margin-bottom: 24px; }
.pagelead__title { font-size: clamp(27px, 5.4vw, 42px); }
.pagelead__sub { color: var(--text-muted); font-size: 18px; max-width: 66ch; margin: 0; text-transform: none; }
.pagelead__sub a { color: var(--neon); }
.pagelead__sub a:hover { text-decoration: underline; }
.pagelead__cta { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Sections (.slab) ──────────────────────────────────────────────────── */
.slab { padding: 22px 0 8px; }
.slab__title { font-size: clamp(22px, 3.6vw, 30px); margin: 0 0 14px; }
.slab__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.slab__head .slab__title { margin: 0; }
.slab__more { color: var(--neon); font-weight: 600; font-size: 15px; white-space: nowrap; }
.slab__more:hover { text-decoration: underline; }
.slab p a { color: var(--neon); }
.slab p a:hover { text-decoration: underline; }

/* honest "info / not available" notice */
.info-bar {
  background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--warn);
  border-radius: var(--r-card); padding: 16px 20px; margin: 4px 0 20px;
}
.info-bar p { margin: 0; }
.info-bar a { color: var(--neon); }
.info-bar a:hover { text-decoration: underline; }

/* generic long-form content (index.php) */
.prose { max-width: 72ch; }
.prose a { color: var(--neon); text-decoration: underline; }

/* ── Footer — FULL-BLEED like the header (brief §2.5). ──────────────────── */
.endbar {
  width: 100%;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  margin-top: 64px;
}
.endbar__inner {
  display: grid; grid-template-columns: 1fr; gap: 32px; padding: 40px 16px;
}
.endbar__brand { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.endbar__logo { display: inline-flex; align-items: center; gap: 7px; font-family: var(--ff-head); font-size: 18px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-primary); }
.endbar__logo .masthead__spark { color: var(--neon); }
.endbar__tag { color: var(--text-muted); max-width: 46ch; margin: 0; font-size: 14px; }
.endbar__col { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.endbar__h { font-family: var(--ff-code); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin: 0 0 4px; }
.endbar__col a { color: var(--text-primary); font-weight: 600; font-size: 15px; }
.endbar__col a:hover { color: var(--neon); }
.endbar__legal { grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: 18px; }
.endbar__disclaimer, .endbar__copy { color: var(--text-muted); font-size: 13px; margin: 0 0 6px; }
.endbar__law { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; }
.endbar__law a { color: var(--text-primary); font-weight: 600; font-size: 13px; }
.endbar__law a:hover { color: var(--neon); text-decoration: underline; }

@media (min-width: 461px) {
  .endbar__inner { grid-template-columns: 1fr 1fr; }
  .endbar__brand { grid-column: 1 / -1; }
}
@media (min-width: 721px) {
  .endbar__inner { grid-template-columns: 1.7fr 1fr 1fr; }
  .endbar__brand { grid-column: auto; }
}

/* ── Sticky download bar (MOBILE ONLY) — this site's signature element (brief
   §2.4). Fixed to the bottom of the screen, respects the iOS safe area, hidden on
   desktop and on every gate page. The body reserves bottom padding so the bar
   never covers content. ──────────────────────────────────────────────────── */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: var(--bg-card);   /* solid fallback for browsers without color-mix */
  background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
}
.sticky-cta .btn-neo { box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.btn-neo--wide { width: 100%; }

/* Base (mobile): the sticky-CTA is visible and the body reserves room for it.
   From 768px up it is hidden and the reserved padding is removed. */
body:not(.is-portal) { padding-bottom: var(--sticky-h); }
@media (min-width: 768px) {
  .sticky-cta { display: none; }
  body:not(.is-portal) { padding-bottom: 0; }
}