/* site-fixes.css — QA overrides on top of the verbatim export CSS (loaded last).
   Keeps the export stylesheets untouched; fixes functional/visual bugs found in QA. */

/* FIX: mobile nav was always-open (export media query forced .nav-mobile{display:flex}).
   Tie it to the zero-JS checkbox via :has() so it stays collapsed until tapped. */
.nav-mobile { display: none; }
.site-header:has(.nav-toggle-cb:checked) .nav-mobile { display: flex; }
/* the export only collapses the desktop nav to the hamburger at ≤720px, but the
   full nav needs ~780px — so 721–779px overflowed. Collapse earlier. */
@media (max-width: 860px) {
  .nav-desktop { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* keep the casino wordmark logos crisp inside their tiles */
.casino-logo-img img { display: block; }

/* --- header brand lockup: bigger tagline (was 10.5px + uppercase letter-spacing,
   read ~9px on Arabic) + proportionally larger jeton symbol + wordmark --- */
.brand-mark svg { width: 44px; height: 44px; }
.brand-name { font-size: 24px; }
.brand-locale { font-size: 13px; letter-spacing: .03em; margin-top: 4px; }
@media (max-width: 560px) {
  .brand-mark svg { width: 38px; height: 38px; }
  .brand-name { font-size: 21px; }
  .brand-locale { font-size: 12px; }
}

/* guide hero emblem: subtle entrance polish, never clipped */
.guide-hero-emblem { flex: 0 0 auto; }

/* --- real table-of-contents (built from actual section H2s) --- */
.article-toc { position: sticky; top: 96px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow-sm); }
.article-toc h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3);
  margin: 0 0 12px; font-weight: 800; }
.article-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.article-toc li { counter-increment: toc; margin: 0 0 9px; line-height: 1.45; }
.article-toc li::before { content: counter(toc, decimal-leading-zero); color: var(--gold);
  font-family: var(--font-head); font-weight: 700; font-size: 12px; margin-inline-end: 8px; }
.article-toc a { color: var(--ink-2); font-size: 14px; font-weight: 600; }
.article-toc a:hover { color: var(--accent); }

/* --- toplist density + wide wordmark logo polish --- */
.list-rows .casino-row { padding: 16px 22px; }
.casino-row-brand { gap: 16px; }
.casino-logo-img { box-shadow: var(--shadow-sm); }
.casino-row-bonus { line-height: 1.4; }
.pay-badges { gap: 5px; margin-top: 2px; }
.pay-badge { max-width: 100%; }                 /* never push past the column */
.casino-row-score b { direction: ltr; }

.casino-row-stats { gap: 14px 20px; }

/* --- real casino screenshot figure (reviews + body) --- */
.casino-shot { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm); background: var(--surface); }
.casino-shot img { display: block; width: 100%; height: auto; }
.casino-shot figcaption { font-size: 12.5px; color: var(--ink-3); padding: 10px 14px;
  text-align: center; border-top: 1px solid var(--line); }

/* --- home hero: real screenshot instead of placeholder SVG --- */
.hero-shot { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
  border: 1px solid var(--line); }
.hero-shot img { display: block; width: 100%; height: auto; }

/* --- MOBILE toplist (≤980): use the space — rank+brand, full-width stats grid, then CTA --- */
@media (max-width: 980px) {
  .list-rows .casino-row { grid-template-columns: 44px minmax(0,1fr);
    grid-template-areas: "rank brand" "stats stats" "cta cta"; row-gap: 14px; column-gap: 14px; padding: 18px 16px; }
  .casino-row-stats { grid-area: stats; grid-template-columns: 1fr 1fr; gap: 13px 16px;
    padding: 14px 0 0; margin: 0; border-top: 1px solid var(--line); }
  .casino-row-cta { grid-area: cta; min-width: 0; flex-direction: row; flex-wrap: wrap;
    align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 14px; }
  .casino-row-cta .casino-row-score { margin: 0; }
  .casino-row-cta .btn { flex: 1 1 150px; }
  .casino-row-cta .casino-row-review { flex: 0 0 auto; }
  .row-ribbon { left: auto; right: 52px; }
  .hero-shot { margin-top: 18px; }
  /* long brand names (e.g. "Lucky Dreams") must wrap, not overflow the column;
     overflow-wrap handles a single long word ("Kingmaker") on the narrowest phones */
  .casino-row-name h3 { white-space: normal; overflow-wrap: anywhere; }
  /* the text column must be allowed to shrink + its pay-badges must wrap, or the
     fixed-width logo + text content overflows the brand cell on narrow phones */
  .casino-row-brand { gap: 12px; min-width: 0; }
  .casino-row-info { min-width: 0; flex: 1 1 auto; }
  .casino-row-name { flex-wrap: wrap; min-width: 0; }
  .pay-badges { flex-wrap: wrap; }
}
/* PHONES (≤560): re-flow each toplist row so info is readable, not crammed:
   row1 = #rank + a BIG legible logo · row2 = name + stars · then bonus + pay badges ·
   then the stats as readable labelled cards · then the CTA. */
@media (max-width: 560px) {
  .list-rows .casino-row {
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-areas: "rank brand" "stats stats" "cta cta";
    column-gap: 12px; row-gap: 16px; padding: 18px 14px; align-items: start;
  }
  .rank-badge { align-self: start; }
  /* brand becomes a column: big logo on top (beside the rank), then the text block */
  .casino-row-brand { grid-area: brand; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
  .casino-row-brand .casino-logo-img {
    width: 100% !important; max-width: 240px; height: 96px !important; padding: 12px !important;
  }
  .casino-row-info { width: 100%; min-width: 0; }
  .casino-row-name { flex-wrap: wrap; align-items: center; gap: 6px 12px; }
  .casino-row-name h3 { font-size: 20px; white-space: normal; overflow-wrap: anywhere; }
  .casino-row-bonus { font-size: 15px; }
  /* stats: readable labelled cards, 2 per row */
  .casino-row-stats { grid-area: stats; grid-template-columns: 1fr 1fr; gap: 10px;
    margin: 0; padding: 16px 0 0; border-top: 1px solid var(--line); }
  .casino-row-stats .row-stat {
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
    padding: 11px 13px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  .casino-row-stats .row-stat-label { font-size: 12.5px; font-weight: 600; color: var(--ink-3);
    display: flex; align-items: center; gap: 6px; }
  .casino-row-stats .row-stat-label svg { width: 15px; height: 15px; flex: 0 0 auto; }
  .casino-row-stats .row-stat-val { font-size: 16px; font-weight: 800; color: var(--ink); line-height: 1.3; }
}

/* --- review page internals must stack + not overflow on mobile --- */
@media (max-width: 760px) {
  .review-body { grid-template-columns: 1fr !important; }
  .review-body > aside { min-width: 0; }
  .review-content { min-width: 0; }
  .proscons { grid-template-columns: 1fr !important; }
  .quickfacts { grid-template-columns: 1fr 1fr !important; }
  .quickfacts .quickfact { min-width: 0; }
  .quickfacts .quickfact strong { overflow-wrap: anywhere; min-width: 0; }
  .review-hero { grid-template-columns: 1fr !important; }
}

/* --- reviews hub: internal review cards (NO affiliate CTAs) --- */
.review-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.review-card { display: flex; flex-direction: column; gap: 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm);
  transition: box-shadow .18s, transform .18s, border-color .18s; }
.review-card:hover { box-shadow: var(--shadow); transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.review-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.review-card-score b { font-family: var(--font-head); font-size: 22px; color: var(--accent); }
.review-card-score span { font-size: 12px; color: var(--ink-3); }
.review-card-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.review-card-name h3 { font-size: 18px; margin: 0; }
.review-card-link { margin-top: auto; color: var(--accent); font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 980px) { .review-card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .review-card-grid { grid-template-columns: 1fr; } }

/* --- guides hub: simple icon cards (no empty image boxes) --- */
.gcard-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.gcard { display: flex; gap: 16px; align-items: flex-start; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm);
  transition: box-shadow .18s, transform .18s, border-color .18s; }
.gcard:hover { box-shadow: var(--shadow); transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.gcard-icon { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 16px; display: inline-flex;
  align-items: center; justify-content: center; background: linear-gradient(145deg,#7a2d8c,#5d2070);
  box-shadow: 0 6px 18px rgba(93,32,112,.25); }
.gcard-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gcard-body h3 { font-size: 18px; margin: 0; line-height: 1.35; }
.gcard-dek { color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.gcard-link { margin-top: 4px; color: var(--accent); font-weight: 700; font-size: 13.5px;
  display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 720px) { .gcard-grid { grid-template-columns: 1fr; } }

/* --- content prose lists: the export styles .prose lists as ICON lists
   (list-style:none + display:flex, expecting an inline <svg> per <li>).
   Markdown body content has no <svg>, so its bullets/numbers vanished.
   Restore real markers ONLY for lists that have no <svg> (icon lists keep
   their flex layout). --- */
.prose ul:not(:has(li svg)) { list-style: disc; padding-inline-start: 1.5em; margin: 0 0 20px; }
.prose ol:not(:has(li svg)) { list-style: decimal; padding-inline-start: 1.6em; margin: 0 0 20px; }
.prose ul:not(:has(li svg)) > li,
.prose ol:not(:has(li svg)) > li { display: list-item; gap: 0; margin-bottom: 11px; font-size: 16.5px; line-height: 1.7; color: var(--ink); }
.prose ul:not(:has(li svg)) > li::marker { color: var(--gold); }
.prose ol:not(:has(li svg)) > li::marker { color: var(--accent); font-family: var(--font-head); font-weight: 700; }
.prose ul:not(:has(li svg)) ul,
.prose ul:not(:has(li svg)) ol { margin: 11px 0 0; }
/* RTL: marker sits on the right. Override the export rtl.css ol padding-right:4px (higher specificity needed). */
.site[dir="rtl"] .prose ul:not(:has(li svg)),
.site[dir="rtl"] .prose ol:not(:has(li svg)) { padding-left: 0; padding-right: 1.6em; }

/* --- content tables: export only styles the .list-table component; raw
   Markdown tables were unstyled (no borders/cells). Wrapped in .table-wrap
   at build time for borders + header + zebra + mobile horizontal scroll. --- */
.prose .table-wrap { overflow-x: auto; margin: 0 0 24px; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); background: var(--surface);
  -webkit-overflow-scrolling: touch; }
.prose .table-wrap table { width: 100%; min-width: 440px; border-collapse: collapse; margin: 0; font-size: 14.5px; }
.prose .table-wrap th, .prose .table-wrap td { padding: 12px 15px; text-align: start; vertical-align: top;
  line-height: 1.55; border-bottom: 1px solid var(--line); border-inline-start: 1px solid var(--line); }
.prose .table-wrap th:first-child, .prose .table-wrap td:first-child { border-inline-start: 0; }
.prose .table-wrap tr:last-child td { border-bottom: 0; }
.prose .table-wrap th { background: linear-gradient(180deg, #f3ebf6, #ece0f2); color: var(--ink);
  font-weight: 800; font-size: 13.5px; white-space: nowrap; }
.prose .table-wrap tr:nth-child(even) td { background: rgba(122, 45, 140, .045); }
.prose .table-wrap tr:hover td { background: rgba(122, 45, 140, .08); }
/* the prose grid item must be allowed to shrink, else a min-width table-wrap
   pushes the whole page wider on mobile instead of scrolling inside its box. */
.article-body > .prose, .article-body, .review-body .review-content { min-width: 0; }
/* review-hero grid items must shrink too, else the verdict/hero-main min-content
   forces the single-column mobile track wider than the viewport. */
.review-hero, .review-hero-main, .review-verdict { min-width: 0; }

/* --- homepage hero image is now an affiliate CTA (links to the #1 casino golink) --- */
.hero-shot-cta { position: relative; display: block; text-decoration: none; overflow: hidden; }
.hero-shot-cta img { display: block; width: 100%; height: auto; transition: transform .45s var(--ease-out-expo, cubic-bezier(.16,1,.3,1)); }
.hero-shot-cta:hover img { transform: scale(1.03); }
.hero-shot-cta-bar { position: absolute; inset-inline: 0; bottom: 0; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; padding: 13px 15px;
  background: linear-gradient(0deg, rgba(20,8,26,.94), rgba(20,8,26,.55) 65%, rgba(20,8,26,0)); }
.hero-shot-cta-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hero-shot-cta-text strong { color: #fff; font-size: 15px; line-height: 1.2; }
.hero-shot-cta-text span { color: #f1d9a6; font-size: 12.5px; line-height: 1.3; }
.hero-shot-cta-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent); color: #fff; font-weight: 800; font-size: 13.5px; white-space: nowrap;
  padding: 10px 15px; border-radius: 99px; box-shadow: 0 8px 20px rgba(122,45,140,.45); }
.hero-shot-cta:hover .hero-shot-cta-btn { background: #5d2070; }

/* --- review hero: H1 first, logo beside it (compacts the empty mobile top) --- */
.review-hero-id { display: flex; align-items: center; gap: 18px; }
.review-hero-text { flex: 1 1 0; min-width: 0; }
.review-hero-id .casino-logo-img { flex: 0 0 auto; }
@media (max-width: 560px) {
  /* keep the logo BESIDE the H1 (export forces column here) so the empty top is used */
  .review-hero-id { flex-direction: row !important; align-items: center; gap: 14px; }
  .review-hero-id .casino-logo-img { width: 104px !important; height: 60px !important; }
  .review-hero-text h1 { font-size: 24px !important; }
}

/* --- reviews hub cards: larger logos (no overflow on small cards) --- */
.review-card { min-width: 0; }
.review-card-top { gap: 12px; min-width: 0; }
.review-card-top .casino-logo-img { max-width: calc(100% - 64px); }
@media (max-width: 560px) {
  .review-card-top .casino-logo-img { width: 180px !important; height: 86px !important; }
}

/* --- related-links module (internal-link equity to hubs + sibling pages) --- */
.related-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 24px; box-shadow: var(--shadow-sm); }
.related-title { font-size: 19px; margin: 0 0 16px; }
.related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.related-link { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  font-weight: 700; font-size: 14.5px; color: var(--ink); transition: border-color .18s, transform .18s, color .18s; }
.related-link:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  color: var(--accent); transform: translateY(-2px); }
.related-arrow { flex: 0 0 auto; color: var(--accent); display: inline-flex; }
@media (max-width: 560px) { .related-grid { grid-template-columns: 1fr; } }