/* ==========================================================================
   Bizzo Casino — Global styles
   Base typography, layout container, buttons, tables, cards, utility
   classes shared by every page and block.
   ========================================================================== */

body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-body);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  /* Safety net: nothing on the page (a wide table, a slider, a stray
     image) should ever be able to push the viewport into horizontal
     scroll. Tables scroll internally via .table-wrap's own overflow-x. */
  overflow-x: hidden;
  /* Safety net #2: an unusually long unbroken word/URL/email should wrap
     inside its own container instead of forcing that container wider
     than the viewport (which, combined with the rule above, would make
     the tail of the word silently disappear off-screen). */
  overflow-wrap: break-word;
}

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

/* ---- Skip link ---- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 2000;
  background: var(--color-accent-light);
  color: var(--color-btn-text-dark);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-card);
  font-weight: var(--font-weight-semibold);
  transition: top var(--transition-base);
}

.skip-link:focus-visible {
  top: 1rem;
}

/* ---- Headings ---- */
h1,
.h1 {
  font-size: var(--font-size-h1);
  color: var(--color-white);
  line-height: 1.15;
}

h2,
.h2 {
  font-size: var(--font-size-h2);
  color: var(--color-heading-gold);
  line-height: 1.2;
}

h3,
.h3 {
  font-size: var(--font-size-h3);
  color: var(--color-white);
  line-height: 1.3;
}

p {
  margin-bottom: var(--space-paragraph);
}

p:last-child {
  margin-bottom: 0;
}

h2 + p,
h2 + .section__intro {
  margin-top: var(--space-h2-text);
}

h3 + p,
h3 + ul,
h3 + ol,
h3 + .section__intro {
  margin-top: var(--space-h3-text);
}

/* ---- Vertical rhythm ----
   Generic spacing for content blocks (headings, tables, lists, CTA
   grids) that don't already have a more specific adjacent-sibling rule
   above. :where() keeps this at zero specificity so the tuned h2+p /
   h3+p rules above always win where they apply — this only fills the
   gaps: an image or table sitting directly before a heading, a list
   sitting directly before a button, etc. */
:where(h2, h3, .table-wrap, .list, .two-col-grid, .card-grid) {
  margin-top: var(--space-paragraph);
}

:where(h2, h3, .table-wrap, .list, .two-col-grid, .card-grid):first-child {
  margin-top: 0;
}

.table-wrap,
.list {
  margin-bottom: var(--space-paragraph);
}

.table-wrap:last-child,
.list:last-child {
  margin-bottom: 0;
}

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

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

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

/* Two <section class="section"> elements back-to-back each contribute
   their own top+bottom padding, so the visual gap between them doubles
   up (bottom padding of the first + top padding of the second) — e.g.
   the paragraph-to-H2 gap looked much bigger than the normal
   between-section rhythm. This makes the second section's own top
   padding collapse by default whenever it directly follows another
   .section, so the gap is exactly one --space-section, not two. */
.section + .section {
  padding-block-start: 0;
}

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

.section__intro {
  max-width: 80ch;
}

/* ---- Lists ----
   Only content lists get the .list class (bullets for <ul>, numbers for
   <ol>). Navigational/component lists — header nav, footer links, TOC,
   FAQ, dropdowns — keep their own list-style: none in their block CSS,
   so removing markers is scoped to where it's actually wanted instead
   of stripping every <ul>/<ol> on the site. */
.list {
  display: grid;
  gap: 0.5rem;
  padding-left: 1.25rem;
}

.list li {
  padding-left: 0.25rem;
}

ul.list li {
  list-style: disc;
}

ol.list li {
  list-style: decimal;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-pill);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-body);
  text-align: center;
  transition: transform var(--transition-fast), filter var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
}

.btn:hover {
  filter: brightness(1.08);
}

.btn:active {
  transform: translateY(1px);
}

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

.btn--secondary {
  background: transparent;
  color: var(--color-white);
  border: 1px solid var(--color-btn-secondary-border);
}

.btn--neon {
  background: var(--color-accent-neon);
  color: var(--color-btn-text-dark);
}

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

/* ---- Cards ---- */
.card {
  background-color: var(--color-card-bg);
  border-radius: var(--radius-card);
  padding: var(--space-card-padding);
  /* Grid items default to min-width: auto, which sizes them to their
     widest unbreakable content (e.g. a .table-wrap's min-width table
     inside). Without this, the card — and everything above it up to
     body — gets forced wider than the viewport on mobile, and since
     body has overflow-x: hidden that extra width is silently clipped
     instead of scrolled, so content disappears off-screen. */
  min-width: 0;
}

.bonus-card {
  display: grid;
  gap: 0.75rem;
  text-align: left;
}

.bonus-card__img {
  width: 100%;
  aspect-ratio: 3 / 2;
  /* Bonus artwork is transparent-background character art, not a photo —
     contain keeps the whole character in frame (no cropped heads/limbs)
     while the fixed aspect-ratio box keeps every card the same height. */
  object-fit: contain;
  background-color: var(--color-card-bg);
  border-radius: var(--radius-card);
}

.bonus-card__title {
  margin: 0;
}

.bonus-card__text {
  margin: 0;
  font-size: var(--font-size-small);
  flex-grow: 1;
}

/* ---- Tables ---- */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-card);
  background-color: var(--color-card-bg);
}

.data-table {
  min-width: 480px;
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--font-size-small);
  color: var(--color-text-body);
}

.data-table th {
  color: var(--color-heading-gold);
  font-weight: var(--font-weight-semibold);
  background-color: var(--color-bg-dark);
}

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

/* ---- Breadcrumb ---- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: var(--font-size-small);
  color: var(--color-text-body);
}

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

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

.breadcrumb__sep {
  opacity: 0.6;
}

.breadcrumb__current {
  color: var(--color-white);
}

/* ---- Two column grid (Android/iOS etc.) ---- */
.two-col-grid {
  display: grid;
  gap: var(--space-card-gap);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .two-col-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Card grid (bonuses, FAQ groups etc.) ---- */
.card-grid {
  display: grid;
  gap: var(--space-card-gap);
  grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 480px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .card-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---- Fade-in animation hook (opt-in via JS/IntersectionObserver) ---- */
.fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- Visually hidden (a11y) ---- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

main {
  overflow-x: clip;
}

/* ---- Error page (404) ---- */
.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-card-gap);
  padding-block: var(--space-section);
}

.error-page__code {
  font-size: clamp(3rem, 10vw, 6rem);
  font-weight: 800;
  color: var(--color-heading-gold);
  line-height: 1;
}

.error-page__title {
  margin: 0;
}

.error-page__text {
  max-width: 42rem;
  color: var(--color-text-body);
}