/* ==========================================================================
   Slapdown Elementor — the design.

   MEASURED off https://stepfoxthemes.com/slapdown/ (the block theme, site 65)
   by reading its generated per-element CSS rather than eyeballing screenshots.
   The numbers below are ground truth; do not "tidy" them.

   Palette      base #0b0b0f · panel #131318 · panel-2 #0e0e13 · line #26262e
                ink #f4f2ee · muted #8d8d99 · accent #e11d2e · gold #c9a227
                win #2ecc71 · glass rgba(11,11,15,.82) · glass-2 rgba(19,19,24,.72)
                edge rgba(244,242,238,.09)
   Grid         shell max-width 1200, padding-inline 24 (16 on mobile)
                => content column 1152px. The Elementor kit is set to 1200 and
                the padding is added below, which reproduces both numbers.
   Type         body Roboto 15/1.6 · headings Oswald 600 uppercase, .01em
                display Anton (h1s, numerals, card names)
                h1 38 · h2 26 · h3 19
   Header       ticker band on panel-2 with a 1px bottom line; below it a glass
                bar, backdrop-filter blur(16px) saturate(160%), 13px 0 padding,
                26/16/10 gap. Brand 25/23/21px Oswald 700 .02em, 30px mark.
                Nav 13/12px 700 .08em uppercase, gap 22/13.
                CTA pill 11px/800 .09em, padding 9px 15px, radius 999.
                Search 190/150px, radius 999, 1px line, padding 2px 8px.
   Hero         band padding 62/0/66 (44 tablet, 32 mobile), radial
                75% 130% at 22% -20%, rgba(225,29,46,.26) -> transparent 62%.
                Row gap 46/30/26, columns 56% / 44%.
                Eyebrow: 28x2 accent bar + 11px/700 .18em accent, mb 18.
                H1 Anton 86/68/46, line-height .88, tracking -.5px, mb 20.
                Standfirst 17/16/15, lh 1.65, max-width 520, mb 28.
                Buttons 12px/800 .09em, padding 14px 26px, radius 999;
                solid has box-shadow 0 8px 22px rgba(225,29,46,.28).
                Stat bar: 1px top line, padding-top 24, margin-top 34;
                numbers Anton 30/26/24, labels 10px/700 .16em.
   Section head Accent bar 4x26 (22 tablet), glow 0 0 12px rgba(255,90,31,.55),
                margin-right 10. Title Anton 30/26/22, tracking .5px,
                uppercase. "More" link 11px/700 .09em muted, margin-left auto.
                Row: 1px bottom line, padding-bottom 10, margin-bottom 10.
                Standfirst 14/13px, lh 1.6, max-width 680, mb 20.
   Bands        Section rhythm: 40/0/10 (champions), 44/0/48 (events),
                44/0 (numbers, on panel-2 with 1px lines), 48/0/0 (brackets,
                news), 48/0/60 (roster).
   Page head    radial 60% 130% at 18% -30% rgba(225,29,46,.18); padding
                46/0/34 (30/0/24 mobile); H1 Anton 54/42/32, lh .95,
                tracking -.2px; standfirst 14px muted, max-width 640, mt 8.
   Panels       radius 18, 1px edge border, backdrop-filter blur(14px)
                saturate(140%), padding 22 (18 mobile).
   ========================================================================== */

/* ------------------------------------------------------------------ fonts */

@font-face {
	font-family: Anton;
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/anton/anton-400-normal.woff2) format('woff2');
}

@font-face {
	font-family: Oswald;
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/oswald/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvgURoZAaRliE.woff2) format('woff2');
}

@font-face {
	font-family: Oswald;
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(../fonts/oswald/TK3_WkUHHAIjg75cFRf3bXL8LICs1y9ogURoZAaRliE.woff2) format('woff2');
}

@font-face {
	font-family: Oswald;
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/oswald/TK3_WkUHHAIjg75cFRf3bXL8LICs1xZogURoZAaRliE.woff2) format('woff2');
}

@font-face {
	font-family: Roboto;
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/roboto/roboto-400-normal.woff2) format('woff2');
}

@font-face {
	font-family: Roboto;
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(../fonts/roboto/roboto-500-normal.woff2) format('woff2');
}

@font-face {
	font-family: Roboto;
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/roboto/roboto-700-normal.woff2) format('woff2');
}

@font-face {
	font-family: Roboto;
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url(../fonts/roboto/roboto-900-normal.woff2) format('woff2');
}

/* ----------------------------------------------------------------- tokens
 * The Slap Stats stylesheet resolves every colour through
 * var(--wp--preset--color--…) so that any theme's palette drives it. A classic
 * theme publishes no theme.json, so the presets are declared here — that is
 * what makes the plugin's widgets land on the Slapdown palette rather than
 * their dark-arena fallbacks. --wp--custom--display names the typeface the
 * plugin should use for names and numerals. */

:root {
	--wp--preset--color--base: #0b0b0f;
	--wp--preset--color--panel: #131318;
	--wp--preset--color--panel-2: #0e0e13;
	--wp--preset--color--line: #26262e;
	--wp--preset--color--ink: #f4f2ee;
	--wp--preset--color--muted: #8d8d99;
	--wp--preset--color--accent: #e11d2e;
	--wp--preset--color--gold: #c9a227;
	--wp--preset--color--win: #2ecc71;
	--wp--preset--color--glass: rgba(11, 11, 15, 0.82);
	--wp--preset--color--glass-2: rgba(19, 19, 24, 0.72);
	--wp--preset--color--edge: rgba(244, 242, 238, 0.09);
	--wp--custom--display: Anton, 'Arial Narrow', Impact, sans-serif;

	--sd-shell: 1200px;
	--sd-gutter: 24px;
	--sd-radius: 18px;
	--sd-display: Anton, 'Arial Narrow', Impact, sans-serif;
	--sd-heading: Oswald, 'Arial Narrow', sans-serif;
	--sd-body: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ------------------------------------------------------------------- base */

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

body {
	margin: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font-family: var(--sd-body);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

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

h1, h2, h3, h4, h5, h6 {
	font-family: var(--sd-heading);
	font-weight: 600;
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--ink);
	margin: 0 0 0.5em;
}

h1 { font-size: 38px; }
h2 { font-size: 26px; }
h3 { font-size: 19px; }

p { margin: 0 0 1.3em; }
p:last-child { margin-bottom: 0; }

blockquote {
	border-left: 3px solid var(--wp--preset--color--accent);
	padding-left: 18px;
	margin: 1.6em 0;
	color: var(--wp--preset--color--muted);
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100000;
	background: var(--wp--preset--color--accent);
	color: #fff;
	padding: 10px 16px;
	border-radius: 999px;
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
}

/* ------------------------------------------------------------------- grid
 * The Elementor kit sets the boxed container to 1200px. The reference shell
 * also carries 24px of inner padding, giving a 1152px content column; adding
 * that padding here reproduces both numbers, and keeps narrow viewports off
 * the screen edge exactly as the reference does.
 *
 * This sets padding only — Elementor's own (0,3,0) rule sets max-width — so
 * there is no specificity fight. */

.elementor-section.elementor-section-boxed > .elementor-container {
	padding-inline: var(--sd-gutter);
}

.sd-shell {
	max-width: var(--sd-shell);
	margin-inline: auto;
	padding-inline: var(--sd-gutter);
}

/* ----------------------------------------------------------- section head */

.sd-head { margin-bottom: 20px; }

.sd-head-row {
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-bottom: 10px;
	margin-bottom: 10px;
}

.sd-head-bar {
	width: 4px;
	min-width: 4px;
	height: 26px;
	flex-shrink: 0;
	margin-right: 10px;
	background: var(--wp--preset--color--accent);
	box-shadow: 0 0 12px rgba(255, 90, 31, 0.55);
}

.sd-head .sd-head-title {
	font-family: var(--sd-display);
	font-size: 30px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.sd-head .sd-head-more {
	margin-left: auto;
	padding-left: 16px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	transition: color 0.2s ease;
	white-space: nowrap;
}

.sd-head .sd-head-more:hover { color: var(--wp--preset--color--accent); }

.sd-head .sd-head-intro {
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
	max-width: 680px;
	margin: 0 0 20px;
}

/* Reference steps: title 30 / 26 / 22, bar 26 / 22, standfirst 14 / 13. */
@media (max-width: 1024px) {
	.sd-head .sd-head-title { font-size: 26px; }
	.sd-head-bar { height: 22px; }
}

@media (max-width: 767px) {
	.sd-head .sd-head-title { font-size: 22px; }
	.sd-head .sd-head-intro { font-size: 13px; }
	.sd-head .sd-head-more { font-size: 10px; padding-left: 10px; }
}

/* --------------------------------------------------------------- buttons */

.sd-btn,
.elementor-widget-button .elementor-button {
	display: inline-block;
	font-family: var(--sd-body);
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 14px 26px;
	border-radius: 999px;
	border: 0;
	transition: box-shadow 0.25s ease, background-color 0.25s ease, color 0.2s ease;
}

.sd-btn--solid,
.elementor-widget-button .elementor-button {
	background: var(--wp--preset--color--accent);
	color: #fff;
	box-shadow: 0 8px 22px rgba(225, 29, 46, 0.28);
}

.sd-btn--solid:hover,
.elementor-widget-button .elementor-button:hover {
	background: #f22c3d;
	color: #fff;
	box-shadow: 0 0 26px rgba(225, 29, 46, 0.5);
}

.sd-btn--ghost {
	background: rgba(255, 255, 255, 0.02);
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--edge);
	box-shadow: none;
}

.sd-btn--ghost:hover {
	color: var(--wp--preset--color--ink);
	box-shadow: inset 0 0 0 1px rgba(225, 29, 46, 0.55);
	background: rgba(225, 29, 46, 0.08);
}

/* ---------------------------------------------------------------- panels */

.sd-panel {
	background: var(--wp--preset--color--glass-2);
	border: 1px solid var(--wp--preset--color--edge);
	border-radius: var(--sd-radius);
	backdrop-filter: blur(14px) saturate(140%);
	padding: 22px;
}

@media (max-width: 767px) {
	.sd-panel { padding: 18px; }
}

/* ---------------------------------------------------- fallback chrome
 * Only rendered when Elementor has no template assigned to the location. It
 * carries the same palette and rhythm so a Pro-less site still reads as the
 * same design rather than as an unstyled skeleton. */

.sd-fallback-ticker {
	background: var(--wp--preset--color--panel-2);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.sd-fallback-bar {
	background: var(--wp--preset--color--glass);
	backdrop-filter: blur(16px) saturate(160%);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.sd-fallback-bar .sd-shell {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
	padding-block: 13px;
}

.sd-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.sd-brand-mark { width: 30px; height: 30px; }

.sd-brand-name {
	font-family: var(--sd-heading);
	font-size: 25px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.sd-nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--sd-heading);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sd-nav a { color: var(--wp--preset--color--ink); }
.sd-nav a:hover { color: var(--wp--preset--color--accent); }

.sd-head-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.sd-head-actions .sd-btn {
	font-size: 11px;
	padding: 9px 15px;
}

.sd-search input[type="search"] {
	width: 190px;
	background: var(--wp--preset--color--panel);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: 13px;
	padding: 8px 14px;
}

.sd-search input[type="search"]::placeholder { color: var(--wp--preset--color--muted); }

@media (max-width: 1024px) {
	.sd-brand-name { font-size: 23px; }
	.sd-nav ul { font-size: 12px; gap: 13px; }
	.sd-search input[type="search"] { width: 150px; }
}

@media (max-width: 767px) {
	:root { --sd-gutter: 16px; }
	.sd-brand-name { font-size: 21px; }
	.sd-search,
	.sd-head-actions .sd-btn { display: none; }
	.sd-fallback-bar .sd-shell { flex-wrap: wrap; gap: 10px; }
}

/* --------------------------------------------------------- page furniture */

.sd-page-head {
	background: radial-gradient(60% 130% at 18% -30%, rgba(225, 29, 46, 0.18) 0%, rgba(11, 11, 15, 0) 62%);
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-block: 46px 34px;
}

.sd-page-title {
	font-family: var(--sd-display);
	font-size: 54px;
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: -0.2px;
	text-transform: uppercase;
	margin: 0;
}

.sd-page-sub {
	font-size: 14px;
	color: var(--wp--preset--color--muted);
	max-width: 640px;
	margin: 8px 0 0;
}

@media (max-width: 1024px) {
	.sd-page-title { font-size: 42px; }
}

@media (max-width: 767px) {
	.sd-page-head { padding-block: 30px 24px; }
	.sd-page-title { font-size: 32px; }
}

.sd-body { padding-block: 30px 60px; }

.sd-layout {
	display: flex;
	gap: 30px;
	align-items: flex-start;
}

.sd-layout-main { flex: 1 1 auto; min-width: 0; }

.sd-layout-rail {
	flex: 0 0 34%;
	position: sticky;
	top: 24px;
}

@media (max-width: 1024px) {
	.sd-layout { flex-wrap: wrap; gap: 24px; }
	.sd-layout-rail { flex-basis: 100%; position: static; }
}

.sd-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
}

.sd-card {
	background: var(--wp--preset--color--glass-2);
	border: 1px solid var(--wp--preset--color--edge);
	border-radius: var(--sd-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.sd-card-media {
	aspect-ratio: 16 / 10;
	background: var(--wp--preset--color--panel-2);
	overflow: hidden;
}

.sd-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sd-card-body { padding: 16px 18px 20px; }

.sd-card-cat {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	display: block;
	margin-bottom: 8px;
}

.sd-card-title {
	font-family: var(--sd-heading);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
	text-transform: none;
	letter-spacing: 0;
	margin: 0 0 8px;
}

.sd-card-excerpt {
	font-size: 13px;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.sd-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	font-size: 12px;
	color: var(--wp--preset--color--muted);
	margin: 0 0 22px;
}

.sd-article { max-width: 820px; margin-inline: auto; }

.sd-article-content { font-size: 16px; line-height: 1.75; }

.sd-article-content a { color: var(--wp--preset--color--accent); text-decoration: underline; }

.sd-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 34px;
}

.sd-pagination .page-numbers {
	display: inline-block;
	min-width: 38px;
	text-align: center;
	padding: 9px 12px;
	border: 1px solid var(--wp--preset--color--edge);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	color: var(--wp--preset--color--muted);
}

.sd-pagination .page-numbers.current,
.sd-pagination .page-numbers:hover {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: #fff;
}

/* ------------------------------------------------------------ footer */

.sd-fallback-footer {
	background: var(--wp--preset--color--panel-2);
	border-top: 1px solid var(--wp--preset--color--line);
	padding-block: 46px 26px;
	margin-top: 60px;
}

.sd-footer-cols {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-bottom: 30px;
}

.sd-footer-brand { flex: 0 0 32%; }

.sd-footer-brand p {
	font-size: 13px;
	color: var(--wp--preset--color--muted);
	max-width: 330px;
}

.sd-footer-col { flex: 0 0 22%; }

.sd-footer-col h2 {
	font-family: var(--sd-heading);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin: 0 0 12px;
}

.sd-footer-col ul { list-style: none; margin: 0; padding: 0; }

.sd-footer-col li { margin-bottom: 8px; }

.sd-footer-col a { font-size: 13px; color: var(--wp--preset--color--muted); }
.sd-footer-col a:hover { color: var(--wp--preset--color--ink); }

.sd-footer-legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 14px;
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: 20px;
	font-size: 12px;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 1024px) {
	.sd-footer-brand { flex-basis: 100%; }
	.sd-footer-col { flex: 0 0 31%; }
}

@media (max-width: 767px) {
	.sd-footer-col { flex: 0 0 47%; }
}

/* -------------------------------------------------- Elementor + plugin fit
 * Slap Stats widgets carry their own design. What the theme owes them is the
 * display typeface, the heading treatment Elementor's kit would otherwise
 * override, and a guarantee that nothing inside a widget can widen the grid. */

.elementor-widget-container > [class^="sfslap-"] { max-width: 100%; }

.elementor-heading-title {
	font-family: var(--sd-heading);
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

/* Display-face headings: opt in with the class rather than styling every
 * heading, because the nav and card titles are Oswald, not Anton. */
.elementor-widget.sd-display .elementor-heading-title,
.elementor-widget-heading.elementor-widget.sd-display .elementor-heading-title {
	font-family: var(--sd-display);
	font-weight: 400;
	letter-spacing: -0.2px;
}

/* Anton has no bold cut; asking for one triggers a synthetic smear. */
.elementor-widget.sd-display .elementor-heading-title strong,
.sd-head .sd-head-title strong { font-weight: 400; }

.sd-on-dark { color: var(--wp--preset--color--ink); }

.sd-muted { color: var(--wp--preset--color--muted); }

.elementor-widget.sd-eyebrow .elementor-heading-title {
	font-family: var(--sd-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

/* The hero's radial wash and the arena plane both need a stacking context on
 * the section, and the content above it. */
.sd-hero { position: relative; overflow: hidden; }
.sd-hero > .elementor-container { position: relative; z-index: 1; }

.sd-band-line {
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.sd-rule-top {
	border-top: 1px solid var(--wp--preset--color--line);
}

/* Elementor renders comment/search forms unstyled; these are the only two
 * core forms this theme actually shows. */
.sd-comments {
	max-width: 820px;
	margin: 48px auto 0;
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: 30px;
}

.sd-comments input[type="text"],
.sd-comments input[type="email"],
.sd-comments input[type="url"],
.sd-comments textarea {
	width: 100%;
	background: var(--wp--preset--color--panel);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: 14px;
	padding: 10px 14px;
	margin-bottom: 12px;
}

.sd-comments .submit {
	background: var(--wp--preset--color--accent);
	color: #fff;
	border: 0;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 12px 24px;
	cursor: pointer;
}

.sd-comment-list { list-style: none; margin: 0 0 30px; padding: 0; }

.sd-comment-list li { border-bottom: 1px solid var(--wp--preset--color--line); padding: 16px 0; }

/* ==========================================================================
   Theme Builder hooks.

   Classes referenced by tools/build-templates.php. Anything Elementor's own
   controls cannot express — a three-stop radial, a backdrop filter, a
   flex-grow column — lives here rather than being faked in the data.
   ========================================================================== */

/* ------------------------------------------------------------ header bar */

.sd-ticker-sec {
	background: var(--wp--preset--color--panel-2);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* The ticker sets its own `padding-inline: max(16px, calc((100% - 1152px)/2))`
 * so it runs edge to edge while its first item lands on the grid. That only
 * works in a full-width section, which is why this band is not boxed. */
.sd-ticker-sec .elementor-widget-container { line-height: 0; }

.sd-topbar {
	background: var(--wp--preset--color--glass);
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* Fixed percentage columns cannot reproduce a nav row that grows: the menu
 * runs under the actions. The brand and actions size to content, the nav
 * takes the rest. */
.sd-topbar > .elementor-container { align-items: center; }

.sd-col-auto {
	flex: 0 0 auto;
	width: auto !important;
	max-width: none;
}

.sd-col-grow {
	flex: 1 1 auto;
	min-width: 0;
	width: auto !important;
	max-width: none;
}

.elementor-widget.sd-brand-w .elementor-heading-title {
	font-family: var(--sd-heading);
	font-size: 25px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}

.sd-nav-w .elementor-nav-menu .elementor-item {
	font-family: var(--sd-heading);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0;
}

/* `menu_space_between` and a CSS gap on the same <ul> compound: keep one. */
.sd-nav-w .elementor-nav-menu--main .elementor-nav-menu { gap: 22px; }

/* Elementor's search form sets the border colour but leaves its width at 0,
 * so the pill outline has to come from here. */
.sd-search-w .elementor-search-form__container {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--panel);
	overflow: hidden;
}

.sd-search-w .elementor-search-form__input {
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-size: 13px;
	padding-inline: 14px;
}

.sd-search-w .elementor-search-form__input::placeholder { color: var(--wp--preset--color--muted); }

@media (max-width: 1024px) {
	.elementor-widget.sd-brand-w .elementor-heading-title { font-size: 23px; }
	.sd-nav-w .elementor-nav-menu--main .elementor-nav-menu { gap: 13px; }
	.sd-nav-w .elementor-nav-menu .elementor-item { font-size: 12px; }
}

@media (max-width: 767px) {
	.elementor-widget.sd-brand-w .elementor-heading-title { font-size: 21px; }
	.sd-search-w { display: none; }
}

/* ------------------------------------------------------------------ hero */

/* A three-stop radial with its own size and position; Elementor's gradient
 * controls only express two stops on a linear or a centred radial. */
.sd-hero-sec {
	background: radial-gradient(75% 130% at 22% -20%, rgba(225, 29, 46, 0.26) 0%, rgba(11, 11, 15, 0) 62%);
	border-bottom: 1px solid var(--wp--preset--color--line);
	position: relative;
	overflow: hidden;
}

/* The arena backdrop is absolute inside the section, so the section is the
 * positioning context and the content columns are lifted above it. Making the
 * *container* relative instead would clip the backdrop to the 1200px grid. */
.sd-hero-sec > .elementor-container > .elementor-column:not(.sd-arena-w) {
	position: relative;
	z-index: 1;
}

.elementor-widget.sd-hero-title .elementor-heading-title {
	font-family: var(--sd-display);
	font-size: 86px;
	font-weight: 400;
	line-height: 0.88;
	letter-spacing: -0.5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}

.sd-hero-sub {
	font-size: 17px;
	line-height: 1.65;
	color: var(--wp--preset--color--muted);
	max-width: 520px;
}

@media (max-width: 1024px) {
	.elementor-widget.sd-hero-title .elementor-heading-title { font-size: 68px; }
	.sd-hero-sub { font-size: 16px; }
}

@media (max-width: 767px) {
	.elementor-widget.sd-hero-title .elementor-heading-title { font-size: 46px; }
	.sd-hero-sub { font-size: 15px; }
}

/* ------------------------------------------------------------- page head */

.sd-page-head-sec {
	background: radial-gradient(60% 130% at 18% -30%, rgba(225, 29, 46, 0.18) 0%, rgba(11, 11, 15, 0) 62%);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.elementor-widget.sd-page-title-w .elementor-heading-title {
	font-family: var(--sd-display);
	font-size: 54px;
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: -0.2px;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}

.sd-page-sub-w { max-width: 640px; }

@media (max-width: 1024px) {
	.elementor-widget.sd-page-title-w .elementor-heading-title { font-size: 42px; }
}

@media (max-width: 767px) {
	.elementor-widget.sd-page-title-w .elementor-heading-title { font-size: 32px; }
}

/* ------------------------------------------------------------------ misc */

/* The sticky rail needs a start-aligned column or it stretches to the row
 * height and never sticks. */
.sd-rail-col { align-self: flex-start; }

.sd-panel-w > .elementor-widget-container {
	background: var(--wp--preset--color--glass-2);
	border: 1px solid var(--wp--preset--color--edge);
	border-radius: var(--sd-radius);
	backdrop-filter: blur(14px) saturate(140%);
	padding: 22px;
}

.sd-numbers-sec {
	background: var(--wp--preset--color--panel-2);
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* Elementor resets `.elementor img { border-radius: 0; border-style: none }`
 * at exactly this specificity and loads after the theme sheet, so the ring
 * needs a second class to win. */
.elementor-widget.sd-portrait-w img {
	width: 200px;
	height: 200px;
	object-fit: cover;
	border-radius: 50%;
	border: 3px solid var(--wp--preset--color--accent);
	box-shadow: 0 0 40px rgba(225, 29, 46, 0.28);
}

@media (max-width: 1024px) {
	.elementor-widget.sd-portrait-w img { width: 170px; height: 170px; }
}

@media (max-width: 767px) {
	.elementor-widget.sd-portrait-w img { width: 130px; height: 130px; }
}

.sd-terms-w a {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.sd-footer-sec {
	background: var(--wp--preset--color--panel-2);
	border-top: 1px solid var(--wp--preset--color--line);
}

.elementor-widget.sd-footer-heading .elementor-heading-title {
	font-family: var(--sd-heading);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.sd-footer-links .elementor-icon-list-text {
	font-size: 13px;
	color: var(--wp--preset--color--muted);
}

.sd-footer-links .elementor-icon-list-item:hover .elementor-icon-list-text {
	color: var(--wp--preset--color--ink);
}

.sd-legal { font-size: 12px; color: var(--wp--preset--color--muted); }

/* Post cards rendered by Elementor's Posts / Archive Posts widgets, restyled
 * to the Slapdown card. */
.sd-posts .elementor-post {
	background: var(--wp--preset--color--glass-2);
	border: 1px solid var(--wp--preset--color--edge);
	border-radius: var(--sd-radius);
	overflow: hidden;
}

.sd-posts .elementor-post__text { padding: 4px 18px 18px; }

/* The Posts and Archive Posts widgets bind their own title, meta and excerpt
 * styles to the KIT globals — Primary typography (Anton) and Secondary colour —
 * in a rule that is two classes deep and loads after the theme sheet. A card
 * title is Oswald sentence case, not a display heading, so these need a third
 * class to win. `.elementor-widget` is on the same element as `.sd-posts`. */
.sd-posts.elementor-widget .elementor-post__title,
.sd-posts.elementor-widget .elementor-post__title a {
	font-family: var(--sd-heading);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
	text-transform: none;
	letter-spacing: 0;
	color: var(--wp--preset--color--ink);
}

.sd-posts.elementor-widget .elementor-post__title a:hover { color: var(--wp--preset--color--accent); }

.sd-posts.elementor-widget .elementor-post__excerpt p {
	font-size: 13px;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

.sd-posts.elementor-widget .elementor-post__meta-data {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.sd-posts .elementor-post__thumbnail__link { margin-bottom: 14px; }

.sd-posts .elementor-pagination .page-numbers {
	border: 1px solid var(--wp--preset--color--edge);
	border-radius: 999px;
	padding: 8px 14px;
	font-size: 12px;
	font-weight: 700;
	color: var(--wp--preset--color--muted);
}

.sd-posts .elementor-pagination .page-numbers.current {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: #fff;
}

/* Post body: the only place long-form prose appears. */
.sd-prose { font-size: 16px; line-height: 1.75; }
.sd-prose a { color: var(--wp--preset--color--accent); text-decoration: underline; }

/* ------------------------------------------------------------ front page */

/* The eyebrow's 28x2 accent bar. A divider widget beside a heading would need
 * an inner section per eyebrow; a pseudo-element keeps it one widget. */
.elementor-widget.sd-eyebrow .elementor-heading-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--sd-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.elementor-widget.sd-eyebrow .elementor-heading-title::before {
	content: "";
	flex: 0 0 28px;
	height: 2px;
	background: var(--wp--preset--color--accent);
	box-shadow: 0 0 12px rgba(225, 29, 46, 0.7);
}

/* The hero's live counters sit under a hairline. */
.sd-hero-counters {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: 24px;
}

/* The fantasy call to action in the events rail. */
.sd-play-panel > .elementor-container,
.sd-play-panel {
	background: linear-gradient(150deg, rgba(225, 29, 46, 0.20) 0%, var(--wp--preset--color--glass-2) 60%);
	border: 1px solid var(--wp--preset--color--edge);
	border-radius: var(--sd-radius);
	backdrop-filter: blur(14px) saturate(140%);
	padding: 22px;
}

@media (max-width: 767px) {
	.sd-play-panel { padding: 18px; }
}

.elementor-widget.sd-play-label .elementor-heading-title {
	font-family: var(--sd-body);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.elementor-widget.sd-play-title .elementor-heading-title {
	font-family: var(--sd-display);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}

/* The arena backdrop is absolutely positioned behind the hero's content. */
.sd-arena-w {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

/* ================================================================ overrides
 * Elementor's frontend stylesheet loads after the theme's and its column rules
 * are two classes deep, so a single-class helper silently loses. These use a
 * child selector to outrank it rather than reaching for !important.
 * ========================================================================== */

.elementor-section > .elementor-container > .elementor-column.sd-col-auto {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
}

.elementor-section > .elementor-container > .elementor-column.sd-col-grow {
	flex: 1 1 auto;
	width: auto;
	max-width: none;
	min-width: 0;
}

/* The brand must never wrap to a second line, whatever the site is called. */
.elementor-widget.sd-brand-w .elementor-heading-title { white-space: nowrap; }

/* The arena backdrop is decorative. As a column it would take a share of the
 * hero row and push the headline off the grid, so it is lifted out of flow —
 * and out of the container's padding, since it paints the whole band. */
.elementor-section > .elementor-container > .elementor-column.sd-arena-w {
	position: absolute;
	inset: 0;
	width: auto;
	max-width: none;
	z-index: 0;
	pointer-events: none;
}

.sd-arena-w .elementor-widget-wrap { padding: 0; }

/* The Elementor kit's button globals are deliberately unset (see
 * tools/build-kit.php) because they also target raw <button> elements. Should
 * a kit ever set them again, this keeps the plugin's own controls — filter
 * pills, sort pills, pick buttons, the scheme toggle — looking like controls
 * rather than calls to action. */
[class^="sfslap-"] button,
[class*=" sfslap-"] button,
button[class^="sfslap-"] {
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
}

button.sfslap-mode {
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--glass-2);
	color: var(--wp--preset--color--muted);
}

/* Elementor pads every populated column by 10px. The reference sits flush on
 * the 1152px column and controls all its spacing explicitly (section padding,
 * section-head margins, spacers), so the default padding only pushes content
 * off the grid. */
.elementor-widget-wrap.elementor-element-populated { padding: 0; }

/* The header bar's fixed-size controls, so the nav gets the remaining width
 * instead of wrapping to a second line. `.elementor-widget-wrap >
 * .elementor-element { width: 100% }` is two classes deep and loads after the
 * theme sheet, so these need a third class to win. */
.sd-topbar .elementor-widget-wrap > .sd-search-w { width: 190px; }
.sd-topbar .elementor-widget-wrap > .elementor-widget-slap-theme-toggle { width: 36px; }

.sd-topbar .elementor-widget-button .elementor-button {
	font-size: 11px;
	padding: 9px 15px;
	white-space: nowrap;
}

@media (max-width: 1024px) {
	.sd-topbar .elementor-widget-wrap > .sd-search-w { width: 150px; }
}

/* Real flex gaps. Sections are generated with `gap => no` (see sd_apply_gap in
 * tools/lib.php) so Elementor adds no padding, and the space between columns
 * comes from here — which keeps every column's measured width exact. */
.sd-gap-10 > .elementor-container { column-gap: 10px; }
.sd-gap-20 > .elementor-container { column-gap: 20px; }
.sd-gap-26 > .elementor-container { column-gap: 26px; }
.sd-gap-30 > .elementor-container { column-gap: 30px; }
.sd-gap-46 > .elementor-container { column-gap: 46px; }

@media (max-width: 1024px) {
	.sd-gap-30 > .elementor-container,
	.sd-gap-46 > .elementor-container { column-gap: 24px; row-gap: 24px; }
}

@media (max-width: 767px) {
	.sd-gap-20 > .elementor-container,
	.sd-gap-26 > .elementor-container,
	.sd-gap-30 > .elementor-container,
	.sd-gap-46 > .elementor-container { column-gap: 22px; row-gap: 22px; }
}

/* The stats rail. Elementor Pro's sticky feature attaches to widgets rather
 * than columns here, so the rail sticks from CSS — which also needs
 * `align-self: flex-start`, or the column stretches to the row height and has
 * nothing to stick within. */
.elementor-section > .elementor-container > .elementor-column.sd-rail-col {
	align-self: flex-start;
	position: sticky;
	top: 24px;
}

@media (max-width: 1024px) {
	.elementor-section > .elementor-container > .elementor-column.sd-rail-col {
		position: static;
	}
}

/* Division / category line above a title, and the byline under it. */
.elementor-widget.sd-terms-w .elementor-heading-title,
.elementor-widget.elementor-widget.sd-terms-w .elementor-heading-title a {
	font-family: var(--sd-body);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.sd-terms-w { margin-bottom: 8px; }
.elementor-widget.elementor-widget.sd-terms-w .elementor-heading-title a:hover { color: var(--wp--preset--color--ink); }

.elementor-widget.sd-byline .elementor-heading-title {
	font-family: var(--sd-body);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--muted);
}

/* The header's auto-width columns keep their intrinsic size at every
 * breakpoint (that is the point of them), so mobile needs an explicit wrap
 * rule or the row would rather overflow than break. Brand, toggle and CTA
 * share the first line; the nav takes the second. */
@media (max-width: 767px) {
	.sd-topbar > .elementor-container {
		flex-wrap: wrap;
		row-gap: 10px;
	}

	.elementor-section > .elementor-container > .elementor-column.sd-col-grow {
		flex-basis: 100%;
		order: 2;
	}

	.sd-topbar .elementor-nav-menu--main .elementor-nav-menu {
		flex-wrap: wrap;
		justify-content: flex-start;
	}
}

/* ==========================================================================
   Polish pass — the Elementor-side cards and the nav, brought in line with the
   plugin's own components.
   ========================================================================== */

/* Post cards. The card is an 18px-radius box with a 1px border, so its media
 * has to clip to 17px on the top corners or the image squares off the
 * corners — the same `calc(var(--sfslap-r) - 1px)` the plugin uses on its own
 * card media. Elementor's thumbnail wrapper is already `overflow: hidden`, so
 * the radius alone does it. */
.sd-posts.elementor-widget .elementor-post__thumbnail {
	border-radius: 17px 17px 0 0;
	background: var(--wp--preset--color--panel-2);
}

.sd-posts.elementor-widget .elementor-post__thumbnail__link {
	margin-bottom: 14px;
	border-radius: 17px 17px 0 0;
	overflow: hidden;
}

/* Card hover matches the plugin's cards exactly: a 3px lift, the border warmed
 * toward the accent, and the image easing in behind it. Without this the
 * editorial cards are the only static things on a page where everything else
 * responds. */
.sd-posts.elementor-widget .elementor-post {
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.sd-posts.elementor-widget .elementor-post:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 45%, var(--wp--preset--color--line));
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5);
}

.sd-posts.elementor-widget .elementor-post__thumbnail img {
	transition: transform 0.35s ease;
}

.sd-posts.elementor-widget .elementor-post:hover .elementor-post__thumbnail img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.sd-posts.elementor-widget .elementor-post,
	.sd-posts.elementor-widget .elementor-post:hover,
	.sd-posts.elementor-widget .elementor-post__thumbnail img,
	.sd-posts.elementor-widget .elementor-post:hover .elementor-post__thumbnail img {
		transform: none;
		transition: none;
	}
}

/* "Read More" reads as a link, not a second call to action. */
.sd-posts.elementor-widget .elementor-post__read-more {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	transition: color 0.2s ease;
}

.sd-posts.elementor-widget .elementor-post:hover .elementor-post__read-more {
	color: var(--wp--preset--color--accent);
}

/* ------------------------------------------------------------- nav hover */

/* A bare colour swap gives no affordance on a dark bar. The item gets an
 * accent rule that grows from the left, and the active item keeps it. */
.sd-nav-w .elementor-nav-menu .elementor-item {
	position: relative;
	transition: color 0.2s ease;
}

.sd-nav-w .elementor-nav-menu .elementor-item::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	background: var(--wp--preset--color--accent);
	box-shadow: 0 0 12px rgba(225, 29, 46, 0.7);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.25s ease;
}

.sd-nav-w .elementor-nav-menu .elementor-item:hover::after,
.sd-nav-w .elementor-nav-menu .elementor-item:focus-visible::after,
.sd-nav-w .elementor-nav-menu .elementor-item.elementor-item-active::after {
	transform: scaleX(1);
}

/* Elementor ships several hover "pointer" effects and adds its own underline
 * markup for them; the widget is set to `pointer: none` so only the rule above
 * draws. */
.sd-nav-w .elementor-nav-menu .elementor-item:hover {
	color: var(--wp--preset--color--accent);
}

@media (prefers-reduced-motion: reduce) {
	.sd-nav-w .elementor-nav-menu .elementor-item::after { transition: none; }
}

/* Footer links get the same treatment at a smaller scale. */
.sd-footer-links .elementor-icon-list-item a {
	transition: color 0.2s ease, transform 0.2s ease;
	display: inline-flex;
}

.sd-footer-links .elementor-icon-list-item a:hover {
	color: var(--wp--preset--color--ink);
	transform: translateX(2px);
}

/* ------------------------------------------------------- radius consistency
 * The plugin rounds its panels to 18px and the next-event panel to 24px. The
 * theme's own surfaces follow, so nothing on a page mixes radii. */
.sd-search-w .elementor-search-form__container,
.sd-topbar .elementor-widget-button .elementor-button { border-radius: 999px; }

.sd-panel-w > .elementor-widget-container,
.sd-play-panel { border-radius: var(--sd-radius); }

/* Elementor's button widget keeps its own focus ring; make it the accent. */
.elementor-widget-button .elementor-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}