/*
Theme Name: Waypoint
Theme URI: https://newcasinoway.co.uk/
Author: NewCasinoWay
Author URI: https://newcasinoway.co.uk/
Description: Bespoke dossier-ledger theme for newcasinoway.co.uk — UK casino reviews and payout guides.
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: waypoint
*/

/* ---- self-hosted fonts ---- */
@font-face {
  font-family: 'Libre Franklin'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('assets/fonts/libre-franklin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Libre Franklin'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('assets/fonts/libre-franklin-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/fonts/instrument-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('assets/fonts/instrument-sans-600.woff2') format('woff2');
}

/* ---- tokens: page surface vs band surfaces kept strictly separate ---- */
:root {
  --paper: #faf9f6;
  --ink: #23222a;          /* 13.4:1 on paper */
  --muted: #5b5864;        /* 6.4:1 on paper */
  --hairline: #e1dfe6;
  --violet: #4c2a85;       /* 9.6:1 on paper */
  --violet-hot: #5d34a3;   /* links, 7.2:1 */
  --amber: #8a5a00;        /* rating figures, 5.5:1 */
  --tint: rgba(93, 52, 163, .08);
  --on-violet: #ffffff;
  /* band (footer, table heads, dossier panel head) — never reuse page tokens */
  --band-bg: #241640;
  --band-text: #efecf5;    /* 13.9:1 on band */
  --band-muted: #b8aed1;   /* 7.4:1 on band */
  /* weighted motion personality: deliberate, settled */
  --pace: 220ms;
  --ease: cubic-bezier(.33, .8, .4, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Instrument Sans', 'Segoe UI', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}
img { max-width: 100%; height: auto; }
.shell { max-width: 1120px; margin: 0 auto; padding: 0 22px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

::selection { background: var(--violet); color: var(--on-violet); }
:focus-visible { outline: 3px solid var(--violet-hot); outline-offset: 2px; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--band-bg); color: var(--band-text); padding: 10px 18px; z-index: 100; }
.skip-link:focus { left: 0; }

/* ---- type ---- */
h1, h2, h3, h4 {
  font-family: 'Libre Franklin', 'Segoe UI', Arial, sans-serif;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 1.5em 0 .5em;
}
h1 { font-size: clamp(1.65rem, 1.15rem + 1.9vw, 2.45rem); margin-top: .4em; }
h2 { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.7rem); font-weight: 700; }
h3 { font-size: 1.12rem; font-weight: 700; }
.kicker {
  font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); font-family: 'Instrument Sans', sans-serif;
}

/* ---- links: ledger-tint treatment (soft violet wash, no full invert) ---- */
a { color: var(--violet-hot); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.entry a, .flow a {
  font-weight: 600;
  transition: background-color var(--pace) var(--ease), color var(--pace) var(--ease);
  border-radius: 2px; padding: 0 .1em; margin: 0 -.1em;
}
.entry a:hover, .flow a:hover { background: var(--tint); color: var(--violet); }

.button, .go-cta {
  display: inline-block; background: var(--violet); color: var(--on-violet);
  font-weight: 600; font-size: .92rem; letter-spacing: .02em;
  padding: 11px 22px; border-radius: 3px; text-decoration: none; border: 0; cursor: pointer;
  transition: background-color var(--pace) var(--ease), transform var(--pace) var(--ease);
}
.button:hover, .go-cta:hover { background: var(--violet-hot); transform: translateY(-1px); }

/* Keep the CTA a CTA inside prose containers.
   `.cb-page-content a` (casino-betting.css) and `.entry a` above are descendant
   selectors (0,1,1) and therefore outrank the plain `.go-cta` class (0,1,0) — the
   button ended up with crimson text on its own crimson background (contrast 1:1,
   invisible) and lost its padding. These re-assert the component; keep the class
   in the selector so specificity stays ahead of any `<container> a` rule. */
.entry a.go-cta, .flow a.go-cta, .cb-page-content a.go-cta,
.entry a.button, .flow a.button, .cb-page-content a.button {
  color: var(--on-violet);
  padding: 11px 22px;
  margin: 0 6px 8px 0;
}
.entry a.go-cta:hover, .flow a.go-cta:hover, .cb-page-content a.go-cta:hover,
.entry a.button:hover, .flow a.button:hover, .cb-page-content a.button:hover {
  background: var(--violet-hot);
  color: var(--on-violet);
}

/* ---- header ---- */
.site-head { border-bottom: 2px solid var(--violet); background: var(--paper); }
.site-head .shell { display: flex; align-items: center; gap: 28px; min-height: 74px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.crest { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.crest img { width: 44px; height: 44px; display: block; }
.crest .wordmark { font-family: 'Libre Franklin', sans-serif; font-weight: 800; font-size: 1.22rem; color: var(--ink); letter-spacing: -0.01em; }
.crest .wordmark span { color: var(--violet); }
.site-nav { margin-left: auto; }
.site-nav ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; flex-wrap: wrap; }
.site-nav a {
  display: block; padding: 8px 12px; font-size: .92rem; font-weight: 600;
  color: var(--ink); text-decoration: none; border-radius: 3px;
  transition: background-color var(--pace) var(--ease), color var(--pace) var(--ease);
}
.site-nav a:hover, .site-nav .current-menu-item > a { background: var(--tint); color: var(--violet); }

/* ---- age strip ---- */
.age-strip {
  background: var(--band-bg); color: var(--band-text);
  font-size: .78rem; text-align: center; padding: 6px 14px;
}
.age-strip a { color: var(--band-text); font-weight: 600; }

/* ---- main flow ---- */
main.shell { display: block; padding-top: 26px; padding-bottom: 60px; }
.entry p, .flow p { margin: 0 0 1.1rem; }
.entry ul, .entry ol { margin: 0 0 1.1rem 1.35rem; }
.entry li { margin: .3rem 0; }
.entry h2 { padding-bottom: .3em; border-bottom: 1px solid var(--hairline); }
.crumbs { font-size: .8rem; color: var(--muted); margin: 0 0 .8rem; }
.crumbs a { color: var(--muted); }
.dateline { font-size: .82rem; color: var(--muted); margin: -.3rem 0 1.2rem; }

/* ---- the ledger: numbered operator rows ---- */
.ledger { border-top: 2px solid var(--ink); margin: 1.6rem 0 2.2rem; padding: 0; list-style: none; }
.ledger > li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1.35fr) minmax(0, 1fr) 150px;
  gap: 10px 18px; align-items: center;
  padding: 17px 10px; border-bottom: 1px solid var(--hairline);
  border-left: 3px solid transparent;
  transition: background-color var(--pace) var(--ease), border-color var(--pace) var(--ease);
}
.ledger > li:hover { background: var(--tint); border-left-color: var(--violet); }
.ledger .rank {
  font-family: 'Libre Franklin', sans-serif; font-weight: 800; font-size: 1.5rem;
  color: var(--violet); font-variant-numeric: tabular-nums; text-align: center;
}
.ledger .who .name { font-weight: 700; font-size: 1.05rem; display: block; }
.ledger .who .name a { color: var(--ink); text-decoration: none; }
.ledger .who .name a:hover { color: var(--violet); }
.ledger .who .lic { font-size: .78rem; color: var(--muted); display: block; margin-top: 2px; }
.ledger .deal { font-size: .9rem; }
.ledger .deal .terms { display: block; font-size: .76rem; color: var(--muted); margin-top: 2px; }
.ledger .act { text-align: right; }
.ledger .act .go-cta { padding: 9px 16px; font-size: .85rem; white-space: nowrap; }
.ledger .act .rg-line { display: block; font-size: .68rem; color: var(--muted); margin-top: 6px; }
@media (max-width: 720px) {
  .ledger > li { grid-template-columns: 40px minmax(0, 1fr); }
  .ledger .deal { grid-column: 2; }
  .ledger .act { grid-column: 2; text-align: left; }
}

/* ---- payout meter: signature moment ---- */
.meter { margin: 4px 0 2px; }
.meter .track {
  height: 9px; background: var(--hairline); border-radius: 2px; position: relative; overflow: hidden;
  background-image: repeating-linear-gradient(90deg, transparent 0 24px, var(--paper) 24px 25px);
}
.meter .fill { position: absolute; inset: 0 auto 0 0; width: var(--fill, 0%); background: var(--violet); border-radius: 2px 0 0 2px; }
.js .meter .fill { width: 0; transition: width 900ms var(--ease); }
.js .meter.shown .fill { width: var(--fill, 0%); }
.meter .cap { font-size: .74rem; color: var(--muted); display: flex; justify-content: space-between; margin-top: 3px; }
.meter .cap b { color: var(--amber); font-variant-numeric: tabular-nums; }

/* ---- dossier: review spec panel ---- */
.dossier { border: 1px solid var(--hairline); border-radius: 4px; overflow: hidden; margin: 1.4rem 0 2rem; }
.dossier .dossier-cap {
  background: var(--band-bg); color: var(--band-text);
  padding: 10px 18px; font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.dossier dl {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0; margin: 0; background: #fff;
}
.dossier dl > div { padding: 13px 18px; border-bottom: 1px solid var(--hairline); border-right: 1px solid var(--hairline); }
.dossier dt { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 3px; }
.dossier dd { margin: 0; font-weight: 600; font-size: .95rem; }
.dossier dd.hot { color: var(--amber); }

/* ---- status flag for closed brands ---- */
.status-flag {
  display: inline-block; font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--ink); color: var(--ink); border-radius: 2px; padding: 3px 9px; margin: 0 0 .8rem;
}
.status-flag.closed { border-color: #8c2f39; color: #8c2f39; }

/* ---- tables ---- */
.entry table, table.sheet { width: 100%; border-collapse: collapse; margin: 1.3rem 0; font-variant-numeric: tabular-nums; font-size: .93rem; }
.entry table th, table.sheet th {
  background: var(--band-bg); color: var(--band-text); text-align: left;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; padding: .55rem .75rem;
}
.entry table td, table.sheet td { padding: .55rem .75rem; border-bottom: 1px solid var(--hairline); }
.entry table tbody tr:hover td { background: var(--tint); }
.sheet-scroll { overflow-x: auto; margin: 1.3rem 0; }
.sheet-scroll table { min-width: 620px; margin: 0; }

/* ---- responsible gambling notice: framed strip, label set into the border ---- */
.rg-notice {
  position: relative; border: 1px solid var(--ink); border-radius: 3px;
  padding: 18px 18px 14px; margin: 2rem 0; font-size: .88rem; background: transparent;
}
.rg-notice::before {
  content: 'Play responsibly'; position: absolute; top: -9px; left: 14px;
  background: var(--paper); padding: 0 8px;
  font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
}
.rg-notice p { margin: 0 0 .4rem; }
.rg-notice p:last-child { margin: 0; }

/* ---- FAQ: h3-in-summary accordions, rotating square marker ---- */
.entry details { border-bottom: 1px solid var(--hairline); padding: 4px 0; }
.entry details.faq:first-of-type { border-top: 2px solid var(--ink); }
.entry summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 12px; padding: 12px 4px; }
.entry summary::-webkit-details-marker { display: none; }
.entry summary::before {
  content: ''; flex: 0 0 10px; width: 10px; height: 10px; background: var(--violet);
  transform: rotate(0deg); transition: transform var(--pace) var(--ease); margin-top: 4px;
}
.entry details[open] summary::before { transform: rotate(45deg); }
.entry summary h3 { display: inline; margin: 0; font-size: 1rem; font-weight: 600; font-family: 'Instrument Sans', sans-serif; }
.entry details .a { padding: 0 4px 14px 22px; }
.entry details .a p { margin: 0 0 .6rem; }

/* ---- category tiles (kept sparse; not the primary idiom) ---- */
.waymarks { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; margin: 1.4rem 0 2rem; padding: 0; list-style: none; }
.waymarks li { border: 1px solid var(--hairline); border-radius: 4px; }
.waymarks a { display: block; padding: 16px 17px; text-decoration: none; color: var(--ink); height: 100%;
  transition: border-color var(--pace) var(--ease), background-color var(--pace) var(--ease); }
.waymarks li:hover { border-color: var(--violet); }
.waymarks li:hover a { background: var(--tint); }
.waymarks .t { font-weight: 700; display: block; }
.waymarks .d { font-size: .84rem; color: var(--muted); display: block; margin-top: 4px; }

/* ---- review index (A–Z ledger of every dossier) ---- */
.index-cols { columns: 3 220px; column-gap: 30px; margin: 1rem 0 2rem; padding: 0; list-style: none; }
.index-cols li { break-inside: avoid; padding: 6px 0; border-bottom: 1px solid var(--hairline); font-size: .95rem; }
.index-cols .tag { font-size: .72rem; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; margin-left: 6px; }

/* ---- hero statement (homepage) ---- */
.masthead { padding: 20px 0 6px; }
.masthead h1 { max-width: 21ch; }
.masthead .lede { font-size: 1.08rem; max-width: 62ch; color: var(--ink); }
.masthead-hero img { display: block; width: 100%; }

/* ---- reveals: rule-draw (h2 top rules draw in; content never moves) ---- */
@media (prefers-reduced-motion: no-preference) {
  .js .entry h2 { position: relative; }
  .js .entry h2::after {
    content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
    background: var(--violet); transform: scaleX(0); transform-origin: left;
    transition: transform 480ms var(--ease);
  }
  .js .entry h2.drawn::after { transform: scaleX(1); }
}

/* ---- footer band ---- */
.site-foot { background: var(--band-bg); color: var(--band-text); margin-top: 30px; }
.site-foot .shell { padding-top: 38px; padding-bottom: 30px; }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 26px; }
.site-foot h4 { color: var(--band-text); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 .7rem; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin: 5px 0; }
.site-foot a { color: var(--band-muted); text-decoration: none; font-size: .9rem; }
.site-foot a:hover { color: var(--band-text); text-decoration: underline; }
.foot-compliance { border-top: 1px solid rgba(255,255,255,.14); margin-top: 28px; padding-top: 20px; font-size: .8rem; color: var(--band-muted); }
.foot-compliance .badges { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.badge-18 {
  display: inline-flex; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--band-text);
  color: var(--band-text); align-items: center; justify-content: center; font-weight: 800; font-size: .8rem;
  font-family: 'Libre Franklin', sans-serif;
}
.foot-compliance a { color: var(--band-text); text-decoration: underline; font-size: inherit; }
.foot-legal { margin-top: 14px; font-size: .76rem; }

/* ---- utility ---- */
.small { font-size: .84rem; color: var(--muted); }
.nowrap { white-space: nowrap; }
.lede-note { font-size: .85rem; color: var(--muted); border-left: 2px solid var(--hairline); padding-left: 14px; margin: 1.4rem 0; }
h1, h2, h3 { overflow-wrap: break-word; }
.pager .nav-links { display: flex; gap: 8px; flex-wrap: wrap; margin: 1.5rem 0; }
.pager .page-numbers { padding: 7px 13px; border: 1px solid var(--hairline); border-radius: 3px; text-decoration: none; }
.pager .page-numbers.current { background: var(--violet); color: var(--on-violet); border-color: var(--violet); }
@media (max-width: 430px) { .site-head .shell { gap: 10px; } }

/* ============================================================
   BRIGHT SKIN (SuperDesign Direction 1) — white + crimson-rose + navy,
   Chivo (display) / Onest (body), pill CTAs, bold conversion-first cards.
   Loaded after casino-betting.css AND the theme chrome above, so this wins.
   Re-skin only — content/structure/logos/compliance untouched.
   ============================================================ */

/* self-hosted grotesk pair (fleet-distinct; not Outfit/Plus Jakarta) */
@font-face { font-family:'Chivo'; font-style:normal; font-weight:700; font-display:swap; src:url('assets/fonts/chivo-700.woff2') format('woff2'); }
@font-face { font-family:'Chivo'; font-style:normal; font-weight:900; font-display:swap; src:url('assets/fonts/chivo-900.woff2') format('woff2'); }
@font-face { font-family:'Onest'; font-style:normal; font-weight:400; font-display:swap; src:url('assets/fonts/onest-400.woff2') format('woff2'); }
@font-face { font-family:'Onest'; font-style:normal; font-weight:600; font-display:swap; src:url('assets/fonts/onest-600.woff2') format('woff2'); }

/* --- token repoint: theme chrome tokens -> Bright --- */
:root {
  --paper:#ffffff;
  --ink:#14172a;            /* deep navy — text, 15:1 on white */
  --muted:#5b6172;          /* slate, 5.6:1 */
  --hairline:#e6e8ef;
  --violet:#cc1140;         /* crimson accent (AA text, 5.0:1 white-on it) */
  --violet-hot:#b3123a;     /* hover / links */
  --amber:#14172a;
  --tint:rgba(204,17,64,.08);
  --on-violet:#ffffff;
  --band-bg:#14172a;        /* navy footer + table heads */
  --band-text:#eef0f6;
  --band-muted:#9aa1b5;
  /* --- monetize casino component vars -> Bright --- */
  --casino-accent:#cc1140; --casino-accent-hover:#b3123a;
  --betting-accent:#cc1140; --betting-accent-hover:#b3123a;
  --green:#1f7a44; --green-hover:#165c33;
  --gold:#14172a;
  --grey-bg:#ffffff; --grey-light:#f5f6fa; --grey-border:#e6e8ef;
  --text-dark:#14172a; --text-muted:#5b6172;
  --radius:12px;
  --shadow:0 1px 2px rgba(20,23,42,.06), 0 6px 18px rgba(20,23,42,.06);
  --shadow-hover:0 2px 4px rgba(20,23,42,.08), 0 14px 30px rgba(20,23,42,.12);
  --accent-bright:#e11d48;  /* vivid crimson for non-text accents */
}

/* --- fonts: Chivo display / Onest body --- */
body { font-family:'Onest','Segoe UI',Arial,sans-serif; }
h1, h2, h3, h4, .crest .wordmark, .ledger .rank,
.cb-page-content h1, .cb-page-content h2, .cb-page-content h3,
.casino-name, .review-box-title, .casino-rank, .review-box-verdict {
  font-family:'Chivo','Segoe UI Semibold',Arial,sans-serif !important;
  letter-spacing:-0.015em;
}
h1, .cb-page-content h1 { font-weight:900 !important; }
.cb-page-content, .cb-page-content p, .payment-method, .casino-highlight,
.rating-category, .review-box-features li, .pros-box li, .cons-box li,
.casino-name, .casino-bonus { font-family:'Onest','Segoe UI',Arial,sans-serif; }
.casino-name { font-family:'Chivo',sans-serif !important; }

/* --- top age strip -> crimson (matches Bright) --- */
.age-strip { background:var(--accent-bright); color:#fff; }
.age-strip a { color:#fff; text-decoration:underline; }

/* --- header: white, crimson rule --- */
.site-head { background:#fff; border-bottom:2px solid var(--accent-bright); }

/* --- CTA: bold crimson pill (the "pop" the brief wants) --- */
.cta-button, .casino-page .cta-button {
  background:var(--casino-accent); color:#fff !important; border-radius:999px;
  padding:13px 28px; font-weight:800; font-size:.9rem; letter-spacing:.01em;
  box-shadow:0 2px 8px rgba(204,17,64,.28); text-transform:none;
}
.cta-button:hover, .casino-page .cta-button:hover { background:var(--casino-accent-hover); transform:translateY(-1px); color:#fff !important; }

/* replace FontAwesome glyphs with inline-SVG data-URIs — font-independent, render in any
   font (the earlier unicode glyphs showed as tofu in Chivo/Onest), no CDN icon font. */
.review-box-features li::before, .pros-box li::before {
  content:""; display:inline-block; width:1em; height:1em; margin-right:9px; vertical-align:-0.12em; flex:0 0 auto;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 8.6l3 3 6.2-7' fill='none' stroke='%231f7a44' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
.cons-box li::before {
  content:""; display:inline-block; width:1em; height:1em; margin-right:9px; vertical-align:-0.12em; flex:0 0 auto;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='%23cc1140' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
.internal-links-grid a::before {
  content:""; display:inline-block; width:.8em; height:.8em; margin-right:7px; vertical-align:-0.02em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23cc1140' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
.review-box-features li, .pros-box li, .cons-box li { display:flex; align-items:baseline; }
.trust-box i, .faq-question::after { display:none; }

/* --- ranking cards: bold, conversion-first --- */
.casino-ranking { margin:22px 0 30px; }
.casino-card, .casino-page .casino-card {
  background:#fff; border:1px solid var(--grey-border); border-radius:14px;
  box-shadow:var(--shadow); padding:16px 22px; margin-bottom:14px;
}
.casino-card:hover { box-shadow:var(--shadow-hover); transform:translateY(-2px); border-color:#dfe2ec; }
.casino-rank { color:var(--muted); font-weight:900; font-size:1.5rem; }
.casino-card.featured .casino-rank { color:var(--casino-accent); }
.casino-card.featured, .casino-page .casino-card.featured {
  position:relative; border:2px solid var(--casino-accent); background:#fff;
}
.casino-card.featured::before {
  content:"Editor's Choice"; position:absolute; top:-11px; left:22px;
  background:var(--casino-accent); color:#fff; font-family:'Onest',sans-serif;
  font-size:.64rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  padding:3px 11px; border-radius:6px;
}
.casino-name a { color:var(--ink); }
.casino-name a:hover { color:var(--casino-accent); }
.casino-bonus {
  display:inline-block; background:rgba(204,17,64,.10); color:var(--casino-accent);
  font-weight:800; font-size:.9rem; padding:4px 12px; border-radius:8px; margin:2px 0;
}
.casino-highlight { color:var(--muted); font-size:.82rem; margin-top:5px; }

/* --- operator logo (larger + clearer, per brief) --- */
.operator-logo { background:#fff; }
.casino-logo.operator-logo { width:134px; height:66px; object-fit:contain; padding:5px; border:1px solid var(--grey-border); border-radius:8px; }
.review-box-logo.operator-logo { width:160px; height:88px; background:#fff; border-radius:10px; padding:12px; object-fit:contain; }
.ranking-table img.operator-logo { max-height:36px; width:auto; }
.operator-logo.is-closed { filter:grayscale(1) opacity(.6); }

/* --- review summary box: light card, crimson frame --- */
.review-box, .casino-page .review-box { border:2px solid var(--casino-accent); border-radius:16px; box-shadow:var(--shadow); }
.review-box-left, .casino-page .review-box-left {
  background:linear-gradient(135deg,#fff 0%, #fbe9ee 100%); color:var(--ink);
}
.review-box-verdict {
  margin-top:12px; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  background:var(--casino-accent); color:#fff; padding:6px 13px; border-radius:20px; display:inline-block;
}
.review-box-title { color:var(--ink); }
.review-box-bonus { background:var(--casino-accent); color:#fff; font-weight:800; }
.review-box-features li { color:var(--ink); }

/* --- info-table / rating / payments in Bright --- */
.casino-page .section-box { background:#fff; }
.info-box, .betting-page .info-box { background:#f5f6fa; border-left-color:var(--casino-accent); }
.rating-category .tier { font-weight:800; color:var(--casino-accent); }
.rating-category .cat { color:var(--text-dark); }
.casino-cta .rg-line { display:block; font-size:11px; color:var(--text-muted); margin-top:6px; }
.pros-box { border-left:4px solid var(--green); }
.cons-box { border-left:4px solid var(--casino-accent); }
.guides-section, .betting-page .guides-section { background:#f5f6fa; }

/* mobile guard (Florian R5): wide tables scroll, never push the page sideways */
.cb-page-content { overflow-wrap:break-word; }
@media (max-width:720px){
  .cb-page-content .ranking-table, .cb-page-content .guide-table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .cb-page-content table { max-width:100%; }
}

/* --- hero band (Bright): self-hosted SVG casino art at the top of every page --- */
.page-hero {
  display:flex; align-items:center; gap:26px; justify-content:space-between; flex-wrap:wrap;
  padding:24px 28px; margin:0 0 26px;
  background:linear-gradient(120deg,#fff 58%, #fbe9ee 100%);
  border:1px solid var(--grey-border); border-radius:16px;
}
.page-hero-text { flex:1 1 340px; min-width:0; }
.page-hero-text .crumbs { margin-bottom:.5rem; }
.page-hero-text h1 { margin:.05em 0 .2em; }
.page-hero-text .dateline { margin:.1rem 0 0; }
.page-hero-art { flex:0 0 auto; }
.page-hero-art img { width:210px; max-width:100%; height:auto; display:block; }
/* homepage: larger, with sub + CTA */
.page-hero--home { padding:34px 32px 30px; }
.page-hero--home .page-hero-text { flex:1 1 400px; }
.page-hero--home h1 { font-size:clamp(2rem,1.35rem+2.6vw,3rem); }
.page-hero--home .hero-sub { font-size:1.08rem; color:var(--muted); max-width:50ch; margin:.4rem 0 1.1rem; }
.page-hero--home .hero-cta { margin-top:2px; }
.page-hero--home .page-hero-art img { width:340px; }
@media (max-width:768px){
  .page-hero, .page-hero--home { padding:20px; gap:12px; }
  .page-hero-text { flex-basis:100%; }
  .page-hero-art { width:100%; text-align:center; }
  .page-hero-art img, .page-hero--home .page-hero-art img { width:160px; margin:0 auto; }
}