/*
 Theme Name:   Sports Bets Nation
 Theme URI:    https://sportsbetsnation.com
 Description:  GeneratePress child theme for Sports Bets Nation — data-driven sports betting media. Editorial market-intelligence design system.
 Author:       Sports Bets Nation
 Template:     generatepress
 Version:      1.0.0
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Single source of truth. Every color, size, space, radius, shadow lives here.
   Namespaced --sbn-* per CLAUDE-sportsbetsnation.md. No hardcoded values below.
   ========================================================================== */

:root {
	/* --- Color: brand --- */
	--sbn-primary: #0d2137;        /* Deep navy — authority, headers, primary text on light */
	--sbn-primary-deep: #081726;   /* Darker navy — gradients, footers */
	--sbn-accent: #00e676;         /* Electric green — RESERVED for conversion (CTAs, money) */
	--sbn-accent-hover: #00c853;

	/* --- Color: text --- */
	--sbn-text: #1a1a2e;
	--sbn-text-mid: #555555;
	--sbn-text-light: #888888;
	--sbn-text-inverse: #ffffff;

	/* --- Color: surfaces --- */
	--sbn-bg: #ffffff;
	--sbn-bg-alt: #f5f7fa;
	--sbn-bg-navy: #0d2137;
	--sbn-border: #e0e4ea;
	--sbn-border-strong: #c7cedb;

	/* --- Color: CTA + status --- */
	--sbn-cta-bg: #00e676;
	--sbn-cta-text: #0d2137;
	--sbn-positive: #00c853;
	--sbn-star: #ffb400;           /* Rating stars — gold, never confused with green CTA */

	/* --- Typography --- */
	--sbn-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--sbn-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

	--sbn-fs-eyebrow: 0.75rem;     /* 12px — labels, kickers */
	--sbn-fs-small: 0.875rem;      /* 14px */
	--sbn-fs-base: 1rem;           /* 16px body */
	--sbn-fs-h3: 1.375rem;         /* 22px */

	--sbn-lh-snug: 1.35;
	--sbn-lh-body: 1.65;

	--sbn-fw-normal: 400;
	--sbn-fw-bold: 700;
	--sbn-fw-black: 800;

	/* --- Spacing scale (8px base) --- */
	--sbn-space-1: 0.25rem;
	--sbn-space-2: 0.5rem;
	--sbn-space-3: 0.75rem;
	--sbn-space-4: 1rem;
	--sbn-space-5: 1.5rem;
	--sbn-space-6: 2rem;
	--sbn-space-7: 3rem;
	--sbn-space-8: 4rem;

	/* --- Radius --- */
	--sbn-radius-sm: 4px;
	--sbn-radius: 8px;
	--sbn-radius-lg: 14px;
	--sbn-radius-pill: 999px;

	/* --- Shadows --- */
	--sbn-shadow-sm: 0 1px 2px rgba(13, 33, 55, 0.06);
	--sbn-shadow: 0 4px 16px rgba(13, 33, 55, 0.08);
	--sbn-shadow-lg: 0 12px 32px rgba(13, 33, 55, 0.14);
	--sbn-shadow-cta: 0 6px 18px rgba(0, 200, 83, 0.35);

	/* --- Motion --- */
	--sbn-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--sbn-dur: 0.2s;

	/* --- Z-index --- */
	--sbn-z-sticky: 50;
}

/* ==========================================================================
   2. BASE TYPOGRAPHY
   Light touch — GeneratePress sets most base styles. Only set what the brand
   needs and what GP doesn't already establish.
   ========================================================================== */

body {
	font-family: var(--sbn-font-sans);
	font-size: var(--sbn-fs-base);
	line-height: var(--sbn-lh-body);
	color: var(--sbn-text);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
	color: var(--sbn-primary);
	line-height: var(--sbn-lh-snug);
	font-weight: var(--sbn-fw-bold);
	letter-spacing: -0.01em;
}

/* ==========================================================================
   4. AFFILIATE CTA COMPONENT
   The conversion primitive. Green = money, used ONLY here and on book cards.
   ========================================================================== */

.sbn-cta-button {
	display: inline-flex;
	align-items: center;
	gap: var(--sbn-space-2);
	background: var(--sbn-cta-bg);
	color: var(--sbn-cta-text);
	font-family: var(--sbn-font-sans);
	font-weight: var(--sbn-fw-bold);
	font-size: 0.9375rem;
	line-height: 1;
	padding: var(--sbn-space-3) var(--sbn-space-6);
	border: 0;
	border-radius: var(--sbn-radius);
	text-decoration: none;
	cursor: pointer;
	transition: background var(--sbn-dur) var(--sbn-ease),
				transform var(--sbn-dur) var(--sbn-ease),
				box-shadow var(--sbn-dur) var(--sbn-ease);
}

.sbn-cta-button:hover,
.sbn-cta-button:focus-visible {
	background: var(--sbn-accent-hover);
	transform: translateY(-2px);
	box-shadow: var(--sbn-shadow-cta);
	color: var(--sbn-cta-text);
}

.sbn-cta-button:active {
	transform: translateY(0);
}

/* ==========================================================================
   7. SPORTSBOOK CARD
   Self-contained conversion unit used by the [sbn_sportsbooks] ranked list and
   the home page's top-five list.
   ========================================================================== */

.sbn-book-card {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--sbn-space-5);
	padding: var(--sbn-space-5);
	background: var(--sbn-bg);
	border: 1px solid var(--sbn-border);
	border-radius: var(--sbn-radius-lg);
	box-shadow: var(--sbn-shadow-sm);
	transition: box-shadow var(--sbn-dur) var(--sbn-ease),
				border-color var(--sbn-dur) var(--sbn-ease);
}

.sbn-book-card:hover {
	box-shadow: var(--sbn-shadow);
	border-color: var(--sbn-border-strong);
}

.sbn-book-card__logo {
	width: 84px;
	height: 84px;
	object-fit: contain;
	border-radius: var(--sbn-radius);
	background: var(--sbn-bg-alt);
}

.sbn-book-card__name {
	font-size: var(--sbn-fs-h3);
	font-weight: var(--sbn-fw-bold);
	color: var(--sbn-primary);
	margin: 0 0 var(--sbn-space-1);
}

.sbn-book-card__bonus {
	display: block;
	font-size: var(--sbn-fs-small);
	color: var(--sbn-text-mid);
	margin-top: var(--sbn-space-2);
}

.sbn-book-card__bonus strong {
	color: var(--sbn-positive);
	font-weight: var(--sbn-fw-bold);
}

.sbn-book-card__states {
	font-size: var(--sbn-fs-eyebrow);
	color: var(--sbn-text-light);
	margin-top: var(--sbn-space-1);
}

.sbn-book-card__cta {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--sbn-space-2);
	text-align: center;
}

/* Stacked list of cards (replaces a per-template wrapper). */
.sbn-book-list {
	display: flex;
	flex-direction: column;
	gap: var(--sbn-space-4);
	margin-bottom: var(--sbn-space-7);
}

/* Ranked list — prepend a rank column to the card grid. */
.sbn-book-list--ranked .sbn-book-card {
	grid-template-columns: auto auto 1fr auto;
}

.sbn-book-card__rank {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--sbn-primary);
	color: var(--sbn-text-inverse);
	font-size: var(--sbn-fs-small);
	font-weight: var(--sbn-fw-black);
}

/* Star rating — gold, never the green CTA color. */
.sbn-book-card__rating {
	display: inline-flex;
	align-items: center;
	gap: var(--sbn-space-2);
	margin-top: var(--sbn-space-1);
}

.sbn-book-card__stars {
	color: var(--sbn-star);
	font-size: var(--sbn-fs-small);
	letter-spacing: 0.05em;
}

.sbn-book-card__score {
	font-size: var(--sbn-fs-eyebrow);
	font-weight: var(--sbn-fw-bold);
	color: var(--sbn-text-mid);
}

.sbn-book-card__blurb {
	font-size: var(--sbn-fs-small);
	line-height: var(--sbn-lh-snug);
	color: var(--sbn-text);
	margin: var(--sbn-space-2) 0 0;
}

/* ==========================================================================
   9. RESPONSIVE
   Single breakpoint family (mobile-first). 768 = tablet, 1024 = desktop edge.
   ========================================================================== */

@media (max-width: 768px) {
	.sbn-book-card,
	.sbn-book-list--ranked .sbn-book-card {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
		gap: var(--sbn-space-4);
	}

	.sbn-book-card__cta {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   10. HEADER + PRIMARY NAVIGATION — "Terminal"
   Dark header bar that flows into the navy hero as one mass. Selectors
   verified against the live GP DOM (#masthead.site-header, .main-navigation,
   .main-nav, .menu-toggle, .current-menu-item).

   One-time admin setup:
     • Site Identity → Logo: upload the INVERSE logo (SBN-logo-header.png). The
       footer reads this same attachment, so it is the only place a logo is set.
     • Appearance → Menus: add a "Best Sportsbooks" item and give it the CSS
       class `nav-cta` (Screen Options → CSS Classes) to render the green button.
   ========================================================================== */

/* Dark header bar — flows into the navy hero below */
.site-header {
	background: linear-gradient(180deg, var(--sbn-primary) 0%, var(--sbn-primary-deep) 100%);
	border-bottom: 0;
}

/* Nav rides transparently on the dark bar */
.main-navigation,
.main-navigation .inside-navigation {
	background-color: transparent;
}

.main-title a {
	color: var(--sbn-text-inverse);
}

/* Top-level links — green underline, no pills.
   GP sets `line-height: 60px` on nav links (main.css); override to 1 and size
   with padding so the animated underline sits correctly. The flex nav
   (.inside-navigation / .main-nav>ul are align-items:center) vertically
   centers the link in the bar. */
.main-navigation .main-nav > ul > li > a {
	position: relative;
	color: rgba(255, 255, 255, 0.82);
	font-weight: var(--sbn-fw-bold);
	font-size: var(--sbn-fs-small);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	line-height: 1;
	padding: var(--sbn-space-3) var(--sbn-space-4);
	transition: color var(--sbn-dur) var(--sbn-ease);
}

/* Animated green underline */
.main-navigation .main-nav > ul > li > a::after {
	content: "";
	position: absolute;
	left: var(--sbn-space-4);
	right: var(--sbn-space-4);
	bottom: 6px;
	height: 3px;
	border-radius: var(--sbn-radius-sm);
	background: var(--sbn-accent);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--sbn-dur) var(--sbn-ease);
}

/* Hover text color.
   GeneratePress's Customizer emits a nav rule that forces the hovered link to a
   dark --accent (which vanishes on the dark header). We override it at the SAME
   specificity GP uses — mirroring its exact selector, including the
   :not([class*="current-menu-"]) it carries — so the cascade resolves to our
   color by source order (child style.css loads after GP's inline CSS). No
   !important, no ID escalation. */
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a {
	color: var(--sbn-text-inverse);
}

.main-navigation .main-nav > ul > li > a:hover::after,
.main-navigation .main-nav > ul > li > a:focus::after,
.main-navigation .main-nav > ul > li.sfHover > a::after {
	transform: scaleX(1);
}

/* Active page — white text (overrides GP's current-menu --accent rule at its
   own specificity; the underline below is ours). */
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: var(--sbn-text-inverse);
}

.main-navigation .main-nav > ul > li[class*="current-menu"] > a::after {
	transform: scaleX(1);
}

/* Dropdown panel — deep navy */
.main-navigation .main-nav ul ul {
	background-color: var(--sbn-primary-deep);
	box-shadow: var(--sbn-shadow-lg);
}

.main-navigation .main-nav ul ul li a {
	color: rgba(255, 255, 255, 0.85);
	border-radius: 0;
}

.main-navigation .main-nav ul ul li a:hover,
.main-navigation .main-nav ul ul li a:focus,
.main-navigation .main-nav ul ul li.current-menu-item > a {
	color: var(--sbn-text-inverse);
	background: rgba(255, 255, 255, 0.06);
}

/* CTA menu item — add CSS class `nav-cta` to the menu item (Appearance → Menus) */
.main-navigation .main-nav > ul > li.nav-cta > a {
	background: var(--sbn-cta-bg);
	color: var(--sbn-cta-text);
	font-weight: var(--sbn-fw-bold);
	border-radius: var(--sbn-radius-pill);
}

/* No underline on the solid-green button — it would be invisible on green */
.main-navigation .main-nav > ul > li.nav-cta > a::after {
	display: none;
}

.main-navigation .main-nav > ul > li.nav-cta > a:hover,
.main-navigation .main-nav > ul > li.nav-cta > a:focus {
	background: var(--sbn-accent-hover);
	color: var(--sbn-cta-text);
}

/* Mobile menu toggle — light on the dark bar */
.menu-toggle,
.main-navigation .menu-toggle {
	color: var(--sbn-text-inverse);
}

/* Mobile (.toggled): no underline in the stacked menu */
.main-navigation.toggled .main-nav > ul > li > a::after {
	display: none;
}

/* Logo height guard — use the inverse logo on this dark bar */
.site-header .site-logo img {
	max-height: 48px;
	width: auto;
}

/* ==========================================================================
   11. SITE FOOTER
   Rendered by partials/site-footer.php (wired in inc/footer.php, which removes
   GP's default footer + "Built with GeneratePress" credit). Navy — bookends
   the dark Terminal header.
   ========================================================================== */

.sbn-footer {
	background: linear-gradient(180deg, var(--sbn-primary) 0%, var(--sbn-primary-deep) 100%);
	color: rgba(255, 255, 255, 0.7);
}

/* Uses GP's .grid-container (inherits the Customizer container width) so the
   footer aligns with the header + content. 40px inline padding matches GP's
   header/content side padding. */
.sbn-footer__inner {
	padding-top: var(--sbn-space-8);
	padding-bottom: 0;
	padding-inline: 40px;
}

.sbn-footer__top {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--sbn-space-7);
}

.sbn-footer__logo {
	height: 42px;
	width: auto;
	display: block;
	margin-bottom: var(--sbn-space-5);
}

.sbn-footer__blurb {
	font-size: var(--sbn-fs-small);
	line-height: var(--sbn-lh-body);
	max-width: 34ch;
	margin: 0;
}

.sbn-footer__colh {
	color: var(--sbn-text-inverse);
	font-size: var(--sbn-fs-eyebrow);
	font-weight: var(--sbn-fw-black);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 var(--sbn-space-4);
}

.sbn-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sbn-space-3);
}

.sbn-footer__col a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	font-size: var(--sbn-fs-small);
}

.sbn-footer__col a:hover,
.sbn-footer__col a:focus {
	color: var(--sbn-accent);
}

.sbn-footer__col .sbn-footer__social {
	flex-direction: row;
	gap: var(--sbn-space-4);
}

.sbn-footer__social-link {
	display: inline-flex;
	color: rgba(255, 255, 255, 0.7);
}

.sbn-footer__social-link:hover,
.sbn-footer__social-link:focus {
	color: var(--sbn-accent);
}

.sbn-footer__rg {
	margin-top: var(--sbn-space-7);
	text-align: center;
}

.sbn-footer__helpline {
	margin: 0 0 var(--sbn-space-3);
	font-size: var(--sbn-fs-base);
	font-weight: var(--sbn-fw-bold);
	color: var(--sbn-text-inverse);
}

.sbn-footer__helpline a {
	color: var(--sbn-accent);
	text-decoration: none;
}

.sbn-footer__helpline a:hover,
.sbn-footer__helpline a:focus {
	text-decoration: underline;
}

.sbn-footer__age {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 24px;
	padding: 0 var(--sbn-space-2);
	margin-right: var(--sbn-space-2);
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: var(--sbn-radius-sm);
	color: var(--sbn-text-inverse);
	font-size: var(--sbn-fs-eyebrow);
	font-weight: var(--sbn-fw-black);
	vertical-align: middle;
}

.sbn-footer__disclaimer {
	max-width: 70ch;
	margin: 0 auto;
	font-size: var(--sbn-fs-eyebrow);
	line-height: var(--sbn-lh-snug);
	color: rgba(255, 255, 255, 0.5);
}

.sbn-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sbn-space-3);
	margin-top: var(--sbn-space-6);
	padding: var(--sbn-space-5) 0 var(--sbn-space-6);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font-size: var(--sbn-fs-eyebrow);
	color: rgba(255, 255, 255, 0.5);
}

.sbn-footer__legal a {
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
	margin-left: var(--sbn-space-5);
}

.sbn-footer__legal a:hover,
.sbn-footer__legal a:focus {
	color: var(--sbn-text-inverse);
}

@media (max-width: 768px) {
	.sbn-footer__inner {
		padding-inline: var(--sbn-space-5);
	}

	.sbn-footer__top {
		grid-template-columns: 1fr 1fr;
		gap: var(--sbn-space-6);
	}

	.sbn-footer__brand {
		grid-column: 1 / -1;
	}

	.sbn-footer__bottom {
		justify-content: flex-start;
	}

	.sbn-footer__legal a {
		margin-left: 0;
		margin-right: var(--sbn-space-5);
	}
}

/* ==========================================================================
   11. ODDS BOARD
   Games × books comparison table with CSS-only market tabs (no JS). Rendered
   by inc/odds.php from the engine-written sbn_odds meta. Structure: three
   hidden radios + three labels (tabs) + three <section> panels, all direct
   children of .sbn-odds, so :checked ~ nth-of-type drives the active panel.
   ========================================================================== */

.sbn-odds {
	margin: var(--sbn-space-6) 0 var(--sbn-space-7);
}

.sbn-odds__empty {
	color: var(--sbn-text-mid);
	font-size: var(--sbn-fs-small);
}

/* Hidden but focusable — the labels are the visible control. */
.sbn-odds__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* Tab strip — segmented control. */
.sbn-odds__tab {
	display: inline-block;
	padding: var(--sbn-space-2) var(--sbn-space-5);
	margin: 0 var(--sbn-space-2) var(--sbn-space-4) 0;
	background: var(--sbn-bg-alt);
	border: 1px solid var(--sbn-border);
	border-radius: var(--sbn-radius-pill);
	color: var(--sbn-text-mid);
	font-size: var(--sbn-fs-small);
	font-weight: var(--sbn-fw-bold);
	cursor: pointer;
	transition: background var(--sbn-dur) var(--sbn-ease),
				color var(--sbn-dur) var(--sbn-ease);
}

.sbn-odds__tab:hover {
	color: var(--sbn-primary);
	border-color: var(--sbn-border-strong);
}

/* Active tab + matching panel — positional mapping by sibling order. */
.sbn-odds__radio:nth-of-type(1):checked ~ .sbn-odds__tab:nth-of-type(1),
.sbn-odds__radio:nth-of-type(2):checked ~ .sbn-odds__tab:nth-of-type(2),
.sbn-odds__radio:nth-of-type(3):checked ~ .sbn-odds__tab:nth-of-type(3) {
	background: var(--sbn-primary);
	border-color: var(--sbn-primary);
	color: var(--sbn-text-inverse);
}

.sbn-odds__radio:focus-visible ~ .sbn-odds__tab {
	outline: 2px solid var(--sbn-accent);
	outline-offset: 2px;
}

.sbn-odds__panel {
	display: none;
}

.sbn-odds__radio:nth-of-type(1):checked ~ .sbn-odds__panel:nth-of-type(1),
.sbn-odds__radio:nth-of-type(2):checked ~ .sbn-odds__panel:nth-of-type(2),
.sbn-odds__radio:nth-of-type(3):checked ~ .sbn-odds__panel:nth-of-type(3) {
	display: block;
}

/* Horizontal scroll keeps the table usable with many book columns. */
.sbn-odds__scroll {
	overflow-x: auto;
	border: 1px solid var(--sbn-border);
	border-radius: var(--sbn-radius);
	box-shadow: var(--sbn-shadow-sm);
}

.sbn-odds__table {
	border-collapse: collapse;
	width: 100%;
	font-size: var(--sbn-fs-small);
}

.sbn-odds__table th,
.sbn-odds__table td {
	padding: var(--sbn-space-3) var(--sbn-space-4);
	text-align: center;
	white-space: nowrap;
	border-bottom: 1px solid var(--sbn-border);
}

.sbn-odds__table thead th {
	background: var(--sbn-bg-navy);
	color: var(--sbn-text-inverse);
	font-weight: var(--sbn-fw-bold);
	position: sticky;
	top: 0;
}

.sbn-odds__book a {
	color: var(--sbn-text-inverse);
	text-decoration: none;
}

.sbn-odds__book a:hover,
.sbn-odds__book a:focus {
	text-decoration: underline;
}

/* US books we don't partner with — present for completeness, visually secondary. */
.sbn-odds__book--us {
	color: rgba(255, 255, 255, 0.6);
	font-weight: var(--sbn-fw-normal);
}

/* Matchup row header — sticky so it stays visible while scrolling columns. */
.sbn-odds__game-h,
.sbn-odds__game {
	position: sticky;
	left: 0;
	text-align: left;
	z-index: 1;
}

.sbn-odds__game {
	background: var(--sbn-bg);
}

.sbn-odds__table tbody tr:nth-child(even) .sbn-odds__game {
	background: var(--sbn-bg-alt);
}

.sbn-odds__table tbody tr:nth-child(even) td {
	background: var(--sbn-bg-alt);
}

.sbn-odds__teams {
	display: flex;
	flex-direction: column;
	gap: var(--sbn-space-1);
	font-weight: var(--sbn-fw-bold);
	color: var(--sbn-primary);
}

.sbn-odds__time {
	display: block;
	margin-top: var(--sbn-space-1);
	font-size: var(--sbn-fs-eyebrow);
	font-weight: var(--sbn-fw-normal);
	color: var(--sbn-text-light);
}

/* Two stacked prices per cell (away/home, or over/under). */
.sbn-odds__cell {
	font-variant-numeric: tabular-nums;
}

.sbn-odds__val {
	display: block;
	padding: 2px 0;
	color: var(--sbn-text);
}

.sbn-odds__val b {
	color: var(--sbn-text-mid);
	font-weight: var(--sbn-fw-bold);
}

/* Best moneyline price on the row — outlined in green (Covers convention).
   Inset box-shadow draws the outline without changing the cell's box size. */
.sbn-odds__val--best {
	display: inline-block;
	padding: 2px 8px;
	color: var(--sbn-positive);
	font-weight: var(--sbn-fw-bold);
	border-radius: var(--sbn-radius-sm);
	box-shadow: inset 0 0 0 2px var(--sbn-positive);
}

.sbn-odds__stamp {
	margin-top: var(--sbn-space-3);
	font-size: var(--sbn-fs-eyebrow);
	color: var(--sbn-text-light);
}

@media (max-width: 768px) {
	.sbn-odds__tab {
		padding: var(--sbn-space-2) var(--sbn-space-4);
	}

	.sbn-odds__table th,
	.sbn-odds__table td {
		padding: var(--sbn-space-2) var(--sbn-space-3);
	}
}

/* ==========================================================================
   NEWSLETTER
   Signup form — [sbn_newsletter]. Submit button reuses .sbn-cta-button.
   ========================================================================== */
.sbn-newsletter {
	max-width: 32rem;
}

.sbn-newsletter__form {
	display: flex;
	flex-direction: column;
	gap: var(--sbn-space-4);
}

.sbn-newsletter__row {
	display: flex;
	gap: var(--sbn-space-4);
}

.sbn-newsletter__field {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--sbn-space-2);
}

.sbn-newsletter__label {
	font-size: var(--sbn-fs-small);
	font-weight: var(--sbn-fw-bold);
	color: var(--sbn-text);
}

.sbn-newsletter__field input {
	width: 100%;
	padding: var(--sbn-space-3) var(--sbn-space-4);
	font-family: var(--sbn-font-sans);
	font-size: var(--sbn-fs-base);
	color: var(--sbn-text);
	background: var(--sbn-bg);
	border: 1px solid var(--sbn-border-strong);
	border-radius: var(--sbn-radius);
}

.sbn-newsletter__field input:focus {
	outline: none;
	border-color: var(--sbn-accent);
	box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.18);
}

.sbn-newsletter__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sbn-newsletter__msg {
	margin: 0 0 var(--sbn-space-4);
	padding: var(--sbn-space-3) var(--sbn-space-4);
	font-size: var(--sbn-fs-small);
	border-radius: var(--sbn-radius);
}

.sbn-newsletter__msg--ok {
	color: var(--sbn-positive);
	background: rgba(0, 200, 83, 0.12);
}

.sbn-newsletter__msg--error {
	color: #c0392b;
	background: rgba(192, 57, 43, 0.10);
}

.sbn-newsletter__form .sbn-cta-button {
	align-self: flex-start;
}

@media (max-width: 480px) {
	.sbn-newsletter__row {
		flex-direction: column;
	}
}

/* ==========================================================================
   12. HOME PAGE
   Designed front page, rendered by [sbn_home] (inc/home.php) on the static
   front Page. Full-bleed sections bookend the navy header + footer as one mass.

   Chrome strip (scoped to body.home only): GeneratePress wraps page content in
   a centered .grid-container (#page, carries the base-3 card background) and
   pads #content by 30px (one-container mode — both verified against the live
   GP inline CSS). We neutralise both on the home page so sections can run
   edge-to-edge. (The default page title is removed in markup via the
   generate_show_title filter in inc/home.php, so the hero <h1> is the only one.)
   ========================================================================== */

.home #page {
	background: transparent;
}

.home #content {
	padding: 0;
}

/* Full-bleed: break out of the centered content box to the viewport edge. The
   calc keys off the element's own centred position, so it holds at any width
   regardless of GP's container padding. Inner re-constrains the content. */
.sbn-home__section {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: var(--sbn-space-8) 0;
	background: var(--sbn-bg);
}

.sbn-home__section--alt {
	background: var(--sbn-bg-alt);
}

.sbn-home__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--sbn-space-6);
}

.sbn-home__inner--narrow {
	max-width: 760px;
}

/* --- Hero — continues the header's navy mass (seam = --sbn-primary-deep) --- */
.sbn-home__hero {
	background: linear-gradient(180deg, var(--sbn-primary-deep) 0%, var(--sbn-primary) 100%);
	text-align: center;
}

.sbn-home__hero .sbn-home__inner {
	max-width: 820px;
}

.sbn-home__eyebrow {
	margin: 0 0 var(--sbn-space-4);
	color: var(--sbn-accent);
	font-size: var(--sbn-fs-eyebrow);
	font-weight: var(--sbn-fw-black);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sbn-home__title {
	margin: 0 0 var(--sbn-space-5);
	color: var(--sbn-text-inverse);
	font-size: clamp(2rem, 5vw, 3.25rem);
	font-weight: var(--sbn-fw-black);
	line-height: 1.1;
}

.sbn-home__lede {
	max-width: 60ch;
	margin: 0 auto var(--sbn-space-6);
	color: rgba(255, 255, 255, 0.82);
	font-size: 1.125rem;
	line-height: var(--sbn-lh-body);
}

.sbn-home__cta-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sbn-space-4);
}

/* Secondary button — outline on the dark hero (pairs with the green .sbn-cta-button) */
.sbn-btn-ghost {
	display: inline-flex;
	align-items: center;
	gap: var(--sbn-space-2);
	padding: var(--sbn-space-3) var(--sbn-space-6);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--sbn-radius);
	color: var(--sbn-text-inverse);
	font-weight: var(--sbn-fw-bold);
	font-size: 0.9375rem;
	line-height: 1;
	text-decoration: none;
	transition: border-color var(--sbn-dur) var(--sbn-ease),
				background var(--sbn-dur) var(--sbn-ease);
}

.sbn-btn-ghost:hover,
.sbn-btn-ghost:focus-visible {
	border-color: var(--sbn-accent);
	background: rgba(255, 255, 255, 0.06);
	color: var(--sbn-text-inverse);
}

/* --- Section header (title + "see all" link) --- */
.sbn-home__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sbn-space-4);
	margin-bottom: var(--sbn-space-2);
}

.sbn-home__h2 {
	margin: 0;
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: var(--sbn-fw-black);
}

.sbn-home__more {
	color: var(--sbn-primary);
	font-weight: var(--sbn-fw-bold);
	font-size: var(--sbn-fs-small);
	text-decoration: none;
	white-space: nowrap;
}

.sbn-home__more:hover,
.sbn-home__more:focus {
	color: var(--sbn-accent-hover);
}

.sbn-home__sub {
	max-width: 70ch;
	margin: 0 0 var(--sbn-space-5);
	color: var(--sbn-text-mid);
	font-size: var(--sbn-fs-base);
}

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

.sbn-home__news .sbn-newsletter {
	margin: var(--sbn-space-5) auto 0;
}

/* The form's submit sits at flex-start for the left-aligned /newsletter/ page;
   this section is centered, so the button centers with it. */
.sbn-home__news .sbn-newsletter__form .sbn-cta-button {
	align-self: center;
}

/* --- Editorial card grid (best bets + education) --- */
.sbn-home__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sbn-space-5);
	margin-top: var(--sbn-space-5);
}

.sbn-home__card {
	display: flex;
	flex-direction: column;
	gap: var(--sbn-space-2);
	padding: var(--sbn-space-5);
	background: var(--sbn-bg);
	border: 1px solid var(--sbn-border);
	border-radius: var(--sbn-radius-lg);
	box-shadow: var(--sbn-shadow-sm);
	text-decoration: none;
	transition: box-shadow var(--sbn-dur) var(--sbn-ease),
				border-color var(--sbn-dur) var(--sbn-ease),
				transform var(--sbn-dur) var(--sbn-ease);
}

.sbn-home__card:hover {
	box-shadow: var(--sbn-shadow);
	border-color: var(--sbn-border-strong);
	transform: translateY(-2px);
}

.sbn-home__card-date {
	color: var(--sbn-text-light);
	font-size: var(--sbn-fs-eyebrow);
	font-weight: var(--sbn-fw-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.sbn-home__card-title {
	color: var(--sbn-primary);
	font-size: 1.0625rem;
	font-weight: var(--sbn-fw-bold);
	line-height: var(--sbn-lh-snug);
}

.sbn-home__card-dek {
	color: var(--sbn-text-mid);
	font-size: var(--sbn-fs-small);
	line-height: var(--sbn-lh-snug);
}

/* ==========================================================================
   13. ODDS SNAPSHOT
   Compact best-moneyline teaser rendered by sbn_render_odds_snapshot()
   (inc/odds.php) from the canonical /odds/mlb/ board meta. Used on the home
   page; links out to the full board.
   ========================================================================== */

.sbn-snap {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sbn-space-4);
	margin: var(--sbn-space-5) 0 0;
	padding: 0;
	list-style: none;
}

.sbn-snap__game {
	display: flex;
	flex-direction: column;
	gap: var(--sbn-space-3);
	padding: var(--sbn-space-5);
	background: var(--sbn-bg);
	border: 1px solid var(--sbn-border);
	border-radius: var(--sbn-radius-lg);
	box-shadow: var(--sbn-shadow-sm);
}

.sbn-snap__matchup {
	display: flex;
	flex-direction: column;
	gap: var(--sbn-space-3);
}

.sbn-snap__team {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sbn-space-4);
}

.sbn-snap__name {
	font-weight: var(--sbn-fw-bold);
	color: var(--sbn-primary);
}

.sbn-snap__line {
	display: inline-flex;
	align-items: baseline;
	gap: var(--sbn-space-2);
	white-space: nowrap;
}

.sbn-snap__price {
	color: var(--sbn-positive);
	font-weight: var(--sbn-fw-black);
	font-variant-numeric: tabular-nums;
}

.sbn-snap__book {
	color: var(--sbn-text-light);
	font-size: var(--sbn-fs-eyebrow);
}

.sbn-snap__time {
	padding-top: var(--sbn-space-3);
	border-top: 1px solid var(--sbn-border);
	color: var(--sbn-text-light);
	font-size: var(--sbn-fs-eyebrow);
}

/* ==========================================================================
   14. FAQ ACCORDION
   Native <details> (no JS). Driven by the page's sbn_faq meta, which the SBN
   Schema plugin also reads for FAQPage JSON-LD.
   ========================================================================== */

.sbn-faq {
	margin-top: var(--sbn-space-5);
	border-top: 1px solid var(--sbn-border);
}

.sbn-faq__item {
	border-bottom: 1px solid var(--sbn-border);
}

.sbn-faq__q {
	position: relative;
	padding: var(--sbn-space-4) var(--sbn-space-6) var(--sbn-space-4) 0;
	color: var(--sbn-primary);
	font-weight: var(--sbn-fw-bold);
	list-style: none;
	cursor: pointer;
}

.sbn-faq__q::-webkit-details-marker {
	display: none;
}

.sbn-faq__q::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	color: var(--sbn-text-light);
	font-size: 1.5rem;
	font-weight: var(--sbn-fw-normal);
	line-height: 1;
}

.sbn-faq__item[open] .sbn-faq__q::after {
	content: "\2212";
}

.sbn-faq__a {
	padding: 0 0 var(--sbn-space-4);
}

.sbn-faq__a p {
	margin: 0;
	color: var(--sbn-text-mid);
	font-size: var(--sbn-fs-base);
	line-height: var(--sbn-lh-body);
}

@media (max-width: 768px) {
	.sbn-home__section {
		padding: var(--sbn-space-7) 0;
	}

	.sbn-home__inner {
		padding: 0 var(--sbn-space-5);
	}

	.sbn-home__grid,
	.sbn-snap {
		grid-template-columns: 1fr;
	}

	.sbn-home__cta-row {
		flex-direction: column;
	}

	.sbn-home__cta-row .sbn-cta-button,
	.sbn-home__cta-row .sbn-btn-ghost {
		width: 100%;
		justify-content: center;
	}
}