/* ==========================================================================
   WagerKey — main.css
   1. Fonts            5. Layout primitives   9. Homepage sections
   2. Tokens           6. Header             10. Article
   3. Reset            7. Cards              11. Footer
   4. Typography       8. Ads                12. Utilities & motion
   ========================================================================== */

/* 1. Fonts ================================================================= */

@font-face {
	font-family: 'Archivo';
	src: url('../fonts/archivo-var.woff2') format('woff2-variations');
	font-weight: 400 800;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/inter-var.woff2') format('woff2-variations');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

/* 2. Tokens ================================================================
   Light is defined on bare :root so it is the unconditional baseline.
   Dark redefines only the tokens, twice: once for the system preference
   (guarded so an explicit light choice wins) and once for the explicit
   dark choice (so the toggle wins in both directions).
   ========================================================================== */

:root {
	/* Surfaces and ink */
	--wk-bg: #ffffff;
	--wk-surface: #f6f7f5;
	--wk-surface-2: #eef1ee;
	--wk-ink: #111a16;
	--wk-ink-muted: #5c6b64;
	--wk-ink-faint: #8c9a93;
	--wk-line: #e3e7e3;
	--wk-line-strong: #cdd4cf;

	/* Brand */
	--wk-accent: #66a83b;
	--wk-accent-hover: #588f33;
	--wk-accent-ink: #ffffff;
	--wk-brand-deep: #0f3d31;
	--wk-brand-deep-ink: #eaf3ee;
	--wk-live: #e0342b;

	/* Elevation — kept subtle; the design leans on borders, not shadows */
	--wk-shadow-sm: 0 1px 2px rgba(17, 26, 22, .06);
	--wk-shadow-md: 0 4px 16px rgba(17, 26, 22, .08);
	--wk-overlay: linear-gradient(to top, rgba(8, 16, 12, .92) 0%, rgba(8, 16, 12, .55) 42%, rgba(8, 16, 12, 0) 78%);

	/* Type */
	--wk-font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--wk-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--wk-display-stretch: 88%;

	--wk-step--1: clamp(.75rem, .72rem + .12vw, .8125rem);
	--wk-step-0: clamp(.875rem, .85rem + .12vw, .9375rem);
	--wk-step-1: clamp(1rem, .96rem + .2vw, 1.0625rem);
	--wk-step-2: clamp(1.125rem, 1.06rem + .3vw, 1.3125rem);
	--wk-step-3: clamp(1.375rem, 1.24rem + .6vw, 1.75rem);
	--wk-step-4: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);
	--wk-step-5: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
	--wk-step-6: clamp(2.5rem, 1.2rem + 5.4vw, 6rem);

	/* Space — 4px base */
	--wk-1: .25rem;
	--wk-2: .5rem;
	--wk-3: .75rem;
	--wk-4: 1rem;
	--wk-5: 1.5rem;
	--wk-6: 2rem;
	--wk-7: 3rem;
	--wk-8: 4rem;
	--wk-9: 6rem;

	/* Shape */
	--wk-radius-sm: 6px;
	--wk-radius: 12px;
	--wk-radius-lg: 20px;
	--wk-radius-pill: 999px;

	/* Layout */
	--wk-container: min(1200px, 100% - 2rem);
	--wk-header-h: 64px;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		--wk-bg: #0e1512;
		--wk-surface: #161f1b;
		--wk-surface-2: #1d2823;
		--wk-ink: #eef2ef;
		--wk-ink-muted: #9dada6;
		--wk-ink-faint: #75847d;
		--wk-line: #26332d;
		--wk-line-strong: #35443d;

		--wk-accent: #7dc44b;
		--wk-accent-hover: #8ed15c;
		--wk-accent-ink: #0e1512;
		--wk-brand-deep: #0b2c24;
		--wk-brand-deep-ink: #dcebe2;
		--wk-live: #ff5a4f;

		--wk-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
		--wk-shadow-md: 0 4px 20px rgba(0, 0, 0, .45);
	}
}

:root[data-theme='dark'] {
	--wk-bg: #0e1512;
	--wk-surface: #161f1b;
	--wk-surface-2: #1d2823;
	--wk-ink: #eef2ef;
	--wk-ink-muted: #9dada6;
	--wk-ink-faint: #75847d;
	--wk-line: #26332d;
	--wk-line-strong: #35443d;

	--wk-accent: #7dc44b;
	--wk-accent-hover: #8ed15c;
	--wk-accent-ink: #0e1512;
	--wk-brand-deep: #0b2c24;
	--wk-brand-deep-ink: #dcebe2;
	--wk-live: #ff5a4f;

	--wk-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
	--wk-shadow-md: 0 4px 20px rgba(0, 0, 0, .45);
}

/* 3. Reset ================================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

/* `clip`, not `hidden`: hidden would make the root a scroll container and
   break position:sticky on the header. This is belt-and-braces — the page
   does not overflow — but nested scroll strips report a scrollWidth wider
   than the viewport, and some mobile browsers rubber-band on that. */
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	overflow-x: clip;
}

body { overflow-x: clip; }

body {
	margin: 0;
	background: var(--wk-bg);
	color: var(--wk-ink);
	font-family: var(--wk-font-body);
	font-size: var(--wk-step-1);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }
a:hover { color: var(--wk-accent); }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
	outline: 2px solid var(--wk-accent);
	outline-offset: 3px;
	border-radius: var(--wk-radius-sm);
}

/* 4. Typography ============================================================ */

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--wk-font-display);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.015em;
}

p { margin: 0 0 var(--wk-4); }
p:last-child { margin-bottom: 0; }

.wk-display {
	font-family: var(--wk-font-display);
	font-stretch: var(--wk-display-stretch);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -.01em;
	line-height: 1.04;
}

.wk-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wk-2) var(--wk-4);
	font-size: var(--wk-step--1);
	color: var(--wk-ink-muted);
}

.wk-meta time { display: inline-flex; align-items: center; gap: var(--wk-1); }

.wk-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wk-4);
	margin-bottom: var(--wk-5);
}

.wk-section-head h2 { font-size: var(--wk-step-3); }

.wk-see-all {
	display: inline-flex;
	align-items: center;
	gap: var(--wk-2);
	font-size: var(--wk-step-0);
	font-weight: 600;
	color: var(--wk-ink-muted);
	white-space: nowrap;
}

.wk-see-all:hover { color: var(--wk-accent); }

/* 5. Layout primitives ===================================================== */

.wk-container { width: var(--wk-container); margin-inline: auto; }

.wk-section { padding-block: var(--wk-7); }
.wk-section + .wk-section { padding-block-start: 0; }

.wk-grid { display: grid; gap: var(--wk-5); }
.wk-grid-2 { grid-template-columns: 1fr; }
.wk-grid-3 { grid-template-columns: 1fr; }
.wk-grid-4 { grid-template-columns: 1fr; }

/* The reference's asymmetric pairs: ranking/latest and trending/feature. */
.wk-split { display: grid; gap: var(--wk-5); grid-template-columns: 1fr; }

.wk-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: var(--wk-3) var(--wk-4);
	background: var(--wk-accent);
	color: var(--wk-accent-ink);
	font-weight: 600;
}

.wk-skip-link:focus { left: var(--wk-4); top: var(--wk-4); }

.wk-panel {
	background: var(--wk-surface);
	border: 1px solid var(--wk-line);
	border-radius: var(--wk-radius-lg);
	padding: var(--wk-5);
}

.wk-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--wk-2);
	padding: var(--wk-3) var(--wk-5);
	border-radius: var(--wk-radius-pill);
	background: var(--wk-accent);
	color: var(--wk-accent-ink);
	font-weight: 600;
	font-size: var(--wk-step-0);
	transition: background .18s ease, transform .18s ease;
}

.wk-btn:hover { background: var(--wk-accent-hover); color: var(--wk-accent-ink); transform: translateY(-1px); }

.wk-btn-light { background: #fff; color: #111a16; }
.wk-btn-light:hover { background: #f1f1f1; color: #111a16; }

@media (min-width: 640px) {
	.wk-grid-2, .wk-grid-4 { grid-template-columns: repeat(2, 1fr); }
	.wk-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
	:root { --wk-container: min(1200px, 100% - 3rem); }
	.wk-grid-4 { grid-template-columns: repeat(4, 1fr); }
	.wk-split { grid-template-columns: 45fr 55fr; gap: var(--wk-6); }
	.wk-section { padding-block: var(--wk-8); }
}

/* 6. Header ================================================================ */

.wk-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wk-bg);
	border-block-end: 1px solid var(--wk-line);
}

/* -- Tier 1: primary navigation ------------------------------------------ */

.wk-nav {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--wk-4);
	min-height: var(--wk-header-h);
}

.wk-brand { display: flex; align-items: center; gap: var(--wk-3); }
.wk-brand img { max-height: 36px; width: auto; }

.wk-brand-text {
	font-family: var(--wk-font-display);
	font-stretch: 88%;
	font-weight: 800;
	font-size: var(--wk-step-2);
	text-transform: uppercase;
	letter-spacing: -.02em;
}

.wk-nav-menu { display: none; justify-content: center; gap: var(--wk-5); }

.wk-nav-menu a {
	position: relative;
	padding-block: var(--wk-2);
	font-size: var(--wk-step-0);
	font-weight: 500;
	color: var(--wk-ink-muted);
}

.wk-nav-menu a:hover { color: var(--wk-ink); }

.wk-nav-menu .current-menu-item > a,
.wk-nav-menu .current_page_item > a,
.wk-nav-menu .current-post-ancestor > a {
	color: var(--wk-ink);
	font-weight: 600;
}

.wk-nav-menu .current-menu-item > a::after,
.wk-nav-menu .current_page_item > a::after,
.wk-nav-menu .current-post-ancestor > a::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: -2px;
	height: 2px;
	background: var(--wk-accent);
	border-radius: 2px;
}

.wk-nav-actions { display: flex; align-items: center; gap: var(--wk-2); }

.wk-icon-btn {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	color: var(--wk-ink-muted);
	transition: background .18s ease, color .18s ease;
}

.wk-icon-btn:hover { background: var(--wk-surface); color: var(--wk-ink); }
.wk-icon-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; }

.wk-subscribe {
	display: none;
	padding: var(--wk-2) var(--wk-4);
	border-radius: var(--wk-radius-pill);
	background: var(--wk-accent);
	color: var(--wk-accent-ink);
	font-size: var(--wk-step--1);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.wk-subscribe:hover { background: var(--wk-accent-hover); color: var(--wk-accent-ink); }

.wk-signin { display: none; font-size: var(--wk-step-0); font-weight: 500; color: var(--wk-ink-muted); }

/* The moon shows in light mode (click to go dark) and vice versa. */
.wk-mode-toggle .wk-mode-dark { display: none; }
:root[data-theme='dark'] .wk-mode-toggle .wk-mode-dark { display: block; }
:root[data-theme='dark'] .wk-mode-toggle .wk-mode-light { display: none; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) .wk-mode-toggle .wk-mode-dark { display: block; }
	:root:not([data-theme='light']) .wk-mode-toggle .wk-mode-light { display: none; }
}

/* -- Tier 2: league bar --------------------------------------------------- */

.wk-leagues {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--wk-3);
	padding-block: var(--wk-2);
	border-block-start: 1px solid var(--wk-line);
}

/* The two league controls are <details> dropdowns; see section 19. */

.wk-league-strip {
	display: flex;
	gap: var(--wk-2);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	padding-block: var(--wk-1);
}

.wk-league-strip::-webkit-scrollbar { display: none; }

.wk-league {
	display: grid;
	place-items: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--wk-surface);
	border: 2px solid transparent;
	color: var(--wk-ink-muted);
	scroll-snap-align: start;
	transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.wk-league:hover { color: var(--wk-ink); background: var(--wk-surface-2); }
.wk-league.is-active { border-color: var(--wk-accent); color: var(--wk-accent); }
.wk-league svg { width: 21px; height: 21px; }

.wk-league-initial {
	font-family: var(--wk-font-display);
	font-weight: 700;
	font-size: var(--wk-step-0);
}

/* -- Tier 3: live score strip -------------------------------------------- */

.wk-scores {
	border-block-start: 1px solid var(--wk-line);
	background: var(--wk-bg);
}

.wk-score-strip {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.wk-score-strip::-webkit-scrollbar { display: none; }

.wk-score-cell {
	flex: none;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: var(--wk-3);
	min-width: 240px;
	padding: var(--wk-3) var(--wk-4);
	border-inline-end: 1px solid var(--wk-line);
	scroll-snap-align: start;
}

.wk-score-teams { display: grid; gap: var(--wk-1); min-width: 0; }

/* Flex, not grid: this data model carries no team crests, so a fixed
   logo column would swallow the team name. Flex lays out correctly
   whether or not an <img> is present. */
.wk-score-team {
	display: flex;
	align-items: center;
	gap: var(--wk-2);
	font-size: var(--wk-step--1);
	min-width: 0;
}

.wk-score-team img { width: 18px; height: 18px; object-fit: contain; flex: none; }

.wk-score-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--wk-ink-muted);
}

.wk-score-num { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--wk-ink); }
.wk-score-team.is-winner .wk-score-name { color: var(--wk-ink); font-weight: 600; }

/* Statuses range from "FT" to "Starts Oct 9 12:00 am". Short ones never
   wrap because they are short; long ones wrap inside a capped width
   rather than stretching the cell. */
.wk-score-status {
	font-family: var(--wk-font-display);
	font-size: var(--wk-step--1);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--wk-ink-faint);
	text-align: end;
	max-width: 84px;
	line-height: 1.25;
	text-wrap: balance;
}

.wk-score-status.is-live { color: var(--wk-live); }
.wk-score-status.is-final { color: var(--wk-ink-muted); }

@media (min-width: 900px) {
	:root { --wk-header-h: 72px; }
	.wk-nav-menu { display: flex; }
	.wk-subscribe, .wk-signin { display: inline-flex; }
	.wk-league-select, .wk-league-more { display: inline-flex; }
	.wk-menu-toggle { display: none; }
	.wk-league-strip { justify-content: center; }
}

/* -- Mobile drawer -------------------------------------------------------- */

.wk-drawer {
	position: fixed;
	inset: 0 30% 0 0;
	min-width: 280px;
	z-index: 90;
	background: var(--wk-bg);
	border-inline-end: 1px solid var(--wk-line);
	padding: var(--wk-5);
	overflow-y: auto;
	transform: translateX(-102%);
	transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}

.wk-drawer[data-open='true'] { transform: translateX(0); }
.wk-drawer a { display: block; padding-block: var(--wk-3); border-block-end: 1px solid var(--wk-line); font-weight: 500; }

.wk-scrim {
	position: fixed;
	inset: 0;
	z-index: 80;
	background: rgba(8, 16, 12, .5);
	opacity: 0;
	visibility: hidden;
	transition: opacity .28s ease, visibility .28s ease;
}

.wk-scrim[data-open='true'] { opacity: 1; visibility: visible; }

/* -- Search overlay ------------------------------------------------------- */

.wk-search-panel {
	display: none;
	padding-block: var(--wk-4);
	border-block-start: 1px solid var(--wk-line);
}

.wk-search-panel[data-open='true'] { display: block; }

.wk-search-form { display: flex; gap: var(--wk-2); }

.wk-search-form input[type='search'] {
	flex: 1;
	padding: var(--wk-3) var(--wk-4);
	border: 1px solid var(--wk-line-strong);
	border-radius: var(--wk-radius-pill);
	background: var(--wk-surface);
	color: var(--wk-ink);
	font: inherit;
	font-size: var(--wk-step-0);
}

.wk-search-form input[type='search']:focus { outline: 2px solid var(--wk-accent); outline-offset: 1px; }

/* 7. Cards ================================================================= */

.wk-card { display: grid; gap: var(--wk-3); align-content: start; min-width: 0; }

.wk-card-media {
	position: relative;
	overflow: hidden;
	border-radius: var(--wk-radius);
	background: var(--wk-surface-2);
	aspect-ratio: 3 / 2;
}

.wk-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s cubic-bezier(.2, .6, .2, 1);
}

.wk-card:hover .wk-card-media img { transform: scale(1.04); }

.wk-card-title {
	font-size: var(--wk-step-2);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -.012em;
}

.wk-card:hover .wk-card-title { color: var(--wk-accent); }

.wk-card-excerpt {
	font-size: var(--wk-step-0);
	color: var(--wk-ink-muted);
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Format badge on video and gallery posts. */
.wk-card-format {
	position: absolute;
	inset-block-end: var(--wk-3);
	inset-inline-start: var(--wk-3);
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(8, 16, 12, .72);
	color: #fff;
	backdrop-filter: blur(4px);
}

.wk-card-format svg { width: 15px; height: 15px; fill: currentColor; }

/* -- Horizontal: thumbnail beside text ----------------------------------- */

.wk-card-h {
	display: grid;
	grid-template-columns: 104px 1fr;
	gap: var(--wk-3);
	align-items: start;
}

.wk-card-h .wk-card-media { aspect-ratio: 4 / 3; border-radius: var(--wk-radius-sm); }
.wk-card-h .wk-card-title { font-size: var(--wk-step-1); }

/* -- Compact: the Latest News grid --------------------------------------- */

.wk-card-c { grid-template-columns: 88px 1fr; gap: var(--wk-3); align-items: start; }
.wk-card-c .wk-card-media { aspect-ratio: 1 / 1; border-radius: var(--wk-radius-sm); }
.wk-card-c .wk-card-title { font-size: var(--wk-step-0); line-height: 1.3; }

/* -- Overlay: text sitting on the image ---------------------------------- */

.wk-card-o {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--wk-radius-lg);
	min-height: 280px;
	height: 100%;
	background: var(--wk-surface-2);
	isolation: isolate;
}

.wk-card-o img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wk-card-o::after { content: ''; position: absolute; inset: 0; background: var(--wk-overlay); }

.wk-card-o-body {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--wk-2);
	align-content: end;
	height: 100%;
	padding: var(--wk-5);
	color: #fff;
}

.wk-card-o-body .wk-meta { color: rgba(255, 255, 255, .82); }
.wk-card-o-body h3 { font-size: var(--wk-step-4); }
.wk-card-o:hover .wk-card-o-body h3 { color: #fff; }

/* 8. Ads ===================================================================
   Every slot reserves its height before the creative loads. Unsized ad
   divs are the single largest source of layout shift on a news page.
   ========================================================================== */

.wk-ad {
	display: grid;
	place-items: center;
	margin-inline: auto;
	padding-block: var(--wk-3);
	text-align: center;
}

/* No "Advertisement" label. The reserved height and the surrounding
   whitespace already separate the unit from editorial content. */

.wk-ad-inner {
	display: grid;
	place-items: center;
	width: 100%;
	min-height: var(--wk-ad-h, 90px);
}

.wk-ad img { margin-inline: auto; }

.wk-ad-leaderboard { --wk-ad-h: 60px; }
.wk-ad-infeed { --wk-ad-h: 250px; }
.wk-ad-rail { --wk-ad-h: 250px; }
.wk-ad-rail-sticky { --wk-ad-h: 600px; }
.wk-ad-inarticle { --wk-ad-h: 250px; }

/* Fixed bottom anchor. Dismissible, and it never covers the last line of
   an article because body gets matching padding while it is visible. */
.wk-ad-anchor {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 60;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	padding: var(--wk-2);
	background: var(--wk-bg);
	border-block-start: 1px solid var(--wk-line);
	box-shadow: 0 -2px 12px rgba(8, 16, 12, .12);
}

.wk-ad-anchor[hidden] { display: none; }
.wk-ad-anchor .wk-ad { padding-block: 0; --wk-ad-h: 50px; }
body.wk-anchor-open { padding-block-end: 66px; }

.wk-ad-dismiss {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: var(--wk-ink-muted);
}

.wk-ad-dismiss:hover { background: var(--wk-surface); }
.wk-ad-dismiss svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }

@media (min-width: 900px) {
	/* 90px, not 250px. A 970x250 billboard reserved a quarter of the
	   viewport above the fold whether or not one ever loaded; the
	   container grows to fit a taller creative, it just no longer
	   reserves that much by default. */
	.wk-ad-leaderboard { --wk-ad-h: 90px; }
	.wk-ad-infeed { --wk-ad-h: 90px; }
	.wk-ad-inarticle { --wk-ad-h: 280px; }
	.wk-ad-anchor { display: none; }
	body.wk-anchor-open { padding-block-end: 0; }
}

/* 9. Homepage sections ===================================================== */

/* -- Hero slider ---------------------------------------------------------- */

.wk-hero { padding-block: var(--wk-5); }
.wk-hero-rail { display: grid; grid-template-columns: 1fr; gap: var(--wk-3); }

.wk-hero-track {
	display: flex;
	gap: var(--wk-3);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.wk-hero-track::-webkit-scrollbar { display: none; }

.wk-hero-slide {
	position: relative;
	flex: 0 0 100%;
	scroll-snap-align: start;
	overflow: hidden;
	border-radius: var(--wk-radius-lg);
	aspect-ratio: 16 / 10;
	background: var(--wk-surface-2);
	isolation: isolate;
}

.wk-hero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wk-hero-slide::after { content: ''; position: absolute; inset: 0; background: var(--wk-overlay); }

.wk-hero-body {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--wk-3);
	align-content: end;
	height: 100%;
	padding: var(--wk-5);
	color: #fff;
}

.wk-hero-body h2 { font-size: var(--wk-step-4); max-width: 22ch; }
.wk-hero-body p { display: none; max-width: 52ch; color: rgba(255, 255, 255, .82); font-size: var(--wk-step-0); }
.wk-hero-body .wk-meta { color: rgba(255, 255, 255, .72); }

.wk-source {
	display: inline-flex;
	align-items: center;
	gap: var(--wk-2);
	font-size: var(--wk-step--1);
	font-weight: 600;
	color: #fff;
}

.wk-source-chip {
	display: grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding-inline: var(--wk-1);
	border-radius: var(--wk-radius-sm);
	background: var(--wk-accent);
	color: var(--wk-accent-ink);
	font-family: var(--wk-font-display);
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
}

.wk-hero-nav { display: flex; justify-content: flex-end; gap: var(--wk-2); }

.wk-round-btn {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--wk-line-strong);
	border-radius: 50%;
	color: var(--wk-ink-muted);
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.wk-round-btn:hover { background: var(--wk-accent); border-color: var(--wk-accent); color: var(--wk-accent-ink); }
.wk-round-btn[disabled] { opacity: .35; cursor: default; }
.wk-round-btn[disabled]:hover { background: none; color: var(--wk-ink-muted); border-color: var(--wk-line-strong); }
.wk-round-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

/* -- Split CTA banner ----------------------------------------------------- */

.wk-cta {
	display: grid;
	grid-template-columns: 1fr;
	overflow: hidden;
	border-radius: var(--wk-radius-lg);
	background: var(--wk-brand-deep);
	color: var(--wk-brand-deep-ink);
}

.wk-cta-body { display: grid; gap: var(--wk-4); align-content: center; padding: var(--wk-6); }
.wk-cta-body h2 { font-size: var(--wk-step-4); color: #fff; max-width: 18ch; }
.wk-cta-body p { color: rgba(234, 243, 238, .78); font-size: var(--wk-step-0); max-width: 46ch; margin: 0; }
.wk-cta-body .wk-meta { color: rgba(255, 255, 255, .82); }
.wk-cta-body .wk-btn { justify-self: start; }
.wk-cta-media { position: relative; min-height: 220px; }
.wk-cta-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Full-bleed variant: one photo, text overlaid. */
.wk-cta-wide { position: relative; min-height: 340px; isolation: isolate; }
.wk-cta-wide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wk-cta-wide::after { content: ''; position: absolute; inset: 0; background: var(--wk-overlay); }
.wk-cta-wide .wk-cta-body { position: relative; z-index: 1; align-content: end; color: #fff; }

/* -- Odds board (the reference's ranking table) --------------------------- */

.wk-board { display: grid; gap: var(--wk-4); align-content: start; }
.wk-board-head { display: flex; align-items: center; justify-content: space-between; gap: var(--wk-4); }
.wk-board-body { overflow-x: auto; }
.wk-board table { width: 100%; border-collapse: collapse; font-size: var(--wk-step-0); }
.wk-board th, .wk-board td { padding: var(--wk-3) var(--wk-2); text-align: end; white-space: nowrap; }
.wk-board th:first-child, .wk-board td:first-child { text-align: start; padding-inline-start: 0; }

.wk-board thead th {
	font-family: var(--wk-font-display);
	font-size: var(--wk-step--1);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--wk-ink-faint);
	border-block-end: 1px solid var(--wk-line);
}

.wk-board tbody tr { border-block-end: 1px solid var(--wk-line); }
.wk-board tbody tr:last-child { border-block-end: 0; }
.wk-board tbody td { font-variant-numeric: tabular-nums; }
.wk-board-empty { color: var(--wk-ink-muted); font-size: var(--wk-step-0); }

/* -- Trending panel ------------------------------------------------------- */

.wk-trending { display: grid; gap: var(--wk-4); align-content: start; }
.wk-trending .wk-card-h + .wk-card-h { padding-block-start: var(--wk-4); border-block-start: 1px solid var(--wk-line); }

/* -- Newsletter ----------------------------------------------------------- */

.wk-newsletter {
	display: grid;
	gap: var(--wk-5);
	align-items: center;
	padding-block: var(--wk-7);
	border-block-end: 1px solid rgba(255, 255, 255, .14);
}

.wk-newsletter h2 { font-size: var(--wk-step-6); color: #fff; font-weight: 400; letter-spacing: -.03em; }
.wk-newsletter-form { display: grid; gap: var(--wk-3); max-width: 420px; }
.wk-newsletter-form label { font-size: var(--wk-step-0); color: rgba(234, 243, 238, .8); }
.wk-newsletter-field { position: relative; display: flex; }

.wk-newsletter-field input {
	flex: 1;
	padding: var(--wk-3) 52px var(--wk-3) var(--wk-4);
	border: 0;
	border-radius: var(--wk-radius-pill);
	background: #fff;
	color: #111a16;
	font: inherit;
	font-size: var(--wk-step-0);
}

.wk-newsletter-field button {
	position: absolute;
	inset-inline-end: 5px;
	inset-block: 5px;
	display: grid;
	place-items: center;
	width: 36px;
	border-radius: 50%;
	background: var(--wk-accent);
	color: var(--wk-accent-ink);
}

.wk-newsletter-field button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

@media (min-width: 900px) {
	.wk-hero-rail { grid-template-columns: 1fr auto; align-items: end; }
	.wk-hero-track { display: grid; grid-template-columns: 1fr 132px 132px; overflow: visible; }
	.wk-hero-slide { flex: none; aspect-ratio: auto; height: 440px; }
	.wk-hero-slide + .wk-hero-slide { border-radius: var(--wk-radius); }
	.wk-hero-slide + .wk-hero-slide .wk-hero-body { padding: var(--wk-3); }
	.wk-hero-slide + .wk-hero-slide .wk-hero-body h2 { font-size: var(--wk-step-0); line-height: 1.25; }
	.wk-hero-slide + .wk-hero-slide .wk-source,
	.wk-hero-slide + .wk-hero-slide .wk-meta { display: none; }
	.wk-hero-body { padding: var(--wk-6); }
	.wk-hero-body h2 { font-size: var(--wk-step-5); }
	.wk-hero-body p { display: block; }
	.wk-hero-nav { flex-direction: column; }

	.wk-cta { grid-template-columns: 1fr 1fr; }
	.wk-cta-body { padding: var(--wk-7); }
	.wk-newsletter { grid-template-columns: 1fr auto; }
	.wk-newsletter-form { justify-self: end; min-width: 380px; }
}

/* 10. Article ============================================================== */

.wk-article-head { display: grid; gap: var(--wk-4); padding-block: var(--wk-6) var(--wk-5); max-width: 800px; }
.wk-article-head h1 { font-size: var(--wk-step-5); letter-spacing: -.022em; }

.wk-byline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wk-3); font-size: var(--wk-step-0); color: var(--wk-ink-muted); }
.wk-byline strong { color: var(--wk-ink); font-weight: 600; }
.wk-byline-avatar { width: 32px; height: 32px; border-radius: 50%; }

.wk-article-media { position: relative; margin-block-end: var(--wk-5); border-radius: var(--wk-radius-lg); overflow: hidden; }
.wk-photo-credit { padding-block-start: var(--wk-2); font-size: var(--wk-step--1); color: var(--wk-ink-faint); }

.wk-article-layout { display: grid; gap: var(--wk-6); grid-template-columns: 1fr; padding-block-end: var(--wk-8); }

.wk-content { font-size: var(--wk-step-1); line-height: 1.72; max-width: 72ch; }
.wk-content > * + * { margin-block-start: var(--wk-4); }
.wk-content h2 { font-size: var(--wk-step-3); margin-block-start: var(--wk-6); }
.wk-content h3 { font-size: var(--wk-step-2); margin-block-start: var(--wk-5); }
.wk-content a { color: var(--wk-accent); text-decoration: underline; text-underline-offset: 2px; }
.wk-content a:hover { text-decoration-thickness: 2px; }
.wk-content img { border-radius: var(--wk-radius); }
.wk-content ul, .wk-content ol { padding-inline-start: var(--wk-5); }
.wk-content ul { list-style: disc; }
.wk-content ol { list-style: decimal; }
.wk-content li + li { margin-block-start: var(--wk-2); }
.wk-content figure { margin: var(--wk-5) 0; }
.wk-content figcaption { padding-block-start: var(--wk-2); font-size: var(--wk-step--1); color: var(--wk-ink-faint); }

.wk-content blockquote {
	margin: var(--wk-5) 0;
	padding-inline-start: var(--wk-5);
	border-inline-start: 3px solid var(--wk-accent);
	font-size: var(--wk-step-2);
	line-height: 1.4;
	color: var(--wk-ink);
}

.wk-content table { width: 100%; border-collapse: collapse; font-size: var(--wk-step-0); }
.wk-content th, .wk-content td { padding: var(--wk-2) var(--wk-3); border: 1px solid var(--wk-line); text-align: start; }

/* Wide content must scroll inside itself, never widen the page. */
.wk-content > table,
.wk-content > pre { display: block; overflow-x: auto; }

.wk-content pre {
	padding: var(--wk-4);
	border-radius: var(--wk-radius);
	background: var(--wk-surface);
	font-size: var(--wk-step-0);
}

.wk-share { display: flex; align-items: center; gap: var(--wk-2); }

.wk-share a {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--wk-line);
	border-radius: 50%;
	color: var(--wk-ink-muted);
}

.wk-share a:hover { background: var(--wk-accent); border-color: var(--wk-accent); color: var(--wk-accent-ink); }
.wk-share svg { width: 15px; height: 15px; fill: currentColor; }

.wk-rail { display: grid; gap: var(--wk-5); align-content: start; min-width: 0; }
.wk-rail-sticky { position: sticky; top: calc(var(--wk-header-h) + var(--wk-4)); }

.wk-widget { display: grid; gap: var(--wk-3); }

.wk-widget-title {
	font-family: var(--wk-font-display);
	font-size: var(--wk-step--1);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--wk-ink-faint);
	padding-block-end: var(--wk-2);
	border-block-end: 1px solid var(--wk-line);
}

.wk-author-box {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--wk-4);
	align-items: start;
	margin-block: var(--wk-6);
	padding: var(--wk-5);
	background: var(--wk-surface);
	border-radius: var(--wk-radius-lg);
}

.wk-author-box img { border-radius: 50%; }
.wk-author-box p { font-size: var(--wk-step-0); color: var(--wk-ink-muted); margin: var(--wk-2) 0 0; }

.wk-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--wk-2); padding-block: var(--wk-7); }

.wk-pagination a,
.wk-pagination span {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--wk-3);
	border: 1px solid var(--wk-line);
	border-radius: var(--wk-radius-pill);
	font-size: var(--wk-step-0);
	font-weight: 600;
	color: var(--wk-ink-muted);
}

.wk-pagination a:hover { border-color: var(--wk-accent); color: var(--wk-accent); }
.wk-pagination .current { background: var(--wk-accent); border-color: var(--wk-accent); color: var(--wk-accent-ink); }

.wk-archive-head { display: grid; gap: var(--wk-3); padding-block: var(--wk-6) var(--wk-2); }
.wk-archive-head h1 { font-size: var(--wk-step-4); }
.wk-archive-head p { color: var(--wk-ink-muted); max-width: 68ch; font-size: var(--wk-step-0); }

.wk-comments { padding-block: var(--wk-6); border-block-start: 1px solid var(--wk-line); }
.wk-comment-list li { padding-block: var(--wk-4); border-block-end: 1px solid var(--wk-line); }
.wk-comment-list .children { padding-inline-start: var(--wk-5); }

.wk-empty { padding-block: var(--wk-8); text-align: center; color: var(--wk-ink-muted); }
.wk-empty h1 { font-size: var(--wk-step-5); color: var(--wk-ink); margin-block-end: var(--wk-3); }

@media (min-width: 900px) {
	.wk-article-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--wk-7); }
	.wk-article-head h1 { font-size: var(--wk-step-5); }
}

/* 11. Footer =============================================================== */

.wk-footer {
	position: relative;
	margin-block-start: var(--wk-8);
	background: var(--wk-brand-deep);
	color: var(--wk-brand-deep-ink);
	overflow: hidden;
}

.wk-footer a { color: rgba(234, 243, 238, .78); }
.wk-footer a:hover { color: #fff; }

.wk-footer-main { display: grid; gap: var(--wk-6); padding-block: var(--wk-7); }
.wk-footer-about { display: grid; gap: var(--wk-4); align-content: start; max-width: 42ch; }
.wk-footer-about img { max-height: 40px; width: auto; }
.wk-footer-about p { font-size: var(--wk-step-0); color: rgba(234, 243, 238, .72); }

.wk-footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--wk-5); }
.wk-footer-cols h3 { font-size: var(--wk-step-0); color: #fff; margin-block-end: var(--wk-3); }
.wk-footer-cols li + li { margin-block-start: var(--wk-2); }
.wk-footer-cols a { font-size: var(--wk-step-0); }

.wk-social { display: flex; gap: var(--wk-2); }

.wk-social a {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: #fff;
}

.wk-social a:hover { background: var(--wk-accent); color: var(--wk-accent-ink); }
.wk-social svg { width: 15px; height: 15px; fill: currentColor; }

.wk-footer-legal {
	position: relative;
	z-index: 1;
	padding-block: var(--wk-5);
	border-block-start: 1px solid rgba(255, 255, 255, .14);
	text-align: center;
	font-size: var(--wk-step--1);
	color: rgba(234, 243, 238, .6);
}

/* The oversized ghosted wordmark bleeding off the bottom edge. */
.wk-footer-mark {
	display: block;
	margin-block-start: var(--wk-5);
	font-family: var(--wk-font-display);
	font-stretch: 92%;
	font-size: clamp(3.5rem, 15vw, 11rem);
	font-weight: 800;
	line-height: .78;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: -.03em;
	/* Decorative, aria-hidden, and deliberately faint. Lifted from .07 to
	   .12: at .07 the contrast ratio was 1.23, faint enough to read as a
	   rendering artefact rather than a design choice. It still will not
	   meet 4.5:1 — no ghosted wordmark can — but it is now legibly
	   intentional. */
	color: rgba(255, 255, 255, .12);
	user-select: none;
	pointer-events: none;
	margin-block-end: -.18em;
}

@media (min-width: 900px) {
	.wk-footer-main { grid-template-columns: 1fr 1.2fr; gap: var(--wk-8); }
}

/* 12. Utilities & motion =================================================== */

.wk-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

[hidden] { display: none !important; }

.wk-stack { display: grid; gap: var(--wk-4); }
.wk-divider { height: 1px; background: var(--wk-line); border: 0; margin-block: var(--wk-5); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.wk-header, .wk-footer, .wk-rail, .wk-ad, .wk-share, .wk-pagination { display: none !important; }
	body { color: #000; background: #fff; }
}

/* 13. Wiring ==============================================================
   Rules that bind the CSS to markup WordPress or the templates generate:
   menu structures, grid children that must be allowed to shrink, and the
   classes applied from PHP or JS rather than written in a template.
   ========================================================================== */

.wk-main { display: block; }

/* Grid children default to min-width:auto, which lets a wide table or a
   long unbroken URL push the whole layout sideways. */
.wk-article-main,
.wk-article-layout > *,
.wk-split > *,
.wk-grid > * { min-width: 0; }

.wk-nav-start { display: flex; align-items: center; gap: var(--wk-2); min-width: 0; }

/* wp_nav_menu renders <nav class="wk-nav-menu"><ul class="wk-nav-list">. */
.wk-nav-list { display: flex; align-items: center; gap: var(--wk-5); }
.wk-nav-list li { position: relative; }

/* Sport icons are stroke drawings, like the UI icons. Filled silhouettes
   lose their internal detail at 21px and every ball becomes a dot. */
.wk-sport-icon {
	width: 1.3em;
	height: 1.3em;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.wk-league .wk-sport-icon { width: 21px; height: 21px; }

/* An in-feed ad occupies a full row of the card grid rather than one cell. */
.wk-infeed-cell { grid-column: 1 / -1; }

.wk-newsletter-title { font-family: var(--wk-font-display); }
.wk-ad-text { font-size: var(--wk-step--1); color: var(--wk-ink-faint); }

/* The footer link menu arrives as a single <ul>; display:contents promotes
   its top-level items to grid children so each becomes a column. */
.wk-footer-cols > ul { display: contents; }
.wk-footer-cols > ul > li > a {
	display: block;
	margin-block-end: var(--wk-3);
	font-family: var(--wk-font-display);
	font-size: var(--wk-step-0);
	font-weight: 700;
	color: #fff;
}

.wk-footer-cols .sub-menu li + li { margin-block-start: var(--wk-2); }
.wk-footer-cols .sub-menu a { font-size: var(--wk-step-0); }

/* Comment form, styled minimally — it inherits the theme's inputs. */
.wk-comments input[type='text'],
.wk-comments input[type='email'],
.wk-comments input[type='url'],
.wk-comments textarea {
	width: 100%;
	max-width: 100%;
	padding: var(--wk-3) var(--wk-4);
	border: 1px solid var(--wk-line-strong);
	border-radius: var(--wk-radius);
	background: var(--wk-surface);
	color: var(--wk-ink);
	font: inherit;
	font-size: var(--wk-step-0);
}

.wk-comments .comment-form > p { margin-block-end: var(--wk-4); }
.wk-comments .comment-reply-title { font-size: var(--wk-step-3); margin-block-end: var(--wk-4); }

.wk-comments .submit {
	display: inline-flex;
	padding: var(--wk-3) var(--wk-5);
	border: 0;
	border-radius: var(--wk-radius-pill);
	background: var(--wk-accent);
	color: var(--wk-accent-ink);
	font-weight: 600;
	cursor: pointer;
}

/* WordPress core alignment and caption classes used inside post content. */
.wk-content .alignleft { float: left; margin: 0 var(--wk-5) var(--wk-4) 0; }
.wk-content .alignright { float: right; margin: 0 0 var(--wk-4) var(--wk-5); }
.wk-content .aligncenter { display: block; margin-inline: auto; }
.wk-content .alignwide { width: min(100vw - 2rem, 1100px); margin-inline: auto; }
.wk-content .alignfull { width: calc(100vw - 2rem); margin-inline: auto; }
.wk-content .wp-caption { max-width: 100%; }
.wk-content .wp-caption-text,
.wk-content .gallery-caption { font-size: var(--wk-step--1); color: var(--wk-ink-faint); }
.wk-content .sticky,
.wk-content .screen-reader-text { position: static; }

/* Odds-comparer and other plugin tables inherit the board's look. */
.wk-board-body table,
.wk-content .sportsbook-odds table { width: 100%; border-collapse: collapse; }

/* 14. Icon defaults =======================================================
   Inline SVGs carry no presentation attributes, so without these rules a
   browser paints them solid black at whatever size the flex or grid
   context implies. Stroke icons and fill icons are separated by class.
   ========================================================================== */

.wk-ui-icon {
	width: 1em;
	height: 1em;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: -.125em;
}

.wk-social-icon {
	width: 1em;
	height: 1em;
	flex: none;
	fill: currentColor;
	stroke: none;
}

/* Context sizes. The button rules already set their own dimensions; these
   cover icons sitting inline in text. */
.wk-meta .wk-ui-icon { width: 13px; height: 13px; stroke-width: 1.8; opacity: .75; }
.wk-see-all .wk-ui-icon { width: 15px; height: 15px; }
.wk-btn .wk-ui-icon { width: 16px; height: 16px; }
.wk-icon-btn .wk-ui-icon { width: 19px; height: 19px; stroke-width: 1.9; }
.wk-round-btn .wk-ui-icon { width: 16px; height: 16px; }
.wk-league-select .wk-ui-icon,
.wk-league-more .wk-ui-icon { width: 14px; height: 14px; }
.wk-newsletter-field .wk-ui-icon { width: 16px; height: 16px; }
.wk-ad-dismiss .wk-ui-icon { width: 14px; height: 14px; }
.wk-social .wk-social-icon,
.wk-share .wk-social-icon { width: 15px; height: 15px; }
.wk-card-format .wk-social-icon { width: 15px; height: 15px; }

/* The mode toggle wraps each icon in a span; the span must not collapse. */
.wk-mode-toggle span { display: grid; place-items: center; }

/* Peek slides carry a headline only. At 132px wide, a dek and a meta row
   are illegible, so they are dropped rather than shrunk. */
@media (min-width: 900px) {
	.wk-hero-slide + .wk-hero-slide .wk-hero-body p { display: none; }

	.wk-hero-slide + .wk-hero-slide .wk-hero-body h2 {
		display: -webkit-box;
		-webkit-line-clamp: 4;
		line-clamp: 4;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: var(--wk-step--1);
		line-height: 1.3;
		letter-spacing: 0;
	}
}

/* A featured image that 404s leaves an empty box; the neutral surface
   behind it keeps the card looking deliberate rather than broken. */
.wk-card-media,
.wk-card-o,
.wk-hero-slide { background-color: var(--wk-surface-2); }

/* 15. Split-section balance ===============================================
   The odds board's height is set by however many matchups the plugin
   returns — it was 1699px with five games. Its neighbour stretched to
   match, spreading six cards over a column of empty space.

   Two rules fix it: the board scrolls internally past a fixed height, and
   cards in a split column pack to the top instead of distributing.
   ========================================================================== */

.wk-split .wk-grid,
.wk-split .wk-stack { align-content: start; }

.wk-board { align-self: start; }

.wk-board-body {
	max-height: 520px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* A scrollable region needs to be keyboard-reachable. */
.wk-board-body:focus-visible { outline: 2px solid var(--wk-accent); outline-offset: 2px; }

@media (min-width: 900px) {
	/* Trending and its feature card read as a matched pair in the
	   reference, so that split keeps equal-height columns. */
	.wk-split > .wk-trending { align-self: stretch; }
}

/* 16. Logo colour modes ===================================================
   Two images are always emitted when a dark logo is configured; CSS shows
   exactly one. When none is configured, .wk-logo-adaptive lightens the
   default file instead — invert plus a hue rotation flips lightness while
   returning hues to roughly where they started, so a green mark stays
   green while dark lettering becomes light.
   ========================================================================== */

.wk-logo { display: block; max-height: 36px; width: auto; }
.wk-logo-dark { display: none; }
.wk-footer .wk-logo { max-height: 40px; }

:root[data-theme='dark'] .wk-logo-light:not(.wk-logo-adaptive) { display: none; }
:root[data-theme='dark'] .wk-logo-dark { display: block; }
:root[data-theme='dark'] .wk-logo-adaptive { filter: invert(1) hue-rotate(180deg) saturate(1.15); }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) .wk-logo-light:not(.wk-logo-adaptive) { display: none; }
	:root:not([data-theme='light']) .wk-logo-dark { display: block; }
	:root:not([data-theme='light']) .wk-logo-adaptive { filter: invert(1) hue-rotate(180deg) saturate(1.15); }
}

/* The footer sits on --wk-brand-deep in BOTH modes, so its logo always
   needs the light treatment regardless of the active colour mode. */
.wk-footer .wk-logo-adaptive { filter: invert(1) hue-rotate(180deg) saturate(1.15); }
.wk-footer .wk-brand-text { color: #fff; }

/* 17. Breadcrumbs & archive heading =======================================
   Slim trail, then the sport icon inline with the title. WordPress's
   "Category:" prefix is filtered off in inc/archive-parts.php — the icon
   and the crumb already say what kind of archive this is.
   ========================================================================== */

.wk-crumbs { padding-block: var(--wk-4) 0; }

.wk-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wk-1) var(--wk-2);
	font-size: var(--wk-step--1);
	color: var(--wk-ink-faint);
}

.wk-crumbs li { display: inline-flex; align-items: center; gap: var(--wk-2); min-width: 0; }

.wk-crumbs li + li::before {
	content: '';
	width: 5px;
	height: 5px;
	border-inline-end: 1.5px solid currentColor;
	border-block-start: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: .55;
	flex: none;
}

.wk-crumbs a { color: var(--wk-ink-muted); }
.wk-crumbs a:hover { color: var(--wk-accent); }
.wk-crumbs [aria-current='page'] { color: var(--wk-ink); font-weight: 500; }

/* The last crumb on an article is a title; keep it on one line. */
.wk-crumbs li:last-child span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 44ch;
}

.wk-archive-head { padding-block: var(--wk-4) var(--wk-2); gap: var(--wk-2); }

.wk-archive-title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wk-3);
}

.wk-archive-title h1 { font-size: var(--wk-step-4); }

/* Inline with the heading and unfilled — the icon reads as part of the
   title rather than as a badge sitting beside it. */
.wk-archive-icon {
	display: grid;
	place-items: center;
	flex: none;
	color: var(--wk-accent);
}

.wk-archive-icon .wk-sport-icon { width: 30px; height: 30px; stroke-width: 1.5; }

.wk-archive-count {
	font-size: var(--wk-step--1);
	color: var(--wk-ink-faint);
	white-space: nowrap;
	padding-inline-start: var(--wk-1);
}

/* 18. Foreign nodes inside card grids =====================================
   Ad Inserter Pro injects its own wrappers between posts in the loop. As
   direct grid children they each consumed a card cell, so the first cell
   rendered blank and the grid looked like it had dropped a post.

   Two rules: any non-card child spans the whole row, and a wrapper whose
   only creative is an unconfigured image (src="#" or empty) is hidden.
   ========================================================================== */

.wk-grid > *:not(.wk-card):not(article) { grid-column: 1 / -1; }

.wk-grid > .code-block,
.wk-grid > .col-md-12,
.wk-grid > .ai-viewports { grid-column: 1 / -1; justify-self: stretch; }

.wk-grid > *:not(.wk-card):has(img[src='#']),
.wk-grid > *:not(.wk-card):has(img[src='']),
.wk-grid > *:not(.wk-card):has(a[href='#'] > img[src='#']) { display: none; }

/* Fallback for engines without :has() — an injected wrapper with no
   intrinsic content collapses instead of holding open a card-height row. */
.wk-grid > .code-block:empty,
.wk-grid > .col-md-12:empty { display: none; }

/* 19. Dropdowns ===========================================================
   Built on <details>/<summary>, so open/close, keyboard focus and ARIA
   come from the browser. The default disclosure triangle is removed in
   both the standard and WebKit-prefixed forms.
   ========================================================================== */

.wk-dropdown { position: relative; display: none; }

.wk-dropdown > summary {
	display: inline-flex;
	align-items: center;
	gap: var(--wk-2);
	padding: var(--wk-2) var(--wk-3);
	border: 1px solid var(--wk-line);
	border-radius: var(--wk-radius-pill);
	font-size: var(--wk-step--1);
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	list-style: none;
	user-select: none;
	transition: border-color .18s ease, background .18s ease;
}

.wk-dropdown > summary::-webkit-details-marker { display: none; }
.wk-dropdown > summary::marker { content: ''; }
.wk-dropdown > summary:hover { border-color: var(--wk-line-strong); background: var(--wk-surface); }
.wk-dropdown[open] > summary { border-color: var(--wk-accent); color: var(--wk-accent); }
.wk-dropdown[open] > summary .wk-ui-icon { transform: rotate(180deg); }
.wk-dropdown > summary .wk-ui-icon { transition: transform .18s ease; }
.wk-dropdown-label { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }

.wk-dropdown-panel {
	position: absolute;
	z-index: 60;
	inset-block-start: calc(100% + 6px);
	inset-inline-start: 0;
	min-width: 232px;
	max-height: min(70vh, 460px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--wk-2);
	background: var(--wk-bg);
	border: 1px solid var(--wk-line);
	border-radius: var(--wk-radius);
	box-shadow: var(--wk-shadow-md);
}

.wk-dropdown-panel-end { inset-inline-start: auto; inset-inline-end: 0; }

.wk-dropdown-list { display: grid; gap: 2px; }

.wk-dropdown-list a {
	display: flex;
	align-items: center;
	gap: var(--wk-3);
	padding: var(--wk-2) var(--wk-3);
	border-radius: var(--wk-radius-sm);
	font-size: var(--wk-step-0);
	color: var(--wk-ink-muted);
}

.wk-dropdown-list a:hover { background: var(--wk-surface); color: var(--wk-ink); }
.wk-dropdown-list a.is-active { background: var(--wk-surface); color: var(--wk-accent); font-weight: 600; }
.wk-dropdown-list .wk-sport-icon { width: 18px; height: 18px; color: var(--wk-accent); }
.wk-dropdown-count { margin-inline-start: auto; font-size: var(--wk-step--1); color: var(--wk-ink-faint); }

.wk-dropdown-sep {
	padding: var(--wk-3) var(--wk-3) var(--wk-1);
	margin-block-start: var(--wk-2);
	border-block-start: 1px solid var(--wk-line);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wk-ink-faint);
}

@media (min-width: 900px) {
	.wk-dropdown { display: block; }
}

/* 20. Hero rotator ========================================================
   "Next" promotes the following story into the large slot rather than
   scrolling, so the 1-big-plus-2-peeks composition is preserved. The
   track fades briefly while the DOM reorders, which reads as a
   transition without needing to animate positions.
   ========================================================================== */

.wk-hero-track { transition: opacity .16s ease; }
.wk-hero-track.is-rotating { opacity: .35; }

@media (min-width: 900px) {
	.wk-hero-slide + .wk-hero-slide { cursor: pointer; }
	.wk-hero-slide + .wk-hero-slide:hover { outline: 2px solid var(--wk-accent); outline-offset: 2px; }
}

/* Below the desktop breakpoint only the promoted slide is shown; the
   peeks would be unreadable at that width, and swipe rotates instead. */
@media (max-width: 899px) {
	.wk-hero-track { display: block; }
	.wk-hero-slide { display: none; }
	.wk-hero-slide.is-primary,
	.wk-hero-slide:first-child { display: block; }
	.wk-hero-nav { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.wk-hero-track.is-rotating { opacity: 1; }
}

/* 21. Sidebar widgets =====================================================
   Widgets arrive as plugin markup with unpredictable inner structure, so
   these rules style the container and normalise the common WordPress
   widget shapes (lists, search, calendar, tag cloud) rather than trying
   to target each plugin.
   ========================================================================== */

.wk-rail .wk-widget {
	padding: var(--wk-4);
	background: var(--wk-surface);
	border: 1px solid var(--wk-line);
	border-radius: var(--wk-radius-lg);
}

.wk-widget-title {
	display: flex;
	align-items: center;
	gap: var(--wk-2);
	margin-block-end: var(--wk-1);
}

.wk-widget-title::before {
	content: '';
	width: 3px;
	height: 14px;
	border-radius: 2px;
	background: var(--wk-accent);
	flex: none;
}

/* Link lists: categories, archives, recent posts, pages, meta. */
.wk-widget ul { display: grid; gap: 1px; }

.wk-widget li {
	display: flex;
	align-items: baseline;
	gap: var(--wk-2);
	padding-block: var(--wk-2);
	font-size: var(--wk-step-0);
	color: var(--wk-ink-muted);
	border-block-end: 1px solid var(--wk-line);
}

.wk-widget li:last-child { border-block-end: 0; }
.wk-widget li a { color: var(--wk-ink); }
.wk-widget li a:hover { color: var(--wk-accent); }
.wk-widget li .children,
.wk-widget li .sub-menu { padding-inline-start: var(--wk-4); }

/* Recent-posts and RSS widgets put the date in a span or time element. */
.wk-widget .post-date,
.wk-widget .rss-date,
.wk-widget time { margin-inline-start: auto; font-size: var(--wk-step--1); color: var(--wk-ink-faint); white-space: nowrap; }

.wk-widget p { font-size: var(--wk-step-0); color: var(--wk-ink-muted); }
.wk-widget img { border-radius: var(--wk-radius-sm); }

.wk-widget select,
.wk-widget input[type='text'],
.wk-widget input[type='search'],
.wk-widget input[type='email'] {
	width: 100%;
	padding: var(--wk-2) var(--wk-3);
	border: 1px solid var(--wk-line-strong);
	border-radius: var(--wk-radius-sm);
	background: var(--wk-bg);
	color: var(--wk-ink);
	font: inherit;
	font-size: var(--wk-step-0);
}

.wk-widget button,
.wk-widget input[type='submit'] {
	padding: var(--wk-2) var(--wk-4);
	border: 0;
	border-radius: var(--wk-radius-pill);
	background: var(--wk-accent);
	color: var(--wk-accent-ink);
	font-weight: 600;
	font-size: var(--wk-step-0);
	cursor: pointer;
}

/* Tag clouds render as inline anchors with inline font-size. */
.wk-widget .tagcloud { display: flex; flex-wrap: wrap; gap: var(--wk-2); }

.wk-widget .tagcloud a {
	padding: var(--wk-1) var(--wk-3);
	border: 1px solid var(--wk-line-strong);
	border-radius: var(--wk-radius-pill);
	font-size: var(--wk-step--1) !important;
	color: var(--wk-ink-muted);
}

.wk-widget .tagcloud a:hover { border-color: var(--wk-accent); color: var(--wk-accent); }

.wk-widget table { width: 100%; border-collapse: collapse; font-size: var(--wk-step--1); }
.wk-widget th, .wk-widget td { padding: var(--wk-1); text-align: center; }

/* An ad slot inside the rail should not get the widget card treatment. */
.wk-rail > .wk-ad { padding: 0; }

/* 22. Odds board ==========================================================
   Rendered by the theme now, not the plugin, so these are the only rules
   in play — the plugin injected 180 lines of hardcoded light-mode values
   inline, which no theme stylesheet could outrank.
   ========================================================================== */

.wk-board-head { gap: var(--wk-3); }

.wk-board-flag {
	padding: 2px var(--wk-2);
	border-radius: var(--wk-radius-pill);
	background: var(--wk-surface-2);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wk-ink-faint);
	white-space: nowrap;
}

.wk-board-tabs {
	display: flex;
	gap: var(--wk-1);
	overflow-x: auto;
	scrollbar-width: none;
	padding-block-end: var(--wk-3);
	border-block-end: 1px solid var(--wk-line);
	margin-block-end: var(--wk-2);
}

.wk-board-tabs::-webkit-scrollbar { display: none; }

.wk-board-tab {
	flex: none;
	padding: var(--wk-1) var(--wk-3);
	border-radius: var(--wk-radius-pill);
	font-family: var(--wk-font-display);
	font-size: var(--wk-step--1);
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--wk-ink-muted);
}

.wk-board-tab:hover { background: var(--wk-surface-2); color: var(--wk-ink); }
.wk-board-tab.is-active { background: var(--wk-accent); color: var(--wk-accent-ink); }

.wk-game-list { display: grid; gap: var(--wk-3); }

.wk-game {
	display: grid;
	gap: var(--wk-3);
	padding: var(--wk-3);
	background: var(--wk-bg);
	border: 1px solid var(--wk-line);
	border-radius: var(--wk-radius);
}

.wk-game-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wk-2);
	font-size: var(--wk-step--1);
	color: var(--wk-ink-faint);
}

.wk-game-league {
	font-family: var(--wk-font-display);
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--wk-accent);
}

.wk-game-teams { display: grid; gap: var(--wk-2); }

.wk-game-team {
	display: grid;
	grid-template-columns: 30px 1fr auto;
	align-items: center;
	gap: var(--wk-3);
	min-width: 0;
}

/* Initials rather than a crest. The odds feed carries no logos, and the
   plugin's placeholder image resolved to a 404 on every card. */
.wk-game-badge {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--wk-surface-2);
	font-family: var(--wk-font-display);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .02em;
	color: var(--wk-ink-muted);
}

.wk-game-name {
	font-size: var(--wk-step-0);
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.wk-game-ml {
	font-family: var(--wk-font-display);
	font-size: var(--wk-step-0);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--wk-ink);
}

.wk-game-odds {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wk-2);
	margin: 0;
	padding-block-start: var(--wk-3);
	border-block-start: 1px solid var(--wk-line);
	text-align: center;
}

.wk-game-odds > div { min-width: 0; }

.wk-game-odds dt {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wk-ink-faint);
}

.wk-game-odds dd {
	margin: 0;
	font-family: var(--wk-font-display);
	font-size: var(--wk-step-1);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.wk-game-odds .wk-game-book {
	font-family: var(--wk-font-body);
	font-size: 10px;
	font-weight: 400;
	color: var(--wk-ink-faint);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 23. Missing-image placeholder ===========================================
   Cards for the ~9% of posts with no featured image showed an empty grey
   box, which reads as a failed load rather than an intentional state.
   The sport icon on a branded wash is recognisably deliberate, costs no
   new assets, and picks the right icon per category automatically.
   ========================================================================== */

.wk-card-media-empty {
	display: grid;
	place-items: center;
	background:
		radial-gradient(120% 120% at 70% 15%, color-mix(in srgb, var(--wk-accent) 22%, transparent) 0%, transparent 60%),
		var(--wk-surface-2);
}

.wk-card-placeholder {
	display: grid;
	place-items: center;
	color: var(--wk-accent);
	opacity: .55;
}

.wk-card-placeholder .wk-sport-icon,
.wk-card-placeholder .wk-league-initial { width: 34%; height: auto; aspect-ratio: 1; stroke-width: 1.2; }

.wk-card-h .wk-card-placeholder .wk-sport-icon,
.wk-card-c .wk-card-placeholder .wk-sport-icon { width: 44%; }

.wk-card-placeholder .wk-league-initial {
	display: grid;
	place-items: center;
	font-size: clamp(1.25rem, 5cqi, 2.5rem);
}

/* color-mix is widely supported but not universal; the flat surface
   underneath is a complete fallback on its own. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
	.wk-card-media-empty { background: var(--wk-surface-2); }
}

/* 24. Unconfigured ad creatives ===========================================
   Ad Inserter blocks that have never been filled render as
   <img class="w-full" src="#">. A "#" src resolves to the current page,
   so each one re-downloads the whole HTML document as an image and then
   draws a broken-image glyph. Hiding the wrapper is not enough — some
   are injected outside the grid — so the image itself is suppressed
   wherever it appears.

   The real fix is to configure or delete those blocks in Ad Inserter;
   this stops them damaging the page in the meantime.
   ========================================================================== */

img[src='#'],
img[src=''],
img[src$='/#'] { display: none !important; }

.code-block:has(> .col-md-12 > #cycleImg-post > a > img[src='#']),
.col-md-12:has(> #cycleImg-post > a > img[src='#']) { display: none; }

/* 25. Primary nav dropdowns ===============================================
   "Wager News" (19 children) and "Odds Compare" (8) are dropdown parents
   whose own href is "#". Rendering at depth 1 hid every child and left
   the parents linking nowhere.

   Opening is CSS-only via :hover and :focus-within, so the menu is
   keyboard-navigable with no script; theme.js only stops the "#" parents
   jumping the page when tapped.
   ========================================================================== */

.wk-nav-list > li > a { display: inline-flex; align-items: center; gap: var(--wk-1); }

/* Chevron on items that actually have a submenu. */
.wk-nav-list > li.menu-item-has-children > a::after {
	content: '';
	width: 5px;
	height: 5px;
	margin-inline-start: 2px;
	border-inline-end: 1.5px solid currentColor;
	border-block-end: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: .6;
	transition: transform .18s ease;
}

.wk-nav-list > li.menu-item-has-children:hover > a::after,
.wk-nav-list > li.menu-item-has-children:focus-within > a::after {
	transform: translateY(1px) rotate(-135deg);
}

.wk-nav-list .sub-menu {
	position: absolute;
	z-index: 70;
	inset-block-start: calc(100% + 10px);
	inset-inline-start: 50%;
	translate: -50% 0;
	display: grid;
	grid-auto-rows: min-content;
	gap: 1px;
	min-width: 210px;
	max-height: min(74vh, 520px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--wk-2);
	background: var(--wk-bg);
	border: 1px solid var(--wk-line);
	border-radius: var(--wk-radius);
	box-shadow: var(--wk-shadow-md);
	opacity: 0;
	visibility: hidden;
	transition: opacity .16s ease, visibility .16s ease;
}

/* A long list splits into columns rather than becoming a 19-item scroll. */
.wk-nav-list > li:has(.sub-menu > li:nth-child(10)) .sub-menu {
	grid-template-columns: 1fr 1fr;
	min-width: 380px;
}

.wk-nav-list > li:hover > .sub-menu,
.wk-nav-list > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

/* Bridges the 10px gap so the pointer can travel to the panel. */
.wk-nav-list > li.menu-item-has-children::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	height: 12px;
}

.wk-nav-list .sub-menu a {
	display: block;
	padding: var(--wk-2) var(--wk-3);
	border-radius: var(--wk-radius-sm);
	font-size: var(--wk-step-0);
	font-weight: 400;
	color: var(--wk-ink-muted);
	white-space: nowrap;
}

.wk-nav-list .sub-menu a:hover { background: var(--wk-surface); color: var(--wk-ink); }

.wk-nav-list .sub-menu .current-menu-item > a {
	color: var(--wk-accent);
	font-weight: 600;
}

/* The sub-menu underline rule from the top level must not leak down. */
.wk-nav-list .sub-menu .current-menu-item > a::after { content: none; }

/* Drawer: the second level is indented rather than floated. */
.wk-drawer .sub-menu { padding-inline-start: var(--wk-4); }
.wk-drawer .sub-menu a { font-size: var(--wk-step-0); color: var(--wk-ink-muted); }

.wk-nav-list > li.is-open > .sub-menu { opacity: 1; visibility: visible; }

/* Odds pages reuse the board component, but full width and multi-column. */
.wk-board-page { padding: 0; background: none; border: 0; }
.wk-board-body-page { max-height: none; overflow: visible; }

.wk-board-body-page .wk-game-list {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* The shorter moneyline price is the favourite; mark it rather than
   leaving two identical-looking rows. */
.wk-game-team.is-favourite .wk-game-name { font-weight: 600; color: var(--wk-ink); }
.wk-game-team.is-favourite .wk-game-ml { color: var(--wk-accent); }

/* Board panels: one league visible at a time, toggled by theme.js. */
.wk-board-panel[hidden] { display: none; }

/* 26. House ads ===========================================================
   Advertiser creatives filling unsold sidebar inventory. Square artwork,
   so the slot's reserved height is overridden to match rather than
   leaving a band of empty space beneath.
   ========================================================================== */

.wk-house-ad {
	display: block;
	line-height: 0;
	border-radius: var(--wk-radius);
	overflow: hidden;
	transition: opacity .18s ease;
}

.wk-house-ad:hover { opacity: .92; }
.wk-house-ad img { width: 100%; height: auto; display: block; }

/* A square creative sizes itself; the 300x600 reservation would otherwise
   leave 300px of dead space under it. */
.wk-ad-rail:has(.wk-house-ad),
.wk-ad-rail-sticky:has(.wk-house-ad) { --wk-ad-h: auto; }

.wk-ad-rail:has(.wk-house-ad) .wk-ad-inner,
.wk-ad-rail-sticky:has(.wk-house-ad) .wk-ad-inner { min-height: 0; }