/*
 * shell.css — arcticcasino.vip
 * Page scaffolding: skip-link target, sticky topbar, hero, table-of-contents
 * nav, footer. Mobile-first; breakpoints keyed to content (640 / 960 / 1200).
 */

.av-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.av-container {
  width: 100%;
  max-width: var(--av-container);
  margin-inline: auto;
  padding-inline: var(--av-space-4);
}

@media (min-width: 640px) {
  .av-container { padding-inline: var(--av-space-6); }
}

/* ---------------- topbar ---------------- */
.av-topbar {
  position: sticky;
  top: 0;
  z-index: var(--av-z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--av-space-4);
  padding: var(--av-space-3) var(--av-space-4);
  background: rgba(7, 11, 20, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.av-topbar.is-scrolled {
  border-bottom-color: var(--av-border-soft);
  background: rgba(7, 11, 20, 0.96);
}

.av-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--av-space-2);
  text-decoration: none;
  color: var(--av-text);
  min-height: 44px;
}
.av-brand-mark {
  /* logo asset is a 152x55 wordmark (arctic-logo-white.svg), not a square
     icon — fix height, let width follow the intrinsic aspect ratio instead
     of forcing a 36x36 box (would squash the mark to 1:1). */
  height: 28px;
  width: auto;
  flex-shrink: 0;
}
.av-brand-word {
  font-family: var(--av-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.av-brand-word-accent {
  background: var(--av-aurora-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.av-topbar-cta { white-space: nowrap; }

/* ---------------- buttons ---------------- */
.av-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--av-space-2);
  min-height: 44px;
  padding: 0 var(--av-space-5);
  border-radius: var(--av-radius-pill);
  font-weight: 600;
  font-size: var(--av-fs-small);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}
.av-btn--primary {
  background: var(--av-aurora-gradient);
  color: var(--av-ink);
}
.av-btn--primary:hover { filter: brightness(1.08); color: var(--av-ink); }
.av-btn--lg { min-height: 52px; padding: 0 var(--av-space-6); font-size: var(--av-fs-body); }
.av-btn--ghost {
  background: transparent;
  border-color: var(--av-border);
  color: var(--av-text);
}
.av-btn--ghost:hover { border-color: var(--av-teal); color: var(--av-teal); }

/* ---------------- hero (full-bleed, image as section background) --------
 * Structural pattern: .av-hero is a direct child of .av-main (which sits
 * inside .av-shell, a plain flex column with NO max-width) — so simply not
 * constraining .av-hero's own width makes it stretch edge-to-edge with zero
 * negative-margin/100vw tricks (those introduce horizontal scrollbar
 * overflow; see css-layout §3). Height is content-driven, not image-driven:
 * .av-hero-media (the <img>) is position:absolute inset:0 and therefore OUT
 * of normal flow, so the section's height is set entirely by .av-hero-copy
 * (the only in-flow child) — the image just gets object-fit:cover-cropped
 * to whatever height the copy needs.
 *
 * QA fix (2026-08-31): a dedicated portrait <640px source
 * (arctic-hero-vip-aurora-mobile.webp) used to serve here. Dropped it — its
 * aurora swirl sits ~40% down the frame, and on a narrow/tall mobile hero
 * box object-fit:cover is height-bound (the source's full height always
 * maps 1:1 onto the section's height, zero vertical crop room), so that
 * swirl always ended up behind the text panel; only the plain dark upper
 * sky was ever in the visible gap above it. The landscape desktop asset
 * (1920x863) has aurora spread across its full height, so the same cover
 * math puts visible green in the gap even on a 375px box — verified by
 * screenshot, not assumed. One image now serves every breakpoint. */
.av-hero {
  position: relative;
  isolation: isolate; /* own stacking context: z-index 0/1/2 below stay local */
  overflow: hidden;
}

.av-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.av-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Two-layer readability treatment instead of one flat opaque scrim:
 * a light section-wide tint (keeps the aurora visible — that's the whole
 * point of a full-bleed hero) PLUS a dedicated dark panel behind the copy
 * itself (the text zone) sized to guarantee contrast regardless of which
 * slice of the image (dark starfield vs. bright aurora band) ends up behind
 * it. A single flat overlay strong enough to clear ~4.5:1 against the
 * brightest aurora green (tested ~0.74 alpha) hid almost the entire image —
 * defeats the brief. The panel approach keeps the image visible around/
 * behind the text while still guaranteeing AA contrast where it's read. */
.av-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(7, 11, 20, 0.3) 0%,
    rgba(7, 11, 20, 0.42) 55%,
    var(--av-bg) 100%
  );
}

.av-hero-copy {
  position: relative;
  z-index: 2;
  /* This padding is the "reveal gap" between the section edges and the
     panel below — it must NOT be eaten by the panel's own outset (see
     QA fix note on .av-hero-panel::before). Because .av-hero-media is
     height-bound at every viewport this project targets (container aspect
     always narrower than the 1920x863 source — true even at the tightest
     mobile banner height below), the FULL image height always maps 1:1
     onto the section's own height with zero vertical crop room: shrinking
     this padding does not push the aurora further away, it zooms further
     into the top/bottom edges of the source image, where the swirl already
     starts (confirmed by screenshot/pixel sampling, not assumed from
     geometry alone).
     2026-08-31 restructure: hero now holds only the short offer panel (see
     .av-offer-figure/.av-offer-terms below), so the mobile reveal gap was
     cut from space-8/7 (64/48) to space-6/5 (32/24) to hit the ≤330px
     first-screen budget — full H1+lede now lives in the new .av-intro
     block directly beneath, outside the full-bleed image. */
  padding-block: var(--av-space-6) var(--av-space-5);
}
@media (min-width: 960px) {
  .av-hero-copy { padding-block: var(--av-space-8) var(--av-space-7); }
}

/* QA fix (2026-08-31): the dark text panel used to be .av-hero-copy::before,
 * outset with a NEGATIVE inset from .av-hero-copy's OWN box. But
 * .av-hero-copy is the section's only in-flow child, so its box already
 * equals .av-hero's full box (see comment above) — outsetting further just
 * got clipped by .av-hero's overflow:hidden back to the full section, i.e.
 * the panel silently covered ~100% of the hero on any viewport narrower
 * than .av-container's max-width (roughly <1180px — matches the QA report
 * of "aurora invisible up to ~640–1200px"). --av-space-8/9 padding-block
 * above never created a reveal gap because the panel wasn't measured from
 * it: inset offsets on an absolutely positioned element are relative to the
 * containing block's PADDING edge, which for .av-hero-copy::before was
 * .av-hero-copy's own outer edge (== the section edge), not the padding
 * gap inside it.
 *
 * Fix: introduce .av-hero-panel as a plain wrapper around just the text
 * children, nested INSIDE .av-hero-copy's padding-block gap. It becomes the
 * containing block for its own ::before (position:relative), so the panel
 * now hugs the actual text box instead of the whole section — the
 * padding-block above is finally a real reveal gap, and the panel's own
 * small negative outset only adds a little breathing room around the text
 * (not the whole viewport). Kept inside .av-hero-copy's z-index:2 stacking
 * context — no separate z-index needed, .av-hero-panel just paints above
 * .av-hero-media/.av-hero::before like any other descendant would. */
.av-hero-panel { position: relative; }

/* Text panel: dark enough on its own (independent of the lighter section
   tint above) to clear ~4.5:1 for body copy against the brightest aurora
   pixels behind it. Rounded + inset so it visually reads as a panel over
   the image, not a hard-edged box. Horizontal outset kept smaller than
   .av-container's padding-inline (unlike the old bug) so a margin + the
   border-radius stay visible from the viewport edge even on narrow
   widths, per QA. */
.av-hero-panel::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: calc(var(--av-space-3) * -1) calc(var(--av-space-2) * -1);
  background: linear-gradient(180deg, rgba(7, 11, 20, 0.84) 0%, rgba(7, 11, 20, 0.76) 100%);
  border-radius: var(--av-radius-lg);
}
@media (min-width: 640px) {
  .av-hero-panel::before { inset: calc(var(--av-space-4) * -1) calc(var(--av-space-3) * -1); }
}

.av-eyebrow {
  display: inline-block;
  font-size: var(--av-fs-eyebrow);
  letter-spacing: var(--av-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--av-teal);
  font-weight: 700;
  margin-bottom: var(--av-space-3);
}

.av-lede { font-size: var(--av-fs-h4); color: var(--av-text-muted); }
.av-hero-actions { display: flex; flex-wrap: wrap; gap: var(--av-space-3); margin-block: var(--av-space-5); }
.av-disclaimer { font-size: var(--av-fs-small); color: var(--av-text-faint); margin: 0; }
.av-disclaimer a { color: var(--av-text-faint); }

/* Offer banner copy: label sits above a large typographic figure (never
   baked into the image, per brief), so the client can swap the wording in
   one place (the .av-offer-figure text node) without touching markup at
   any breakpoint. Contrast against the panel background: ~17:1 for
   --av-text, well above the 4.5:1 floor (see palette.css comment). */
.av-offer-figure {
  font-family: var(--av-font-display);
  font-weight: 700;
  line-height: var(--av-lh-tight);
  font-size: clamp(1.375rem, 1.1rem + 1.6vw, 2.125rem);
  color: var(--av-text);
  margin: 0 0 var(--av-space-4);
}
@media (min-width: 960px) {
  /* Bigger presence once the ≤330px mobile fold budget is no longer the
     constraint — desktop has vertical room the offer can use without
     pushing the banner past the ~60vh cap (verified by screenshot). */
  .av-offer-figure { font-size: clamp(1.75rem, 1rem + 2.2vw, 2.75rem); }
}
/* --av-text-muted (not --av-disclaimer's --av-text-faint): pixel-sampled
   worst-case contrast against the brightest aurora pixel behind the panel
   at 375px measured 5.02:1 for --av-text-faint — technically above the
   4.5:1 floor but too thin a margin for a regulatory 18+ line on a soft NO
   market. --av-text-muted pixel-sampled at 9:1 worst-case, same spot. */
.av-offer-terms { font-size: var(--av-fs-small); color: var(--av-text-muted); margin: 0; }
/* Scoped to the banner only (not the ghost CTA in .av-intro below): a
   single reused button doesn't need the same breathing room a two-button
   row needs, and the banner is the one place fighting the ≤330px mobile
   fold budget. */
.av-hero .av-hero-actions { margin-block: var(--av-space-4); }

/* ---------------- intro (H1 + lede, directly under the offer banner) ----
 * 2026-08-31 restructure: this used to live inside .av-hero-copy, on top
 * of the full-bleed image. Moved out so the banner can stay compact on
 * mobile (fold budget) while the H1/lede keep their own plain-background
 * container — same var(--av-container) width, no image behind the text. */
.av-intro { padding-block: var(--av-space-6) var(--av-space-7); }
@media (min-width: 640px) { .av-intro { padding-block: var(--av-space-7) var(--av-space-8); } }
.av-intro h1 { font-size: var(--av-fs-h1); }

/* ---------------- table of contents (single nav, no duplicate) ------------- */
.av-toc {
  max-width: var(--av-container);
  margin: 0 auto var(--av-space-7);
  padding: var(--av-space-5) var(--av-space-4);
}
@media (min-width: 640px) { .av-toc { padding-inline: var(--av-space-6); } }

.av-toc-heading {
  font-size: var(--av-fs-h4);
  margin-bottom: var(--av-space-4);
}
.av-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--av-space-2);
}
@media (min-width: 640px) { .av-toc-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .av-toc-list { grid-template-columns: repeat(3, 1fr); } }

.av-toc-list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--av-space-2) var(--av-space-4);
  border-radius: var(--av-radius-md);
  background: var(--av-surface);
  border: 1px solid var(--av-border-soft);
  color: var(--av-text-muted);
  text-decoration: none;
  font-size: var(--av-fs-small);
}
.av-toc-list a:hover,
.av-toc-list a[aria-current='true'] {
  border-color: var(--av-teal);
  color: var(--av-text);
}

/* ---------------- generic section rhythm ---------------- */
.av-main { flex: 1 0 auto; }

.av-section {
  max-width: var(--av-container);
  margin-inline: auto;
  padding: var(--av-space-6) var(--av-space-4);
  border-top: 1px solid var(--av-border-soft);
}

/* Anchor offset for all ToC-linked sections: the sticky topbar is 69px tall
   and would otherwise overlap the H2 on jump-to-anchor. One rule covers all
   13 section anchors instead of 13 individual selectors. 64px + 8px scale
   steps = 72px clearance (css-layout §6 — no magic px). */
.av-section[id] {
  scroll-margin-top: calc(var(--av-space-8) + var(--av-space-2));
}
@media (min-width: 640px) { .av-section { padding: var(--av-space-7) var(--av-space-6); } }

.av-section > h2 { font-size: var(--av-fs-h2); max-width: var(--av-container-narrow); }
.av-section-intro { font-size: var(--av-fs-body); max-width: 68ch; }

/* ---------------- footer ---------------- */
.av-footer {
  background: var(--av-bg-elevated);
  border-top: 1px solid var(--av-border-soft);
  padding: var(--av-space-7) var(--av-space-4) var(--av-space-6);
  margin-top: var(--av-space-7);
}
.av-footer-grid {
  max-width: var(--av-container);
  margin-inline: auto;
  display: grid;
  gap: var(--av-space-5);
}
@media (min-width: 768px) { .av-footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } }

.av-footer-brand { color: var(--av-text-muted); font-size: var(--av-fs-small); max-width: 44ch; }
.av-footer-heading { font-size: var(--av-fs-small); text-transform: uppercase; letter-spacing: 0.06em; color: var(--av-text-faint); margin-bottom: var(--av-space-3); }
.av-footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--av-space-2); }
.av-footer-links a { color: var(--av-text-muted); font-size: var(--av-fs-small); }
.av-age-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--av-radius-sm);
  border: 1px solid var(--av-border);
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--av-text);
}
.av-footer-legal {
  max-width: var(--av-container);
  margin: var(--av-space-6) auto 0;
  padding-top: var(--av-space-5);
  border-top: 1px solid var(--av-border-soft);
  font-size: var(--av-fs-small);
  color: var(--av-text-faint);
}