/* nc-components.css — v2, 4 Aug 2026 design layer
   (audit: docs/design/AUDIT-2026-08.md · spec: docs/design/REVIEW-PAGE-SPEC-2026-08.md
    merged: docs/design/manus/newcasino-design-system.css — logo tile, score badge,
    facts grid, table brand cell. One stylesheet, no 7th file.) */

/* ==========================================================================
   NewCasino.ai — components.css  (v1, Aug 2026)
   One class = one look. Replaces ad-hoc inline styles in post content.
   Brand locked to existing palette: teal #0F6E56, amber #F59E0B, ink #1A1A1A.
   ========================================================================== */

:root {
  /* Consolidated tokens (same hexes already on site — no rebrand) */
  --nc-teal:       #0F6E56;
  --nc-teal-dark:  #0A5040;   /* the ONLY teal hover from now on */
  --nc-teal-tint:  #E1F5EE;
  --nc-amber:      #F59E0B;   /* the ONLY conversion accent */
  --nc-amber-dark: #D97706;
  --nc-amber-tint: #FEF3C7;
  --nc-ink:        #1A1A1A;
  --nc-muted:      #444444;   /* secondary text — 9.7:1 */
  --nc-faint:      #595959;   /* smallest legal text — 7:1; replaces #777/#888/#999/#aaa */
  --nc-success:    #15803D;   /* text-safe green (#22C55E stays for dots/fills only) */
  --nc-danger:     #B91C1C;   /* text-safe red (replaces #ff0000) */
  --nc-border:     #E0E0DC;   /* the ONLY hairline (retire #e2e2e2/#e5e7eb/#e8f5f0) */
  --nc-r-sm: 6px;  --nc-r-md: 10px;  --nc-r-lg: 16px;
  --nc-shadow-1: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
}

/* ── .nc-btn — the ONLY button. 3 variants, 2 sizes. ─────────────────────
   --claim  = affiliate/money CTA (amber + ink, matches .btn-hero & sticky bar)
   --primary= internal action (teal)
   --ghost  = secondary ("Read review")                                      */
.nc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 48px; padding: .75rem 1.4rem;
  border: 0; border-radius: 8px; cursor: pointer;
  font-weight: 700; font-size: 1rem; line-height: 1.2; text-align: center;
  text-decoration: none !important;
  transition: filter .15s ease, transform .15s ease;
}
.nc-btn:hover, .nc-btn:focus { filter: brightness(.95); transform: translateY(-1px); }
.nc-btn:focus-visible { outline: 3px solid rgba(15,110,86,.4); outline-offset: 2px; }
.nc-btn--claim   { background: var(--nc-amber); color: var(--nc-ink); }
.nc-btn--primary { background: var(--nc-teal);  color: #fff; }
.nc-btn--ghost   { background: #fff; color: var(--nc-teal); border: 1px solid var(--nc-teal); font-weight: 600; }
.nc-btn--sm      { min-height: 40px; padding: .5rem .95rem; font-size: .88rem; }
.nc-btn--block   { display: flex; width: 100%; }

/* ── .nc-chip — status/metadata pills ──────────────────────────────────── */
.nc-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .6rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600; line-height: 1.5; white-space: nowrap;
  background: var(--nc-teal-tint); color: var(--nc-teal);
}
.nc-chip--licence { background: #DBEAFE; color: #1E40AF;               /* "MGA/B2C/394/2017" */
                    font-variant-numeric: tabular-nums; }
.nc-chip--warn    { background: var(--nc-amber-tint); color: #92400E;  /* "Tax applies in NO" */ }
.nc-chip--success { background: #DCFCE7; color: var(--nc-success);     /* "No-deposit spins" */ }
.nc-chip--danger  { background: #FEE2E2; color: var(--nc-danger);      /* "Licence lapsed" */ }
.nc-chip--neutral { background: #EFEFEC; color: var(--nc-muted);       /* "Checked 3 Aug 2026" */ }
.nc-chip-row { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 .75rem; }

/* ── .nc-card — toplist / offer card (replaces inline top-5 blocks) ────── */
.nc-card {
  background: #fff; border: 1px solid var(--nc-border);
  border-radius: var(--nc-r-md); padding: 1.1rem 1.25rem; margin: 0 0 1rem;
  box-shadow: var(--nc-shadow-1);
}
.nc-card--pick { border: 2px solid var(--nc-teal); position: relative; }
.nc-card--pick::before {
  content: attr(data-flag);                    /* e.g. "Top Pick" */
  position: absolute; top: -11px; left: 14px;
  background: var(--nc-teal); color: #fff;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .15rem .6rem; border-radius: 999px;
}
.nc-card__head  { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.nc-card__rank  { font-weight: 800; color: var(--nc-teal); font-size: 1.05rem; }
.nc-card__title { font-weight: 800; font-size: 1.1rem; color: var(--nc-ink); margin: 0; }
.nc-card__offer { font-weight: 700; color: var(--nc-ink); margin: .35rem 0 .25rem; font-size: 1rem; }
.nc-card__body  { color: var(--nc-muted); font-size: .95rem; line-height: 1.6; margin: 0 0 .5rem; }
.nc-card__actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: .6rem; }
.nc-card__legal { font-size: .78rem; color: var(--nc-faint); margin-top: .5rem; }
.nc-card__terms { margin-top: .5rem; font-size: .85rem; }          /* <details> T&C expander */
.nc-card__terms summary { cursor: pointer; color: var(--nc-teal); font-weight: 600; }
.nc-card__terms[open] summary { margin-bottom: .35rem; }
@media (max-width: 640px) {
  .nc-card__actions .nc-btn--claim { flex: 1 1 100%; }             /* money CTA full-width on mobile */
}

/* ── .nc-table — data table (replaces inline-styled cells) ─────────────── */
.nc-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: #fff; border: 1px solid var(--nc-border);
  border-radius: var(--nc-r-md); margin: 1.25rem 0;
}
.nc-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 640px; }
.nc-table thead th {
  background: var(--nc-teal); color: #fff; text-align: left;
  font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  padding: .75rem .9rem; white-space: nowrap;
}
.nc-table td { padding: .7rem .9rem; border-top: 1px solid #ECECE8; vertical-align: top; color: var(--nc-ink); }
.nc-table tbody tr:nth-child(even) { background: #FAFAF8; }
.nc-table td:first-child { font-weight: 600; }
.nc-table .nc-chip { font-size: .72rem; }

/* ── .nc-callout — info/warning/danger boxes (tax notes, RG, alerts) ───── */
.nc-callout {
  border: 1px solid var(--nc-border); border-left-width: 4px;
  border-radius: var(--nc-r-sm); padding: .9rem 1.1rem; margin: 1.25rem 0;
  font-size: .95rem; line-height: 1.65; background: #FAFAF8;
}
.nc-callout--info   { border-left-color: var(--nc-teal);   background: #F0F7F4; }
.nc-callout--warn   { border-left-color: var(--nc-amber);  background: #FFF8E1; }
.nc-callout--danger { border-left-color: var(--nc-danger); background: #FEF2F2; }
.nc-callout__title  { display: block; font-weight: 700; margin-bottom: .25rem; }

/* ── .nc-pros-cons — entry-content twin of the review pros/cons ────────── */
.nc-pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.25rem 0; }
@media (max-width: 640px) { .nc-pros-cons { grid-template-columns: 1fr; } }
.nc-pros, .nc-cons {
  background: #fff; border: 1px solid var(--nc-border);
  border-radius: var(--nc-r-md); padding: 1rem 1.25rem;
}
.nc-pros { border-top: 3px solid #22C55E; }
.nc-cons { border-top: 3px solid #DC2626; }
.nc-pros h3, .nc-cons h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 .5rem; }
.nc-pros h3 { color: var(--nc-success); }
.nc-cons h3 { color: var(--nc-danger); }
.nc-pros ul, .nc-cons ul { list-style: none; margin: 0; padding: 0; }
.nc-pros li, .nc-cons li { position: relative; padding: .3rem 0 .3rem 1.4rem; font-size: .92rem; }
.nc-pros li::before { content: '✓'; position: absolute; left: 0; color: var(--nc-success); font-weight: 700; }
.nc-cons li::before { content: '✗'; position: absolute; left: 0; color: var(--nc-danger);  font-weight: 700; }

/* ── .nc-toc — jump-nav chip row (money pages + reviews) ───────────────── */
.nc-toc { margin: 1rem 0 1.5rem; }
.nc-toc__label { font-size: .78rem; font-weight: 700; text-transform: uppercase;
                 letter-spacing: .06em; color: var(--nc-faint); margin: 0 0 .4rem; }
.nc-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.nc-toc a {
  display: inline-block; padding: .4rem .8rem;
  background: #fff; border: 1px solid var(--nc-border); border-radius: 999px;
  font-size: .85rem; font-weight: 600; color: var(--nc-teal); text-decoration: none;
}
.nc-toc a:hover { border-color: var(--nc-teal); background: var(--nc-teal-tint); text-decoration: none; }
@media (max-width: 767px) {           /* horizontal scroll strip on mobile */
  .nc-toc ul { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
               padding-bottom: .25rem; scrollbar-width: none; }
  .nc-toc a { white-space: nowrap; }
}

/* ── Legacy aliases — make old markup inherit the new system without
      touching templates. Ship, verify, then migrate markup at leisure. ── */
a.nc-table-cta, .nc-sticky-cta__btn { background: var(--nc-amber); color: var(--nc-ink); }
.btn-accent, .casino-card-cta,
.quick-pick-cta { background: var(--nc-amber) !important;      /* beats design-upgrade gradients */
                  background-image: none !important; color: var(--nc-ink) !important; }


/* ==========================================================================
   Long-form content typography — .entry-content + .casino-review-content
   Base 17px, measure ~72ch, real heading scale, lists restored.
   ========================================================================== */
.entry-content, .casino-review-content {
  font-size: 1.0625rem;            /* 17px — Inter reads small at 16 */
  line-height: 1.7;
  color: var(--nc-ink);
}

/* Measure: flow text capped at ~72ch (≈640px). Tables, cards, embeds stay
   full column width — mixed-width is the Casino.Guru pattern. */
.entry-content > p,        .casino-review-content > p,
.entry-content > ul,       .casino-review-content > ul,
.entry-content > ol,       .casino-review-content > ol,
.entry-content > h2,       .casino-review-content > h2,
.entry-content > h3,       .casino-review-content > h3,
.entry-content > h4,
.entry-content > blockquote, .casino-review-content > blockquote {
  max-width: 72ch;
}

/* Heading scale (h1 2.1rem → h2 1.55 → h3 1.25 → h4 1.05, weights down-ladder) */
.page-header h1 { font-size: clamp(1.7rem, 3.5vw, 2.1rem); line-height: 1.2;
                  letter-spacing: -.015em; max-width: 28ch; }
.entry-content h2, .casino-review-content h2 {
  font-size: 1.55rem; line-height: 1.25; font-weight: 800; letter-spacing: -.01em;
  margin: 2.5rem 0 .75rem; color: var(--nc-ink);
}
.entry-content h3, .casino-review-content h3 {
  font-size: 1.25rem; line-height: 1.3; font-weight: 700; margin: 1.75rem 0 .5rem;
}
.entry-content h4 { font-size: 1.05rem; font-weight: 700; margin: 1.5rem 0 .5rem; }
/* keep review h2 keyline, one brand color (kills the gold variant) */
.casino-review-content h2 { border-left: 4px solid var(--nc-teal); padding-left: .75rem; }
/* jump-link landing offset under the 64px sticky header */
.entry-content [id], .casino-review-content [id] { scroll-margin-top: 84px; }

/* Lists: restore bullets killed by the global reset (main.css:40) */
.entry-content ul, .entry-content ol { margin: 0 0 1.1rem; padding-left: 1.35rem; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin-bottom: .45rem; }
.entry-content li::marker { color: var(--nc-teal); }
.entry-content li > ul, .entry-content li > ol { margin: .45rem 0 0; }

/* Paragraph rhythm + lead */
.entry-content p, .casino-review-content p { margin: 0 0 1.1rem; }
.entry-content > p:first-of-type { font-size: 1.125rem; color: var(--nc-muted); }

/* Content tables default to the .nc-table look (no class needed in posts) */
.entry-content table, .casino-review-content table {
  width: 100%; border-collapse: collapse; font-size: .92rem;
  background: #fff; border: 1px solid var(--nc-border); border-radius: var(--nc-r-md);
  margin: 1.25rem 0;
}
.entry-content table thead th, .casino-review-content table thead th {
  background: var(--nc-teal); color: #fff; text-align: left; padding: .7rem .9rem;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
}
.entry-content table td, .casino-review-content table td {
  padding: .65rem .9rem; border-top: 1px solid #ECECE8; vertical-align: top;
}
.entry-content table tbody tr:nth-child(even) { background: #FAFAF8; }
@media (max-width: 767px) {
  .entry-content table, .casino-review-content table {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
}

/* Blockquote + small print */
.entry-content blockquote {
  border-left: 4px solid var(--nc-teal); background: var(--nc-teal-tint);
  padding: 1rem 1.25rem; border-radius: 0 var(--nc-r-sm) var(--nc-r-sm) 0;
  margin: 1.25rem 0; color: var(--nc-muted);
}
.nc-smallprint, .entry-content small { font-size: .8rem; color: var(--nc-faint); line-height: 1.6; }

/* Review page container (replaces inline padding at single-casino_review.php:54) */
.nc-review-page { padding: 1.5rem 0 3rem; }

/* ==========================================================================
   v2 additions — review template system + logo tiles (merged from manus pack)
   ========================================================================== */

/* ── .nc-logo — THE logo tile. Fixed box + object-fit:contain: any aspect
      ratio aligns. Default dark surface; data-surface="light" for dark-ink
      brands (stake, betsson, arcticbet, betsolid, hitnspin, retrobet,
      jet4bet, fieryplay). ─────────────────────────────────────────────── */
.nc-logo {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 120px; height: 60px;
  padding: 8px 12px;
  border-radius: var(--nc-r-md);
  background: #141C24;                 /* THE dark tile surface */
  overflow: hidden;
}
.nc-logo img {
  display: block; max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
}
.nc-logo[data-surface="light"] {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--nc-border);
}
.nc-logo--sm   { width: 88px;  height: 44px; border-radius: var(--nc-r-sm); padding: 5px 8px; }
.nc-logo--lg   { width: 160px; height: 80px; }
.nc-logo--hero { width: 220px; height: 110px; border-radius: var(--nc-r-lg); }
@media (max-width: 640px) { .nc-logo--hero { width: 180px; height: 90px; } }

/* ── .nc-score — numeric rating badge (replaces bare star strings) ─────── */
.nc-score {
  display: inline-flex; align-items: baseline; gap: 2px;
  padding: 4px 8px; border-radius: var(--nc-r-sm);
  background: var(--nc-teal-tint); color: var(--nc-teal-dark);
  font-weight: 700; font-size: 1.05rem; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.nc-score small { font-size: .72rem; font-weight: 600; opacity: .65; }
.nc-score--hero { font-size: 1.5rem; padding: 8px 14px; border-radius: var(--nc-r-md); }

/* ── Review hero v2 (extends .casino-hero from main.css) ───────────────── */
.casino-hero { align-items: start; }
.casino-hero .nc-logo--hero { margin-top: .25rem; }
.casino-hero__byline { display: flex; align-items: center; gap: .5rem; color: var(--nc-muted); font-size: .9rem; margin: .25rem 0 .5rem; }
.casino-hero__byline .byline-avatar { border-radius: 50%; }
.casino-hero__bonus { margin: .6rem 0 0; font-weight: 700; color: var(--nc-teal); font-size: 1.05rem; }
.casino-hero__chips { margin: .6rem 0 0; }
@media (max-width: 768px) {
  .casino-hero .nc-logo--hero { margin: 0 auto .5rem; }
  .casino-hero__byline { justify-content: center; }
  .casino-hero__chips { justify-content: center; }
}

/* ── Sticky TOC variant (S2) ───────────────────────────────────────────── */
.nc-toc--sticky {
  position: sticky; top: 0; z-index: 40;
  background: rgba(245,245,243,.96);
  backdrop-filter: blur(6px);
  margin: 0 0 1.25rem; padding: .5rem 0;
  border-bottom: 1px solid var(--nc-border);
}
.nc-toc--sticky ul { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
                     scrollbar-width: none; padding-bottom: 2px; }
.nc-toc--sticky ul::-webkit-scrollbar { display: none; }
.nc-toc--sticky a { white-space: nowrap; background: #fff; }
.nc-toc a.is-active { border-color: var(--nc-teal); background: var(--nc-teal-tint); }

/* ── .nc-facts — fact grid card (S3, replaces summary-table look) ──────── */
.nc-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .75rem 1rem; margin: 0;
}
@media (min-width: 720px) { .nc-facts { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.nc-facts__item { border: 1px solid var(--nc-border); border-radius: var(--nc-r-sm);
                  padding: .6rem .75rem; background: #FAFAF8; min-width: 0; }
.nc-facts__item dt { font-size: .72rem; font-weight: 700; text-transform: uppercase;
                     letter-spacing: .05em; color: var(--nc-faint); margin: 0 0 .2rem; }
.nc-facts__item dd { margin: 0; font-size: .95rem; font-weight: 600; color: var(--nc-ink);
                     overflow-wrap: anywhere; }

/* ── .nc-kv — key/value rows inside cards (test log, bonus terms) ──────── */
.nc-kv { width: 100%; border-collapse: collapse; font-size: .92rem; line-height: 1.5; }
.nc-kv th[scope="row"] { text-align: left; padding: .5rem .6rem .5rem 0; vertical-align: top;
                          color: var(--nc-muted); font-weight: 600; width: 42%; }
.nc-kv td { padding: .5rem 0; vertical-align: top; color: var(--nc-ink); }
.nc-kv tr + tr th, .nc-kv tr + tr td { border-top: 1px solid #ECECE8; }

/* ── Card accents (S5 test log, S11 verdict) ───────────────────────────── */
.nc-card--tested  { border-left: 4px solid #7C3AED; background: #FBFAFF; }
.nc-card--desk    { border-left: 4px solid var(--nc-teal); background: #F7FBF9; }
.nc-card--accent  { border: 1px solid var(--nc-teal); border-left-width: 4px; }
.nc-card--muted   { background: #FAFAF8; }
.nc-card__eyebrow-row { display: flex; align-items: center; justify-content: space-between;
                        gap: .75rem; flex-wrap: wrap; margin: 0 0 .6rem; }
.nc-card__eyebrow { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
                    font-weight: 700; }
.nc-card--tested .nc-card__eyebrow { color: #7C3AED; }
.nc-card--desk   .nc-card__eyebrow { color: var(--nc-teal); }
.nc-card__meta-link { font-size: .85rem; font-weight: 600; color: var(--nc-teal); white-space: nowrap; }
.nc-card > h2:first-child, .nc-card > h2 { margin-top: 0; }
.casino-review-content .nc-card h2, .nc-card h2 { border-left: 0; padding-left: 0; font-size: 1.2rem; margin: 0 0 .75rem; }

/* ── Related reviews grid (S14) ────────────────────────────────────────── */
.nc-related { background: #F5F5F3; border-radius: var(--nc-r-lg); padding: 1.75rem 1.25rem; margin: 2.5rem 0 1.5rem; }
.nc-related > h2 { margin: 0 0 .5rem; font-size: 1.35rem; color: var(--nc-ink); }
.nc-related > p  { color: var(--nc-muted); margin: 0 0 1.25rem; font-size: .95rem; }
.nc-related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }
.nc-related__card {
  display: block; background: #fff; border: 1px solid var(--nc-border);
  border-radius: var(--nc-r-md); padding: 1rem; text-decoration: none; color: var(--nc-ink);
  box-shadow: var(--nc-shadow-1); transition: transform .15s ease, box-shadow .15s ease;
}
.nc-related__card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(17,24,32,.10); text-decoration: none; }
.nc-related__card .nc-logo { margin-bottom: .75rem; }
.nc-related__name { font-weight: 700; font-size: 1rem; margin: 0 0 .3rem; color: var(--nc-teal); }
.nc-related__meta { font-size: .82rem; color: var(--nc-muted); margin: 0; }
.nc-related__meta .nc-score { font-size: .85rem; padding: 2px 6px; margin-right: .35rem; }

/* ── .nc-cards-row — responsive row of small cards (quick picks etc.) ──── */
.nc-cards-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
                gap: 1rem; margin: .75rem 0 1.5rem; }
.nc-cards-row .nc-card { margin: 0; }
.nc-kicker { margin: 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
             color: var(--nc-teal); font-weight: 700; }

/* ── Card tile head — logo band atop grid cards (homepage, archives) ───── */
.nc-card-tilehead {
  display: grid; place-items: center;
  padding: 1.4rem 1rem; background: #F5F5F3;
  border-bottom: 1px solid var(--nc-border);
}
.nc-card-tilehead:hover { text-decoration: none; }

/* ── Comparison-table brand cell + mobile sticky first column ──────────── */
.nc-table__brand { display: flex; align-items: center; gap: .6rem; min-width: 180px; }
.nc-table__brand .nc-logo--sm { flex: 0 0 auto; }
.nc-table__brand a { font-weight: 700; color: var(--nc-teal); text-decoration: none; }
@media (max-width: 768px) {
  .nc-table thead th:first-child,
  .nc-table tbody td:first-child { position: sticky; left: 0; background: #fff; z-index: 1;
                                   box-shadow: 1px 0 0 var(--nc-border); }
  .nc-table thead th:first-child { background: var(--nc-teal); z-index: 2; }
  .nc-table tbody tr:nth-child(even) td:first-child { background: #FAFAF8; }
}

/* ── Stated-vs-tested payout table (S9) ────────────────────────────────── */
.nc-table--versus { min-width: 0; }
.nc-table--versus td.is-ok { color: var(--nc-success); font-weight: 700; }

/* ── Payment / licence icon rows (replaces 💳⚡🔒 emoji) ─────────────────── */
.nc-pays { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.nc-pays img { height: 20px; width: auto; display: block; }
.nc-yes, .nc-no { display: inline-grid; place-items: center; width: 20px; height: 20px;
                  border-radius: 50%; font-size: 11px; font-weight: 800; }
.nc-yes { background: #DCFCE7; color: var(--nc-success); }
.nc-no  { background: #FEE2E2; color: var(--nc-danger); }

/* ── FAQ as cards (S12) ────────────────────────────────────────────────── */
.casino-faq .faq-item {
  background: #fff; border: 1px solid var(--nc-border); border-radius: var(--nc-r-md);
  margin-bottom: .6rem; overflow: hidden; box-shadow: var(--nc-shadow-1);
}
.casino-faq .faq-question {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: .9rem 1.1rem; font-size: .98rem; font-weight: 600; color: var(--nc-ink);
  display: flex; justify-content: space-between; align-items: center; gap: .75rem;
}
.casino-faq .faq-question::after { content: '+'; font-size: 1.2rem; font-weight: 700; color: var(--nc-teal); }
.casino-faq .faq-question[aria-expanded="true"]::after { content: '\2212'; }
.casino-faq .faq-answer { padding: 0 1.1rem .9rem; color: var(--nc-muted); font-size: .95rem; }

/* ── Contrast pass (audit fix #8): legacy small-print recipes → tokens ── */
.casino-hero__cta small, .casino-card-legal, .nc-card__legal,
.homepage-comparison__disclosure { color: var(--nc-faint); }
.responsible-gambling { border-left: 4px solid var(--nc-amber); background: #FFF8E1;
                        border-radius: var(--nc-r-sm); }

/* ── Author bio card polish ────────────────────────────────────────────── */
.author-bio { background: #FAFAF8; border: 1px solid var(--nc-border); border-radius: var(--nc-r-md); }

/* ── Cookie banner: compact on small screens (5 Aug 2026 — it filled ~40% of a 390px
   viewport; Manus follow-up item 13). Tighter type, inline actions, capped height. ── */
@media (max-width: 600px) {
    .nc-cookie-banner__inner { padding: 0.65rem 0.9rem; gap: 0.5rem; }
    .nc-cookie-banner__text p { font-size: 0.78rem; line-height: 1.45; margin: 0 0 0.25rem; }
    .nc-cookie-banner__links { font-size: 0.72rem; }
    .nc-cookie-banner__actions { display: flex; gap: 0.5rem; }
    .nc-cookie-btn { padding: 0.5rem 0.8rem; font-size: 0.8rem; flex: 1; }
}