/* ============================================================
   MEA Reviews — Static / Legal Page shell
   Shared shell for the text-heavy pages: About, Responsible
   Gambling, Privacy Policy, Terms of Use. Light "tech / computer"
   theme, matching footer.css / hero-intro.css tokens.
   Self-contained: depends on no external CSS or JS. Tokens are
   scoped to .mea-page so they will not clash with page :root vars.
   ============================================================ */

.mea-page {
  /* ---- Design tokens (light, tech accent) ---- */
  --sp-bg: #f4f4f4;
  --sp-surface: #ffffff;
  --sp-surface-2: #eef2f8;
  --sp-border: #e0e0e0;
  --sp-text: #1f2733;
  --sp-muted: #5b6676;
  --sp-faint: #8a94a6;
  --sp-accent: #0f62fe;      /* electric blue */
  --sp-accent-2: #06b6d4;    /* cyan */
  --sp-ok: #16a34a;          /* verified green */
  --sp-warn: #b45309;        /* amber for 18+ */
  --sp-warn-bg: #fff7ed;
  --sp-warn-border: #fed7aa;

  --sp-radius: 0;
  --sp-radius-sm: 0;
  --sp-space: clamp(2.25rem, 1.5rem + 3vw, 4rem);

  --sp-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --sp-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --sp-duration: 200ms;
  --sp-ease: cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;
  display: block;
  background: var(--sp-bg);
  color: var(--sp-text);
  font-family: var(--sp-sans);
  font-size: 1rem;
  line-height: 1.65;
  padding: var(--sp-space) 0 calc(var(--sp-space) * 1.2);
  overflow: hidden;
}

/* faint circuit-grid atmosphere, tech theme, very light */
.mea-page__grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--sp-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--sp-border) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity: 0.4;
  -webkit-mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 0%, transparent 75%);
}

.mea-page__inner {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 0.5rem + 2vw, 2.5rem);
}

/* ---- Breadcrumb ---- */
.mea-page__crumbs {
  font-family: var(--sp-mono);
  font-size: 0.8125rem;
  color: var(--sp-faint);
  margin-bottom: 1.25rem;
}
.mea-page__crumbs a {
  color: var(--sp-muted);
  text-decoration: none;
  transition: color var(--sp-duration) var(--sp-ease);
}
.mea-page__crumbs a:hover { color: var(--sp-accent); }
.mea-page__crumbs span[aria-hidden] { margin: 0 0.4rem; opacity: 0.6; }

/* ---- Header ---- */
.mea-page__head {
  padding-bottom: 1.75rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--sp-border);
}
.mea-page__kicker {
  display: inline-block;
  font-family: var(--sp-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--sp-accent);
  margin-bottom: 0.75rem;
}
.mea-page__title {
  margin: 0 0 0.9rem;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sp-text);
}
.mea-page__title b { color: var(--sp-accent); font-weight: 800; }
.mea-page__lede {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  color: var(--sp-muted);
}
.mea-page__updated {
  margin: 1.1rem 0 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--sp-mono);
  font-size: 0.78rem;
  color: var(--sp-faint);
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--sp-border);
  border-radius: 0;
  background: var(--sp-surface);
}
.mea-page__updated svg { width: 14px; height: 14px; }

/* ---- Body layout (single or with sticky TOC) ---- */
.mea-page__body { display: block; }
.mea-page__body--toc {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: start;
}

/* ---- Sticky table of contents (legal pages) ---- */
.mea-page__toc {
  position: sticky;
  top: 1.5rem;
  align-self: start;
  padding: 1.1rem 1.25rem;
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
}
.mea-page__toc-title {
  margin: 0 0 0.7rem;
  font-family: var(--sp-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sp-faint);
}
.mea-page__toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}
.mea-page__toc li { margin: 0 0 0.15rem; counter-increment: toc; }
.mea-page__toc a {
  display: block;
  padding: 0.3rem 0.4rem 0.3rem 1.6rem;
  position: relative;
  font-size: 0.86rem;
  color: var(--sp-muted);
  text-decoration: none;
  border-radius: var(--sp-radius-sm);
  transition: background var(--sp-duration) var(--sp-ease), color var(--sp-duration) var(--sp-ease);
}
.mea-page__toc a::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: 0.4rem;
  font-family: var(--sp-mono);
  font-size: 0.72rem;
  color: var(--sp-accent);
  opacity: 0.7;
}
.mea-page__toc a:hover { background: var(--sp-surface-2); color: var(--sp-text); }

/* ============================================================
   Prose — the article body used by every static page
   ============================================================ */
.mea-prose {
  min-width: 0;
  font-size: 1rem;
  color: var(--sp-text);
}
.mea-prose > * + * { margin-top: 1.1rem; }
.mea-prose h2 {
  scroll-margin-top: 1.5rem;
  margin: 2.4rem 0 0.9rem;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem);
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.mea-prose h2:first-child { margin-top: 0; }
.mea-prose h2 .mea-prose__num {
  font-family: var(--sp-mono);
  font-size: 0.7em;
  color: var(--sp-accent);
  margin-right: 0.5rem;
  vertical-align: 0.08em;
}
.mea-prose h3 {
  margin: 1.7rem 0 0.6rem;
  font-size: 1.1rem;
  font-weight: 700;
}
.mea-prose p { margin: 0.9rem 0 0; color: var(--sp-text); }
.mea-prose a {
  color: var(--sp-accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--sp-accent) 35%, transparent);
  text-underline-offset: 2px;
  transition: text-decoration-color var(--sp-duration) var(--sp-ease);
}
.mea-prose a:hover { text-decoration-color: var(--sp-accent); }
.mea-prose ul, .mea-prose ol { margin: 0.9rem 0 0; padding-left: 1.3rem; }
.mea-prose li { margin: 0.35rem 0; }
.mea-prose ul li::marker { color: var(--sp-accent); }
.mea-prose strong { font-weight: 700; color: var(--sp-text); }
.mea-prose hr {
  border: 0;
  border-top: 1px solid var(--sp-border);
  margin: 2rem 0;
}

/* definition-style table (data / contact rows) */
.mea-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2rem 0 0;
  font-size: 0.92rem;
}
.mea-prose th, .mea-prose td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--sp-border);
  vertical-align: top;
}
.mea-prose thead th {
  background: var(--sp-surface-2);
  font-family: var(--sp-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sp-muted);
}
.mea-prose tbody th { background: var(--sp-surface); width: 32%; font-weight: 650; }

/* ---- Callout boxes ---- */
.mea-callout {
  display: flex;
  gap: 0.9rem;
  margin: 1.4rem 0 0;
  padding: 1rem 1.2rem;
  border: 1px solid var(--sp-border);
  border-left: 3px solid var(--sp-accent);
  border-radius: var(--sp-radius-sm);
  background: var(--sp-surface);
}
.mea-callout__ico {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--sp-accent);
}
.mea-callout__ico svg { width: 22px; height: 22px; }
.mea-callout p { margin: 0; font-size: 0.94rem; color: var(--sp-muted); }
.mea-callout p strong { color: var(--sp-text); }
.mea-callout--warn {
  border-color: var(--sp-warn-border);
  border-left-color: var(--sp-warn);
  background: var(--sp-warn-bg);
}
.mea-callout--warn .mea-callout__ico { color: var(--sp-warn); }
.mea-callout--warn p strong { color: var(--sp-warn); }

/* 18+ age badge, reusable */
.mea-badge-18 {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 0;
  background: var(--sp-warn);
  color: #fff;
  font-family: var(--sp-mono);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: -0.02em;
}

/* ---- Help / resource link chips (Responsible Gambling) ---- */
.mea-reslinks {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.mea-reslinks a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--sp-border);
  border-radius: 0;
  background: var(--sp-surface);
  color: var(--sp-text);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--sp-duration) var(--sp-ease), color var(--sp-duration) var(--sp-ease), transform var(--sp-duration) var(--sp-ease);
}
.mea-reslinks a svg { width: 14px; height: 14px; color: var(--sp-accent); }
.mea-reslinks a:hover {
  border-color: var(--sp-accent);
  color: var(--sp-accent);
  transform: translateY(-1px);
}

/* ---- "How we review" pillar cards (About) ---- */
.mea-pillars {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem;
}
.mea-pillars li {
  margin: 0;
  padding: 1.1rem 1.2rem;
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  transition: border-color var(--sp-duration) var(--sp-ease), transform var(--sp-duration) var(--sp-ease);
}
.mea-pillars li:hover { border-color: var(--sp-accent); transform: translateY(-2px); }
.mea-pillars__ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 0;
  background: var(--sp-surface-2);
  color: var(--sp-accent);
  margin-bottom: 0.7rem;
}
.mea-pillars__ico svg { width: 20px; height: 20px; }
.mea-pillars b { display: block; margin-bottom: 0.25rem; font-size: 1rem; }
.mea-pillars span { font-size: 0.88rem; color: var(--sp-muted); }

/* ---- Stat strip (About) ---- */
.mea-stats {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 1.2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
}
.mea-stats li { margin: 0; text-align: center; }
.mea-stats b {
  display: block;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  font-weight: 800;
  color: var(--sp-accent);
  letter-spacing: -0.02em;
}
.mea-stats span { font-size: 0.82rem; color: var(--sp-muted); }

/* ---- Responsive ---- */
@media (max-width: 800px) {
  .mea-page__body--toc { grid-template-columns: 1fr; }
  .mea-page__toc {
    position: static;
    order: -1;
    margin-bottom: 1.5rem;
  }
  .mea-prose table { display: block; overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .mea-page *,
  .mea-page *::before,
  .mea-page *::after { transition: none !important; }
}