/**
 * Component skins — colors, radius, spacing, typography per component.
 * Mobile-first defaults live here; column/flow changes for wider screens live in layout.css.
 */

:root {
  /* In-page anchor scroll offset for the sticky .site-header (below).
     Applied wherever a smooth-scroll target can land — see the
     `main > section[id], .article h2, .article h3` rule further down.
     145px clears the measured worst case: the header wraps to two rows
     between ~768–900px (129px tall) plus a small buffer; it's harmless
     extra whitespace above the target at widths where the header is a
     single row (~69px). If .site-header's max height changes, update
     this one value and every anchor target stays correct. */
  --scroll-offset: 145px;
}

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgba(10, 10, 12, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

/* ---------- Wordmark: "BETıATOR" with a small SVG football standing in for
   the dot over the i, bold italic, in the brand accent orange. Shared by
   the header link (.brand) and the footer mark (.site-footer__brand);
   both wrap the same .brand__mark/.brand__i/.brand__ball structure. The
   visible glyphs are aria-hidden and a .sr-only "Betiator" carries the
   accessible name, so screen readers/search don't parse the dotless-ı
   trick as the real word. */
.brand {
  display: inline-flex;
  align-items: center;
}
.brand__mark {
  font-weight: 700;
  font-style: italic;
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  color: var(--accent);
  /* .brand__i below is inline-block, which on its own gives the browser an
     implicit line-break opportunity before/after it (same rule as two
     adjacent inline-blocks wrapping like words) — without this the
     footer's narrower flex column wrapped the wordmark onto "BETı" / "ATOR"
     on two lines. It's a short logo word: never wrap it. */
  white-space: nowrap;
}
.brand__i {
  position: relative;
  display: inline-block;
}
.brand__ball {
  position: absolute;
  top: -0.32em;
  left: 56%;
  transform: translateX(-50%);
  width: 0.6em;
  height: 0.6em;
  color: var(--text);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text);
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--accent); }

.nav-list {
  list-style: none;
  margin: 0;
  padding: var(--space-4);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.nav-list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
}
.nav-list a:hover, .nav-list a:focus-visible { color: var(--text); }

.lang-switch {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: 0.8125rem;
  text-decoration: none;
}
.lang-switch a:hover { color: var(--text); border-color: var(--text-muted); }
.lang-switch a[aria-current="true"] {
  color: var(--text);
  border-color: var(--accent);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
}
.btn--primary {
  background: var(--cta);
  color: #FFFFFF;
}
.btn--primary:hover, .btn--primary:focus-visible {
  filter: brightness(1.1);
  text-decoration: none;
}
.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  border-color: var(--text-muted);
  text-decoration: none;
}

/* ---------- Hero ---------- */
.hero__subtitle {
  color: var(--text-muted);
  max-width: 52ch;
}
.hero__banner {
  /* No border/shadow: asset corners (~RGB 10,10,10) already match --bg and
     blend seamlessly — a frame would only draw an unwanted seam. */
  position: relative;
  aspect-ratio: 16 / 10;
  width: 100%;
  max-width: var(--banner-max);
  border-radius: var(--radius-card);
  background: var(--bg); /* matches image edges, avoids flash before load */
  overflow: hidden;
}
.hero__banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Stats ---------- */
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  text-align: center;
}
.stat__value {
  display: block;
  font-size: var(--fs-number);
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  display: block;
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

/* ---------- Content card ---------- */
.content-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-8);
}
.content-card__text { color: var(--text-muted); }

/* ---------- State cards (Sicher / Gefahr / loss) ---------- */
.state-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Screenshot frame — Sicher and Gefahr cards embed a real widget capture
   instead of a drawn badge/button. The two source screenshots are very
   different shapes (landscape widget-only vs a tall full-pitch capture), so
   the frame can't just be `width:100%; height:auto`: side by side in the
   two-column layout that would leave the landscape card dramatically
   shorter than the portrait one. `object-fit: contain` guarantees neither
   image is ever cropped regardless of frame size (the hard requirement);
   `flex: 1 1 auto` on the frame — not a fixed px height — is what actually
   equalizes the two cards: CSS Grid's default `align-items: stretch`
   stretches both `.state-card`s in a row to the same height, and the frame
   (the only flexible child) is what absorbs that extra height, so the
   shorter (landscape) screenshot ends up centered in a taller frame instead
   of leaving blank space under its badge/title/text. `max-height` keeps
   that letterboxing from growing unbounded on very wide rows; `min-height`
   keeps the portrait shot legible on mobile, where cards stack in a single
   column and nothing stretches them against each other. */
.state-card__frame {
  flex: 1 1 auto;
  min-height: 190px;
  max-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.state-card__frame img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.state-card__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.state-card__text { color: var(--text-muted); }
.state-card__button {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-pill);
  font-weight: 600;
}

/* Sicher — cash out available: green means "can take it", nothing else.
   No drawn state-card__button here on purpose: the real "Auszahlen €7.52"
   button is already visible in the screenshot above, a second painted pill
   underneath it would just contradict/duplicate the real UI. */
.state-card--safe { border-color: var(--safe); }
.state-card--safe .state-card__badge { background: rgba(90, 158, 74, 0.15); color: var(--safe); }

/* Gefahr — cash out blocked: muted orange, never green, never "success"
   orange. Same reasoning as .state-card--safe above — the greyed-out real
   button is already in the screenshot. */
.state-card--danger { border-color: var(--danger); }
.state-card--danger .state-card__badge { background: rgba(199, 91, 42, 0.15); color: var(--danger); }

/* Loss — round ended before cash out: neutral, not reusing safe/danger
   tokens. This is the one state without a screenshot (see states.note in
   i18n — no capture exists because the widget disappears with the round),
   so it keeps the original drawn badge/button treatment as a plain text
   card, not a fake screenshot. */
.state-card--loss { border-color: var(--border); }
.state-card--loss .state-card__badge { background: var(--surface-2); color: var(--text-muted); }
.state-card--loss .state-card__button { background: var(--surface-2); color: var(--text-dim); }

/* Third state, no screenshot available (see comment above) — sits as its
   own full-width strip below the two-up screenshot pair instead of a third
   grid column, so it never gets stretched to chase a photo's height, and
   the two screenshot cards never get stretched to chase empty space. */
.state-card--note {
  margin-top: var(--space-4);
}

/* ---------- Comparison table → cards on mobile (same <table>, no duplication) ---------- */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
}
.compare-table th, .compare-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  /* top, not the browser default (middle): a 1-line cell next to a 3-line
     cell in the same row must not look shifted down to "center" against it */
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  /* long unbroken compound words (de/fi) must break inside a cell instead
     of forcing the table/card wider than the viewport */
  overflow-wrap: anywhere;
}
.compare-table thead th {
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  white-space: nowrap;
}
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table tbody tr:hover { background: var(--surface); }

/* Mobile card mode: thead visually hidden (not display:none, stays for a11y/SEO), rows become cards */
.compare-table--cards thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.compare-table--cards tr {
  display: block;
  margin: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-2) var(--space-4);
}
.compare-table--cards tbody tr:hover { background: none; }
.compare-table--cards td {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  border: 0;
  padding: var(--space-2) 0;
  text-align: right;
  min-width: 0;
}
.compare-table--cards td::before {
  content: attr(data-label);
  font-weight: 600;
  color: var(--text-muted);
  text-align: left;
  flex-shrink: 0;
  overflow-wrap: anywhere;
  max-width: 45%;
}

/* ---------- Article body (rendered from markdown) ---------- */
/* Long unbroken compound words (de/fi especially — "Auszahlen-Strategie",
   "Satunnaislukugeneraattori") must be able to break inside prose and inside
   table cells, otherwise a single word overflows the container at 320px. */
/* Readable-width column (80ch, resolved against .article's own inherited
   body font-size) centered inside the wider .container, so the text
   doesn't hug the left edge and leave an empty third of the viewport on
   the right on wide screens. The measure lives on .article itself, once —
   NOT on each child — so headings, paragraphs, lists and the table wrapper
   all share exactly the same box and line up on one grid. (Putting 80ch on
   an h2 directly is a no-op: "ch" resolves against THAT element's own
   font-size, ~44px at desktop h2 sizes, so 80ch there is ~1800px and never
   constrains anything — this bit us once, don't reintroduce it.) */
.article {
  max-width: 80ch;
  margin-inline: auto;
}
.article :is(h2, h3, p, ul, ol, blockquote) {
  overflow-wrap: anywhere;
}
.article h2, .article h3 {
  margin-top: var(--space-12);
}
.article h2:first-child, .article h3:first-child {
  margin-top: 0;
}

/* Anchor-scroll offset for the sticky header: applies to every top-level
   <section id="..."> in <main> (nav links to #calculator/#states/#article/
   #faq/#cta), to #main itself (the skip-to-content link in the body and
   the CTA button both link to "#main" — confirmed by measurement that
   native fragment navigation lands it flush under the header, same bug
   class as the sections), AND to in-article headings (markdown ships real
   #anchor links to h2/h3, e.g. "#corners-or-goals-choosing-your-trigger").
   Without this, position:sticky .site-header + html{scroll-behavior:smooth}
   lands the target underneath the header. Value: see --scroll-offset near
   the top of this file. */
main > section[id],
#main,
.article h2,
.article h3 {
  scroll-margin-top: var(--scroll-offset);
}
.article p, .article ul, .article ol {
  color: var(--text-muted);
}
.article ul, .article ol {
  /* margin-block only (not the `margin` shorthand): a shorthand here would
     reset margin-left/right to 0 and silently undo the margin-inline:auto
     centering set above, since this rule has equal specificity and comes
     later in source order. */
  margin-block: 0 var(--space-4);
  padding-left: var(--space-6);
}
.article li {
  margin-bottom: var(--space-2);
}
.article li:last-child {
  margin-bottom: 0;
}
.article a {
  overflow-wrap: anywhere;
}
.article strong {
  color: var(--text);
}
.article hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-8) 0;
}
/* Tables inside the article reuse .table-wrap/.compare-table--cards
   (build.js applies the same classes), so the mobile card behaviour and the
   overflow-wrap safety net defined in the comparison-table rules above
   apply unchanged — this only adds article-specific vertical spacing. */
.article .table-wrap {
  /* .article itself is already the 80ch measure (see above), so the table
     wrapper just fills that box like every other child — no separate
     max-width/centering needed here. overflow-x:auto (inherited from
     .table-wrap) still protects narrow viewports if the table's own min
     content is ever wider than the column. */
  margin-bottom: var(--space-6);
}

/* Wide context screenshot (whole live-match page, widget in the right
   column) — appended after the rendered markdown, inside .article, so it
   inherits the same 80ch column instead of needing its own width rule.
   Plain width:100%/height:auto (no object-fit frame): this is a single
   full-bleed image, not a pair that needs height-matching. */
.article-figure {
  margin-top: var(--space-8);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
}
.article-figure img {
  display: block;
  width: 100%;
  height: auto;
}
.article-figure figcaption {
  padding: var(--space-4) var(--space-6);
  color: var(--text-muted);
  font-size: 0.9375rem;
}

/* ---------- FAQ (native <details>, no JS) ---------- */
.faq-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-4) var(--space-6);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  color: var(--accent);
  font-size: 1.25rem;
  line-height: 1;
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item__body {
  padding: 0 var(--space-6) var(--space-4);
  color: var(--text-muted);
}

/* ---------- CTA block ---------- */
.cta-block {
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-12) var(--space-6);
}
.cta-block__text {
  color: var(--text-muted);
  max-width: 60ch;
  margin-inline: auto;
}

/* ---------- Payout calculator (vanilla JS, no libraries) ---------- */
.calculator {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
.calculator__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.calculator__field label {
  color: var(--text-muted);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.calculator__input {
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
}
.calculator__input:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 2px;
  border-color: var(--cta);
}
.calculator__result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.calculator__result-label {
  color: var(--text-muted);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.calculator__result-value {
  font-size: var(--fs-number);
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ---------- Responsible gambling notice ---------- */
/* Regulatory content, not a warning — calm styling, not a red alert banner.
   Deliberately does NOT inherit .site-footer's --text-dim/0.875rem: this is
   not "small grey print", it has to read as its own block. */
.responsible-gambling {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--border);
}
.responsible-gambling__badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  color: var(--accent);
  font-weight: 700;
  font-size: 1rem;
}
.responsible-gambling__body {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.responsible-gambling__text {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
}
.responsible-gambling__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.responsible-gambling__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}
.responsible-gambling__link:hover,
.responsible-gambling__link:focus-visible {
  border-color: var(--accent);
  text-decoration: none;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding-block: var(--space-8);
  color: var(--text-dim);
  font-size: 0.875rem;
}
/* Footer repeats the wordmark at a size that fits the small-print footer
   line, not the header's 1.25rem. */
.site-footer__brand .brand__mark { font-size: 1rem; }