/* ============================================================================
   SITE STYLESHEET: interac-02 (best-interac-casinos-02), CA batch Jul 2026
   ⛔ ALL COLOUR LIVES IN THE :root BLOCK BELOW. Never hardcode a hex anywhere
      else in this file or in any HTML. Per-domain theming = swap this ONE block.
   ⛔ --cta is RESERVED for action buttons only (rule 19). It must not appear on
      headings, ranks, bonuses, ribbons, links, borders or icons.
   Hue allocation for this domain (all four roles kept apart on purpose):
      --primary 172.6 deg (deep teal-green)   --cta 348.0 deg (rose-red)
      hue distance primary to cta = 175.4 deg, so rule 19 passes
      --bonus 291.9 deg (violet)              logo icon accent 43 deg (warm gold)
      The logo accent is neither --cta nor --bonus, per palette rule 3.
   ============================================================================ */

:root {
  /* ---- surfaces ---- */
  --bg:        #F5FAF8;
  --bg-alt:    #E9F1EF;
  --card:      #FFFFFF;

  /* ---- text ---- */
  --ink:       #17262C;
  --ink-muted: #5A6A72;

  /* ---- brand ---- */
  --primary:   #105149;   /* masthead, headings */
  --steel:     #859EA3;   /* ranks, meta, low-salience marks */
  --rule:      #C5D3D0;   /* hairlines */

  /* ---- the bonus eye-catcher (rule 6), NOT the CTA colour ---- */
  --bonus:     #7F2C8C;

  /* ---- RESERVED CTA (rule 19), buttons only ---- */
  --cta:       #C52041;
  --cta-hover: #9E1A34;
  --cta-ink:   #FFFFFF;

  /* ---- shape tokens (per-domain leeway) ---- */
  --radius:      4px;
  --radius-card: 6px;
  --cta-radius:  3px;

  /* ---- type (per-domain leeway) ---- */
  --font-head: "Space Grotesk", "Trebuchet MS", sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ============================ base ============================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;           /* belt-and-braces; real fix is per-element */
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
:focus-visible { outline: 3px solid var(--cta); outline-offset: 2px; }

.container { width: 100%; max-width: 1120px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.narrow { max-width: 820px; }

h1, h2, h3, h4 { font-family: var(--font-head); color: var(--primary); line-height: 1.22; margin: 0 0 .5em; }
h1 { font-size: clamp(1.7rem, 4.2vw, 2.5rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); margin-top: 2.2em; }
h3 { font-size: clamp(1.1rem, 2.2vw, 1.28rem); margin-top: 1.6em; }
p, ul, ol, table { margin: 0 0 1.1em; }

/* ============================ masthead ============================ */
/* non-sticky, no fixed height (rule 7 + Mar-28 lesson 14) */
.masthead { background: var(--card); border-bottom: 1px solid var(--rule); }
.masthead-in { display: flex; align-items: center; gap: 20px; padding: 14px 20px; }
.brandmark { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brandmark img { height: 56px; width: auto; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.nav a { color: var(--ink); text-decoration: none; font-size: .95rem; font-weight: 600; }
.nav a:hover { color: var(--primary); text-decoration: underline; }
.nav-toggle { display: none; }

/* ============================ hero (compact for BOTH views, rule 1) ============================ */
.hero { padding: 26px 0 6px; }
.lede { font-size: 1.05rem; color: var(--ink-muted); max-width: 68ch; margin: 0 0 16px; }

/* byline: structured, not a compressed dot-run (rule 17) */
.byline { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.byline img { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; }
.byline-who { font-weight: 700; font-size: .95rem; }
.byline-who a { color: var(--ink); }
.byline-role { font-size: .82rem; color: var(--ink-muted); }
.byline-meta { margin-left: auto; text-align: right; font-size: .78rem; color: var(--ink-muted); line-height: 1.5; }
.byline-meta span { display: block; }

/* ============================ toplist ============================ */
.toplist { padding: 8px 0 10px; }

/* --- the card: 2-row "statement line" skeleton, built for this batch only ---
   row 1 = rank + logo + brand + labelled fact grid
   row 2 = full-width offer band + CTA
   Deliberately NOT a 1-row 5-column card and NOT a perforated stub. --------- */
.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  margin-bottom: 14px;
  overflow: hidden;
}
.card-top { display: flex; align-items: center; gap: 16px; padding: 14px 16px; }

.rank {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-family: var(--font-head);
  font-size: .95rem; font-weight: 700;
  color: var(--steel);
}
.card.is-top .rank { background: var(--primary); border-color: var(--primary); color: var(--card); }

.logo {
  flex: 0 0 auto;
  width: 116px; min-height: 54px;
  display: grid; place-items: center;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 7px 9px;
}
.logo img { max-height: 40px; width: auto; }

.ident { flex: 1 1 auto; min-width: 0; }         /* min-width:0 prevents overflow */
.brand { font-family: var(--font-head); font-size: 1.06rem; font-weight: 700; color: var(--primary); }
.stars { color: var(--steel); font-size: .84rem; letter-spacing: .06em; }
.stars b { color: var(--ink); font-weight: 700; }

/* labelled fact grid — the "statement" motif. minmax(0,…) so long values can't pan the page */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; flex: 0 0 auto; width: 232px; }
.fact { background: var(--bg-alt); border-radius: var(--radius); padding: 6px 9px; min-width: 0; }
/* a card with only one published fact (e.g. no wagering figure on record) spans
   the grid rather than leaving a dead cell */
.fact:only-child { grid-column: 1 / -1; }
.fact-label { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-muted); }
.fact-value { display: block; font-size: .86rem; font-weight: 700; overflow-wrap: break-word; }

/* offer band (rule 6: bonus is the eye-catcher, in --bonus, never black, never --cta) */
.card-offer {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--rule);
  background: var(--bg-alt);
}
.offer { flex: 1 1 auto; min-width: 0; }
.offer-label { display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); }
.offer-amount { display: block; font-family: var(--font-head); font-size: 1.14rem; font-weight: 700; color: var(--bonus); overflow-wrap: break-word; }
.offer-terms { display: block; font-size: .74rem; color: var(--ink-muted); }
.offer-none { display: block; font-size: .88rem; font-style: italic; color: var(--ink-muted); }

.cta {
  flex: 0 0 auto;
  display: inline-block;
  background: var(--cta); color: var(--cta-ink);
  font-family: var(--font-body); font-weight: 700; font-size: .93rem;
  text-decoration: none; text-align: center;
  padding: 12px 22px;
  border: 0; border-radius: var(--cta-radius);
  min-height: 44px;                 /* tap target */
}
.cta:hover { background: var(--cta-hover); }

/* ============================ tables ============================ */
.scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.2em; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
thead th { background: var(--primary); color: var(--card); text-align: left; font-family: var(--font-head); font-size: .82rem; padding: 10px 12px; white-space: nowrap; }
tbody td { border-bottom: 1px solid var(--rule); padding: 10px 12px; vertical-align: top; }
tbody tr:nth-child(even) { background: var(--bg-alt); }

/* ============================ content ============================ */
.section { border-top: 1px solid var(--rule); padding-top: 6px; }
.note { background: var(--bg-alt); border-left: 3px solid var(--steel); padding: 14px 16px; border-radius: var(--radius); }

/* ============================ footer ============================ */
.footer { background: var(--primary); color: var(--bg-alt); margin-top: 48px; padding: 30px 0; font-size: .88rem; }
.footer a { color: var(--bg-alt); }
.footer-cols { display: flex; flex-wrap: wrap; gap: 28px; }
.disclosure { border-top: 1px solid rgba(255,255,255,.22); margin-top: 22px; padding-top: 16px; font-size: .8rem; color: var(--bg-alt); }

/* ============================ responsive ============================ */
@media (max-width: 900px) {
  .facts { width: 190px; }
  .logo { width: 96px; }
}

/* single mobile breakpoint: card becomes stacked + centered, CTA full width (rule 7) */
@media (max-width: 720px) {
  body { font-size: 16px; }

  /* Compact the hero for BOTH views so the toplist stays above the fold
     (rule 1). ⛔ Never achieved by hiding content (rule 2) - everything the
     desktop shows is still here, just tighter. */
  .hero { padding: 16px 0 2px; }
  h1 { font-size: 1.55rem; }
  .lede { font-size: .96rem; line-height: 1.5; margin-bottom: 10px; }
  .byline { padding: 9px 0; gap: 10px; }
  .byline img { width: 38px; height: 38px; }
  .byline-who { font-size: .9rem; }
  .byline-role { font-size: .78rem; }
  .byline-meta { font-size: .72rem; line-height: 1.42; }
  .toplist { padding: 4px 0 8px; }
  .toplist > h2 { margin-top: 1em; font-size: 1.25rem; }

  .nav { display: none; }
  .nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0;
                 position: absolute; left: 0; right: 0; top: 100%; background: var(--card);
                 border-bottom: 1px solid var(--rule); padding: 6px 20px 14px; z-index: 20; }
  .nav.is-open a { padding: 11px 0; border-bottom: 1px solid var(--rule); }
  .masthead { position: relative; }
  .masthead-in { padding: 12px 16px; }
  .brandmark img { height: 44px; }
  .nav-toggle { display: inline-grid; place-items: center; margin-left: auto;
                width: 44px; height: 44px; background: var(--bg-alt);
                border: 1px solid var(--rule); border-radius: var(--radius);
                font-size: 1.2rem; color: var(--primary); cursor: pointer; }

  /* Card stacks and centres, but rank + logo share a row so the card does not
     become a 7-row tower that pushes the bonus off screen. */
  .card-top { flex-wrap: wrap; justify-content: center; text-align: center; gap: 10px; padding: 12px 14px; }
  .rank { order: 1; }
  .logo { order: 2; }
  .ident { order: 3; width: 100%; }
  .facts { order: 4; width: 100%; }
  .card-offer { flex-direction: column; align-items: stretch; text-align: center; gap: 10px; }
  .cta { width: 100%; }
  .byline { flex-wrap: wrap; }
  .byline-meta { margin-left: 0; width: 100%; text-align: left; }
}

@media (max-width: 380px) {
  /* Facts deliberately STAY two-column here. Collapsing them to one column adds
     a row to every card and pushed the bonus below the fold on 375/360/320,
     which is worse than the narrow cells it was meant to fix. minmax(0,1fr) plus
     overflow-wrap on .fact-value already prevents any overflow. */
  .container { padding-left: 14px; padding-right: 14px; }
  .fact { padding: 6px 7px; }
  .fact-label { font-size: .58rem; letter-spacing: .06em; }
  .toplist > h2 { font-size: 1.16rem; }
}