/* ==========================================================================
   NV Casino DE — additive theme layer
   The approved design system lives untouched in design-style.css. Because the
   page templates now emit the design's *exact* HTML (no Gutenberg markup to
   bridge), this file is intentionally tiny: two genuine fixes to gaps in the
   static mockup, plus scoped utility classes that reproduce — with identical
   values — the handful of inline styles the mockup used, so no inline CSS is
   needed in the PHP templates.
   ========================================================================== */

/* --- Genuine fixes to gaps in the approved static CSS ---------------------- */

/* The mockup set overflow-x:hidden on <body> only. The off-canvas mobile
   drawer (.mnav, translateX(100%)) can still let the root element scroll a few
   px sideways on some pages; constraining <html> too closes that without any
   visible layout change. */
html {
  overflow-x: hidden;
  max-width: 100%;
}

/* The pros/cons heading is a flex row with a leading icon, but the mockup had
   no size rule for that <svg>, so it fell back to the browser's 300x150
   intrinsic default. Every other icon in the design has an explicit size; this
   matches them. */
.pc h3 svg {
  width: 22px;
  height: 22px;
  flex: none;
}

/* --- Scoped utilities: exact reproductions of the mockup's inline styles ---- */

/* Breadcrumb inner row. Uses the shared .wrap gutter so the trail aligns with
   the page content below it (see template-parts/global/breadcrumbs.php). */
.crumbs__inner {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Section head rendered as a space-between row (heading left, "see all" link
   right) — the home page's game/review section heads. */
.section__head--row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  max-width: none;
  flex-wrap: wrap;
}

/* Inline action-button rows (design: display:flex; gap:.8rem; flex-wrap:wrap
   plus a margin-top supplied by the .mt-* utilities below). */
.actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

/* Footer responsible-gaming note beside the 18+ badge. */
.age-note {
  color: var(--fg-3);
  font-size: 0.78rem;
  max-width: 24ch;
  line-height: 1.5;
}

/* Top-margin utilities matching the exact values used inline in the mockup. */
.mt-1  { margin-top: 1rem; }
.mt-12 { margin-top: 1.2rem; }
.mt-14 { margin-top: 1.4rem; }
.mt-16 { margin-top: 1.6rem; }
.mt-2  { margin-top: 2rem; }

/* Bottom-margin utilities (intro ledes). */
.mb-14 { margin-bottom: 1.4rem; }
.mb-16 { margin-bottom: 1.6rem; }

/* App page: the store-badge row is a .pill-list of .pay tiles with a slightly
   wider gap (design inline: display:flex; gap:.6rem). */
.app-badges { gap: 0.6rem; }

/* Reviews page: the rating summary heading sits tight above its paragraph
   (design inline: margin-bottom:.3rem). */
.rating h2 { margin-bottom: 0.3rem; }

/* Legal/prose pages: the last-updated line under the H1 (design inline:
   margin:.6rem 0 1.6rem). */
.updated--prose { margin: 0.6rem 0 1.6rem; }

/* 404: the two spacing values the mockup set with style attributes, moved to
   classes so no template emits inline CSS. */
.err__title { margin: 0.4rem 0 1rem; }
.err__cta   { margin-top: 1.6rem; }

/* Mobile nav drawer: scroll lock. Replaces the JS
   `document.body.style.overflow` assignment so no inline style is ever set. */
body.is-nav-open { overflow: hidden; }

/* Contextual "related pages" row between the FAQ and the bottom CTA band.
   Ghost links only — this is in-content internal linking, not a new design
   element; it reuses the .btn--ghost / .actions components of the design. */
.section--related { padding-block: clamp(28px, 4vw, 44px); }
.related-links    { margin-top: 1rem; }
