/**
 * NSN Sports — ESPN-style theme components
 * ------------------------------------------------------------------
 * Tailwind utilities come from the compiled build in includes/css/tailwind.css,
 * loaded on every page. This file holds the bespoke components the mockup
 * defines in its own <style> block (game tiles, modules, ticker, etc.) plus the
 * light/dark theme treatment.
 *
 * Mirrors the approved mockup 1:1.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,700;0,800;1,800&display=swap');

/* Tailwind's rem-based sizes assume a 16px root. Bootstrap 3 used to set
   html{font-size:10px} site-wide, which made everything ~62.5% too small; that
   is gone now, so this only pins the browser default explicitly. */
html.nsn-home-html, html.nsn-redesign-html { font-size: 16px; }

body.nsn-home-page, body.nsn-redesign {
	font-family: 'Inter', sans-serif;
	background-color: #ebecee;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- DARK THEME --- */
body.nsn-home-page.dark-mode, body.nsn-redesign.dark-mode {
	background-color: #121212;
	color: #e2e8f0;
}
/* Generic dark surfaces. Elements that carry an inline school/conference brand
   colour (applied by nsn_sports_get_page_styles) are exempted via
   :not([style*="background"]) so dark/light mode never overrides school colours. */
body.dark-mode .espn-module:not([style*="background"]),
body.dark-mode .game-tile:not([style*="background"]),
body.dark-mode .bg-white:not([style*="background"]) {
	background-color: #1e1e1e !important;
	border-color: #333 !important;
}
/* School "back colour" page tint: .nsn_body_bg_overlay paints a brand/back colour as a
   full-page mix-blend-mode:multiply overlay (header.php). The homepage & generic pages
   also use it (often a plain #fff), which in dark mode would block the dark background —
   so in dark mode we HIDE the overlay by default and let the #121212 body show through.
   On actual school/college/conference/sponsor pages we keep the overlay but switch it to
   `screen`, so the school's custom colour tints UP from the dark backdrop instead of
   being crushed to black (i.e. dark mode recolours every page EXCEPT those with a custom
   school colour set). */
body.dark-mode .nsn_body_bg_overlay { display: none; }
body.dark-mode.single-nsn_college .nsn_body_bg_overlay,
body.dark-mode.single-nsn_high_school .nsn_body_bg_overlay,
body.dark-mode.single-nsn_conference .nsn_body_bg_overlay,
body.dark-mode.single-nsn_sponsor .nsn_body_bg_overlay { display: block; mix-blend-mode: screen; }
body.dark-mode .section-header { border-bottom-color: #333; color: #fff; }
body.dark-mode .bg-slate-100,
body.dark-mode .bg-slate-50 { background-color: #262626 !important; }
body.dark-mode .text-slate-900,
body.dark-mode .text-slate-800,
body.dark-mode .text-slate-700 { color: #f1f5f9 !important; }
body.dark-mode .border-slate-100,
body.dark-mode .border-slate-200,
body.dark-mode .border-slate-300 { border-color: #333 !important; }
body.dark-mode input,
body.dark-mode select { background-color: #2d2d2d !important; color: #fff !important; border-color: #444 !important; }
body.dark-mode .game-tile:hover { border-color: #cc0000; }

/* --- Scrollbars --- */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.news-scroll::-webkit-scrollbar { width: 4px; }
.news-scroll::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); }
.news-scroll::-webkit-scrollbar-thumb { background: #cc0000; border-radius: 10px; }

/* --- Brand red --- */
.espn-red { color: #cc0000; }
.bg-espn-red { background-color: #cc0000; }
.border-espn-red { border-color: #cc0000; }
/* Dark mode: brand red #cc0000 fails contrast (~2.8-3.2:1) on the dark surfaces
   (#1e1e1e / #121212). Remap to a lighter red that clears WCAG AA 4.5:1. */
body.dark-mode .text-espn-red,
body.dark-mode .espn-red { color: #ff5a5a !important; }
body.dark-mode .border-espn-red { border-color: #ff5a5a !important; }
/* Small category badges: white text on #cc0000 is only ~3.9:1 (fails AA for
   small text). A slightly darker red reaches ~8:1 while staying on-brand. */
.nsn-cat-badge { background-color: #a30000; color: #fff; }

/* --- Game tiles --- */
.game-tile { min-width: 240px; transition: all 0.2s ease; }
.game-tile:hover { transform: translateY(-2px); }
/* Clamp broadcast-tile titles to 2 lines + ellipsis so long game titles can't
   overflow or blow out tile height in the sliders (homepage + player). Reserve the
   2 lines so tiles keep a consistent height in the horizontal scroller. */
.game-tile h3 {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
	overflow: hidden; min-height: 2.5em;
}
/* Play affordance over the tile thumbnail: translucent so it doesn't blot out the
   team logo underneath (the old solid-white circle covered mascot faces); it
   solidifies on hover. */
.nsn-play-badge {
	background: rgba( 255, 255, 255, 0.5 );
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.18 );
	transition: background-color 0.2s ease;
}
.game-tile:hover .nsn-play-badge { background: rgba( 255, 255, 255, 0.92 ); }

/* PPV / subscription badge (top-left of a tile thumbnail) — the "yellow PPV" flag. */
.nsn-ppv-badge {
	position: absolute; top: 0.25rem; left: 0.25rem; z-index: 20;
	background: #f5c518; color: #1a1a1a;
	font-size: 0.5rem; font-weight: 900; font-style: italic; text-transform: uppercase;
	letter-spacing: 0.03em; padding: 0.1rem 0.3rem; border-radius: 2px; line-height: 1.2;
}
/* Download button on a downloadable archive tile (top-right; mouse convenience — keyboard
   users get the accessible Download button on the player page). */
.nsn-tile-download {
	position: absolute; top: 0.25rem; right: 0.25rem; z-index: 20;
	width: 1.5rem; height: 1.5rem; border-radius: 9999px;
	background: rgba( 0, 0, 0, 0.7 ); color: #fff;
	display: flex; align-items: center; justify-content: center; cursor: pointer;
	transition: background-color 0.2s ease;
}
.nsn-tile-download:hover { background: #cc0000; }
.nsn-tile-download i, .nsn-tile-download svg { width: 0.85rem; height: 0.85rem; }
/* Download button in the player-page now-playing rail (the accessible, keyboard-reachable one). */
.nsn-nowplaying-download {
	display: inline-flex; align-items: center; gap: 0.35rem; align-self: flex-start; margin-top: 0.6rem;
	background: #cc0000; color: #fff; font-weight: 900; font-style: italic;
	text-transform: uppercase; letter-spacing: -0.01em; font-size: 0.7rem; padding: 0.4rem 0.75rem;
	transition: background-color 0.2s ease;
}
.nsn-nowplaying-download:hover, .nsn-nowplaying-download:focus-visible { background: #a30000; }
.nsn-nowplaying-download i, .nsn-nowplaying-download svg { width: 0.9rem; height: 0.9rem; }

/* --- Ad units --- */
.ad-unit {
	width: 200px; height: 200px; background-color: #fff;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid #d1d5db; color: #9ca3af; position: relative;
	font-weight: 700; flex-shrink: 0; overflow: hidden;
	transition: background-color 0.3s ease;
}
body.dark-mode .ad-unit { background-color: #1a1a1a; border-color: #333; }
.ad-unit::before, .ad-unit::after {
	content: ''; position: absolute; width: 140%; height: 1px;
	background-color: #e5e7eb; top: 50%; left: -20%;
}
body.dark-mode .ad-unit::before, body.dark-mode .ad-unit::after { background-color: #333; }
.ad-unit::before { transform: rotate(45deg); }
.ad-unit::after { transform: rotate(-45deg); }
.ad-unit span {
	background: #fff; padding: 2px 10px; z-index: 1; font-size: 0.55rem;
	text-transform: uppercase; letter-spacing: 0.1em; border: 1px solid #e5e7eb;
}
body.dark-mode .ad-unit span { background: #1a1a1a; border-color: #333; }
/* Real ad creatives sit inside .ad-unit; neutralise the X-pattern when filled */
.ad-unit.is-filled::before, .ad-unit.is-filled::after { display: none; }
.ad-unit.is-filled { color: inherit; }

/* --- Player-page layout grid ---
   [now-playing rail | 16:9 stage], plus a right-hand ad column when the entity's second two
   ad blocks are populated (body adds .has-right-ads). A dedicated class rather than a Tailwind
   arbitrary grid-cols value, so the three-column variant is guaranteed in the compiled CSS.
   minmax(0,1fr) keeps the stage from overflowing its track. */
.nsn-player-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: stretch; }
@media (min-width: 1024px) {
	.nsn-player-grid { grid-template-columns: 250px minmax(0, 1fr); }
	.nsn-player-grid.has-right-ads { grid-template-columns: 250px minmax(0, 1fr) 250px; }
}

/* --- Per-entity ad units (college / high school / conference / sponsor pages) ---
   Rendered by nsn_entity_ad_units(): a sponsor image per Ad Block when one is uploaded,
   otherwise that position's DFP slot. 'is-column' stacks them in the 250px player rail;
   'is-row' wraps them horizontally where the rail isn't rendered (conference pages with
   no game selected). Sized to match .nsn-ad-slot so mixed image/DFP columns line up. */
.nsn-entity-ads { display: flex; gap: 0.75rem; }
.nsn-entity-ads.is-column { flex-direction: column; align-items: center; }
.nsn-entity-ads.is-row { flex-flow: row wrap; justify-content: center; margin-top: 1rem; }
.nsn-entity-ad {
	width: 250px; max-width: 100%;
	display: flex; align-items: center; justify-content: center;
	overflow: hidden; flex-shrink: 0;
}
/* Creatives are trafficked at 250x250 but tolerate off-size uploads without distortion. */
.nsn-entity-ad img { display: block; width: 100%; height: auto; }

/* Live DFP ad slot (250x250) */
.nsn-ad-slot {
	width: 250px; height: 250px;
	display: flex; align-items: center; justify-content: center;
	background: #fff; border: 1px solid #d1d5db; overflow: hidden;
	flex-shrink: 0; margin: 0 auto;
}
.nsn-ad-slot > div { width: 250px; height: 250px; }
body.dark-mode .nsn-ad-slot { background: #1a1a1a; border-color: #333; }

/* --- Sliders --- */
.infinite-scroll-container { display: flex; gap: 0.75rem; overflow-x: auto; scroll-behavior: smooth; }
/* Reserve a tile-row's height so the loading/empty states don't reflow the page
   when broadcasts finally arrive (skeletons below fill this while fetching). */
.infinite-scroll-container { min-height: 13rem; }
.slider-container { position: relative; }
.slider-wing {
	position: absolute; top: 0; bottom: 0; width: 40px; z-index: 30;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0,0,0,0.1); color: #fff; cursor: pointer;
	transition: all 0.2s ease; opacity: 0; border: none;
}
.slider-container:hover .slider-wing { opacity: 1; }
.slider-wing:hover, .slider-wing:focus-visible { background: rgba(204,0,0,0.8); opacity: 1; }
.slider-wing-left { left: 0; }
.slider-wing-right { right: 0; }
/* Touch devices have no hover, so the scroll arrows would never appear — show
   them by default there so the slider's scrollability is discoverable. */
@media (hover: none) {
	.slider-wing { opacity: 0.9; }
}

/* --- Schedule grid (Past Games / On Demand — page-schedule.php) --- */
.nsn-schedule-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}
@media (min-width: 640px)  { .nsn-schedule-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px)  { .nsn-schedule-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .nsn-schedule-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* Slider tiles carry min-width:240px so they don't shrink in the horizontal
   scroller; in the grid the tracks size the tiles, so drop the floor. */
.nsn-schedule-grid .game-tile { min-width: 0; }
.nsn-schedule-section + .nsn-schedule-section { margin-top: 1rem; }

.nsn-load-more-wrap { display: flex; justify-content: center; padding: 1rem 0 0.25rem; }
.nsn-load-more {
	background: #cc0000; color: #fff; font-weight: 900; font-style: italic;
	text-transform: uppercase; letter-spacing: -0.02em; font-size: 0.75rem;
	padding: 0.625rem 2rem; border: none; cursor: pointer;
	transition: background-color 0.2s ease;
}
.nsn-load-more:hover, .nsn-load-more:focus-visible { background: #a30000; }
.nsn-load-more[disabled] { opacity: 0.6; cursor: default; }

/* Native From/To date-range inputs in the filter bar. color-scheme keeps the
   browser's calendar popup + spinners readable in each theme. */
.nsn-date-input { min-width: 8.25rem; color-scheme: light; }
body.dark-mode .nsn-date-input { color-scheme: dark; }

/* Inline "Load More" bumper at the end of a horizontal slider (homepage). Sized
   like a tile and stretched to the row height so it reads as the next card. */
.nsn-slider-more {
	flex-shrink: 0; min-width: 150px; align-self: stretch;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
	background: #fff; border: 1px dashed #cbd5e1; color: #cc0000;
	font-weight: 900; font-style: italic; text-transform: uppercase;
	letter-spacing: -0.02em; font-size: 0.7rem; cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.nsn-slider-more:hover, .nsn-slider-more:focus-visible { border-color: #cc0000; background: #fff5f5; }
.nsn-slider-more[disabled] { opacity: 0.6; cursor: default; }
body.dark-mode .nsn-slider-more { background: #1e1e1e; border-color: #444; color: #ff5a5a; }
body.dark-mode .nsn-slider-more:hover, body.dark-mode .nsn-slider-more:focus-visible { background: #2a1414; border-color: #cc0000; }

/* --- Loading skeletons (match .game-tile dimensions to avoid layout shift) --- */
.nsn-skel { pointer-events: none; }
.nsn-skel .nsn-skel-img,
.nsn-skel .nsn-skel-line {
	position: relative; overflow: hidden;
	background: #e2e8f0; border-radius: 3px;
}
.nsn-skel .nsn-skel-img { height: 7rem; }                 /* matches .h-28 image area */
.nsn-skel .nsn-skel-line { height: 0.625rem; margin-top: 0.5rem; }
.nsn-skel .nsn-skel-line.is-sport  { width: 2.5rem; margin-top: 0; }
.nsn-skel .nsn-skel-line.is-title  { width: 100%; }
.nsn-skel .nsn-skel-line.is-title2 { width: 66%; margin-top: 0.25rem; }
.nsn-skel .nsn-skel-img::after,
.nsn-skel .nsn-skel-line::after {
	content: ""; position: absolute; inset: 0; transform: translateX(-100%);
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
	animation: nsn-shimmer 1.4s ease-in-out infinite;
}
@keyframes nsn-shimmer { 100% { transform: translateX(100%); } }
body.dark-mode .nsn-skel .nsn-skel-img,
body.dark-mode .nsn-skel .nsn-skel-line { background: #2a2a2a; }
body.dark-mode .nsn-skel .nsn-skel-img::after,
body.dark-mode .nsn-skel .nsn-skel-line::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); }

/* --- Modules / headers --- */
.espn-module {
	background-color: #fff; border-top: 4px solid #222; padding: 1.25rem;
	height: 100%; display: flex; flex-direction: column;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05); overflow: hidden;
	transition: background-color 0.3s ease;
}
.section-header {
	font-weight: 800; font-style: italic; text-transform: uppercase;
	letter-spacing: -0.02em; font-size: 1.25rem; border-bottom: 1px solid #e5e7eb;
	padding-bottom: 0.5rem; margin-bottom: 0.75rem; display: flex;
	align-items: center; gap: 0.5rem;
}
.espn-select {
	appearance: none; -webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 1rem;
}

/* --- Ticker --- */
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.ticker-move { display: flex; width: -moz-fit-content; width: fit-content; animation: ticker 30s linear infinite; }
.ticker-move:hover { animation-play-state: paused; }

/* --- Tile Block (bottom-of-page strip: conference members, secondary sponsors) ---
   Two layouts from one markup, chosen per page in the admin. 'is-grid' wraps, which suits a
   fixed list you want to see all of; 'is-slider' reuses the horizontal scroller the
   broadcast rows use. Captions are always visible (hover has no touch equivalent) and
   clamped to two lines so uneven school names can't make the rows ragged. */
.nsn-tiles.is-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}
@media (min-width: 640px)  { .nsn-tiles.is-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px)  { .nsn-tiles.is-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .nsn-tiles.is-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* Slider variant: .infinite-scroll-container supplies the flex row + scrolling. Its
   min-height is sized for game tiles, so override it for these shorter tiles. */
.nsn-tiles.is-slider { min-height: 0; align-items: stretch; }
.nsn-tiles.is-slider .nsn-tile { width: 150px; flex-shrink: 0; }

.nsn-tile {
	display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
	background: #fff; border: 1px solid #e2e8f0; padding: 0.75rem 0.5rem;
	text-decoration: none; transition: border-color 0.2s ease, transform 0.2s ease;
}
a.nsn-tile:hover, a.nsn-tile:focus-visible { border-color: #cc0000; transform: translateY(-2px); }
.nsn-tile__media { display: flex; align-items: center; justify-content: center; width: 100%; height: 72px; }
.nsn-tile__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.nsn-tile__label {
	font-size: 0.65rem; font-weight: 800; text-transform: uppercase; font-style: italic;
	letter-spacing: -0.02em; line-height: 1.2; text-align: center; color: #0f172a;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
	overflow: hidden;
}
/* Logos are usually dark-on-transparent, so keep the tile itself light in dark mode and
   only recolour the caption — same reasoning as the conference tiles this replaced. */
body.dark-mode .nsn-tile { background: #f1f5f9; border-color: #cbd5e1; }
body.dark-mode .nsn-tile__label { color: #0f172a; }

/* --- Social grid --- */
.social-grid-item {
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 2 / 1; transition: opacity 0.2s ease, transform 0.2s ease;
	color: #fff; padding: 0.5rem;
}
.social-grid-item:hover { opacity: 0.9; transform: scale(1.02); }
/* Footer variant: the homepage grid used wide 2:1 chips, but in the footer row these sit
   beside text links, so they need to be small and square instead of stretching. */
.nsn-footer-social { width: 34px; height: 34px; aspect-ratio: auto; padding: 0.45rem; }
.nsn-footer-social svg { width: 100%; height: 100%; }
.social-grid-item svg { width: 20px; height: 20px; }
.bg-fb { background-color: #1877F2; }
.bg-x { background-color: #000; }
.bg-insta { background-color: #C13584; }
.bg-tiktok { background-color: #25F4EE; }
.bg-tiktok svg { color: #000; }

/* --- Theme toggle --- */
.theme-toggle {
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 4px;
	transition: all 0.2s ease; color: rgba(255,255,255,0.6); border: none; background: transparent;
}
.theme-toggle:hover { color: #fff; background: rgba(255,255,255,0.1); }

/* --- Accessibility: 44x44 minimum tap targets for header icon controls --- */
.nsn-rd-header #nsn-rd-menu-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; min-height: 44px;
}

/* --- Temporary centred-masthead layout (client design review) ---
   Toggled by the "Centered Header" checkbox in Appearance → Homepage Theming,
   which adds body.nsn-header-centered. Stacks the top bar vertically and centres
   the NSN mark, brand/logo and controls, and centres the primary nav. Desktop only:
   below lg the header already collapses to the mobile hamburger layout. This is a
   review-only variant — remove the option + this block once the direction is settled. */
@media (min-width: 1024px) {
	body.nsn-header-centered .nsn-rd-topbar {
		flex-direction: column;
		justify-content: center;
		gap: 0.75rem;
		text-align: center;
		/* The default bar is a fixed h-20 (80px) sized for a single row; the vertical
		   stack needs room to grow, so override to auto height with breathing room. */
		height: auto;
		min-height: 5rem;
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
	}
	/* Each row (mark / brand / controls) centres and stops stretching. */
	body.nsn-header-centered .nsn-rd-topbar > div {
		flex: 0 0 auto;
		justify-content: center;
	}
	body.nsn-header-centered .nsn-rd-nav .nsn-rd-menu-wrap { display: flex; justify-content: center; }
	body.nsn-header-centered .nsn-mega { justify-content: center; }
}

/* --- Accessibility: visible focus rings on interactive elements --- */
/* Scoped to the whole redesign (body.nsn-redesign) so the header nav and every
   inner page (article / archive / player / 404) get a visible keyboard focus
   ring, not just the homepage. */
body.nsn-redesign a:focus-visible,
body.nsn-redesign button:focus-visible,
body.nsn-redesign input:focus-visible,
body.nsn-redesign select:focus-visible,
body.nsn-redesign textarea:focus-visible,
body.nsn-redesign [tabindex]:focus-visible,
body.nsn-redesign summary:focus-visible {
	outline: 3px solid #1d6fd6; /* ~5:1 on white — meets the 3:1 focus-indicator minimum */
	outline-offset: 2px;
}
/* On the dark header the ring must stay visible against #222 / brand colours. */
body.nsn-redesign .nsn-rd-header a:focus-visible,
body.nsn-redesign .nsn-rd-header button:focus-visible {
	outline-color: #fff;
}
/* In dark mode the page is dark, so use a lighter blue for ≥3:1 contrast. */
body.nsn-redesign.dark-mode a:focus-visible,
body.nsn-redesign.dark-mode button:focus-visible,
body.nsn-redesign.dark-mode input:focus-visible,
body.nsn-redesign.dark-mode select:focus-visible,
body.nsn-redesign.dark-mode [tabindex]:focus-visible {
	outline-color: #5aa2ff;
}

/* --- Accessibility: skip-to-content link --- */
.nsn-skip-link {
	position: absolute; left: 0; top: 0; z-index: 100;
	transform: translateY(-120%);
	background: #cc0000; color: #fff;
	padding: 0.75rem 1.25rem;
	font-weight: 900; font-style: italic; text-transform: uppercase;
	letter-spacing: 0.05em; font-size: 0.8125rem; text-decoration: none;
	transition: transform 0.15s ease;
}
.nsn-skip-link:focus { transform: translateY(0); outline: 3px solid #fff; outline-offset: -3px; }

@media (prefers-reduced-motion: reduce) {
	.ticker-move { animation: none; }
	.infinite-scroll-container { scroll-behavior: auto; }
	.game-tile { transition: none; }
	.nsn-skel .nsn-skel-img::after, .nsn-skel .nsn-skel-line::after { animation: none; }
	.animate-pulse { animation: none; }
	.animate-nsn-pulse { animation: none; } /* Live badge actually uses this class, not .animate-pulse */
	.video-placeholder .spinner { animation: none; }
	.nsn-stage-empty .nsn-stage-empty-cue i, .nsn-stage-empty .nsn-stage-empty-cue svg { animation: none; }
	.nsn-mega__caret { transition: none; }
}

/* ============================================================ *
 * Prose — styles the_content() on content pages / articles (custom-page mockup)
 * ============================================================ */
.nsn-prose { line-height: 1.6; color: #334155; }
.nsn-prose > *:first-child { margin-top: 0; }
.nsn-prose p { margin: 0 0 1.25rem; }
.nsn-prose p:first-of-type { font-size: 1.125rem; font-weight: 500; color: #0f172a; }
.nsn-prose h2 { font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: -0.02em; font-size: 1.5rem; line-height: 1.15; color: #0f172a; margin: 2rem 0 1rem; }
.nsn-prose h3 { font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: -0.02em; font-size: 1.2rem; color: #0f172a; margin: 1.75rem 0 0.75rem; }
.nsn-prose h4 { font-weight: 700; text-transform: uppercase; font-size: 1rem; color: #0f172a; margin: 1.5rem 0 0.5rem; }
.nsn-prose a { color: #cc0000; text-decoration: underline; text-underline-offset: 2px; }
.nsn-prose a:hover { color: #9d0e18; }
.nsn-prose ul, .nsn-prose ol { margin: 0 0 1.25rem; padding-left: 1.5rem; }
.nsn-prose ul { list-style: disc; }
.nsn-prose ol { list-style: decimal; }
.nsn-prose li { margin-bottom: 0.4rem; }
.nsn-prose blockquote { margin: 2rem 0; padding: 1.5rem; background: #f8fafc; border: 1px solid #e2e8f0; border-left: 4px solid #cc0000; font-style: italic; color: #475569; }
.nsn-prose blockquote p:first-of-type { font-size: inherit; font-weight: inherit; color: inherit; }
.nsn-prose img, .nsn-prose figure { max-width: 100%; height: auto; margin: 1.5rem 0; }
.nsn-prose figcaption { font-size: 0.8125rem; color: #64748b; font-style: italic; margin-top: 0.5rem; }
.nsn-prose hr { border: 0; border-top: 1px solid #e2e8f0; margin: 2rem 0; }
.nsn-prose strong { font-weight: 700; color: #0f172a; }
.nsn-prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.nsn-prose th, .nsn-prose td { border: 1px solid #e2e8f0; padding: 0.5rem 0.75rem; text-align: left; }
body.dark-mode .nsn-prose { color: #cbd5e1; }
body.dark-mode .nsn-prose h2, body.dark-mode .nsn-prose h3, body.dark-mode .nsn-prose h4,
body.dark-mode .nsn-prose p:first-of-type, body.dark-mode .nsn-prose strong { color: #f1f5f9; }
body.dark-mode .nsn-prose blockquote { background: #1e1e1e; border-color: #333; border-left-color: #cc0000; color: #cbd5e1; }

/* Search form on redesigned pages (the markup is shared site-wide). */
.nsn-redesign .search-form { display: flex; align-items: stretch; max-width: 100%; }
.nsn-redesign .search-form label { flex: 1; margin: 0; display: block; }
.nsn-redesign .search-form .search-field { width: 100%; padding: 0.65rem 1rem; border: 1px solid #cbd5e1; background: #fff; font-size: 0.875rem; color: #0f172a; }
.nsn-redesign .search-form .search-field:focus { outline: none; border-color: #cc0000; }
.nsn-redesign .search-form .search-submit { background: #cc0000; color: #fff; border: none; padding: 0 1.1rem; cursor: pointer; font-weight: 700; }
.nsn-redesign .search-form .search-submit:hover { background: #9d0e18; }
body.dark-mode.nsn-redesign .search-form .search-field { background: #2d2d2d; color: #fff; border-color: #444; }

/* Mobile nav: hamburger toggles #nsn-rd-menu; menu stacks vertically. */
@media (min-width: 1024px) {
	#nsn-rd-menu { display: block !important; }
	#nsn-rd-menu-toggle { display: none !important; }
}
@media (max-width: 1023px) {
	#nsn-rd-menu { display: none; }
	#nsn-rd-menu.is-open { display: block; }
}

/* ============================================================ *
 * ANNOUNCEMENT BAR (native; replaces the Simple Banner plugin)
 * Admin-managed in wp-admin → Announcement Bar. A distinct dark strip that reads
 * as its own bar (not part of the red header/title). When "sticky" it is rendered
 * inside the sticky <header>, so it stays visible on scroll for free.
 * ============================================================ */
.nsn-announcement { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.15); }
.nsn-announcement__inner {
	max-width: 1400px; margin: 0 auto; padding: 0.5rem 1rem;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: 0.25rem 0.75rem; text-align: center;
}
.nsn-announcement__msg { color: #fff; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.01em; }
.nsn-announcement__cta {
	color: #fff; font-weight: 800; font-size: 0.75rem; text-transform: uppercase;
	letter-spacing: 0.03em; text-decoration: underline; text-underline-offset: 2px;
	white-space: nowrap;
}
.nsn-announcement__cta:hover, .nsn-announcement__cta:focus-visible { color: rgba(255,255,255,0.82); }
/* Colour variants (keys mirror nsn_announcement_bar_colors() in PHP). White text
   clears WCAG AA on every option. */
.nsn-announcement--navy { background: #16213e; }
.nsn-announcement--gray { background: #2b2f36; }
.nsn-announcement--red  { background: #cc0000; }

/* ============================================================ *
 * PRIMARY MEGA MENU (click-to-open) — nsn_render_primary_mega_menu().
 * Reads the standard WP `main-menu`; groups by nesting (state / conference).
 * Click-only (no hover reveal), so it's keyboard- and touch-accessible.
 * ============================================================ */
.nsn-mega, .nsn-mega ul { list-style: none; margin: 0; padding: 0; }
.nsn-mega { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.nsn-mega__item { position: relative; }
.nsn-mega__top {
	background: none; border: 0; margin: 0; padding: 6px 2px; cursor: pointer; font: inherit;
	display: inline-flex; align-items: center; gap: 0.3rem;
	color: rgba(255,255,255,0.8); font-weight: 700; font-size: 0.6875rem;
	text-transform: uppercase; letter-spacing: -0.025em; text-decoration: none; white-space: nowrap;
}
.nsn-mega__top:hover, .nsn-mega__item--has-panel.is-open > .nsn-mega__toggle { color: #fff; }
.nsn-mega__caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; display: inline-block; transition: transform 0.15s ease; }
.nsn-mega__item--has-panel.is-open > .nsn-mega__toggle .nsn-mega__caret { transform: rotate(180deg); }
.nsn-mega__panel {
	display: none; position: absolute; top: 100%; left: 0; z-index: 60; margin-top: 0.5rem;
	background: #1f1f1f; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 16px 30px rgba(0,0,0,0.4);
	padding: 16px 18px; min-width: 240px; max-height: 75vh; overflow-y: auto;
}
.nsn-mega__item--has-panel.is-open > .nsn-mega__panel { display: block; }
.nsn-mega__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 24px; min-width: 520px; }
.nsn-mega__col-title { margin: 0 0 8px; color: #ff5a5a; font-size: 0.6875rem; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 6px; }
.nsn-mega__col-title a { color: inherit; text-decoration: none; }
.nsn-mega__col-title a:hover, .nsn-mega__col-title a:focus-visible { text-decoration: underline; }
.nsn-mega__flat { column-count: 3; column-gap: 24px; min-width: 520px; }
.nsn-mega__flat > li { break-inside: avoid; }
.nsn-mega__link { display: flex; align-items: center; gap: 0.625rem; padding: 8px; color: rgba(255,255,255,0.8); font-weight: 700; font-size: 0.6875rem; text-transform: uppercase; text-decoration: none; border-radius: 4px; }
.nsn-mega__link:hover { background: rgba(204,0,0,0.25); color: #fff; }
/* Injected school/conference logo chip (white chip, legible on the dark panel). */
.nsn-mega .nsn_member_menu_item span[style*="background-image"] {
	display: inline-block; flex-shrink: 0; box-sizing: border-box;
	width: 2rem; height: 2rem; padding: 3px;
	background-color: #fff; border-radius: 0.25rem; background-origin: content-box;
	background-position: center; background-repeat: no-repeat; background-size: contain;
	box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
/* Mobile: hamburger opens a FULL-SCREEN menu; panels become inline accordions.
   The overlay sits just below the (sticky) header — its height is measured into
   --nsn-hdr-h by nsn-redesign.js — and under the header's z-index so the toggle
   (now an ✕) stays tappable to close. */
@media (max-width: 1023px) {
	#nsn-rd-menu.is-open {
		position: fixed; left: 0; right: 0; bottom: 0; top: var( --nsn-hdr-h, 104px );
		z-index: 40; background: #222; overflow-y: auto;
		padding: 0.5rem 1.25rem 2rem; -webkit-overflow-scrolling: touch;
	}
	body.nsn-menu-open { overflow: hidden; }
	.nsn-mega { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
	.nsn-mega__item { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.08); }
	.nsn-mega__top { display: flex; width: 100%; justify-content: space-between; padding: 0.95rem 0.25rem; font-size: 0.95rem; }
	.nsn-mega__panel { position: static; box-shadow: none; border: 0; background: transparent; padding: 0 0 0.75rem 0.75rem; min-width: 0; max-height: none; margin-top: 0; }
	.nsn-mega__cols, .nsn-mega__flat { display: block; column-count: 1; min-width: 0; }
	.nsn-mega__col { margin-bottom: 0.5rem; }
	.nsn-mega__link { font-size: 0.85rem; padding: 0.6rem 0.5rem; }
	.nsn-mega .nsn_member_menu_item span[style*="background-image"] { width: 1.75rem; height: 1.75rem; }
}

/* Empty-slider message ("No broadcasts to show.") adapts to the games-surface colour
   — the entity's brand colour (via --nsn-schedule-fg) or the light/dark default — so it
   never sits low-contrast (e.g. dark grey on a dark brand tint). */
.nsn-empty-msg { color: var( --nsn-schedule-fg, #64748b ); }
body.dark-mode .nsn-empty-msg { color: var( --nsn-schedule-fg, #cbd5e1 ); }

/* Headings/text placed directly on the entity page background (not inside a card)
   use a contrast-safe colour against the brand back-colour (--nsn-page-fg), with
   light/dark defaults so they're never dark-on-dark (e.g. a conference heading on a
   dark brand background in light mode). */
.nsn-page-heading { color: var( --nsn-page-fg, #0f172a ); }
body.dark-mode .nsn-page-heading { color: var( --nsn-page-fg, #f1f5f9 ); }

/* NSN-logo placeholder for posts/blogs with no featured image. */
.nsn-thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #1e293b; }
.nsn-thumb-placeholder img { max-height: 56%; max-width: 64%; object-fit: contain; opacity: 0.9; }

/* ============================================================ *
 * PLAYER PAGE (single broadcast pages: conference/college/HS/sponsor)
 * ============================================================ */

/* Header center label + nav bar */
.header-center-logo {
	display: flex; align-items: center; justify-content: center;
	height: 100px; flex: 0 1 400px;
	background: rgba(255,255,255,0.05); border-radius: 4px; margin: 0 20px;
}

/* Games-list surface — background behind the Upcoming / Video Archives cards on
   school & conference pages. Admin-set per entity via the "Games List Background"
   field (exposed as --nsn-schedule-bg in the header); falls back to the neutral card
   surface when unset. Only this decorative surface is tinted — the game cards stay
   white and the section header strips stay light-grey, so no text ever sits on the
   custom colour and contrast is preserved on any colour (accessibility). */
.nsn-schedule-surface { background-color: var(--nsn-schedule-bg, #fff); }
body.dark-mode .nsn-schedule-surface { background-color: var(--nsn-schedule-bg, #1e1e1e); }

/* Now-playing rail tinted with the entity's games-list colour, with auto-contrast text
   (white on dark brand colours, dark on light — computed into --nsn-schedule-fg). Overrides
   the baked-in slate text colours, including the now-playing content re-rendered by JS. */
body.nsn-redesign .nsn-rail-tint { background-color: var(--nsn-schedule-bg) !important; }
body.nsn-redesign .nsn-rail-tint h1,
body.nsn-redesign .nsn-rail-tint p,
body.nsn-redesign .nsn-rail-tint .text-slate-900,
body.nsn-redesign .nsn-rail-tint .text-slate-800,
body.nsn-redesign .nsn-rail-tint .text-slate-700,
body.nsn-redesign .nsn-rail-tint .text-slate-500,
body.nsn-redesign .nsn-rail-tint .text-espn-red,
body.nsn-redesign .nsn-rail-tint svg { color: var(--nsn-schedule-fg) !important; }

/* 16:9 video stage */
.video-wrapper {
	position: relative; width: 100%; padding-bottom: 56.25%; background: #000;
}
.video-wrapper > iframe,
.video-wrapper > .video-placeholder,
.video-wrapper .nsn-blueframe-player,
.video-wrapper .player-box,
.video-wrapper .blueframe-embed-wrapper,
.video-wrapper .blueframe-embed-wrapper iframe {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}
.video-placeholder {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 1rem; color: rgba(255,255,255,0.5);
}
.video-placeholder .spinner {
	width: 4rem; height: 4rem; border: 4px solid rgba(255,255,255,0.2);
	border-top-color: #cc0000; border-radius: 9999px; animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Idle stage: no game auto-loaded yet. A static play glyph (not the spinner) so it
   never implies something is loading when nothing is. */
.video-placeholder.nsn-stage-idle { gap: 0.75rem; }
.nsn-stage-idle .nsn-stage-idle-icon { width: 3.5rem; height: 3.5rem; color: rgba( 255, 255, 255, 0.55 ); }

/* Branded empty stage — shown when a site has nothing live/upcoming and no FREE
   archived game to auto-load (e.g. an all-PPV school). Reads as intentional, not
   broken, and points the viewer at the schedule below. Light text on the black
   stage keeps contrast well above WCAG AA on any school brand colour. */
.video-placeholder.nsn-stage-empty {
	gap: 0.4rem; padding: 1.5rem; text-align: center; color: rgba(255,255,255,0.9);
}
.nsn-stage-empty .nsn-stage-empty-icon { width: 3rem; height: 3rem; color: #cc0000; margin-bottom: 0.25rem; }
.nsn-stage-empty .nsn-stage-empty-name {
	margin: 0; font-size: 0.625rem; font-weight: 900; font-style: italic;
	text-transform: uppercase; letter-spacing: 0.15em; color: #ff4d4d;
}
.nsn-stage-empty .nsn-stage-empty-title {
	margin: 0; font-size: 1.05rem; font-weight: 900; font-style: italic; line-height: 1.1;
	text-transform: uppercase; letter-spacing: -0.02em; color: #fff;
}
.nsn-stage-empty .nsn-stage-empty-cue {
	display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.15rem;
	font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.05em; color: rgba(255,255,255,0.6);
}
.nsn-stage-empty .nsn-stage-empty-cue i, .nsn-stage-empty .nsn-stage-empty-cue svg {
	width: 1rem; height: 1rem; animation: nsn-cue-bounce 1.6s ease-in-out infinite;
}
@keyframes nsn-cue-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* "Now Playing" info-rail ad units (180x150) */
.ad-unit-grid {
	width: 180px; height: 150px; background-color: #fff;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid #d1d5db; color: #9ca3af; position: relative;
	font-weight: 700; flex-shrink: 0; overflow: hidden; margin: 0 auto;
}
body.dark-mode .ad-unit-grid { background-color: #1a1a1a; border-color: #333; }
.ad-unit-grid::before, .ad-unit-grid::after {
	content: ''; position: absolute; width: 140%; height: 1px; background-color: #e5e7eb; top: 50%; left: -20%;
}
body.dark-mode .ad-unit-grid::before, body.dark-mode .ad-unit-grid::after { background-color: #333; }
.ad-unit-grid::before { transform: rotate(45deg); }
.ad-unit-grid::after { transform: rotate(-45deg); }
.ad-unit-grid span {
	background: #fff; padding: 2px 6px; z-index: 1; font-size: 0.5rem;
	text-transform: uppercase; border: 1px solid #e5e7eb;
}
body.dark-mode .ad-unit-grid span { background: #1a1a1a; border-color: #333; }
/* Real DFP creative inside an info-rail ad slot */
.ad-unit-grid.nsn-ad-slot { width: 180px; height: 150px; }
.ad-unit-grid.nsn-ad-slot > div { width: 100%; height: 100%; }

/* The reused Blueframe component: keep only the player box in the stage; its
   built-in schedule + filter/PiP controls are hidden (we render fresh sliders).
   The holder is hidden so nothing flashes before nsn-player.js relocates the box. */
body.nsn-redesign .nsn-bf-holder { display: none; }
.video-wrapper .nsn-blueframe-controls,
.video-wrapper .nsn-blueframe-schedule { display: none !important; }

/* (.conference-tile rules removed — the hard-coded member strip they styled was
   replaced by the Tile Block; see .nsn-tile above.) */