/* ============================================================
   MasterBets365 — Global Design System
   Editorial-Print-Digital Archetype | Rioplatense Pre-lander
   ============================================================ */

/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;700&family=Source+Sans+3:wght@400;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ============================================================
   CSS CUSTOM PROPERTIES — TOKEN DISCIPLINE
   ============================================================ */
:root {
  /* Backgrounds */
  --bg: #f7f4ef;                          /* warm paper base */
  --bg-elevated: #ffffff;                  /* card/elevated surfaces */
  --border: #e2ddd4;                       /* subtle editorial border */

  /* Text */
  --text: #1a1c20;                         /* ink-near body text */
  --muted: #5c6168;                        /* secondary/muted text */
  --text-dark: #111111;                    /* explicit dark text for light bg */
  --text-light: #f0f0f0;                   /* explicit light text for dark bg */

  /* Accent */
  --accent: #e03d24;                       /* vermillion — official CTAs only */
  --accent-strong: #b82e1a;               /* hover state for accent */
  --accent-h: 9;                           /* accent hue for HSL calculations */

  /* Gold */
  --gold: #c9a227;                         /* stat highlight */
  --gold-h: 43;                            /* gold hue for HSL calculations */

  /* Pitch (dark surface) */
  --pitch: #1a1c20;                        /* hero/footer dark band */
  --on-pitch-muted: #b8bcc4;              /* muted text on pitch bg */

  /* Links */
  --link: #0d5cab;                         /* body link color */
  --link-hover: #094880;                   /* body link hover */
  --link-on-dark: #9ec9ff;                /* link on dark backgrounds */
  --link-on-dark-hover: #cfe4ff;          /* link hover on dark backgrounds */

  /* On-accent */
  --on-accent: #ffffff;                    /* text on accent button */

  /* Typography stacks */
  --font: 'Source Sans 3', 'Segoe UI', sans-serif;        /* body font */
  --font-display: 'Fraunces', 'Georgia', serif;            /* display headlines */
  --font-meta: 'IBM Plex Mono', 'Courier New', monospace;  /* fixture labels, meta */

  /* Layout */
  --radius: 6px;                           /* border radius */
  --max: 1120px;                           /* max container width */
  --shadow: 0 2px 12px rgba(26,28,32,0.08); /* card shadow */

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 3.5rem;
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* universal reset */
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; } /* root font and scroll */
body {
  font-family: var(--font);
  color: var(--text-dark);
  background: var(--bg);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; height: auto; } /* media reset */
button { cursor: pointer; font-family: inherit; border: none; background: none; } /* button reset */
a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; } /* default link */
a:hover { color: var(--link-hover); } /* link hover */
ul, ol { padding-left: 1.25rem; } /* list indent */
table { border-collapse: collapse; width: 100%; } /* table reset */
th, td { text-align: left; padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--border); } /* table cell */
th { font-weight: 600; font-family: var(--font-meta); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } /* table header */
tr:hover td { background: rgba(224,61,36,0.04); } /* table row hover */

/* ============================================================
   SCROLL PROGRESS BAR
   ============================================================ */
#scroll-progress { /* fixed top progress indicator */
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--accent);
  z-index: 9999;
  transition: width 0.1s linear;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; color: inherit; } /* display headings */
h1 { font-size: clamp(2rem, 5vw, 3.25rem); } /* display h1 */
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); } /* section h2 */
h3 { font-size: clamp(1.125rem, 2.5vw, 1.5rem); } /* subsection h3 */
h4 { font-size: 1.125rem; } /* card heading */
h5 { font-size: 1rem; font-family: var(--font); font-weight: 600; } /* minor heading */
p { margin-bottom: 1rem; } /* paragraph spacing */
p:last-child { margin-bottom: 0; } /* no trailing margin */
blockquote { font-family: var(--font-display); font-size: clamp(1.25rem,3vw,1.75rem); font-style: italic; } /* blockquote base */
small { font-size: 0.8rem; } /* small text */
.meta { font-family: var(--font-meta); font-size: 0.8rem; color: var(--muted); } /* meta/mono label */
.eyebrow { /* section label above heading */
  font-family: var(--font-meta);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  display: block;
  margin-bottom: 0.5rem;
}
.lead { font-size: 1.125rem; color: var(--muted); line-height: 1.7; } /* intro lead paragraph */
.prose { max-width: 68ch; } /* constrained reading width */
.prose p + p { margin-top: 1rem; } /* prose paragraph spacing */
.prose a { color: var(--link); } /* prose link */
.prose a:hover { color: var(--link-hover); } /* prose link hover */

/* ============================================================
   LAYOUT — CONTAINERS & GRID
   ============================================================ */
.container { /* page-width wrapper */
  width: 100%;
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.section { /* standard section spacing */
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}
.section--xl { /* extra large section */
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}
.section--sm { /* compact section */
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } /* two-column grid */
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } /* three-column grid mobile-first */
.grid-4 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } /* four-column grid mobile-first */
.asymmetric-hero { display: grid; grid-template-columns: 1fr; gap: 2rem; } /* asymmetric hero mobile */
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } /* flexbox space-between */
.flex-center { display: flex; justify-content: center; align-items: center; gap: 1rem; } /* flexbox center */
.flex-gap { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } /* flexbox gap wrap */
.text-center { text-align: center; } /* center aligned text */
.text-right { text-align: right; } /* right aligned text */

/* ============================================================
   BAND COLORS — DARK SECTION PATTERN (MANDATORY)
   ============================================================ */
.band-pitch { /* dark ink pitch band */
  background: var(--pitch);
  color: var(--text-light);
}
.band-pitch * { color: inherit; } /* force child color inheritance on pitch */

.band-bg { /* secondary dark band */
  background: #23262b;
  color: var(--text-light);
}
.band-bg * { color: inherit; } /* force child color inheritance on dark band */

.band-elevated { /* white elevated band */
  background: var(--bg-elevated);
  color: var(--text-dark);
}
.band-paper { /* warm paper band */
  background: var(--bg);
  color: var(--text-dark);
}
.band-accent { /* accent red band */
  background: var(--accent);
  color: var(--on-accent);
}
.band-accent * { color: inherit; } /* force child color on accent band */

/* ============================================================
   SITE HEADER — NAVIGATION
   ============================================================ */
.site-header { /* sticky site header */
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  background: var(--pitch);
  color: var(--text-light);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-header * { color: inherit; } /* force all header children to inherit light color */

.header-inner { /* header flex container */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  height: 60px;
  max-width: var(--max);
  margin: 0 auto;
}
.header-logo { /* logo lockup */
  flex-shrink: 0;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-light);
  letter-spacing: -0.01em;
}
.header-logo span { color: var(--accent); } /* accent part of logo */

.header-info-badge { /* small affiliate info badge in header */
  font-family: var(--font-meta);
  font-size: 0.65rem;
  color: var(--on-pitch-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid rgba(255,255,255,0.15);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius);
  flex-shrink: 0;
  display: none;
}

/* --- Main Navigation --- */
.main-nav { /* primary nav list */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
  flex-shrink: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav-item { /* individual nav item */
  position: relative;
  list-style: none;
}
.nav-link { /* nav anchor */
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-light);
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
  display: block;
}
.nav-link:hover { color: var(--text-light); border-bottom-color: var(--accent); } /* nav link hover */
.nav-item.active .nav-link { border-bottom-color: var(--accent); color: var(--text-light); } /* active nav item */

/* --- Dropdown --- */
.has-dropdown { position: relative; } /* dropdown trigger container */
.dropdown { /* dropdown menu */
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  z-index: 999;
  background: var(--pitch);
  border: 2px solid var(--accent);
  min-width: 180px;
  padding-top: 8px;
  border-radius: 0 0 var(--radius) var(--radius);
  color: var(--text-light);
  list-style: none;
}
.dropdown * { color: inherit; } /* force dropdown child color inheritance */
.dropdown::before { /* invisible bridge to prevent hover gap */
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
.dropdown li { list-style: none; } /* dropdown list item */
.dropdown a { /* dropdown link */
  display: block;
  padding: 0.6rem 1rem;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-light);
  white-space: nowrap;
  transition: background 0.15s;
}
.dropdown a:hover { background: var(--accent); color: #fff; } /* dropdown hover */
.has-dropdown:hover > .dropdown { display: block; } /* show dropdown on hover */

/* --- Nav CTA --- */
.nav-cta { /* nav call-to-action button */
  background: var(--accent);
  color: var(--on-accent) !important;
  padding: 0.4rem 1rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
  border-bottom: none !important;
}
.nav-cta:hover { background: var(--accent-strong); transform: translateY(-1px); color: var(--on-accent) !important; } /* nav cta hover */

/* --- Hamburger --- */
.hamburger { /* mobile hamburger button */
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 0.4rem;
  cursor: pointer;
  z-index: 1001;
}
.hamburger span { /* hamburger bar */
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-light);
  transition: all 0.25s;
  border-radius: 2px;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } /* hamburger open top bar */
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } /* hamburger open mid bar */
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* hamburger open bottom bar */

/* ============================================================
   SITE FOOTER
   ============================================================ */
.site-footer { /* main footer */
  background: var(--pitch);
  color: var(--text-light);
  padding: 3rem 0 1.5rem;
}
.site-footer * { color: inherit; } /* force footer child color inheritance */

.footer-grid { /* footer 4-column grid */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-bottom: 2rem;
}
.footer-col__heading { /* footer column heading */
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  font-family: var(--font-meta);
  color: var(--on-pitch-muted);
}
.footer-col ul { /* footer link list */
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col ul li { margin-bottom: 0.5rem; } /* footer list item */
.footer-col ul li a { /* footer link */
  text-decoration: none;
  font-size: 0.875rem;
  color: var(--text-light);
  opacity: 0.85;
  transition: opacity 0.2s;
}
.footer-col ul li a:hover { opacity: 1; color: var(--link-on-dark); } /* footer link hover */

.footer-disclaimer { /* disclaimer text block */
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1.5rem;
  font-size: 0.8rem;
  margin-top: 2rem;
  color: var(--on-pitch-muted);
  line-height: 1.7;
}
.footer-bottom { /* footer bottom bar */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 0.75rem;
  margin-top: 1rem;
  color: var(--on-pitch-muted);
  flex-wrap: wrap;
  gap: 0.5rem;
}
.footer-bottom a { color: var(--link-on-dark); } /* footer bottom links */
.footer-bottom a:hover { color: var(--link-on-dark-hover); } /* footer bottom link hover */
.age-badge { /* +18 badge in footer */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--on-pitch-muted);
  font-family: var(--font-meta);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--on-pitch-muted);
  flex-shrink: 0;
}

/* ============================================================
   HERO SECTIONS
   ============================================================ */
.hero { /* dark pitch hero band */
  background: var(--pitch);
  color: var(--text-light);
  padding: 4rem 0 3rem;
}
.hero * { color: inherit; } /* mandatory hero child color inheritance */
.hero .eyebrow { color: var(--accent); } /* hero eyebrow stays accent */
.hero .lead { color: var(--on-pitch-muted); } /* hero lead text muted */
.hero .meta { color: var(--on-pitch-muted); } /* hero meta text */

.hero--light { /* light/paper hero variant */
  background: var(--bg);
  color: var(--text-dark);
  padding: 3rem 0 2.5rem;
  border-bottom: 1px solid var(--border);
}
.hero--light * { color: inherit; } /* light hero inheritance */

/* ============================================================
   BUTTONS & CTAs
   ============================================================ */
.btn { /* base button */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  cursor: pointer;
  border: 2px solid transparent;
  line-height: 1;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(224,61,36,0.25); } /* button hover lift */

.btn-accent { /* primary accent CTA button */
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.btn-accent:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); } /* accent button hover */

.btn-outline { /* outlined secondary button */
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.btn-outline:hover { background: var(--accent); color: var(--on-accent); } /* outline button hover fill */

.btn-outline-light { /* outlined button on dark background */
  background: transparent;
  color: var(--text-light);
  border-color: rgba(255,255,255,0.4);
}
.btn-outline-light:hover { background: rgba(255,255,255,0.1); color: var(--text-light); } /* outline-light hover */

.btn-sm { padding: 0.5rem 1rem; font-size: 0.85rem; } /* small button variant */
.btn-lg { padding: 1rem 2rem; font-size: 1.05rem; } /* large button variant */

/* Bridge pulse animation */
@keyframes bridge-pulse { 0%,100% { box-shadow: 0 4px 16px rgba(224,61,36,0.2); } 50% { box-shadow: 0 4px 28px rgba(224,61,36,0.45); } } /* CTA pulse keyframes */
.btn-pulse { animation: bridge-pulse 2.5s ease-in-out infinite; } /* pulsing CTA button */

/* ============================================================
   CARDS
   ============================================================ */
.card { /* standard editorial card */
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: box-shadow 0.2s, transform 0.2s;
  margin-bottom: 2rem;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); } /* card hover lift */

.card--pitch { /* dark pitch card */
  background: #23262b;
  color: var(--text-light);
  border-color: rgba(255,255,255,0.1);
}
.card--pitch * { color: inherit; } /* pitch card color inheritance */

.card--accent-border { /* card with accent left border */
  border-left: 3px solid var(--accent);
}
.card--accent-border:hover { border-left-color: var(--accent-strong); } /* accent border hover */

.card__label { /* card category label */
  font-family: var(--font-meta);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 0.5rem;
  display: block;
}
.card__title { font-size: 1.125rem; margin-bottom: 0.5rem; } /* card title */
.card__body { font-size: 0.9rem; color: var(--muted); margin-bottom: 1rem; } /* card body copy */
.card__link { /* card inline CTA link */
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.card__link:hover { border-bottom-color: var(--accent); color: var(--accent-strong); } /* card link hover */

/* Method card flip border */
.method-card { /* payment method card */
  background: var(--bg-elevated);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: border-color 0.25s, box-shadow 0.25s;
  margin-bottom: 2rem;
}
.method-card:hover { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(224,61,36,0.08); } /* method card flip hover */

/* Resource card */
.resource-card { /* external resource link card */
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  text-decoration: none;
  display: block;
  transition: box-shadow 0.2s, border-color 0.2s;
  margin-bottom: 2rem;
}
.resource-card:hover { box-shadow: 0 4px 20px rgba(26,28,32,0.12); border-color: var(--gold); } /* resource card shadow hover */
.resource-card__title { font-weight: 600; color: var(--text-dark); display: block; margin-bottom: 0.25rem; } /* resource card heading */
.resource-card__meta { font-family: var(--font-meta); font-size: 0.75rem; color: var(--muted); } /* resource card meta */

/* ============================================================
   CALLOUTS & PULL QUOTES
   ============================================================ */
.callout { /* informational callout box */
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--accent);
  background: rgba(224,61,36,0.05);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 1.5rem;
  transition: border-left-width 0.2s;
}
.callout:hover { border-left-width: 6px; } /* callout accent border hover */
.callout--warn { background: rgba(201,162,39,0.08); border-left-color: var(--gold); } /* warning callout variant */
.callout--neutral { background: rgba(26,28,32,0.04); border-left-color: var(--muted); } /* neutral callout */
.callout__title { font-weight: 700; margin-bottom: 0.4rem; font-size: 1rem; } /* callout heading */

.pull-quote { /* full-width editorial pull quote */
  border-top: 3px solid var(--accent);
  border-bottom: 1px solid var(--border);
  padding: 2rem 0;
  margin: 2rem 0;
}
.pull-quote__text { /* pull quote display text */
  font-family: var(--font-display);
  font-size: clamp(1.35rem,3vw,2rem);
  line-height: 1.3;
  font-style: italic;
  color: var(--text-dark);
  margin-bottom: 1rem;
}
.pull-quote__text::before { content: '\201C'; color: var(--accent); } /* opening quote mark */
.pull-quote__text::after { content: '\201D'; color: var(--accent); } /* closing quote mark */
.pull-quote__attr { /* pull quote attribution */
  font-family: var(--font-meta);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* ============================================================
   TABLES
   ============================================================ */
.table-scroll { /* horizontal scroll wrapper for tables */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 2rem;
}
.table-scroll table { min-width: 520px; } /* ensure table minimum width */
.data-table { width: 100%; } /* data comparison table */
.data-table thead { background: var(--pitch); } /* table head dark */
.data-table thead * { color: var(--text-light); } /* table head text light */
.data-table thead th { color: var(--text-light); font-size: 0.78rem; } /* table header cell */
.data-table td { font-size: 0.9rem; } /* table data cell */
.data-table tr:nth-child(even) td { background: rgba(26,28,32,0.03); } /* zebra stripe even rows */
.data-table tr:hover td { background: rgba(224,61,36,0.05); } /* row hover highlight */
.data-table .badge { /* inline table badge */
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  font-family: var(--font-meta);
  font-size: 0.7rem;
  background: rgba(201,162,39,0.15);
  color: #7a610f;
  font-weight: 500;
}

/* ============================================================
   TABS
   ============================================================ */
.tab-strip { /* tab button container */
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: 1.5rem;
}
.tab-strip::-webkit-scrollbar { display: none; } /* hide tab strip scrollbar */
.tab-btn { /* individual tab button */
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.65rem 1.25rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}
.tab-btn:hover { color: var(--text-dark); } /* tab hover */
.tab-btn.is-active { color: var(--accent); border-bottom-color: var(--accent); } /* active tab */
.tab-panel { display: none; } /* hidden tab panel */
.tab-panel.is-active { display: block; } /* visible active panel */

/* ============================================================
   ACCORDIONS
   ============================================================ */
.accordion-item { /* accordion container item */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.accordion-trigger { /* accordion toggle button */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: var(--bg-elevated);
  border: none;
  font-family: var(--font);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-dark);
  cursor: pointer;
  text-align: left;
  transition: background 0.2s;
  gap: 1rem;
}
.accordion-trigger:hover { background: rgba(224,61,36,0.04); } /* accordion trigger hover */
.accordion-trigger .accordion-icon { /* accordion +/- icon */
  font-family: var(--font-meta);
  font-size: 1rem;
  flex-shrink: 0;
  color: var(--accent);
  line-height: 1;
  transition: transform 0.25s;
}
.accordion-body { /* accordion collapsible content */
  display: none;
  padding: 0 1.25rem 1.25rem;
  background: var(--bg-elevated);
  font-size: 0.95rem;
  color: var(--text-dark);
  line-height: 1.7;
}
.accordion-item.is-open .accordion-body { display: block; } /* show open accordion body */
.accordion-item.is-open .accordion-icon { transform: rotate(45deg); } /* rotate icon when open */

/* Checklist details */
.checklist-item { /* checklist expandable item */
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 0;
}
.checklist-trigger { /* checklist toggle */
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
}
.checklist-body { /* checklist content */
  display: none;
  padding-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.checklist-item.is-expanded .checklist-body { display: block; } /* open checklist body */

/* Native details/summary */
details { /* native details element */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
  background: var(--bg-elevated);
  overflow: hidden;
}
summary { /* details summary trigger */
  padding: 1rem 1.25rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.95rem;
}
summary::-webkit-details-marker { display: none; } /* remove default marker */
summary::after { /* custom summary arrow */
  content: '+';
  font-family: var(--font-meta);
  color: var(--accent);
  font-size: 1rem;
  transition: transform 0.25s;
}
details[open] summary::after { transform: rotate(45deg); } /* open summary arrow */
details > :not(summary) { padding: 0 1.25rem 1.25rem; font-size: 0.9rem; color: var(--muted); } /* details content */

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.breadcrumb { /* breadcrumb nav */
  font-family: var(--font-meta);
  font-size: 0.78rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin-bottom: 1rem;
}
.breadcrumb a { color: var(--link); text-decoration: none; } /* breadcrumb link */
.breadcrumb a:hover { color: var(--link-hover); } /* breadcrumb hover */
.breadcrumb__sep { color: var(--muted); } /* breadcrumb separator */

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline { /* vertical timeline list */
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.timeline::before { /* vertical rail line */
  content: '';
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
}
.timeline-step { /* individual timeline step */
  position: relative;
  padding-left: 56px;
  padding-bottom: 2rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s, transform 0.5s;
}
.timeline-step.is-visible { opacity: 1; transform: none; } /* visible timeline step */
.timeline-step__num { /* step number bubble */
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pitch);
  color: var(--text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-meta);
  font-size: 0.85rem;
  font-weight: 500;
  flex-shrink: 0;
  z-index: 1;
}
.timeline-step__title { font-weight: 600; margin-bottom: 0.35rem; } /* timeline step title */
.timeline-step__body { font-size: 0.9rem; color: var(--muted); } /* timeline step body */

/* ============================================================
   TICKER / MARQUEE
   ============================================================ */
.ticker-band { /* ticker container band */
  background: var(--pitch);
  color: var(--text-light);
  overflow: hidden;
  padding: 0.5rem 0;
  border-top: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.ticker-band * { color: inherit; } /* ticker text color */
.ticker-track { /* scrolling ticker inner */
  display: flex;
  gap: 3rem;
  animation: ticker-scroll 28s linear infinite;
  white-space: nowrap;
  will-change: transform;
}
.ticker-item { /* single ticker label */
  font-family: var(--font-meta);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-pitch-muted);
  flex-shrink: 0;
}
.ticker-item .ticker-label { color: var(--accent); margin-right: 0.35rem; } /* ticker category label */
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ticker scroll animation */

/* ============================================================
   STAT STRIP
   ============================================================ */
.stat-strip { /* stat highlights bar */
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
}
.stat-item { /* individual stat item */
  flex: 1;
  min-width: 100px;
  text-align: center;
}
.stat-item__num { /* stat number */
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold);
  display: block;
  line-height: 1;
}
.stat-item__label { /* stat label */
  font-family: var(--font-meta);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-top: 0.25rem;
}

/* ============================================================
   TRUST STRIP / AFFILIATE DISCLOSURE
   ============================================================ */
.trust-strip { /* affiliate disclosure band */
  background: rgba(26,28,32,0.04);
  border-left: 3px solid var(--accent);
  padding: 0.85rem 1.25rem;
  font-family: var(--font-meta);
  font-size: 0.78rem;
  color: var(--muted);
  margin: 1rem 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.trust-strip a { color: var(--link); } /* trust strip link */

/* ============================================================
   DENSE LIST (FAQ)
   ============================================================ */
.dense-list { /* dense FAQ list */
  list-style: none;
  padding: 0;
  margin: 0;
}
.dense-list li { /* dense list item */
  display: block;
  padding-bottom: 1.5rem;
}
.dense-list li + li { /* list item separator */
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}
.dense-list__marker { /* list item question label */
  display: block;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

/* ============================================================
   RESPONSIBLE GAMING BAND
   ============================================================ */
.responsible-band { /* responsible gaming dark band */
  background: var(--pitch);
  color: var(--text-light);
  padding: 2rem 0;
}
.responsible-band * { color: inherit; } /* mandatory color inheritance */
.responsible-band a { color: var(--link-on-dark); } /* responsible band links */
.responsible-band a:hover { color: var(--link-on-dark-hover); } /* responsible band link hover */

/* ============================================================
   AGE GATE NOTE
   ============================================================ */
.age-gate-note { /* +18 editorial card note */
  background: var(--pitch);
  color: var(--text-light);
  border-radius: var(--radius);
  padding: 1.5rem;
  border: 1px solid rgba(255,255,255,0.1);
}
.age-gate-note * { color: inherit; } /* age gate color inheritance */
.age-gate-note .age-num { /* large +18 number display */
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  display: block;
  margin-bottom: 0.5rem;
}

/* ============================================================
   STICKY DISCLOSURE BANNER
   ============================================================ */
.sticky-disclosure { /* sticky affiliate disclosure bar */
  position: sticky;
  top: 60px;
  z-index: 900;
  background: #23262b;
  color: var(--on-pitch-muted);
  padding: 0.5rem 1.25rem;
  font-family: var(--font-meta);
  font-size: 0.72rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-align: center;
}
.sticky-disclosure * { color: inherit; } /* sticky disclosure color */
.sticky-disclosure a { color: var(--link-on-dark); } /* sticky disclosure link */

/* ============================================================
   BACK TO TOP BUTTON
   ============================================================ */
#back-to-top { /* back to top floating button */
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  font-size: 1.25rem;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 800;
  box-shadow: 0 2px 12px rgba(224,61,36,0.35);
  transition: background 0.2s, transform 0.2s;
}
#back-to-top:hover { background: var(--accent-strong); transform: translateY(-2px); } /* back-to-top hover */
#back-to-top.is-visible { display: flex; } /* show back-to-top when scrolled */

/* ============================================================
   SECTION REVEAL
   ============================================================ */
.reveal { /* scroll-reveal target */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.is-visible { opacity: 1; transform: none; } /* revealed element */

/* ============================================================
   FOCUS STYLES
   ============================================================ */
:focus-visible { /* enhanced keyboard focus ring */
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   LINKS — EDITORIAL SLIDE UNDERLINE
   ============================================================ */
.link-slide { /* animated underline link */
  position: relative;
  text-decoration: none;
  color: var(--link);
  display: inline;
}
.link-slide::after { /* underline pseudo-element */
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0%;
  height: 2px;
  background: var(--accent);
  transition: width 0.25s ease;
}
.link-slide:hover::after { width: 100%; } /* expand underline on hover */

/* ============================================================
   TOC — TABLE OF CONTENTS
   ============================================================ */
.toc { /* table of contents sidebar */
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding: 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.875rem;
}
.toc__heading { /* TOC heading label */
  font-family: var(--font-meta);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  display: block;
  margin-bottom: 0.75rem;
}
.toc ul { list-style: none; padding: 0; margin: 0; } /* TOC list */
.toc ul li { margin-bottom: 0.4rem; } /* TOC list item */
.toc ul a { /* TOC link */
  color: var(--muted);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.2s;
  display: block;
  padding: 0.15rem 0.4rem;
  border-left: 2px solid transparent;
}
.toc ul a:hover { color: var(--text-dark); } /* TOC link hover */
.toc ul a.is-active { color: var(--accent); border-left-color: var(--accent); } /* active TOC item */

/* Two-column TOC layout on desktop */
.toc-layout { display: block; } /* TOC page layout */

/* ============================================================
   STEP PROGRESS BAR
   ============================================================ */
.step-progress { /* numbered step progress indicator */
  display: flex;
  gap: 0;
  margin-bottom: 2rem;
  overflow-x: auto;
}
.step-progress__item { /* step progress item */
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 0 0.5rem;
  opacity: 0.4;
  transition: opacity 0.4s;
}
.step-progress__item.is-done { opacity: 1; } /* completed step */
.step-progress__num { /* step number circle */
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-meta);
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
  transition: background 0.4s, color 0.4s;
}
.step-progress__item.is-done .step-progress__num { background: var(--accent); color: #fff; } /* done step number */
.step-progress__label { font-size: 0.75rem; text-align: center; color: var(--muted); } /* step label */

/* ============================================================
   DEFINITION LIST HOVER
   ============================================================ */
.def-list dt { /* definition term */
  font-weight: 600;
  color: var(--text-dark);
  padding: 0.5rem 0 0.25rem;
  transition: color 0.2s;
}
.def-list dt:hover { color: var(--accent); } /* definition term hover */
.def-list dd { /* definition description */
  font-size: 0.9rem;
  color: var(--muted);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
  margin-left: 0;
}

/* ============================================================
   ICON MICRO TILT
   ============================================================ */
.icon-tilt { /* icon hover micro-tilt */
  display: inline-block;
  transition: transform 0.2s;
}
.icon-tilt:hover { transform: rotate(-6deg) scale(1.1); } /* tilt icon on hover */

/* ============================================================
   ASIDE PANEL
   ============================================================ */
.aside-panel { /* editorial aside panel */
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  transition: box-shadow 0.2s, transform 0.2s;
  margin-bottom: 2rem;
}
.aside-panel:hover { box-shadow: var(--shadow); transform: translateY(-1px); } /* aside panel lift hover */

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.sr-only { /* screen reader only */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}
.mt-0 { margin-top: 0; }       /* margin top zero */
.mt-1 { margin-top: 1rem; }    /* margin top 1rem */
.mt-2 { margin-top: 2rem; }    /* margin top 2rem */
.mb-0 { margin-bottom: 0; }    /* margin bottom zero */
.mb-1 { margin-bottom: 1rem; } /* margin bottom 1rem */
.mb-2 { margin-bottom: 2rem; } /* margin bottom 2rem */
.gap-1 { gap: 1rem; }           /* gap 1rem */
.gap-2 { gap: 2rem; }           /* gap 2rem */
.w-full { width: 100%; }        /* full width */
.block { display: block; }      /* display block */
.inline { display: inline; }    /* display inline */
.hidden { display: none; }      /* hidden element */
.bold { font-weight: 700; }     /* bold text */
.italic { font-style: italic; } /* italic text */
.mono { font-family: var(--font-meta); } /* monospace text */
.accent-text { color: var(--accent); }   /* accent colored text */
.gold-text { color: var(--gold); }       /* gold colored text */
.muted-text { color: var(--muted); }     /* muted colored text */
.divider { border: none; border-top: 1px solid var(--border); margin: 2rem 0; } /* horizontal divider */

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (min-width: 640px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }          /* 2-col at 640px */
  .asymmetric-hero { grid-template-columns: 1fr 1fr; } /* 2-col hero at 640px */
  .header-info-badge { display: flex; }                /* show info badge at 640px */
  .footer-grid { grid-template-columns: 1fr 1fr; }     /* 2-col footer at 640px */
  .toc-layout { display: grid; grid-template-columns: 220px 1fr; gap: 3rem; align-items: start; } /* TOC layout 640px */
}

@media (min-width: 780px) {
  .grid-3 { grid-template-columns: 1fr 1fr 1fr; }       /* 3-col at 780px */
  .grid-4 { grid-template-columns: repeat(4,1fr); }     /* 4-col at 780px */
  .asymmetric-hero { grid-template-columns: 3fr 2fr; }  /* asymmetric at 780px */
  .footer-grid { grid-template-columns: repeat(4,1fr); } /* 4-col footer at 780px */
}

/* Mobile nav override */
@media (max-width: 640px) {
  .hamburger { display: flex; }           /* show hamburger on mobile */
  .main-nav {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    padding: 1rem;
    background: var(--pitch);
    z-index: 999;
    gap: 0.5rem;
    border-bottom: 2px solid var(--accent);
  }                                       /* mobile nav drawer */
  .main-nav.is-open { display: flex; }    /* open mobile nav */
  .dropdown { position: static; border: none; padding: 0 0 0 1rem; display: none !important; background: transparent; border-radius: 0; } /* mobile dropdown static */
  .has-dropdown.is-open > .dropdown { display: block !important; } /* mobile dropdown open */
  .nav-cta { width: 100%; justify-content: center; margin-top: 0.5rem; } /* mobile nav CTA full width */
  .grid-2 { grid-template-columns: 1fr; }  /* single column on mobile */
  .step-progress { gap: 0.25rem; }          /* compact step progress mobile */
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  } /* disable all motion */
  .ticker-track { animation: none; } /* stop ticker */
  .reveal { opacity: 1; transform: none; } /* skip reveal */
  .timeline-step { opacity: 1; transform: none; } /* skip timeline reveal */
  .btn-pulse { animation: none; } /* stop pulse */
  html { scroll-behavior: auto; } /* disable smooth scroll */
}