/* ============================================================
   Slot Lion Guide (slot-lion.com.se) - site overrides
   Serif display face over a Tahoma text column, gold rules under
   the H2s, turquoise numbered chips, and figure callouts framed in
   the accent colour. Nothing here matches the tracking heavy
   Lucida treatment on towercasino.com.se or the Trebuchet with
   Verdana pairing on drellabet.casino.
   ============================================================ */
:root {
  --font-display: "DejaVu Serif", Georgia, "Times New Roman", serif;
  --font-body: Tahoma, "DejaVu Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "DejaVu Sans Mono", "Consolas", "Courier New", monospace;
}

body { letter-spacing: 0; }

/* Headings: serif, tight, with a short gold rule underneath */
.content-section h2 {
  font-family: var(--font-display);
  letter-spacing: -0.008em;
  line-height: 1.22;
  text-transform: none;
  padding-bottom: 12px;
  margin-bottom: 24px;
  position: relative;
  border-bottom: 1px solid var(--color-border);
}
.content-section h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 68px;
  height: 3px;
  background: var(--color-cta);
  border-radius: 2px;
}
.content-section h3 {
  font-family: var(--font-display);
  color: var(--color-accent);
  letter-spacing: 0;
}
.content-section h4 {
  color: var(--color-text);
  letter-spacing: 0.01em;
}

/* Step chip the content sets as <span class="step">Steg 3</span> */
.step {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66em;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: rgba(23, 232, 214, 0.1);
  border: 1px solid var(--color-accent-dark);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 10px;
}

/* Two column key figure rows */
.figure-rows {
  display: grid;
  gap: 0;
  margin: 22px 0 26px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-surface-alt);
}
.figure-row {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 18px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
}
.figure-row:last-child { border-bottom: 0; }
.figure-row dt,
.figure-row .fr-term {
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--color-text);
  margin: 0;
}
.figure-row dd,
.figure-row .fr-desc {
  margin: 0;
  color: var(--color-text-muted);
}
@media (max-width: 720px) {
  .figure-row { grid-template-columns: 1fr; gap: 6px; }
}

/* Callout for the conditions worth doing arithmetic on */
.money-note {
  border: 1px solid var(--color-accent-dark);
  border-left: 4px solid var(--color-accent);
  background: var(--color-surface-2);
  padding: 16px 20px;
  margin: 24px 0;
  border-radius: 0 12px 12px 0;
}
.money-note p:last-child { margin-bottom: 0; }
.money-note strong { color: var(--color-text); }

/* Tables */
.content-section table th {
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
/* every cell wraps: long conditions must never push a table sideways */
.content-section table td,
.content-section table th {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Supplied artwork sits beside the text column */
.section-illus--transparent { max-width: 330px; }
@media (max-width: 900px) {
  .section-illus--transparent { max-width: 290px; }
}
.section-illus--compact { max-width: 230px; }
@media (max-width: 900px) {
  .section-illus--compact { max-width: 205px; }
}

/* FAQ blocks need air between the question and the answer */
.faq-item { margin-bottom: 18px; }
.faq-item h4 { margin-bottom: 8px; }
.faq-item p:last-child { margin-bottom: 0; }

/* ============================================================
   Stats band. The shared stylesheet only targets .stats-bar__grid
   while home.php emits .stats-bar__inner, so the six figures fall
   into one column unless we lay them out here.
   ============================================================ */
.stats-bar { background: var(--color-surface-alt); }
.stats-bar__inner {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
}
.stats-bar__inner .stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0 1.25rem;
  border-left: 1px solid var(--color-border);
}
.stats-bar__inner .stat:first-child {
  padding-left: 0;
  border-left: 0;
}
.stats-bar__inner .stat__value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.stats-bar__inner .stat__label {
  font-size: 0.6875rem;
  line-height: 1.45;
  letter-spacing: 0.08em;
  margin-top: 0;
}
@media (max-width: 1100px) {
  .stats-bar__inner { grid-template-columns: repeat(3, 1fr); row-gap: 1.75rem; }
  .stats-bar__inner .stat:nth-child(3n+1) { padding-left: 0; border-left: 0; }
}
@media (max-width: 600px) {
  .stats-bar__inner { grid-template-columns: repeat(2, 1fr); row-gap: 1.5rem; }
  .stats-bar__inner .stat { padding: 0 0.85rem; }
  .stats-bar__inner .stat:nth-child(3n+1) { padding-left: 0.85rem; border-left: 1px solid var(--color-border); }
  .stats-bar__inner .stat:nth-child(2n+1) { padding-left: 0; border-left: 0; }
  .stats-bar__inner .stat__value { font-size: 1.25rem; }
}

@media (max-width: 700px) {
  .content-section table { font-size: 0.8125rem; }
  .content-section table th,
  .content-section table td { padding: 0.55rem 0.5rem; }
}

/* wide tables scroll sideways on narrow screens instead of pushing
   their last columns past the viewport edge */
@media (max-width: 760px) {
  .content-section table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .content-section table thead,
  .content-section table tbody { display: table; width: 100%; min-width: 32rem; }
  .content-section table thead { table-layout: fixed; }
}

/* language flag chips */
.lang-flag--sv, .lang-flag--en { font-size: 1rem; line-height: 1; }