/* shell.css — page chrome: reset, container, top bar, nav, ToC, footer.
   Own layout skeleton: a sticky top bar (not the donor's fixed side rail),
   own class prefix `ae-`. Dropdowns/nav toggle are JS click-driven, not
   CSS :hover — see src/js/ae-ui.js. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--ae-grad-page);
  color: var(--ae-ink-1);
  font-family: var(--ae-font-body);
  font-size: var(--ae-fs-body);
  line-height: var(--ae-lh-body);
  font-weight: var(--ae-fw-regular);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--ae-font-display);
  color: var(--ae-ink-1);
  line-height: var(--ae-lh-heading);
  letter-spacing: var(--ae-ls-tight);
  font-weight: var(--ae-fw-bold);
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; }

a { color: var(--ae-accent); text-decoration: none; transition: color var(--ae-dur) var(--ae-ease-out); }
a:hover { color: var(--ae-cta-bg-hover); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ae-focus-ring);
  outline-offset: 2px;
  border-radius: var(--ae-r-xs);
}

.ae-wrap {
  width: 100%;
  max-width: var(--ae-container-max);
  margin-inline: auto;
  padding-inline: var(--ae-gutter-mobile);
}
@media (min-width: 768px) {
  .ae-wrap { padding-inline: var(--ae-gutter-desktop); }
}

.ae-skip {
  position: absolute;
  left: var(--ae-sp-3);
  top: var(--ae-sp-3);
  background: var(--ae-surface);
  color: var(--ae-ink-1);
  padding: var(--ae-sp-3) var(--ae-sp-4);
  border-radius: var(--ae-r-sm);
  box-shadow: none;
  z-index: var(--ae-z-toast);
  transform: translateY(-150%);
  transition: transform var(--ae-dur) var(--ae-ease-out), box-shadow var(--ae-dur) var(--ae-ease-out);
}
.ae-skip:focus,
.ae-skip:focus-visible {
  transform: translateY(0);
  box-shadow: var(--ae-shadow-raised);
}

/* ---------------- top bar ---------------- */
.ae-topbar {
  position: sticky;
  top: 0;
  z-index: var(--ae-z-nav);
  background: var(--ae-surface);
  border-bottom: 1px solid var(--ae-line);
  box-shadow: var(--ae-shadow-sm);
}
.ae-topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--ae-sp-4);
  min-height: 64px;
  padding-block: var(--ae-sp-2);
}
.ae-brand {
  display: flex;
  align-items: center;
  gap: var(--ae-sp-2);
  font-family: var(--ae-font-display);
  font-weight: var(--ae-fw-black);
  font-size: var(--ae-fs-lg);
  color: var(--ae-ink-1);
  letter-spacing: var(--ae-ls-tight);
  /* shrinkable, not fixed: at narrow widths this yields space to the CTA
     before anything is allowed to overflow the row (see .ae-brand__word) */
  flex: 0 1 auto;
  min-width: 0;
}
.ae-brand:hover { color: var(--ae-ink-1); }
.ae-brand__mark {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: var(--ae-r-sm);
  background: var(--ae-grad-accent);
  flex: none;
  overflow: hidden;
}
/* Gradient box IS the placeholder until asset-manager fills data-asset="logo" —
   the <img> stays hidden (not a generic .ae-asset-slot dashed frame, which
   is sized for card/hero media, not a 36px mark) and takes over once src is set. */
.ae-brand__mark img[src=""] { display: none; }
.ae-brand__mark img:not([src=""]) { width: 100%; height: 100%; object-fit: cover; }
.ae-brand__word {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.ae-brand__word span { color: var(--ae-accent); }

/* Base (desktop): nav fills the remaining row and lays its list out flat.
   flex-basis: 0% (not `auto`) is the fix — with `auto` the nav's own
   content (9 menu items) supplied a huge hypothetical main size, so the
   shrink algorithm distributed negative free space across all three
   siblings roughly by that basis, clipping .ae-brand__word/.ae-cta__label
   by a few px even when the row had room. With basis 0 the nav only ever
   claims left-over space after brand/CTA take their natural width; see
   css-layout skill §3 (overflow) / responsive-design skill (verification).
   Below 900px the visible nav content collapses to just the toggle button
   (the list becomes a fixed-size absolute drawer, out of flow) — flex: 0 0
   auto there hugs that button instead of letting the flex algorithm shrink
   the item under its own min-content and spill it over a sibling. */
.ae-nav { flex: 1 1 0%; min-width: 0; }
.ae-nav__toggle {
  display: none;
  align-items: center;
  gap: var(--ae-sp-2);
  min-height: var(--ae-touch-min);
  padding-inline: var(--ae-sp-3);
  background: transparent;
  border: 1px solid var(--ae-line);
  border-radius: var(--ae-r-sm);
  color: var(--ae-ink-1);
  font: inherit;
  font-weight: var(--ae-fw-medium);
  cursor: pointer;
}
.ae-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ae-sp-1) var(--ae-sp-5);
  list-style: none;
}
.ae-nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ae-touch-min);
  color: var(--ae-ink-2);
  font-size: var(--ae-fs-sm);
  font-weight: var(--ae-fw-medium);
  white-space: nowrap;
}
.ae-nav__list a:hover, .ae-nav__list a:focus-visible { color: var(--ae-accent); }

.ae-cta--topbar {
  /* shrinkable, same reasoning as .ae-brand: the row must be structurally
     incapable of overflowing at 320–375px, not tuned to a specific pixel
     budget that breaks the moment copy changes. .ae-btn is inline-flex, so
     text-overflow on THIS element would do nothing (it only applies to a
     block container) and overflow:hidden here would hard-clip the label on
     both ends instead of ellipsizing — see .ae-cta__label below. */
  flex: 0 1 auto;
  min-width: 0;
}
.ae-cta__label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.ae-cta__label-short { display: none; }

@media (max-width: 900px) {
  .ae-nav__toggle { display: inline-flex; }
  /* Nav's visible in-flow content is now just the toggle button — hug it
     instead of letting flex shrink the item under its own min-content
     (which would spill the button over the CTA sibling). */
  .ae-nav { flex: 0 0 auto; min-width: 0; }
  .ae-nav__list {
    display: none;
    /* Containing block for this absolutely-positioned drawer must be
       .ae-topbar (position: sticky, i.e. positioned) so left:0/right:0
       span the FULL bar — not .ae-nav, which is a narrow flex child
       sandwiched between the brand and the CTA. Do not add
       position:relative to .ae-nav here (see css-layout skill §2/§3). */
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    gap: 0;
    background: var(--ae-surface);
    border-bottom: 1px solid var(--ae-line);
    box-shadow: var(--ae-shadow-raised);
    padding: var(--ae-sp-2) var(--ae-gutter-mobile) var(--ae-sp-4);
    z-index: var(--ae-z-dropdown);
  }
  .ae-nav__list.is-open { display: flex; }
  .ae-nav__list a { min-height: 48px; border-bottom: 1px solid var(--ae-line); width: 100%; }
  .ae-nav__list li:last-child a { border-bottom: none; }
}

/* Below ~640px the nav toggle button sits next to the full wordmark
   ("ARCTICCASINO") and the full CTA label ("Besøk Arctic Casino") — those
   three together (~178px + ~175px + ~90px) no longer fit a 320–600px row
   even after the .ae-nav flex-basis fix above. Rather than let
   text-overflow:ellipsis clip mid-word (the QA-flagged bug), swap in a
   deliberately shortened brand mark and CTA label; the full accessible
   name is preserved via aria-label on the parent <a> (visible text is
   aria-hidden), so nothing is lost for assistive tech or crawlers. */
@media (max-width: 640px) {
  .ae-brand__word-suffix { display: none; }
  .ae-cta--topbar .ae-cta__label-full { display: none; }
  .ae-cta--topbar .ae-cta__label-short { display: inline; }
  /* Even with the shortened brand/CTA above, the row gap alone (2 × 16px)
     eats the last few px at 320px viewports. Halving it to the next step
     on the spacing scale (8px) buys back 16px of margin — measured clean
     down to 320px, see self-check in the frontend batch report. */
  .ae-topbar__inner { gap: var(--ae-sp-2); }
}

/* ---------------- table of contents ---------------- */
.ae-toc {
  background: var(--ae-surface-2);
  border: 1px solid var(--ae-line);
  border-radius: var(--ae-r-md);
  padding: var(--ae-sp-5);
  margin-block: var(--ae-sp-8);
}
.ae-toc__title {
  font-size: var(--ae-fs-xs);
  font-weight: var(--ae-fw-bold);
  letter-spacing: var(--ae-ls-caps);
  text-transform: uppercase;
  color: var(--ae-ink-2);
  margin-bottom: var(--ae-sp-3);
}
.ae-toc__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--ae-sp-2) var(--ae-sp-5);
  list-style: none;
  counter-reset: ae-toc;
}
.ae-toc__list a {
  counter-increment: ae-toc;
  display: flex;
  gap: var(--ae-sp-2);
  color: var(--ae-ink-1);
  font-weight: var(--ae-fw-medium);
  min-height: 32px;
  align-items: center;
}
.ae-toc__list a::before {
  content: counter(ae-toc, decimal-leading-zero);
  color: var(--ae-accent-2);
  font-variant-numeric: tabular-nums;
  font-weight: var(--ae-fw-bold);
}
.ae-toc__list a:hover { color: var(--ae-accent); }

/* ---------------- footer ---------------- */
.ae-footer {
  background: var(--ae-grad-graphite);
  color: var(--ae-ink-on-graphite);
  margin-top: var(--ae-sp-20);
}
.ae-footer__inner { padding-block: var(--ae-sp-10); }
.ae-footer__grid {
  display: grid;
  gap: var(--ae-sp-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .ae-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--ae-sp-8); }
}
.ae-footer__brand { font-weight: var(--ae-fw-black); font-size: var(--ae-fs-lg); }
.ae-footer__text { color: var(--ae-ink-on-graphite-muted); font-size: var(--ae-fs-sm); max-width: 46ch; }
.ae-footer__heading {
  font-size: var(--ae-fs-xs);
  letter-spacing: var(--ae-ls-caps);
  text-transform: uppercase;
  color: var(--ae-ink-on-graphite-muted);
  margin-bottom: var(--ae-sp-3);
}
.ae-footer__list { list-style: none; display: grid; gap: var(--ae-sp-2); }
.ae-footer__list a { color: var(--ae-ink-on-graphite); font-size: var(--ae-fs-sm); }
.ae-footer__list a:hover { color: var(--ae-accent-2); }
.ae-footer__bottom {
  border-top: 1px solid var(--ae-line-graphite);
  margin-top: var(--ae-sp-8);
  padding-top: var(--ae-sp-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ae-sp-3);
  justify-content: space-between;
  font-size: var(--ae-fs-xs);
  color: var(--ae-ink-on-graphite-muted);
}
.ae-footer__badge18 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--ae-line-graphite);
  border-radius: var(--ae-r-xs);
  font-weight: var(--ae-fw-bold);
  color: var(--ae-ink-on-graphite);
}