/*
Theme Name: Stafford Bulldogs Child
Theme URI: https://www.bulldogsyouthfootball.com/
Description: Custom child theme for Stafford Bulldogs Youth Football & Cheer.
Author: Stafford Bulldogs Youth Football & Cheer
Template: hello-elementor
Version: 0.2.0
Text Domain: stafford-bulldogs
*/

/* ==========================================================================
   1. Design Tokens
   ========================================================================== */

:root {
	/* Brand colors */
	--sb-color-blue: #00299d;
	--sb-color-blue-dark: #001f78;
	--sb-color-electric-blue: #2f66ff;
	--sb-color-navy: #071a42;
	--sb-color-deep-background: #020a1a;
	--sb-color-card-navy: #0d1d3a;
	--sb-color-border-blue: #17396a;
	--sb-color-white: #ffffff;
	--sb-color-ice: #f4f7fb;
	--sb-color-surface: #edf2f8;
	--sb-color-dark-text: #172033;
	--sb-color-steel-text: #667085;
	--sb-color-light-text: #cbd5e1;
	--sb-color-border: #dbe2ec;
	--sb-color-alert-red: #d72d36;
	--sb-color-alert-red-dark: #a91f27;
	--sb-color-success-green: #2e7d4f;
	--sb-color-warning: #f59e0b;

	/* Typography */
	--sb-font-display:
		var(--e-global-typography-primary-font-family, "Barlow Condensed"),
		"Arial Narrow",
		Arial,
		sans-serif;

	--sb-font-body:
		var(--e-global-typography-text-font-family, "Inter"),
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;

	--sb-font-size-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--sb-font-size-small: clamp(0.875rem, 0.84rem + 0.15vw, 1rem);
	--sb-font-size-label: 0.8125rem;

	--sb-font-size-h1: clamp(3rem, 1.8rem + 5vw, 6.25rem);
	--sb-font-size-h2: clamp(2.35rem, 1.65rem + 3vw, 4.25rem);
	--sb-font-size-h3: clamp(1.8rem, 1.42rem + 1.65vw, 2.75rem);
	--sb-font-size-h4: clamp(1.4rem, 1.18rem + 0.85vw, 1.95rem);
	--sb-font-size-h5: clamp(1.125rem, 1.04rem + 0.4vw, 1.4rem);
	--sb-font-size-h6: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);

	/* Layout */
	--sb-page-gutter: clamp(1rem, 0.55rem + 2vw, 2rem);
	--sb-content-width: 80rem;
	--sb-wide-width: 92rem;
	--sb-reading-width: 48rem;
	--sb-header-height: 5rem;

	/* Spacing */
	--sb-space-1: 0.5rem;
	--sb-space-2: 0.75rem;
	--sb-space-3: 1rem;
	--sb-space-4: 1.5rem;
	--sb-space-5: 2rem;
	--sb-space-6: 3rem;
	--sb-space-7: 4rem;
	--sb-space-8: 6rem;

	--sb-section-spacing: clamp(4rem, 2.5rem + 5vw, 7.5rem);
	--sb-section-spacing-compact: clamp(2.5rem, 1.75rem + 3vw, 4.5rem);

	/* Shape and depth */
	--sb-radius-small: 0.375rem;
	--sb-radius-medium: 0.75rem;
	--sb-radius-large: 1.25rem;
	--sb-radius-pill: 999px;

	--sb-shadow-small: 0 0.5rem 1.5rem rgb(7 26 66 / 8%);
	--sb-shadow-medium: 0 1rem 2.5rem rgb(7 26 66 / 14%);
	--sb-shadow-large: 0 1.5rem 4rem rgb(2 10 26 / 28%);

	/* Motion */
	--sb-transition-fast: 160ms ease;
	--sb-transition-base: 240ms ease;
}

/* ==========================================================================
   2. Base and Reset
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	text-size-adjust: 100%;
}

body {
	background: var(--sb-color-white);
	color: var(--sb-color-dark-text);
	font-family: var(--sb-font-body);
	font-size: var(--sb-font-size-body);
	font-weight: 400;
	line-height: 1.65;
	margin: 0;
	overflow-wrap: break-word;
}

::selection {
	background: var(--sb-color-electric-blue);
	color: var(--sb-color-white);
}

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

img {
	height: auto;
}

iframe {
	border: 0;
}

p {
	margin-block: 0 1.25em;
}

ul,
ol {
	margin-block: 0 1.5em;
	padding-inline-start: 1.35em;
}

li + li {
	margin-block-start: 0.4em;
}

hr {
	border: 0;
	border-block-start: 1px solid var(--sb-color-border);
	margin-block: var(--sb-space-6);
}

blockquote {
	border-inline-start: 0.35rem solid var(--sb-color-electric-blue);
	font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
	font-weight: 600;
	margin: var(--sb-space-5) 0;
	padding: var(--sb-space-3) var(--sb-space-5);
}

small,
.sb-small-text {
	font-size: var(--sb-font-size-small);
	line-height: 1.5;
}

strong,
b {
	font-weight: 700;
}

/* ==========================================================================
   3. Typography
   ========================================================================== */

:where(h1, h2, h3, h4, h5, h6),
.elementor-widget-heading .elementor-heading-title {
	color: inherit;
	font-family: var(--sb-font-display);
	font-style: normal;
	font-weight: 800;
	margin-block: 0 0.5em;
	text-wrap: balance;
}

h1 {
	font-size: var(--sb-font-size-h1);
	letter-spacing: -0.025em;
	line-height: 0.9;
}

h2 {
	font-size: var(--sb-font-size-h2);
	letter-spacing: -0.02em;
	line-height: 0.95;
}

h3 {
	font-size: var(--sb-font-size-h3);
	letter-spacing: -0.015em;
	line-height: 1;
}

h4 {
	font-size: var(--sb-font-size-h4);
	line-height: 1.08;
}

h5 {
	font-size: var(--sb-font-size-h5);
	line-height: 1.15;
}

h6 {
	font-family: var(--sb-font-body);
	font-size: var(--sb-font-size-h6);
	font-weight: 800;
	letter-spacing: 0.05em;
	line-height: 1.2;
	text-transform: uppercase;
}

a {
	color: var(--sb-color-blue);
	font-weight: 700;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
	transition:
		color var(--sb-transition-fast),
		text-decoration-color var(--sb-transition-fast);
}

a:hover,
a:focus-visible {
	color: var(--sb-color-electric-blue);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 0.1875rem solid var(--sb-color-electric-blue);
	outline-offset: 0.1875rem;
}

.sb-eyebrow,
.sb-kicker {
	color: var(--sb-color-electric-blue);
	font-family: var(--sb-font-body);
	font-size: var(--sb-font-size-label);
	font-weight: 800;
	letter-spacing: 0.14em;
	line-height: 1.2;
	margin: 0 0 var(--sb-space-2);
	text-transform: uppercase;
}

.sb-lead {
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.4rem);
	line-height: 1.55;
}

.sb-display {
	font-family: var(--sb-font-display);
	font-size: clamp(3.5rem, 2rem + 7vw, 8.5rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 0.84;
	text-transform: uppercase;
}

/* ==========================================================================
   4. Accessibility
   ========================================================================== */

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

.screen-reader-text:focus,
.sb-screen-reader-text:focus {
	background: var(--sb-color-white);
	clip: auto !important;
	clip-path: none;
	color: var(--sb-color-navy);
	display: block;
	font-size: 1rem;
	font-weight: 700;
	height: auto;
	left: 1rem;
	padding: 1rem 1.25rem;
	top: 1rem;
	width: auto;
	z-index: 100000;
}

.sb-skip-link {
	background: var(--sb-color-white);
	color: var(--sb-color-navy);
	left: 1rem;
	padding: 0.75rem 1rem;
	position: fixed;
	top: -10rem;
	z-index: 100000;
}

.sb-skip-link:focus {
	top: 1rem;
}

/* ==========================================================================
   5. Layout Utilities
   ========================================================================== */

.sb-section {
	padding-block: var(--sb-section-spacing);
}

.sb-section--compact {
	padding-block: var(--sb-section-spacing-compact);
}

.sb-container,
.sb-container--wide {
	margin-inline: auto;
	padding-inline: var(--sb-page-gutter);
	width: 100%;
}

.sb-container {
	max-width: var(--sb-content-width);
}

.sb-container--wide {
	max-width: var(--sb-wide-width);
}

.sb-reading-width {
	max-width: var(--sb-reading-width);
}

.sb-center {
	margin-inline: auto;
}

.sb-stack {
	display: flex;
	flex-direction: column;
}

.sb-stack > * {
	margin-block: 0;
}

.sb-stack > * + * {
	margin-block-start: var(--sb-space-4);
}

.sb-stack--tight > * + * {
	margin-block-start: var(--sb-space-2);
}

.sb-stack--loose > * + * {
	margin-block-start: var(--sb-space-6);
}

.sb-cluster {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sb-space-3);
}

.sb-grid {
	display: grid;
	gap: var(--sb-space-5);
	grid-template-columns: repeat(12, minmax(0, 1fr));
}

.sb-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sb-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sb-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sb-grid--auto {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.sb-split {
	align-items: center;
	display: grid;
	gap: clamp(2rem, 4vw, 5rem);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.sb-aspect-video {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.sb-aspect-square {
	aspect-ratio: 1;
	overflow: hidden;
}

.sb-aspect-portrait {
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.sb-cover-media,
.sb-cover-media img,
.sb-cover-media video {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* ==========================================================================
   6. Section Surfaces
   ========================================================================== */

.sb-section--white {
	background: var(--sb-color-white);
	color: var(--sb-color-dark-text);
}

.sb-section--light {
	background: var(--sb-color-ice);
	color: var(--sb-color-dark-text);
}

.sb-section--navy {
	background: var(--sb-color-navy);
	color: var(--sb-color-white);
}

.sb-section--deep {
	background: var(--sb-color-deep-background);
	color: var(--sb-color-white);
}

.sb-section--blue {
	background: var(--sb-color-blue);
	color: var(--sb-color-white);
}

.sb-section--pattern {
	background-color: var(--sb-color-navy);
	background-image:
		linear-gradient(135deg, rgb(47 102 255 / 10%) 25%, transparent 25%),
		linear-gradient(225deg, rgb(47 102 255 / 10%) 25%, transparent 25%),
		linear-gradient(45deg, rgb(47 102 255 / 10%) 25%, transparent 25%),
		linear-gradient(315deg, rgb(47 102 255 / 10%) 25%, var(--sb-color-navy) 25%);
	background-position:
		0 0,
		0 0,
		1rem -1rem,
		-1rem 0;
	background-size: 2rem 2rem;
	color: var(--sb-color-white);
}

/* ==========================================================================
   7. Buttons
   ========================================================================== */

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.elementor-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.sb-button {
	align-items: center;
	appearance: none;
	background: var(--sb-color-blue);
	border: 2px solid var(--sb-color-blue);
	border-radius: var(--sb-radius-small);
	color: var(--sb-color-white);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--sb-font-body);
	font-size: 0.9375rem;
	font-weight: 800;
	gap: 0.55rem;
	justify-content: center;
	letter-spacing: 0.06em;
	line-height: 1.1;
	min-height: 3.25rem;
	padding: 0.95rem 1.5rem;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition:
		background-color var(--sb-transition-fast),
		border-color var(--sb-transition-fast),
		color var(--sb-transition-fast),
		transform var(--sb-transition-fast),
		box-shadow var(--sb-transition-fast);
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.elementor-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.sb-button:hover {
	background: var(--sb-color-electric-blue);
	border-color: var(--sb-color-electric-blue);
	color: var(--sb-color-white);
	transform: translateY(-2px);
}

.sb-button--navy {
	background: var(--sb-color-navy);
	border-color: var(--sb-color-navy);
}

.sb-button--light {
	background: var(--sb-color-white);
	border-color: var(--sb-color-white);
	color: var(--sb-color-navy);
}

.sb-button--light:hover {
	background: var(--sb-color-ice);
	border-color: var(--sb-color-ice);
	color: var(--sb-color-blue);
}

.sb-button--outline {
	background: transparent;
	border-color: currentColor;
	color: var(--sb-color-blue);
}

.sb-section--navy .sb-button--outline,
.sb-section--deep .sb-button--outline,
.sb-hero .sb-button--outline {
	color: var(--sb-color-white);
}

.sb-button--danger {
	background: var(--sb-color-alert-red);
	border-color: var(--sb-color-alert-red);
}

.sb-button--danger:hover {
	background: var(--sb-color-alert-red-dark);
	border-color: var(--sb-color-alert-red-dark);
}

.sb-button--small {
	font-size: 0.8125rem;
	min-height: 2.75rem;
	padding: 0.75rem 1.1rem;
}

.sb-button--large {
	font-size: 1rem;
	min-height: 3.75rem;
	padding: 1.1rem 1.8rem;
}

.sb-button--full {
	width: 100%;
}

/* ==========================================================================
   8. Cards and Common Components
   ========================================================================== */

.sb-card {
	background: var(--sb-color-white);
	border: 1px solid var(--sb-color-border);
	border-radius: var(--sb-radius-large);
	box-shadow: var(--sb-shadow-small);
	color: var(--sb-color-dark-text);
	overflow: hidden;
	transition:
		transform var(--sb-transition-base),
		box-shadow var(--sb-transition-base),
		border-color var(--sb-transition-base);
}

.sb-card:hover {
	border-color: rgb(47 102 255 / 45%);
	box-shadow: var(--sb-shadow-medium);
	transform: translateY(-0.35rem);
}

.sb-card__body {
	padding: clamp(1.25rem, 1rem + 1vw, 2rem);
}

.sb-card__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.sb-card__media img,
.sb-card__media video {
	height: 100%;
	object-fit: cover;
	transition: transform 500ms ease;
	width: 100%;
}

.sb-card:hover .sb-card__media img,
.sb-card:hover .sb-card__media video {
	transform: scale(1.035);
}

.sb-card--navy {
	background: var(--sb-color-card-navy);
	border-color: var(--sb-color-border-blue);
	color: var(--sb-color-white);
}

.sb-card--flat {
	box-shadow: none;
}

.sb-card--accent {
	border-block-start: 0.35rem solid var(--sb-color-electric-blue);
}

.sb-pill,
.sb-badge {
	align-items: center;
	background: var(--sb-color-surface);
	border-radius: var(--sb-radius-pill);
	color: var(--sb-color-navy);
	display: inline-flex;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1;
	padding: 0.55rem 0.8rem;
	text-transform: uppercase;
}

.sb-badge--blue {
	background: var(--sb-color-blue);
	color: var(--sb-color-white);
}

.sb-badge--red {
	background: var(--sb-color-alert-red);
	color: var(--sb-color-white);
}

.sb-icon-circle {
	align-items: center;
	background: var(--sb-color-electric-blue);
	border-radius: 50%;
	color: var(--sb-color-white);
	display: inline-flex;
	height: 3rem;
	justify-content: center;
	width: 3rem;
}

/* ==========================================================================
   9. Alert Bar
   ========================================================================== */

.sb-alert {
	align-items: center;
	background: var(--sb-color-alert-red);
	color: var(--sb-color-white);
	display: flex;
	font-size: 0.9375rem;
	font-weight: 700;
	gap: var(--sb-space-3);
	justify-content: center;
	padding: 0.8rem var(--sb-page-gutter);
	position: relative;
	text-align: center;
	z-index: 50;
}

.sb-alert a {
	color: inherit;
	text-decoration: underline;
}

.sb-alert--info {
	background: var(--sb-color-blue);
}

.sb-alert--success {
	background: var(--sb-color-success-green);
}

.sb-alert__label {
	background: rgb(255 255 255 / 18%);
	border-radius: var(--sb-radius-pill);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	padding: 0.4rem 0.65rem;
	text-transform: uppercase;
}

/* ==========================================================================
   10. Header and Navigation
   ========================================================================== */

.sb-site-header,
.elementor-location-header {
	position: relative;
	z-index: 100;
}

.sb-site-header--sticky {
	inset-block-start: 0;
	position: sticky;
}

.sb-header-shell {
	align-items: center;
	background: rgb(2 10 26 / 94%);
	backdrop-filter: blur(0.75rem);
	color: var(--sb-color-white);
	display: flex;
	min-height: var(--sb-header-height);
}

.sb-header-shell__inner {
	align-items: center;
	display: flex;
	gap: var(--sb-space-5);
	justify-content: space-between;
	margin-inline: auto;
	max-width: var(--sb-wide-width);
	padding-inline: var(--sb-page-gutter);
	width: 100%;
}

.sb-site-logo img {
	max-height: 4.25rem;
	width: auto;
}

.sb-nav ul {
	align-items: center;
	display: flex;
	gap: clamp(1rem, 2vw, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.sb-nav a {
	color: var(--sb-color-white);
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-decoration: none;
	text-transform: uppercase;
}

.sb-nav a:hover,
.sb-nav a:focus-visible,
.sb-nav .current-menu-item > a {
	color: var(--sb-color-electric-blue);
}

/* ==========================================================================
   11. Enhanced Video Hero
   ========================================================================== */

.sb-hero {
	align-items: end;
	background: var(--sb-color-deep-background);
	color: var(--sb-color-white);
	display: grid;
	isolation: isolate;
	min-height: min(52rem, calc(100svh - var(--sb-header-height)));
	overflow: hidden;
	position: relative;
}

.sb-hero__media,
.sb-hero__overlay {
	inset: 0;
	position: absolute;
}

.sb-hero__media {
	z-index: -3;
}

.sb-hero__media img,
.sb-hero__media video {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.sb-hero__overlay {
	background:
		linear-gradient(
			90deg,
			rgb(2 10 26 / 92%) 0%,
			rgb(2 10 26 / 64%) 52%,
			rgb(2 10 26 / 20%) 100%
		),
		linear-gradient(
			0deg,
			rgb(2 10 26 / 88%) 0%,
			transparent 55%
		);
	z-index: -2;
}

.sb-hero__content {
	max-width: 58rem;
	padding-block: clamp(6rem, 12vh, 10rem);
	position: relative;
	z-index: 1;
}

.sb-hero__title {
	font-size: clamp(4rem, 2.1rem + 8vw, 9rem);
	margin-block-end: var(--sb-space-4);
	text-transform: uppercase;
}

.sb-hero__copy {
	color: var(--sb-color-ice);
	font-size: clamp(1.1rem, 1rem + 0.45vw, 1.4rem);
	max-width: 42rem;
}

.sb-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sb-space-3);
	margin-block-start: var(--sb-space-5);
}

.sb-hero__play {
	align-items: center;
	background: rgb(255 255 255 / 14%);
	border: 1px solid rgb(255 255 255 / 35%);
	border-radius: 50%;
	color: var(--sb-color-white);
	display: inline-flex;
	height: 4.5rem;
	justify-content: center;
	transition:
		background-color var(--sb-transition-fast),
		transform var(--sb-transition-fast);
	width: 4.5rem;
}

.sb-hero__play:hover {
	background: var(--sb-color-electric-blue);
	color: var(--sb-color-white);
	transform: scale(1.05);
}

/* ==========================================================================
   12. Game Day and Score Components
   ========================================================================== */

.sb-game-card {
	background:
		linear-gradient(
			145deg,
			rgb(47 102 255 / 16%),
			transparent 42%
		),
		var(--sb-color-card-navy);
	border: 1px solid var(--sb-color-border-blue);
	border-radius: var(--sb-radius-large);
	box-shadow: var(--sb-shadow-large);
	color: var(--sb-color-white);
	overflow: hidden;
}

.sb-game-card__header {
	align-items: center;
	border-block-end: 1px solid var(--sb-color-border-blue);
	display: flex;
	gap: var(--sb-space-3);
	justify-content: space-between;
	padding: 1rem 1.25rem;
}

.sb-game-card__body {
	align-items: center;
	display: grid;
	gap: var(--sb-space-4);
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	padding: clamp(1.5rem, 1rem + 2vw, 3rem);
	text-align: center;
}

.sb-game-card__team {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--sb-space-2);
}

.sb-game-card__logo {
	align-items: center;
	background: var(--sb-color-white);
	border-radius: 50%;
	display: flex;
	height: clamp(4.5rem, 8vw, 7rem);
	justify-content: center;
	padding: 0.75rem;
	width: clamp(4.5rem, 8vw, 7rem);
}

.sb-game-card__logo img {
	max-height: 100%;
	max-width: 100%;
}

.sb-game-card__versus {
	color: var(--sb-color-steel-text);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sb-game-card__score {
	font-family: var(--sb-font-display);
	font-size: clamp(3rem, 5vw, 5rem);
	font-weight: 800;
	line-height: 0.9;
}

.sb-game-card__footer {
	background: rgb(2 10 26 / 55%);
	border-block-start: 1px solid var(--sb-color-border-blue);
	padding: 1rem 1.25rem;
	text-align: center;
}

.sb-score-strip {
	background: var(--sb-color-blue);
	color: var(--sb-color-white);
	overflow: hidden;
}

.sb-score-strip__inner {
	display: flex;
	gap: var(--sb-space-4);
	overflow-x: auto;
	padding: 0.8rem var(--sb-page-gutter);
	scrollbar-width: thin;
}

.sb-score-strip__item {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	gap: var(--sb-space-2);
	white-space: nowrap;
}

/* ==========================================================================
   13. Programs and Team Cards
   ========================================================================== */

.sb-program-card {
	min-height: 28rem;
	overflow: hidden;
	position: relative;
}

.sb-program-card__media,
.sb-program-card__overlay {
	inset: 0;
	position: absolute;
}

.sb-program-card__media img {
	height: 100%;
	object-fit: cover;
	transition: transform 600ms ease;
	width: 100%;
}

.sb-program-card__overlay {
	background:
		linear-gradient(
			0deg,
			rgb(2 10 26 / 94%) 0%,
			rgb(2 10 26 / 35%) 72%
		),
		linear-gradient(
			135deg,
			rgb(0 41 157 / 35%),
			transparent 50%
		);
}

.sb-program-card__content {
	color: var(--sb-color-white);
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: end;
	padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
	position: relative;
	z-index: 1;
}

.sb-program-card:hover .sb-program-card__media img {
	transform: scale(1.05);
}

.sb-team-card {
	align-items: stretch;
	background: var(--sb-color-white);
	border: 1px solid var(--sb-color-border);
	border-radius: var(--sb-radius-large);
	display: grid;
	grid-template-columns: 9rem minmax(0, 1fr);
	overflow: hidden;
}

.sb-team-card__media img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.sb-team-card__body {
	padding: var(--sb-space-4);
}

/* ==========================================================================
   14. Events and Calendar
   ========================================================================== */

.sb-event-card {
	align-items: stretch;
	background: var(--sb-color-white);
	border: 1px solid var(--sb-color-border);
	border-radius: var(--sb-radius-medium);
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	overflow: hidden;
}

.sb-event-card__date {
	align-items: center;
	background: var(--sb-color-blue);
	color: var(--sb-color-white);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 1rem 0.75rem;
	text-align: center;
}

.sb-event-card__month {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.sb-event-card__day {
	font-family: var(--sb-font-display);
	font-size: 2.6rem;
	font-weight: 800;
	line-height: 0.9;
}

.sb-event-card__body {
	padding: 1.25rem;
}

.sb-event-card__meta {
	color: var(--sb-color-steel-text);
	font-size: 0.875rem;
}

/* ==========================================================================
   15. News, Recaps, and Players of the Game
   ========================================================================== */

.sb-recap-card__meta {
	align-items: center;
	color: var(--sb-color-steel-text);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.8125rem;
	gap: 0.75rem;
	margin-block-end: 0.75rem;
}

.sb-player-card {
	background:
		linear-gradient(
			155deg,
			rgb(47 102 255 / 16%),
			transparent 45%
		),
		var(--sb-color-card-navy);
	border: 1px solid var(--sb-color-border-blue);
	border-radius: var(--sb-radius-large);
	color: var(--sb-color-white);
	overflow: hidden;
}

.sb-player-card__image {
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.sb-player-card__image img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.sb-player-card__body {
	padding: var(--sb-space-4);
}

.sb-player-card__number {
	color: var(--sb-color-electric-blue);
	font-family: var(--sb-font-display);
	font-size: 3.25rem;
	font-weight: 800;
	line-height: 0.9;
}

/* ==========================================================================
   16. Media and Highlights
   ========================================================================== */

.sb-media-card {
	border-radius: var(--sb-radius-large);
	color: var(--sb-color-white);
	display: block;
	overflow: hidden;
	position: relative;
	text-decoration: none;
}

.sb-media-card::after {
	background:
		linear-gradient(
			0deg,
			rgb(2 10 26 / 90%),
			transparent 70%
		);
	content: "";
	inset: 0;
	position: absolute;
}

.sb-media-card img {
	aspect-ratio: 16 / 10;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms ease;
	width: 100%;
}

.sb-media-card:hover img {
	transform: scale(1.05);
}

.sb-media-card__content {
	inset: auto 0 0;
	padding: var(--sb-space-4);
	position: absolute;
	z-index: 1;
}

.sb-play-icon {
	align-items: center;
	background: var(--sb-color-electric-blue);
	border-radius: 50%;
	box-shadow: 0 0 0 0.5rem rgb(255 255 255 / 14%);
	color: var(--sb-color-white);
	display: inline-flex;
	height: 3.5rem;
	justify-content: center;
	width: 3.5rem;
}

/* ==========================================================================
   17. Sponsors
   ========================================================================== */

.sb-sponsor-grid {
	align-items: center;
	display: grid;
	gap: var(--sb-space-5);
	grid-template-columns:
		repeat(auto-fit, minmax(8rem, 1fr));
}

.sb-sponsor-logo {
	align-items: center;
	background: var(--sb-color-white);
	border: 1px solid var(--sb-color-border);
	border-radius: var(--sb-radius-medium);
	display: flex;
	justify-content: center;
	min-height: 7rem;
	padding: 1.25rem;
}

.sb-sponsor-logo img {
	filter: grayscale(1);
	max-height: 4.5rem;
	opacity: 0.78;
	transition:
		filter var(--sb-transition-base),
		opacity var(--sb-transition-base),
		transform var(--sb-transition-base);
	width: auto;
}

.sb-sponsor-logo:hover img {
	filter: grayscale(0);
	opacity: 1;
	transform: scale(1.03);
}

.sb-sponsor-logo--featured {
	box-shadow: var(--sb-shadow-medium);
	min-height: 9rem;
}

/* ==========================================================================
   18. CTA Bands
   ========================================================================== */

.sb-cta-band {
	background:
		linear-gradient(
			110deg,
			rgb(47 102 255 / 42%),
			transparent 60%
		),
		var(--sb-color-blue);
	border-radius: var(--sb-radius-large);
	color: var(--sb-color-white);
	overflow: hidden;
	padding: clamp(2rem, 1.25rem + 3vw, 4rem);
	position: relative;
}

.sb-cta-band__inner {
	align-items: center;
	display: flex;
	gap: var(--sb-space-5);
	justify-content: space-between;
	position: relative;
	z-index: 1;
}

.sb-cta-band__content {
	max-width: 48rem;
}

/* ==========================================================================
   19. Forms
   ========================================================================== */

label {
	color: var(--sb-color-dark-text);
	display: inline-block;
	font-size: 0.875rem;
	font-weight: 700;
	margin-block-end: 0.4rem;
}

input:not(
	[type="checkbox"],
	[type="radio"],
	[type="button"],
	[type="submit"],
	[type="reset"]
),
select,
textarea,
.elementor-field {
	appearance: none;
	background: var(--sb-color-white);
	border: 1px solid var(--sb-color-border);
	border-radius: var(--sb-radius-small);
	color: var(--sb-color-dark-text);
	font: inherit;
	min-height: 3.25rem;
	padding: 0.8rem 0.95rem;
	transition:
		border-color var(--sb-transition-fast),
		box-shadow var(--sb-transition-fast);
	width: 100%;
}

textarea,
textarea.elementor-field {
	min-height: 9rem;
	resize: vertical;
}

input::placeholder,
textarea::placeholder {
	color: var(--sb-color-steel-text);
	opacity: 0.8;
}

input:not(
	[type="checkbox"],
	[type="radio"],
	[type="button"],
	[type="submit"],
	[type="reset"]
):focus,
select:focus,
textarea:focus,
.elementor-field:focus {
	border-color: var(--sb-color-electric-blue);
	box-shadow: 0 0 0 0.25rem rgb(47 102 255 / 15%);
	outline: 0;
}

.elementor-message-success {
	color: var(--sb-color-success-green);
	font-weight: 700;
}

.elementor-message-danger {
	color: var(--sb-color-alert-red);
	font-weight: 700;
}

/* ==========================================================================
   20. Tables
   ========================================================================== */

.sb-table-wrap {
	overflow-x: auto;
}

table {
	border-collapse: collapse;
	width: 100%;
}

th,
td {
	border-block-end: 1px solid var(--sb-color-border);
	padding: 0.9rem 1rem;
	text-align: start;
	vertical-align: top;
}

th {
	background: var(--sb-color-navy);
	color: var(--sb-color-white);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ==========================================================================
   21. WooCommerce Foundation
   ========================================================================== */

.woocommerce .woocommerce-breadcrumb {
	color: var(--sb-color-steel-text);
	font-size: 0.875rem;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: var(--sb-color-white);
	border: 1px solid var(--sb-color-border);
	border-radius: var(--sb-radius-medium);
	overflow: hidden;
	padding: 1rem;
	transition:
		box-shadow var(--sb-transition-base),
		transform var(--sb-transition-base);
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
	box-shadow: var(--sb-shadow-medium);
	transform: translateY(-0.25rem);
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--sb-color-blue);
	font-weight: 800;
}

.woocommerce span.onsale {
	background: var(--sb-color-alert-red);
	border-radius: var(--sb-radius-pill);
	min-height: auto;
	min-width: auto;
	padding: 0.55rem 0.75rem;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--sb-color-ice);
	border-block-start-color: var(--sb-color-blue);
	color: var(--sb-color-dark-text);
}

/* ==========================================================================
   22. Footer
   ========================================================================== */

.sb-site-footer,
.elementor-location-footer {
	background: var(--sb-color-deep-background);
	color: var(--sb-color-light-text);
}

.sb-footer-main {
	padding-block: clamp(3rem, 2rem + 3vw, 5rem);
}

.sb-footer-grid {
	display: grid;
	gap: var(--sb-space-6);
	grid-template-columns:
		1.4fr repeat(3, minmax(0, 1fr));
}

.sb-footer-title {
	color: var(--sb-color-white);
	font-size: 1rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sb-footer-nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sb-footer-nav li + li {
	margin-block-start: 0.65rem;
}

.sb-footer-nav a {
	color: var(--sb-color-light-text);
	font-size: 0.9375rem;
	text-decoration: none;
}

.sb-footer-nav a:hover {
	color: var(--sb-color-white);
}

.sb-footer-bottom {
	border-block-start: 1px solid var(--sb-color-border-blue);
	font-size: 0.8125rem;
	padding-block: 1.25rem;
}

/* ==========================================================================
   23. Utility Classes
   ========================================================================== */

.sb-text-left {
	text-align: left;
}

.sb-text-center {
	text-align: center;
}

.sb-text-right {
	text-align: right;
}

.sb-text-white {
	color: var(--sb-color-white);
}

.sb-text-blue {
	color: var(--sb-color-blue);
}

.sb-text-electric {
	color: var(--sb-color-electric-blue);
}

.sb-text-muted {
	color: var(--sb-color-steel-text);
}

.sb-no-margin {
	margin: 0 !important;
}

.sb-hidden {
	display: none !important;
}

.sb-full-width {
	width: 100%;
}

.sb-shadow-small {
	box-shadow: var(--sb-shadow-small);
}

.sb-shadow-medium {
	box-shadow: var(--sb-shadow-medium);
}

.sb-radius-medium {
	border-radius: var(--sb-radius-medium);
}

.sb-radius-large {
	border-radius: var(--sb-radius-large);
}

/* ==========================================================================
   24. Responsive Adjustments
   ========================================================================== */

@media (max-width: 64rem) {
	:root {
		--sb-header-height: 4.5rem;
	}

	.sb-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sb-footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sb-nav ul {
		gap: 1rem;
	}

	.sb-hero {
		min-height: 44rem;
	}
}

@media (max-width: 48rem) {
	body {
		line-height: 1.58;
	}

	.sb-grid,
	.sb-grid--2,
	.sb-grid--3,
	.sb-grid--4,
	.sb-split {
		grid-template-columns: 1fr;
	}

	.sb-hero {
		align-items: end;
		min-height:
			min(
				44rem,
				calc(100svh - var(--sb-header-height))
			);
	}

	.sb-hero__overlay {
		background:
			linear-gradient(
				0deg,
				rgb(2 10 26 / 95%) 0%,
				rgb(2 10 26 / 56%) 72%,
				rgb(2 10 26 / 30%) 100%
			);
	}

	.sb-hero__content {
		padding-block: 6rem 4rem;
	}

	.sb-hero__actions,
	.sb-cta-band__inner {
		align-items: stretch;
		flex-direction: column;
	}

	.sb-hero__actions .sb-button,
	.sb-cta-band .sb-button {
		width: 100%;
	}

	.sb-game-card__body {
		gap: 1rem;
		padding: 1.5rem 1rem;
	}

	.sb-game-card__logo {
		height: 4rem;
		width: 4rem;
	}

	.sb-team-card {
		grid-template-columns: 1fr;
	}

	.sb-team-card__media {
		aspect-ratio: 16 / 9;
	}

	.sb-footer-grid {
		grid-template-columns: 1fr;
	}

	.sb-program-card {
		min-height: 24rem;
	}
}

@media (max-width: 30rem) {
	.sb-game-card__header {
		align-items: flex-start;
		flex-direction: column;
	}

	.sb-game-card__body {
		grid-template-columns:
			minmax(0, 1fr)
			auto
			minmax(0, 1fr);
	}

	.sb-game-card__team-name {
		font-size: 0.8rem;
	}

	.sb-event-card {
		grid-template-columns: 4.75rem minmax(0, 1fr);
	}

	.sb-button,
	.elementor-button {
		width: 100%;
	}
}

/* ==========================================================================
   25. Reduced Motion and Print
   ========================================================================== */

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

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

	.sb-card:hover,
	.sb-button:hover,
	.elementor-button:hover {
		transform: none;
	}
}

@media print {
	.sb-alert,
	.sb-site-header,
	.elementor-location-header,
	.sb-site-footer,
	.elementor-location-footer,
	.sb-button,
	.elementor-button,
	video,
	iframe {
		display: none !important;
	}

	body {
		background: var(--sb-color-white);
		color: #000000;
		font-size: 12pt;
	}

	a {
		color: #000000;
		text-decoration: underline;
	}

	.sb-section {
		padding-block: 1.5rem;
	}
}