/* ==========================================================================
   foundation.css — BetGenie responsive foundation (Phase 1)
   Loaded LAST. Additive: establishes the token layer, the wordmark, the
   sitewide button shine, and opt-in layout primitives (.l-*). Existing pages
   keep working; new/rebuilt sections adopt the primitives. No override wars,
   no new !important. See docs/plans/landing-redesign-and-admin-control-2026-07.md
   ========================================================================== */

:root{
  /* Brand gradient built from the admin-controlled theme vars (theme.json) so
     appearance changes flow through. --accent / --accent-bright come from theme_css. */
  --bg-grad: linear-gradient(103deg, var(--accent-bright, #f5d06a), var(--accent, #e0b040));

  /* Spacing scale */
  --space-1:.35rem; --space-2:.6rem; --space-3:1rem; --space-4:1.6rem;
  --space-5:2.5rem; --space-6:4rem; --space-7:6rem;

  /* Fluid type scale (mobile-first, clamp) */
  --step--1: clamp(.8rem,.75rem + .2vw,.9rem);
  --step-0:  clamp(.95rem,.9rem + .25vw,1.05rem);
  --step-1:  clamp(1.1rem,1rem + .5vw,1.3rem);
  --step-2:  clamp(1.35rem,1.2rem + .9vw,1.8rem);
  --step-3:  clamp(1.7rem,1.4rem + 1.6vw,2.5rem);
  --step-4:  clamp(2.1rem,1.6rem + 2.8vw,3.4rem);
  --step-5:  clamp(2.5rem,1.8rem + 4.4vw,4.2rem);

  /* Canonical container + one set of breakpoints (px, for reference in @media):
     phone ≤600 · tablet 601–900 · desktop 901–1200 · wide >1200 */
  --l-max:1180px;
  --l-gutter:clamp(1rem,4vw,2rem);
}

/* ---- Layout primitives (opt-in; adopt during page migrations) ---------- */
.l-container{max-width:var(--l-max);margin-inline:auto;padding-inline:var(--l-gutter)}
.l-stack{display:flex;flex-direction:column}
.l-stack > * + *{margin-top:var(--flow, var(--space-3))}
.l-cluster{display:flex;flex-wrap:wrap;gap:var(--gap, var(--space-2));align-items:center}
.l-grid{display:grid;gap:var(--gap, var(--space-3));
  grid-template-columns:repeat(auto-fit, minmax(min(var(--col, 240px), 100%), 1fr))}
/* Overflow guard — only inside opt-in containers, never a blanket * reset */
.l-container :where(img,video,canvas,svg){max-width:100%;height:auto}
.l-grid > *, .l-cluster > *{min-width:0}

/* ---- Wordmark: one word, bigger, gradient gold, no icon ----------------- */
/* The <img> logos were removed at the source; these text spans were display:none
   by default (image-fallback only) so we make them the primary brand here. */
.brand-wordmark{
  display:inline-flex;align-items:center;
  font-weight:900;letter-spacing:-.035em;line-height:1;
  font-size:1.55rem;                    /* slightly bigger than the old 1.15–1.35rem */
  background:var(--bg-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
@media (min-width:769px){ .brand-wordmark{ font-size:1.7rem; } }
.public-brand, .site-brand-link{ gap:.55rem; }

/* ---- Sitewide random button shine -------------------------------------- */
/* A diagonal glint sweeps across a button when JS adds .shining at random. */
.btn{ position:relative; overflow:hidden; }
.btn::after{
  content:"";position:absolute;top:0;left:-70%;width:48%;height:100%;
  pointer-events:none;opacity:0;transform:skewX(-18deg);
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
}
/* Outline/secondary buttons get a gold glint instead of a white one */
.btn.btn-secondary::after, .btn.btn-ghost::after, .btn.btn-outline::after{
  background:linear-gradient(105deg,transparent,rgba(245,208,106,.4),transparent);
}
.btn.shining::after{ animation:bg-shine .85s ease-out; }
@keyframes bg-shine{ 0%{left:-70%;opacity:0} 12%{opacity:1} 100%{left:135%;opacity:0} }

@media (prefers-reduced-motion:reduce){
  .btn.shining::after{ animation:none; }
}

/* ---- Button legibility (normal + hover): never white-on-gold or gold-on-gold ----
   foundation.css loads last on every page, so these win over the older button rules. */
.btn, a.btn, button.btn,
.btn-primary, a.btn-primary, button.btn-primary,
.btn-sm, a.btn-sm, button.btn-sm{ transition: filter .15s, background .15s, color .15s, border-color .15s; }

/* Gold-filled buttons → dark text (fixes white-on-gold), stays dark on hover */
.btn, a.btn, button.btn,
.btn-primary, a.btn-primary, button.btn-primary{ color:#0c1118; }
.btn:hover, a.btn:hover, button.btn:hover,
.btn-primary:hover, a.btn-primary:hover, button.btn-primary:hover{ color:#0c1118; filter:brightness(1.05); }
/* Filled .btn-sm that isn't an outlined variant → dark text on its gold fill */
.btn-sm:not(.btn-muted):not(.btn-secondary):not(.btn-outline):not(.btn-ghost):not(.btn-danger),
a.btn-sm:not(.btn-muted):not(.btn-secondary):not(.btn-outline):not(.btn-ghost):not(.btn-danger){ color:#0c1118; }

/* Outlined variants: readable gold text at rest → dark text on a gold fill when hovered */
.btn-muted, a.btn-muted, button.btn-muted,
.btn-secondary, a.btn-secondary, button.btn-secondary,
.btn-outline, .btn-ghost{ color:var(--accent-bright, #f0c860); }
.btn-muted:hover, a.btn-muted:hover, button.btn-muted:hover, .btn-muted:focus-visible,
.btn-secondary:hover, a.btn-secondary:hover, button.btn-secondary:hover,
.btn-outline:hover, .btn-ghost:hover{
  color:#0c1118;
  background:linear-gradient(135deg, var(--accent-bright, #f0c860), var(--accent, #e0b040));
  border-color:var(--accent, #e0b040);
}

/* ---- EN | ES language toggle (top-right, every page) ---- */
.lang-toggle{ display:inline-flex; align-items:center; border:1px solid var(--border,#2a3140);
  border-radius:999px; overflow:hidden; flex:none; }
.lang-toggle-form{ margin:0; display:inline-flex; }
.lang-toggle-opt{ font:inherit; font-size:.72rem; font-weight:700; letter-spacing:.03em;
  padding:.3rem .58rem; background:transparent; border:0; color:var(--muted,#9aa0a8); cursor:pointer; line-height:1;
  /* center the label vertically — without this the mobile min-height leaves EN top-aligned (sitting high) */
  display:inline-flex; align-items:center; justify-content:center; }
.lang-toggle-opt.active{ background:var(--bg-grad, linear-gradient(103deg,#f5d06a,#e0b040)); color:#1a1206; }
.lang-toggle-opt:not(.active):hover{ color:var(--text,#e8eaed); }
.header-lang-mobile{ margin-left:auto; }

/* The header renders the toggle twice: a mobile copy tagged .nav-mobile-only and
   a desktop copy inside .site-header-utils. Hiding the mobile copy relies on
   `.nav-mobile-only{display:none}`, which lives in style.css / public-shell.css —
   both loaded BEFORE this file. Equal specificity (0,1,0), so `.lang-toggle`
   above won on source order and BOTH toggles showed on desktop. Scoping the
   hide to `.lang-toggle.nav-mobile-only` (0,2,0) settles it regardless of load
   order, instead of depending on which stylesheet happens to come last. */
.lang-toggle.nav-mobile-only{ display:none; }
@media (max-width: 768px){
  /* style.css pairs its mobile `display:block` with `width:100%`, which would
     stretch the pill across the header. Keep it pill-sized and pinned right. */
  .lang-toggle.nav-mobile-only{ display:inline-flex; width:auto; margin-left:auto; }
}

/* ---- Global responsive guards (Phase 4) ------------------------------- */
/* Contain the common sources of sideways scroll on mobile WITHOUT overflow-x:hidden
   on the body (which would clip off-canvas nav) and without a blanket min-width:0. */
img, svg, video, canvas { max-width: 100%; }
pre { max-width: 100%; overflow-x: auto; }
:where(p, li, dd, blockquote, figcaption, h1, h2, h3, h4) { overflow-wrap: break-word; }

/* ---- Overflow containment (consolidated from the retired ui-overflow-fix-v6) ----
   These are load-bearing: the html/body clip is what stops sideways scroll sitewide.
   Ported faithfully (incl. !important) so the cascade outcome is unchanged; the file's
   ~190 lines of OLD-landing rules (public-hero*/spotlight/parlay/intel/feature/update/
   review/survey/landing-cta/nav-cta — all confirmed used by zero templates) were dropped. */
/* overflow-x: hidden (NOT clip) — clip forbids programmatic/anchor scrolling, which broke
   in-page anchors like /#intel. hidden still suppresses the horizontal scrollbar. */
html { overflow-x: hidden; max-width: 100%; }
body.site-body, body.public-landing-body { overflow-x: hidden; max-width: 100%; position: relative; }

.page-shell, .site-main, .container.page-content,
.public-landing-main, .public-landing-header, .public-landing-footer,
.command-center, .command-feed, .list-page-body, .list-page-content,
.admin-shell, .admin-shell-main { max-width: 100%; min-width: 0; box-sizing: border-box; }

img, video, canvas, svg, iframe { max-width: 100%; height: auto; }

.site-body .card, .site-body .signal-card, .site-body .parlay-card,
.site-body .pick-card, .site-body .dashboard-col, .site-body .dashboard-section,
.public-landing-body .public-section { min-width: 0; max-width: 100%; box-sizing: border-box; }

/* Buttons never stretch full viewport by default */
.site-body .btn, .site-body a.btn, .site-body button.btn,
.public-landing-body .btn, .public-landing-body a.btn, .public-landing-body button.btn {
  max-width: 100%; box-sizing: border-box; white-space: normal; text-align: center;
}
.site-body .btn-primary:not([type="submit"]),
.public-landing-body .btn-primary:not([type="submit"]),
.public-landing-body a.btn-primary,
.public-landing-body a.public-cta-primary {
  width: auto !important; max-width: min(100%, 22rem); flex: 0 1 auto;
}

/* Header can't blow out horizontally */
.public-landing-body .public-landing-header, .public-landing-body .unified-site-header,
.site-body .site-header-v2, .site-body .site-header-inner {
  max-width: 100%; overflow-x: clip; box-sizing: border-box;
}
.public-landing-body .unified-header-nav, .public-landing-body .public-landing-nav {
  max-width: 100%; flex-wrap: wrap; min-width: 0;
}

/* Pick of the Day actions stay content-sized on desktop */
@media (min-width: 769px) {
  .public-landing-body .pick-of-day-actions { flex-wrap: wrap; align-items: center; }
  .public-landing-body .pick-of-day-cta, .public-landing-body .pick-of-day-actions .btn-muted {
    flex: 0 1 auto !important; width: auto !important; max-width: 100%;
  }
}

/* Member app */
.site-body .list-filters-rail .btn, .site-body .list-filters-rail .btn-sm,
.site-body .list-filters-rail .filters-quick-apply { width: 100%; max-width: 100%; }
.site-body .command-feed .btn-primary:not([type="submit"]),
.site-body .page-hero-zone .btn-primary:not([type="submit"]),
.site-body .section-header .btn-primary,
.site-body a.btn-primary.section-link,
.site-body .pick-of-day-cta { width: auto !important; max-width: min(100%, 22rem); }

/* Tables scroll inside their wrap; code/long ids don't push the page */
.site-body .responsive-table-wrap, .site-body .table-scroll-wrap, .site-body .schedule-table-wrap {
  max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.site-body pre, .site-body code { max-width: 100%; overflow-x: auto; word-break: break-word; }
.site-body .mono.signal-id-short, .site-body .signal-id-short { word-break: break-all; overflow-wrap: anywhere; }
.site-body .home-ticket-nav-btn { width: 100%; max-width: 100%; box-sizing: border-box; }
.site-body .ad-slot, .public-landing-body .ad-slot { max-width: 100%; overflow: hidden; box-sizing: border-box; }
.site-body .nav-dropdown-menu, .site-body .unified-nav-panel, .public-landing-body .unified-nav-panel {
  max-width: min(20rem, calc(100vw - 1.5rem)); box-sizing: border-box;
}