/* ==========================================================================
   V1 system — 13 Aug 2026
   Loaded LAST, after desktop-layer.css, so it settles the cascade rather than
   fighting it. Everything here is either a contract the site did not have
   (prose, overlay budget, button sizing) or a component introduced in V1
   (review card, article card, homepage "more" strip).

   Order note: main.css → design-upgrade.css → nc-components.css →
   type-system.css → mobile-optimizations.css → sticky/safety/trust →
   desktop-layer.css → THIS FILE.
   ========================================================================== */

:root {
  /* Spacing scale — 4/8/12/16/24/32/48/64 only. */
  --nc-s1: 4px;   --nc-s2: 8px;   --nc-s3: 12px;  --nc-s4: 16px;
  --nc-s5: 24px;  --nc-s6: 32px;  --nc-s7: 48px;  --nc-s8: 64px;

  /* Prose measure. 68ch renders ~72 real characters in this face — the same
     empirical correction desktop-layer.css records at line 62. */
  --nc-measure: 68ch;

  /* Button box. 44px is the touch-target floor, not a suggestion. */
  --nc-btn-h: 44px;
  --nc-btn-h-lg: 52px;
}

/* ==========================================================================
   1. PROSE CONTRACT
   The rules in nc-components.css were correct but scoped only to
   `.entry-content > *`. On /new-casinos/ a stray </div> in the body closed
   .entry-content a third of the way down, so the rest of the article became a
   SIBLING of it and every prose rule stopped matching — bullets gone, margins
   0, measure unbounded at 1225px. The markup is repaired, but the contract
   should not depend on one container surviving hand-edited HTML, so it is
   scoped to the article as well.

   Money modules are excluded by name. Tables are never given a measure — a
   comparison table is meant to use the full column.
   ========================================================================== */

/* Base flow */
:is(.container.content-wrap > article,
    .container.content-wrap > article > .entry-content,
    .casino-review-content)
  > :is(p, ul, ol, blockquote, dl, h2, h3, h4, h5) {
  max-width: var(--nc-measure);
}

/* Structural blocks keep the full column width. */
:is(.container.content-wrap > article,
    .container.content-wrap > article > .entry-content)
  > :is(table, figure, .nc-table-wrap, .nc-offer-card, .casino-card,
        .nc-hub-offers, .nc-reg-box, .wp-block-table, .nc-related) {
  max-width: none;
}

/* Vertical rhythm. The wall-of-text reading came from margin-top: 0 on every
   heading — sections had no air above them, so an h2 read as a bold line in a
   paragraph rather than the start of something new. */
:is(.container.content-wrap > article,
    .container.content-wrap > article > .entry-content) > p {
  margin: 0 0 1.15em;
}
:is(.container.content-wrap > article,
    .container.content-wrap > article > .entry-content) > h2 {
  margin: var(--nc-s7) 0 var(--nc-s3);
}
:is(.container.content-wrap > article,
    .container.content-wrap > article > .entry-content) > h3 {
  margin: var(--nc-s6) 0 var(--nc-s2);
}
:is(.container.content-wrap > article,
    .container.content-wrap > article > .entry-content) > h4 {
  margin: var(--nc-s5) 0 var(--nc-s2);
}
/* First heading after the hero should not push a 48px gap into the fold. */
:is(.container.content-wrap > article,
    .container.content-wrap > article > .entry-content) > :is(h2, h3):first-child {
  margin-top: 0;
}

/* Lists: main.css:40 kills list markers globally for nav. Restore them for
   prose wherever prose lives, not only under .entry-content. */
:is(.container.content-wrap > article,
    .container.content-wrap > article > .entry-content,
    .casino-review-content) :is(ul, ol):not(.nc-related):not([class*="nc-"]):not([class*="menu"]) {
  margin: 0 0 1.15em;
  padding-left: 1.4em;
}
:is(.container.content-wrap > article,
    .container.content-wrap > article > .entry-content,
    .casino-review-content) ul:not(.nc-related):not([class*="nc-"]):not([class*="menu"]) {
  list-style: disc outside;
}
:is(.container.content-wrap > article,
    .container.content-wrap > article > .entry-content,
    .casino-review-content) ol:not([class*="nc-"]):not([class*="menu"]) {
  list-style: decimal outside;
}
:is(.container.content-wrap > article,
    .container.content-wrap > article > .entry-content,
    .casino-review-content) li:not([class*="nc-"]) {
  display: list-item;
  margin-bottom: .5em;
}
:is(.container.content-wrap > article,
    .container.content-wrap > article > .entry-content,
    .casino-review-content) li:not([class*="nc-"])::marker {
  color: var(--nc-teal, #0F6E56);
}
/* Nested lists tighten up rather than repeating the block margin. */
:is(.container.content-wrap > article,
    .container.content-wrap > article > .entry-content) li > :is(ul, ol) {
  margin: .5em 0 0;
}

/* Body copy never below 16px on a phone. */
@media (max-width: 767px) {
  /* The viewport is already the measure; releasing the token is enough, and it
     also releases the !important rule in type-system.css that resolves it. */
  :root { --nc-measure: none; }
  .entry-content, .casino-review-content { font-size: 1rem; line-height: 1.65; }
  :is(.container.content-wrap > article,
      .container.content-wrap > article > .entry-content) > h2 { margin-top: var(--nc-s6); }
}

/* ==========================================================================
   2. REVIEW ARCHIVE CARD  (P0-A)
   ========================================================================== */
.nc-archive__header { margin: 0 0 var(--nc-s6); }
.nc-archive__header h1 { margin: 0 0 var(--nc-s3); }
.nc-archive__standfirst { max-width: 62ch; font-size: 1.06rem; line-height: 1.6; margin: 0 0 var(--nc-s3); }
.nc-archive__byline { margin: 0 0 var(--nc-s2); font-size: .9rem; color: var(--nc-muted, #5b6b66); }
.nc-archive__disclosure {
  margin: 0; font-size: .84rem; line-height: 1.55; color: var(--nc-muted, #5b6b66);
  max-width: 78ch; padding: var(--nc-s3) var(--nc-s4);
  background: var(--nc-surface-2, #f5f7f6); border-radius: 8px;
}
.nc-archive__age { display: block; margin-top: var(--nc-s1); }

.nc-rcard-grid {
  display: grid; gap: var(--nc-s5);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  margin: 0 0 var(--nc-s7);
}
.nc-rcard {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--nc-border, #e1e8ec);
  border-radius: 12px; overflow: hidden;
}
.nc-rcard__tile {
  display: flex; align-items: center; justify-content: center;
  background: var(--nc-surface-2, #f5f7f6);
  border-bottom: 1px solid var(--nc-border, #e1e8ec);
  padding: var(--nc-s4); min-height: 104px;
}
.nc-rcard__body { display: flex; flex-direction: column; gap: var(--nc-s2); padding: var(--nc-s4); flex: 1; }
.nc-rcard__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--nc-s3); }
.nc-rcard__name { margin: 0; font-size: 1.18rem; line-height: 1.25; }
.nc-rcard__name a { text-decoration: none; }
.nc-rcard__score { flex-shrink: 0; }

/* Tier sits above the actions and reads as a label, never as a badge of
   achievement — a desk review must not look like a tested one. */
.nc-rcard__tier {
  margin: 0; font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.nc-rcard__tier--tested    { color: var(--nc-teal, #0F6E56); }
.nc-rcard__tier--desk      { color: #5b6b66; }
.nc-rcard__tier--editorial { color: #7a7a7a; }

.nc-rcard__bonus { margin: 0; font-weight: 700; font-size: .98rem; }
.nc-rcard__meta { display: flex; flex-wrap: wrap; gap: var(--nc-s2); margin: 0; }
.nc-rcard__verdict { margin: 0; font-size: .92rem; line-height: 1.55; color: #444; }
.nc-rcard__actions { display: flex; flex-direction: column; gap: var(--nc-s2); margin-top: auto; padding-top: var(--nc-s3); }
.nc-rcard__cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--nc-btn-h); width: 100%; text-align: center;
}

/* ==========================================================================
   3. EDITORIAL ARTICLE CARD  (P0-B)
   Deliberately unlike a casino card: no logo frame, no score, no orange.
   ========================================================================== */
.nc-acard-grid {
  display: grid; gap: var(--nc-s5);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  margin: 0 0 var(--nc-s7);
}
.nc-acard {
  background: #fff; border: 1px solid var(--nc-border, #e1e8ec);
  border-left: 3px solid var(--nc-teal, #0F6E56);
  border-radius: 10px;
}
.nc-acard__body { display: flex; flex-direction: column; gap: var(--nc-s2); padding: var(--nc-s5); }
.nc-acard__eyebrow {
  display: flex; align-items: center; gap: var(--nc-s2); flex-wrap: wrap;
  margin: 0; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--nc-muted, #5b6b66);
}
.nc-acard__topic { font-weight: 700; color: var(--nc-teal, #0F6E56); }
.nc-acard__title { margin: 0; font-size: 1.2rem; line-height: 1.3; }
.nc-acard__title a { text-decoration: none; }
.nc-acard__summary { margin: 0; font-size: .95rem; line-height: 1.6; color: #444; }
.nc-acard__actions { margin: var(--nc-s2) 0 0; }
.nc-acard__cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--nc-btn-h); padding-inline: var(--nc-s5);
}

/* ==========================================================================
   4. HOMEPAGE  (P0-E)
   ========================================================================== */
/* Hero: hug the content. The 72vh floor left a band of empty green under the
   grid on tall viewports — the "dead zone" a cold visitor reads as unfinished. */
.hp-hero-v2 { min-height: 0; padding-bottom: var(--nc-s6); }
@media (min-width: 1024px) {
  .hp-hero-v2 { padding-top: var(--nc-s6); padding-bottom: var(--nc-s7); }
}

/* Compact "more reviews" strip replacing two full card catalogues. */
.hp-more { padding-block: var(--nc-s7); }
.hp-more__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--nc-s3);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.hp-more__item { margin: 0; }
.hp-more__link {
  display: flex; align-items: center; gap: var(--nc-s3);
  min-height: var(--nc-btn-h-lg); padding: var(--nc-s3);
  background: #fff; border: 1px solid var(--nc-border, #e1e8ec);
  border-radius: 10px; text-decoration: none; color: inherit;
}
.hp-more__link:hover { border-color: var(--nc-teal, #0F6E56); }
.hp-more__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.hp-more__name { font-weight: 700; font-size: .98rem; }
.hp-more__tier { font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 700; }
.hp-more__tier--tested    { color: var(--nc-teal, #0F6E56); }
.hp-more__tier--desk      { color: #5b6b66; }
.hp-more__tier--editorial { color: #7a7a7a; }
.hp-more__score { flex-shrink: 0; }

/* ==========================================================================
   5. OVERLAY BUDGET  (P0-F)
   Three bottom-fixed layers existed independently: cookie consent, the geo
   router bar and the sticky Claim bar. nc-overlay-budget.js elects one and
   sets the reserve; these classes are what it toggles.
   ========================================================================== */
body.nc-overlay-1 { padding-bottom: 72px; }
body.nc-overlay-2 { padding-bottom: 96px; }
#nc-geo-banner[hidden], .nc-sticky-cta[hidden] { display: none !important; }

/* A sticky bar must never sit on top of a primary money CTA. */
.nc-sticky-cta { z-index: 9998; }
#nc-geo-banner  { z-index: 9997; }
#nc-cookie-banner { z-index: 99999; }

/* ==========================================================================
   6. BUTTON + LOGO TOKENS  (P0-G, P1-E)
   ========================================================================== */
.nc-btn { min-height: var(--nc-btn-h); display: inline-flex; align-items: center; justify-content: center; }
.nc-btn--lg { min-height: var(--nc-btn-h-lg); }
/* A full-bleed ghost stripe reads as a disabled banner rather than an action.
   Ghost buttons size to their content unless they are explicitly blocked. */
.nc-btn--ghost:not(.nc-btn--block):not(.nc-rcard__cta) { width: auto; padding-inline: var(--nc-s5); }

/* Fixed logo frame — stops the HitNSpin sliver and the uneven tiles in lists. */
.nc-logo { display: flex; align-items: center; justify-content: center; }
.nc-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.nc-logo--sm { width: 88px; height: 44px; flex: 0 0 88px; }
.nc-logo--lg { width: 160px; height: 80px; }

/* ==========================================================================
   7. MOBILE GUARDS
   ========================================================================== */
@media (max-width: 767px) {
  .nc-rcard-grid, .nc-acard-grid, .hp-more__list { grid-template-columns: 1fr; }
  .nc-rcard__head { flex-wrap: wrap; }
  .nc-archive__standfirst { font-size: 1rem; }
  /* Nothing in an article may force the page sideways. */
  .container.content-wrap > article :is(pre, code) { overflow-x: auto; max-width: 100%; }
}

/* ==========================================================================
   8. REVIEW TEMPLATE  (P1-B, P1-D)
   ========================================================================== */
/* Evidence tier chip — stated before the CTA, in the site's one tier vocabulary. */
.nc-chip--tier { font-weight: 700; letter-spacing: .03em; text-transform: uppercase; font-size: .7rem; }
.nc-chip--tier-tested    { background: var(--nc-teal, #0F6E56); color: #fff; }
.nc-chip--tier-desk      { background: #eef2f1; color: #40514c; }
.nc-chip--tier-editorial { background: #f2f2f2; color: #666; }

/* Jump menu: a disclosure on a phone, always-open chips from 721px. */
.nc-toc-wrap { margin: 0 0 var(--nc-s5); }
.nc-toc-summary {
  cursor: pointer; font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--nc-teal, #0F6E56);
  padding: var(--nc-s3) 0; list-style: revert;
}
@media (min-width: 721px) {
  .nc-toc-summary { display: none; }
  .nc-toc-wrap { margin-bottom: var(--nc-s4); }
}
@media (max-width: 720px) {
  /* Closed by default on a phone: eight chips in a sideways scroller was the
     first thing between the hero and the review. */
  .nc-toc-wrap:not([data-force-open]) > .nc-toc { padding-top: var(--nc-s2); }
  .nc-toc-wrap[open] .nc-toc ul { flex-wrap: wrap; overflow-x: visible; }
}

/* ==========================================================================
   9. TOUCH TARGETS
   nc-components.css:  .nc-offer-card__actions .nc-btn--ghost { min-height: 0;
   padding: .15rem 0 } — a J-phase decision to stop the offer card showing two
   heavy buttons. Right instinct, wrong mechanism: it left the "Read review"
   link 21px tall, well under the 44px floor, on every offer card on every hub.
   Keep the light visual weight (no fill, no border) and give it a real hit area.
   ========================================================================== */
.nc-offer-card__actions .nc-btn--ghost {
  min-height: var(--nc-btn-h);
  display: inline-flex;
  align-items: center;
  padding: var(--nc-s2) 0;
}

/* Visually-hidden utility. WordPress core markup (pagination
   screen_reader_text, skip links) assumes this class exists; this theme never
   defined it, so those strings were rendering as visible text. */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: static !important; width: auto; height: auto;
  clip: auto; clip-path: none; margin: 0; padding: var(--nc-s2) var(--nc-s3);
}

/* ==========================================================================
   10. HOMEPAGE HERO — COMPACT ON MOBILE  (V1.1, 13 Aug 2026)
   The hero measured 1287px at 390 because homepage-v2.css wraps each mini row
   at ≤900px and gives the CTA a full-width 48px line of its own — three rows of
   ~210px. The ladder and the Get bonus buttons stay exactly as they are; the
   row just stops being a full desktop card. Desktop (>900px) is untouched, so
   the R2.1 hero scale is unaffected.
   ========================================================================== */
@media (max-width: 900px) {
  .hp-hero-v2__mini { gap: var(--nc-s2); }

  /* Back to one line: logo · name+bonus+tier · button.
     Scoped through .hp-hero-v2__mini on purpose. homepage-v2.css is enqueued
     from inside front-page.php, so it loads AFTER this sheet and its
     `.hp-mini-row { flex-wrap: wrap }` at ≤767px was winning on source order.
     Extra specificity settles it without an !important arms race. */
  .hp-hero-v2__mini .hp-mini-row {
    flex-wrap: nowrap;
    gap: var(--nc-s3);
    padding: var(--nc-s3);
    align-items: center;
  }
  .hp-mini-row .nc-logo,
  .hp-mini-row .nc-logo--sm { width: 64px; height: 34px; flex: 0 0 64px; }
  .hp-mini-row__name { font-size: .95rem; }
  /* Bonus keeps wrapping — type-system B5 forbids eliding a money figure, and
     that rule is right. It just does it at a smaller size here. */
  .hp-mini-row__bonus { font-size: .78rem; line-height: 1.35; }
  .hp-mini-row__tier { font-size: .62rem; }
  .hp-hero-v2__mini .hp-mini-row .nc-btn--sm {
    flex: 0 0 auto;
    width: auto;
    min-height: var(--nc-btn-h);
    padding-inline: var(--nc-s3);
    white-space: nowrap;
    font-size: .82rem;
  }
  .hp-hero-v2__author { margin-top: var(--nc-s3); }
  .hp-mini-terms { font-size: .72rem; margin-top: var(--nc-s2); }
}
@media (max-width: 430px) {
  .hp-hero-v2__mini .hp-mini-row { gap: var(--nc-s2); padding: 10px; }
  .hp-mini-row .nc-logo,
  .hp-mini-row .nc-logo--sm { width: 52px; height: 28px; flex: 0 0 52px; }
  .hp-hero-v2__mini .hp-mini-row .nc-btn--sm { padding-inline: 10px; font-size: .78rem; }
  /* Two short lines instead of four: the brand row and the offer row. */
  .hp-mini-row__bonus { font-size: .76rem; line-height: 1.3; }
}

/* Paired hero buttons get one width on mobile. The contract calls this out:
   one hugging its text and one boxed wider reads as unfinished. */
@media (max-width: 900px) {
  .hp-hero-v2__cta-row { display: flex; flex-direction: column; gap: var(--nc-s3); }
  .hp-hero-v2__cta-row > .nc-btn,
  .hp-hero-v2__cta-row > a { width: 100%; justify-content: center; }
}

/* ==========================================================================
   11. V2 (13 Aug 2026)
   ========================================================================== */

/* Review hero: evidence before the action.
   The hero is a three-column grid (logo · info · CTA) and the CTA column was
   top-aligned, so at 1280 the Claim button sat at y=152 while the verdict, the
   tier, the licence and the checked date ran from 230 to 462 — the button was
   the FIRST thing in the hero, above every fact that justifies it. Aligning the
   CTA column to the end puts it level with the licence chips: verdict, offer,
   tier, licence, then the button. Mobile already stacks in that order. */
@media (min-width: 1024px) {
  /* align-self: end alone only got the button to y=329 — after the verdict but
     still level with the offer and the licence chips, because the CTA block is
     133px tall and bottom-aligning it lifts its top back up. Level-with is not
     before. Give the CTA its own row under the info column instead: logo in
     column 1, everything the reader needs in column 2 row 1, the action in
     column 2 row 2. The third column existed only to hold the button. */
  .casino-hero { grid-template-columns: 220px minmax(0, 1fr) !important; }
  .casino-hero__info { grid-column: 2; grid-row: 1; }
  .casino-hero__cta {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--nc-s3);
    margin-top: var(--nc-s4);
  }
  .casino-hero__cta small { flex: 1 0 100%; margin: 0; }
}

/* Offer card: the review link is a link, not a second button.
   .nc-offer-card__actions is a column flex container, so its children stretched
   to the button's 168px. The ghost already had no fill and no border, but a
   168px underlined block directly under a 168px button still reads as a pair of
   buttons. Sizing it to its text is what makes it read as a link. */
.nc-offer-card__actions .nc-btn--ghost {
  align-self: start;
  width: auto;
  max-width: 100%;
}

/* Sticky bar must never be wider than the viewport.
   V1 added the evidence-tier line to the bar's text block. On a review page the
   bar is present-but-suppressed (it hides while the page's own claim button is
   on screen) so it still takes part in layout — and with the extra line the
   nowrap content pushed the fixed bar to 468px against a 390px viewport, which
   is a 77px horizontal scroll on the whole document. The earlier matrix missed
   it because on those URLs the bar was `hidden` and had no layout at all. */
.nc-sticky-cta {
  max-width: 100vw;
  box-sizing: border-box;
  overflow: hidden;
}
.nc-sticky-cta__inner { min-width: 0; max-width: 100%; box-sizing: border-box; }
.nc-sticky-cta__text { min-width: 0; flex: 1 1 auto; }
.nc-sticky-cta__text > * { display: block; overflow: hidden; text-overflow: ellipsis; }
/* The money figure is the one line that must never be clipped. */
.nc-sticky-cta__text > span:first-of-type { white-space: normal; overflow: visible; text-overflow: clip; }
.nc-sticky-cta__btn { flex: 0 0 auto; }

/* Cookie banner: same overflow, different element. The banner is fixed with
   left:0;right:0 and carries horizontal padding, but nothing set box-sizing, so
   its content box was the full viewport and the padding pushed it 49px past the
   right edge. Border-box plus a wrapping action row keeps it inside the phone. */
#nc-cookie-banner.nc-cookie-banner,
#nc-cookie-banner .nc-cookie-banner__inner,
#nc-cookie-banner .nc-cookie-banner__actions,
#nc-cookie-banner .nc-cookie-banner__text {
  box-sizing: border-box;
  max-width: 100%;
}
#nc-cookie-banner.nc-cookie-banner { overflow-x: hidden; }
@media (max-width: 430px) {
  #nc-cookie-banner .nc-cookie-banner__actions { flex-wrap: wrap; }
  #nc-cookie-banner .nc-cookie-btn { min-width: 0; }
}

/* Review hero: a long licence string must not set the page width.
   `.casino-hero` is a grid and its items default to `min-width: auto`, so the
   track is sized by the widest unbreakable child. V1.1 lengthened MyStake's
   licence chip to carry the real number and the renewal caveat
   ("Curaçao GCB — OGL/2024/1798/1048 (renewal under GCB review)"), the chip is
   nowrap, and the single column computed to 430px inside a 363px hero — 77px of
   horizontal scroll on the whole document at 390. The honest chip stays; the
   grid item is allowed to shrink and the chip is allowed to wrap on a phone. */
.casino-hero > * { min-width: 0; }
@media (max-width: 767px) {
  /* Every chip, not just the hero's: the same 430px licence string renders in
     Quick Facts and the evidence card, and one nowrap chip anywhere is enough to
     widen the layout viewport — which then re-sizes the fixed cookie bar to
     match, so a single chip produced two apparent overflow bugs. */
  .nc-chip { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
  .casino-hero__info, .casino-hero__cta { max-width: 100%; }
}