/* =========================================================
   Godz Casino — Global styles
   ========================================================= */

body {
  background-color: var(--color-bg-primary);
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  overflow-x: hidden;
}

main {
  display: block;
  overflow-x: clip;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: var(--z-modal);
  background: var(--color-heading-accent);
  color: #121212;
  font-weight: var(--fw-semibold);
  padding: 12px 20px;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 0;
}

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Section rhythm */
.section {
  padding-block: var(--space-section);
}

.section--tight {
  padding-block-start: 0;
}

/* Modifier for the specific case of a "tight" section (no intro paragraph,
   grid starts right under the H2) placed directly after the TOC block.
   TOC has no bottom padding and the tight section has no top padding, and
   the H2 is the container's first child so the rhythm system also zeroes
   its own margin-top — stacked together that left almost no visible gap
   between the TOC panel and the heading. Give that specific pairing a
   small explicit gap. Applied via markup (not a `.toc + .section--tight`
   sibling selector) because toc.php's own <script> tag sits between the
   TOC <section> and the next one in the DOM, breaking direct adjacency. */
.section--tight-after-toc {
  padding-block-start: 20px;
}

/* Headings */
h1, h2, h3, h4 {
  font-family: var(--font-main);
  color: var(--color-white);
  font-weight: var(--fw-bold);
  line-height: 1.25;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-black);
}

h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--color-heading-accent);
  position: relative;
  padding-bottom: 14px;
}

h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 3px;
  background: var(--gradient-btn-primary);
}

h3 {
  font-family: var(--font-decorative);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-white);
}

p {
  margin: 0;
}

/* =========================================================
   Vertical rhythm — single source of truth for spacing between
   headings, paragraphs, lists and tables inside page content.

   Scoped to two levels: direct children of a section's `.container`
   (hand-written intro/legal copy, FAQ heading, grid headings, etc.)
   and direct children of `.content-section__body` (the repeatable
   H2 + text block used on every page). Both levels reset to zero
   first, then get one explicit top/bottom margin each — nothing here
   depends on what a neighbouring rule happens to set, and nothing
   uses !important.

   Deliberately excluded: hero, bonus-banner and the 404 block, which
   lay out their own children with flex `gap` — adding margins there
   would just stack on top of that gap. Card/grid/slider components
   (bonus-grid, games-slider, platform cards, FAQ items) don't need an
   exclusion because they're never direct children of `.container` or
   `.content-section__body` in the first place — they manage their own
   spacing (also via `gap`) inside their own block CSS.
   ========================================================= */
.container:not(.hero__inner):not(.bonus-banner__inner):not(.error-page__inner) > :where(h2, h3, h4, p, ul, ol, .data-table-wrap),
.content-section__body > :where(h2, h3, h4, p, ul, ol, .data-table-wrap) {
  margin-top: 0;
  margin-bottom: 0;
}

.container:not(.hero__inner):not(.bonus-banner__inner):not(.error-page__inner) > :where(p, ul, ol),
.content-section__body > :where(p, ul, ol) {
  margin-bottom: 16px;
}

.container:not(.hero__inner):not(.bonus-banner__inner):not(.error-page__inner) > .data-table-wrap,
.content-section__body > .data-table-wrap {
  margin-top: 20px;
  margin-bottom: 24px;
}

.container:not(.hero__inner):not(.bonus-banner__inner):not(.error-page__inner) > h2,
.content-section__body > h2 {
  margin-top: 16px;
  margin-bottom: 12px;
}

.container:not(.hero__inner):not(.bonus-banner__inner):not(.error-page__inner) > :where(h3, h4),
.content-section__body > :where(h3, h4) {
  margin-top: 24px;
  margin-bottom: 10px;
}

.container:not(.hero__inner):not(.bonus-banner__inner):not(.error-page__inner) > :first-child,
.content-section__body > :first-child {
  margin-top: 0;
}

.container:not(.hero__inner):not(.bonus-banner__inner):not(.error-page__inner) > :last-child,
.content-section__body > :last-child {
  margin-bottom: 0;
}

/* On narrow screens H2 wraps onto multiple lines more often, so it gets
   a slightly tighter top margin and a looser line-height there. */
@media (max-width: 767px) {
  .container:not(.hero__inner):not(.bonus-banner__inner):not(.error-page__inner) > h2,
  .content-section__body > h2 {
    margin-top: 12px;
    margin-bottom: 10px;
    line-height: 1.3;
  }
}

ul.styled-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

ul.styled-list li {
  position: relative;
  padding-left: 22px;
  color: var(--color-text);
}

ul.styled-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  background: var(--color-accent);
}

a.inline-link {
  color: var(--color-heading-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

a.inline-link:hover {
  color: var(--color-accent);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-main);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  padding: 14px 28px;
  border-radius: 0;
  clip-path: var(--clip-cut);
  color: var(--color-btn-text);
  white-space: nowrap;
  transition: filter var(--transition-fast), transform var(--transition-fast);
}

.btn:hover,
.btn:focus-visible {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.btn--primary {
  background: var(--gradient-btn-primary);
}

.btn--secondary {
  background: var(--gradient-btn-secondary);
}

.btn--block {
  width: 100%;
}

/* Cards */
.card {
  background: var(--color-card-bg);
  clip-path: var(--clip-cut);
  padding: var(--space-card-padding);
}

/* Tables */
.data-table-wrap {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  min-width: 480px;
  background: var(--color-bg-dark);
  clip-path: var(--clip-cut);
}

.data-table caption {
  text-align: left;
  color: var(--color-heading-accent);
  font-weight: var(--fw-semibold);
  padding: 16px;
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-nav-accent);
  font-size: var(--fs-small);
  color: var(--color-text);
}

.data-table thead th {
  background: rgba(0, 156, 169, 0.14);
  color: var(--color-white);
  font-weight: var(--fw-semibold);
}

.data-table tr:last-child td {
  border-bottom: none;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--fs-small);
  color: var(--color-text);
}

.breadcrumb a {
  color: var(--color-text);
  transition: color var(--transition-fast);
}

.breadcrumb a:hover {
  color: var(--color-heading-accent);
}

.breadcrumb__current {
  color: var(--color-heading-accent);
}

/* Content section (H2 + image + text, repeatable block).
   Per spec the image always sits directly after the H2 and before the
   body copy, at every breakpoint (mobile and desktop alike). */
.content-section__body {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.content-section__image {
  margin-top: var(--space-h2-text);
  margin-bottom: var(--space-paragraph);
}

.content-section__image img {
  width: 100%;
  height: auto;
  clip-path: var(--clip-cut);
}

/* Generic grid helpers */
.grid-2 {
  display: grid;
  gap: var(--space-card-gap);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

/* Utility */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.text-center {
  text-align: center;
}

.mt-section-gap {
  margin-top: var(--space-h2-text);
}

.cta-row {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.platform-grid {
  margin-top: var(--space-h2-text);
  margin-bottom: var(--space-paragraph);
}

.platform-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.platform-card .btn {
  margin-top: auto;
}

.age-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-white);
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
}

/* Note: a duplicate `@media (min-width: 768px) { .section { padding-block:
   var(--space-section); } }` rule used to live here. It set the exact same
   value the unconditional .section rule above already sets, so it changed
   nothing responsive — its only real effect was that, on screens >=768px,
   it silently overrode .section--tight/.section--tight-after-toc's zeroed
   padding-block-start back to the full section gap (same specificity as
   those modifiers, later in source order wins). Removed as dead weight
   that was actively breaking the "tight" section modifiers on desktop. */