/* ============================================================
   SavoiaTV — site-wide visual shell (v0.4.0)
   ------------------------------------------------------------
   Branded header, primary navigation (desktop + mobile), and
   footer, layered on top of GeneratePress's normal markup via
   CSS only. Uses the design tokens from style.css. No parent
   files are edited; the WordPress Custom Logo and the
   WordPress/GeneratePress menu system continue to work and stay
   configurable from wp-admin.

   A few branding backgrounds/colours use !important so they
   reliably win over GeneratePress's Customizer-generated inline
   CSS (which prints in <head> after this stylesheet). These are
   confined to the shell (header / nav / footer) and never touch
   the approved content templates.
   ============================================================ */

/* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */
.site-header {
	background-color: var(--stv-header-bg) !important;
	border-bottom: 1px solid var(--stv-color-border);
}

/* Keep the header row from ever overflowing horizontally. */
.site-header .inside-header {
	flex-wrap: wrap;
	box-sizing: border-box;
	max-width: 100%;
}

/* Custom Logo (WordPress/GeneratePress). Stays proportional and compact;
   never a hard-coded image — whatever logo the site sets is used. */
.site-logo img,
.site-header .header-image,
.site-header img.is-logo-image {
	max-height: 56px;
	width: auto;
	height: auto;
}

/* Site Title / tagline fallback when no Custom Logo is set. */
.main-title,
.site-title {
	font-weight: 700;
	letter-spacing: 0.02em;
}

.main-title a,
.site-title a {
	color: var(--stv-color-heading);
}

.site-description {
	color: var(--stv-color-silver);
}

/* ------------------------------------------------------------
   Primary navigation — desktop
   ------------------------------------------------------------ */
.main-navigation {
	background-color: var(--stv-nav-bg) !important;
}

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle {
	color: var(--stv-nav-link) !important;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.9rem;
	transition: color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

/* Hover / focus */
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus,
.main-navigation .main-nav ul li:hover > a {
	color: var(--stv-nav-link-active) !important;
}

/* Current item — restrained blue underline indicator */
.main-navigation .main-nav ul li[class*="current-menu"] > a {
	color: var(--stv-nav-link-active) !important;
	box-shadow: inset 0 -3px 0 var(--stv-nav-accent);
}

/* Keyboard focus stays clearly visible on the dark bar */
.main-navigation .main-nav ul li a:focus-visible {
	outline: 2px solid var(--stv-color-blue-hover);
	outline-offset: -2px;
}

/* ------------------------------------------------------------
   Sub-menus (nested items, if added later)
   ------------------------------------------------------------ */
.main-navigation .main-nav ul ul,
.main-navigation .sub-menu {
	background-color: var(--stv-color-surface) !important;
	border: 1px solid var(--stv-color-border);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.main-navigation .main-nav ul ul li a {
	text-transform: none;
	letter-spacing: 0.02em;
	font-size: 0.9rem;
}

/* ------------------------------------------------------------
   Primary navigation — mobile
   ------------------------------------------------------------ */
.main-navigation .menu-toggle {
	text-transform: uppercase;
}

/* The toggled mobile panel sits on the dark surface, full width. */
.main-navigation.toggled .main-nav > ul,
.main-navigation .main-nav > ul.toggled {
	background-color: var(--stv-nav-bg) !important;
	max-width: 100%;
	box-sizing: border-box;
}

@media (max-width: 768px) {
	/* Compact logo on small screens. */
	.site-logo img,
	.site-header .header-image,
	.site-header img.is-logo-image {
		max-height: 40px;
	}

	/* Adequate tap targets and clear separators for stacked items. */
	.main-navigation .main-nav ul li a {
		padding-top: 0.9rem;
		padding-bottom: 0.9rem;
		border-top: 1px solid var(--stv-color-border);
	}

	/* Nested items are indented so hierarchy reads clearly. */
	.main-navigation .main-nav ul ul li a {
		padding-left: 2rem;
	}
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------
   Only background / colour / padding here — the v0.3.4 fluid-width
   rules in style.css (min-width:0, flex-wrap, fluid inner width)
   are intentionally left untouched so the footer keeps tracking
   the viewport.
   ------------------------------------------------------------ */

/* SavoiaTV Footer widget area (rendered before the footer bar; the PHP
   guard means it outputs nothing — and no empty space — when it has no
   widgets). */
.stv-widget-area--footer {
	background-color: var(--stv-footer-bg);
}

/* GeneratePress footer bar → SavoiaTV footer */
.site-info {
	background-color: var(--stv-footer-bg) !important;
	color: var(--stv-color-silver) !important;
	border-top: 1px solid var(--stv-color-border);
	padding-top: var(--stv-space-md);
	padding-bottom: var(--stv-space-md);
}

.site-info a {
	color: var(--stv-color-silver);
}

.site-info a:hover,
.site-info a:focus {
	color: var(--stv-color-blue-hover);
}

.stv-footer__copyright {
	color: var(--stv-color-silver);
	letter-spacing: 0.02em;
}

/* ============================================================
   Sticky footer (v0.5.8)
   ------------------------------------------------------------
   Document-height layout so the footer sits at the bottom of the
   viewport on short pages and is pushed down on long ones. Uses
   GeneratePress's own #page/.site + #content structure; no fixed
   positioning. The v0.3.4 footer fluid-width rules are untouched.
   ============================================================ */
.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site #content,
.site .site-content {
	flex: 1 0 auto;
}

.site .site-footer {
	flex-shrink: 0;
}

/* ============================================================
   Footer links (v0.5.8)
   ============================================================ */
.stv-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.2rem 0;
	text-align: center;
}

/* Each footer entry (copyright + links) is an individual wrappable flex item. */
.stv-footer__item {
	white-space: nowrap;
}

.stv-footer__link {
	color: var(--stv-color-silver);
	text-decoration: none;
}

.stv-footer__link:hover,
.stv-footer__link:focus {
	color: var(--stv-color-blue-hover);
	text-decoration: underline;
}

/* CSS-generated separators TRAIL each item (except the last), so a separator
   can never be orphaned at the start of a wrapped line. No raw separator text
   exists in the markup. */
.stv-footer__item:not(:last-child)::after {
	content: "|";
	padding: 0 0.55rem;
	color: var(--stv-color-border-strong);
}

/* ============================================================
   Consistent mobile content gutters (v0.5.8)
   ------------------------------------------------------------
   One coherent horizontal gutter for content templates/pages on
   phones. Archives already carry their own gutter (archive.css);
   here we cover the blog, ordinary Pages (About, Privacy, Terms,
   Contact, Where to Watch) and the schedule Page, plus the
   homepage sections. SavoiaTV single templates are intentionally
   excluded — their spacing already works.
   ============================================================ */
@media (max-width: 600px) {
	.stv-blog,
	.stv-entry,
	.stv-home {
		padding-left: 18px;
		padding-right: 18px;
	}
}

/* ============================================================
   Pagination (v0.5.9) — archives + blog
   ------------------------------------------------------------
   Scoped to the containers the pagination actually renders inside
   (.stv-archive / .stv-blog), so the styling applies regardless
   of the exact wrapper class WordPress/GeneratePress emits
   (the_posts_pagination -> .navigation.pagination, which GP wraps
   as .paging-navigation). Element-qualified .page-numbers rules
   win over the parent theme's defaults. URLs/markup/a11y are
   unchanged — this is styling only.
   ============================================================ */
.stv-archive .nav-links,
.stv-blog .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin-top: var(--stv-space-lg);
}

.stv-archive .page-numbers,
.stv-blog .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.75rem;
	color: var(--stv-color-silver);
	text-decoration: none;
	background-color: var(--stv-color-surface);
	border: 1px solid var(--stv-color-border);
	border-radius: var(--stv-radius-sm);
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.stv-archive a.page-numbers:hover,
.stv-archive a.page-numbers:focus,
.stv-blog a.page-numbers:hover,
.stv-blog a.page-numbers:focus {
	color: var(--stv-color-blue-ink);
	background-color: var(--stv-color-blue);
	border-color: var(--stv-color-blue);
}

.stv-archive .page-numbers.current,
.stv-blog .page-numbers.current {
	color: var(--stv-color-blue-ink);
	background-color: var(--stv-color-blue);
	border-color: var(--stv-color-blue);
	font-weight: 700;
}

.stv-archive .page-numbers.dots,
.stv-blog .page-numbers.dots {
	background: transparent;
	border-color: transparent;
	color: var(--stv-color-muted);
	min-width: auto;
	padding: 0 0.35rem;
}

/* ============================================================
   Where to Watch — reusable live-player region (v0.5.8)
   ------------------------------------------------------------
   Dark placeholder with a blue accent, sized for later
   replacement by a responsive iframe/player. Embeds nothing and
   never autoplays.
   ============================================================ */
.stv-live-player {
	margin: var(--stv-space-md) 0 var(--stv-space-lg);
}

.stv-live-player__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--stv-space-lg);
	background:
		radial-gradient(circle at 50% 40%, var(--stv-color-surface-2), var(--stv-color-bg));
	border: 1px solid var(--stv-color-border);
	border-left: 3px solid var(--stv-color-blue);
	border-radius: var(--stv-radius);
	overflow: hidden;
}

.stv-live-player__inner {
	max-width: 40ch;
}

.stv-live-player__badge {
	display: inline-block;
	margin-bottom: var(--stv-space-sm);
	padding: 0.2rem 0.7rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--stv-color-blue-ink);
	background-color: var(--stv-color-blue);
	border-radius: 999px;
}

.stv-live-player__title {
	margin: 0 0 0.4rem;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--stv-color-heading);
}

.stv-live-player__note {
	margin: 0;
	color: var(--stv-color-silver);
	line-height: 1.6;
}

/* ============================================================
   Custom 404 (v0.5.8)
   ------------------------------------------------------------
   Dark, full-width, centered. Strip GeneratePress's default
   white content panel on the 404 body only (same technique as
   the schedule Page wrapper).
   ============================================================ */
.stv-404-page #primary,
.stv-404-page .content-area,
.stv-404-page #main,
.stv-404-page .site-main,
.stv-404-page article,
.stv-404-page .inside-article,
.stv-404-page .entry-content {
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
}

.stv-404 {
	max-width: 60ch;
	margin: 0 auto;
	padding: var(--stv-space-xl) var(--stv-space-md);
	text-align: center;
	color: var(--stv-color-text);
}

.stv-404__title {
	margin: 0 0 var(--stv-space-md);
	color: var(--stv-color-heading);
}

.stv-404__text {
	margin: 0 0 var(--stv-space-lg);
	color: var(--stv-color-silver);
	line-height: 1.7;
}

.stv-404__actions {
	margin: 0 0 var(--stv-space-md);
}

.stv-404__sub {
	margin: 0;
	color: var(--stv-color-muted);
	font-size: 0.95rem;
}

/* 404 button — self-contained so it renders without single.css. */
.stv-404 .stv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.7rem 1.4rem;
	line-height: 1;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--stv-radius-sm);
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.stv-404 .stv-btn--primary {
	background-color: var(--stv-color-blue);
	color: var(--stv-color-blue-ink);
}

.stv-404 .stv-btn--primary:hover,
.stv-404 .stv-btn--primary:focus {
	background-color: var(--stv-color-blue-hover);
	color: var(--stv-color-blue-ink);
}

/* Live-player badge states (v0.5.9). Offline is the current placeholder state;
   the markup carries a data-status + modifier class so a real live-state source
   can flip it to "live" later without restyling. */
.stv-live-player__badge--offline {
	background-color: var(--stv-color-surface-2);
	color: var(--stv-color-muted);
	border: 1px solid var(--stv-color-border-strong);
}

.stv-live-player__badge--live {
	background-color: var(--stv-color-blue);
	color: var(--stv-color-blue-ink);
	border: 1px solid var(--stv-color-blue);
}

/* ============================================================
   Live Player — external embed (v0.6.4)
   ------------------------------------------------------------
   Controlled, responsive 16:9 iframe container. Width 100%, height
   derives from the ratio (no fixed heights, no CLS), dark neutral
   background behind the provider's player.
   ============================================================ */
.stv-live-player--active {
	margin: var(--stv-space-md) 0 var(--stv-space-lg);
}

.stv-live-player__embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--stv-color-bg-elevated);
	border: 1px solid var(--stv-color-border);
	border-radius: var(--stv-radius);
}

.stv-live-player__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Optional poster behind the OFFLINE fallback. */
.stv-live-player--has-poster .stv-live-player__frame {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Keep the fallback text readable over a poster image. */
.stv-live-player--has-poster .stv-live-player__frame::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(8, 9, 11, 0.66);
}

.stv-live-player--has-poster .stv-live-player__inner {
	position: relative;
	z-index: 1;
}