/* =============================================================================
   SWS DESIGN ENHANCEMENTS — feature-flagged sports-broadcast styling
   =============================================================================
   CONTRACT: every rule is scoped to a body class set by PHP:
       body.sws-enh--<feature-key> …
   Toggle features in Appearance → Customize → Design Enhancements, or via the
   sws_design_enhancements option (see includes/sws-design-enhancements.php).
   Remove a body class → that feature fully disappears. No rule may exist
   outside a feature scope.

   PALETTE (unchanged, from theme.json):
       orange #e87722 · light-orange #f59e4c · maroon #5a1a2a
       dark #1a1a2e · darker #111122 · gold #c9a84c
   ========================================================================== */


/* =============================================================================
   FEATURE: skew-headings — Broadcast Section Titles
   Slanted orange chip before section titles; angled two-tone speed bar
   replaces the flat underline.
   ========================================================================== */

body.sws-enh--skew-headings .sws-section-title::before {
	content: '';
	display: inline-block;
	width: 0.42em;
	height: 0.78em;
	margin-right: 0.45em;
	background: #e87722;
	transform: skewX(-18deg) translateY(0.06em);
	box-shadow: 0.62em 0 0 -0.28em #5a1a2a;
}

body.sws-enh--skew-headings .sws-section-title::after {
	width: 92px;
	height: 5px;
	transform: skewX(-30deg);
	background: linear-gradient(90deg, #e87722 0%, #e87722 62%, #5a1a2a 62%, #5a1a2a 100%);
}

/* Light (on-dark) titles: maroon reads poorly on dark — swap tail to light-orange */
body.sws-enh--skew-headings .sws-title-light::after {
	background: linear-gradient(90deg, #e87722 0%, #e87722 62%, #f59e4c 62%, #f59e4c 100%);
}

body.sws-enh--skew-headings .sws-title-light::before {
	box-shadow: 0.62em 0 0 -0.28em #f59e4c;
}


/* =============================================================================
   FEATURE: notch-buttons — Athletic Notched Buttons
   Cut top-right + bottom-left corners on primary CTAs; shine sweep on hover.
   Wrapper divs carry the visible background (wp-block-button pattern), so the
   clip-path goes on the wrapper and clips everything inside it.
   ========================================================================== */

body.sws-enh--notch-buttons .sws-btn-hero,
body.sws-enh--notch-buttons .sws-sport-cta,
body.sws-enh--notch-buttons .sws-join-cta .wp-block-button,
body.sws-enh--notch-buttons .sws-header__register-btn {
	clip-path: polygon(
		0 0,
		calc(100% - 12px) 0,
		100% 12px,
		100% 100%,
		12px 100%,
		0 calc(100% - 12px)
	);
	border-radius: 0;
	position: relative;
	overflow: hidden;
}

/* Inner links: kill the round corners that would peek past the notch */
body.sws-enh--notch-buttons .sws-btn-hero .wp-block-button__link,
body.sws-enh--notch-buttons .sws-sport-cta .wp-block-button__link,
body.sws-enh--notch-buttons .sws-join-cta .wp-block-button .wp-block-button__link {
	border-radius: 0;
}

/* Shine sweep — a skewed light band that crosses the button on hover */
body.sws-enh--notch-buttons .sws-btn-hero::before,
body.sws-enh--notch-buttons .sws-sport-cta::before,
body.sws-enh--notch-buttons .sws-join-cta .wp-block-button::before,
body.sws-enh--notch-buttons .sws-header__register-btn::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: -75%;
	width: 50%;
	background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
	transform: skewX(-20deg);
	transition: left 0.55s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
	z-index: 1;
}

body.sws-enh--notch-buttons .sws-btn-hero:hover::before,
body.sws-enh--notch-buttons .sws-sport-cta:hover::before,
body.sws-enh--notch-buttons .sws-join-cta .wp-block-button:hover::before,
body.sws-enh--notch-buttons .sws-header__register-btn:hover::before {
	left: 125%;
}


/* =============================================================================
   FEATURE: card-energy — Card Hover Energy
   Orange edge-line that sweeps in along the bottom of cards on hover, plus a
   small saturation/contrast lift on card imagery. Adds NO transforms, so it
   cannot fight the existing hover lifts in custom.css.
   ========================================================================== */

body.sws-enh--card-energy .sws-video-card,
body.sws-enh--card-energy .sws-featured-large,
body.sws-enh--card-energy .sws-featured-small,
body.sws-enh--card-energy .sws-gc-card {
	position: relative;
}

body.sws-enh--card-energy .sws-video-card::after,
body.sws-enh--card-energy .sws-featured-large::after,
body.sws-enh--card-energy .sws-featured-small::after,
body.sws-enh--card-energy .sws-gc-card::after,
body.sws-enh--card-energy .sws-sport-showcase-card::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	height: 4px;
	width: 100%;
	background: linear-gradient(90deg, #e87722 0%, #f59e4c 100%);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 5;
	pointer-events: none;
}

body.sws-enh--card-energy .sws-video-card:hover::after,
body.sws-enh--card-energy .sws-featured-large:hover::after,
body.sws-enh--card-energy .sws-featured-small:hover::after,
body.sws-enh--card-energy .sws-gc-card:hover::after,
body.sws-enh--card-energy .sws-sport-showcase-card:hover::before {
	transform: scaleX(1);
}

/* Photo pop on hover */
body.sws-enh--card-energy .sws-sport-showcase-card:hover .wp-block-cover__image-background,
body.sws-enh--card-energy .sws-featured-large:hover .sws-featured-img,
body.sws-enh--card-energy .sws-featured-small:hover .sws-featured-img,
body.sws-enh--card-energy .sws-video-card:hover .sws-yt-lite-thumb {
	filter: saturate(1.18) contrast(1.05);
}


/* =============================================================================
   FEATURE: stat-jerseys — Jersey-Style Stat Numbers
   Italic-skewed counters with a skewed speed-line under each number.
   currentColor keeps the OL-driven per-sport colors intact.
   ========================================================================== */

body.sws-enh--stat-jerseys .sws-stat-number {
	display: inline-block;
	transform: skewX(-8deg);
	letter-spacing: 0.02em;
}

body.sws-enh--stat-jerseys .sws-stat-item {
	position: relative;
}

body.sws-enh--stat-jerseys .sws-stat-number::after {
	content: '';
	display: block;
	height: 4px;
	width: 56%;
	margin: 6px auto 0;
	background:
		linear-gradient(90deg, currentColor 0 62%, transparent 62% 70%, currentColor 70% 88%, transparent 88% 92%, currentColor 92% 100%);
	opacity: 0.55;
	transform: skewX(-30deg);
}


/* =============================================================================
   FEATURE: court-texture — Court Line Texture
   Very subtle diagonal hairlines across the dark stats + video sections.
   Stats section uses ::before (free); video section ::before is taken by the
   existing radial glow, so it uses ::after.
   ========================================================================== */

body.sws-enh--court-texture .sws-stats-section {
	position: relative;
	overflow: hidden;
}

body.sws-enh--court-texture .sws-stats-section::before,
body.sws-enh--court-texture .sws-video-section::after {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		115deg,
		rgba(255, 255, 255, 0.028) 0px,
		rgba(255, 255, 255, 0.028) 2px,
		transparent 2px,
		transparent 110px
	);
	pointer-events: none;
	z-index: 0;
}

/* Keep content above the texture layers */
body.sws-enh--court-texture .sws-stats-inner,
body.sws-enh--court-texture .sws-video-inner {
	position: relative;
	z-index: 1;
}


/* =============================================================================
   FEATURE: diagonal-edges — Racing-Stripe Section Accents
   Triple angled stripes (orange / light-orange / maroon) running along the
   top-left edge of the stats section and the join CTA.
   ========================================================================== */

body.sws-enh--diagonal-edges .sws-stats-section,
body.sws-enh--diagonal-edges .sws-join-cta {
	position: relative;
}

body.sws-enh--diagonal-edges .sws-stats-section::after,
body.sws-enh--diagonal-edges .sws-join-cta::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: min(46%, 560px);
	height: 7px;
	background:
		linear-gradient(90deg, #e87722       0 52%, transparent 52%) 0 0 / 100% 100% no-repeat,
		linear-gradient(90deg, transparent   0 56%, #f59e4c 56% 74%, transparent 74%) 0 0 / 100% 100% no-repeat,
		linear-gradient(90deg, transparent   0 78%, #5a1a2a 78% 90%, transparent 90%) 0 0 / 100% 100% no-repeat;
	clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
	z-index: 4;
	pointer-events: none;
}


/* =============================================================================
   FEATURE: ticker-pulse — Live Ticker Pulse
   Pulsing white dot inside the orange SCORES chip (label is display:flex, so
   the dot slots in before the text) + skewed level badges along the track.
   ========================================================================== */

body.sws-enh--ticker-pulse .sws-ticker-label::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #ffffff;
	margin-right: 8px;
	flex-shrink: 0;
	animation: swsEnhPulse 1.6s ease-in-out infinite;
}

@keyframes swsEnhPulse {
	0%, 100% { opacity: 1;    box-shadow: 0 0 0 0   rgba(255, 255, 255, 0.55); }
	50%      { opacity: 0.55; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0);    }
}

body.sws-enh--ticker-pulse .sws-ticker-badge {
	transform: skewX(-10deg);
}


/* =============================================================================
   FEATURE: hero-energy — Hero Energy Accents
   The orange hero label chip gets a notched corner + faint diagonal stripes;
   an angled orange swoosh appears under the hero headline.
   ========================================================================== */

body.sws-enh--hero-energy .sws-hero-label {
	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
	background-image: repeating-linear-gradient(
		-55deg,
		rgba(255, 255, 255, 0.10) 0px,
		rgba(255, 255, 255, 0.10) 2px,
		transparent 2px,
		transparent 14px
	);
}

body.sws-enh--hero-energy .sws-hero-headline::after {
	content: '';
	display: block;
	width: 110px;
	height: 6px;
	margin-top: 0.35em;
	background: linear-gradient(90deg, #e87722 0%, #e87722 70%, #f59e4c 70%, #f59e4c 100%);
	transform: skewX(-30deg);
	transform-origin: left bottom;
}


/* =============================================================================
   Mobile guards (≤768px) — slimmer decorations, nothing may overflow
   ========================================================================== */

@media (max-width: 768px) {
	body.sws-enh--skew-headings .sws-section-title::after {
		width: 64px;
		height: 4px;
	}
	body.sws-enh--diagonal-edges .sws-stats-section::after,
	body.sws-enh--diagonal-edges .sws-join-cta::before {
		width: 70%;
		height: 5px;
	}
	body.sws-enh--hero-energy .sws-hero-headline::after {
		width: 80px;
		height: 5px;
	}
}


/* =============================================================================
   Reduced motion — kill all animation/transition-driven movement
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	body.sws-enh--ticker-pulse .sws-ticker-label::before {
		animation: none;
	}
	body.sws-enh--notch-buttons .sws-btn-hero::before,
	body.sws-enh--notch-buttons .sws-sport-cta::before,
	body.sws-enh--notch-buttons .sws-join-cta .wp-block-button::before,
	body.sws-enh--notch-buttons .sws-header__register-btn::before {
		display: none;
	}
	body.sws-enh--card-energy .sws-video-card::after,
	body.sws-enh--card-energy .sws-featured-large::after,
	body.sws-enh--card-energy .sws-featured-small::after,
	body.sws-enh--card-energy .sws-gc-card::after,
	body.sws-enh--card-energy .sws-sport-showcase-card::before {
		transition: none;
	}
}