/*
 * Albinfo TV header + page-level dark theme.
 *
 * Two scopes:
 *   1. `.c-tv-header` — the header element itself (always dark, regardless of
 *      where it's rendered).
 *   2. `.is-tv-theme` — body-level dark theme applied by `header-tv.php`.
 *      This recolors the page bg + overrides component tokens that would
 *      otherwise render dark-on-dark (section headers, link colors, etc.).
 *
 * Mirrors Figma 122:3133 (80px header) and 122:4183 (64px sticky variant).
 */

/* ============================================================
   Header element
   ============================================================ */

.c-tv-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--c-purple-dark);
	color: var(--c-light);
	box-shadow: 0 4px 2px rgba(37, 37, 43, 0.10);
	transition: padding-block 200ms ease;
}

.c-tv-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	min-height: 80px;
}

/* Sticky compact (Figma 122:4183 — 64px). Toggled via JS once the user
   scrolls past the original header height. */
.c-tv-header[data-tv-compact="true"] .c-tv-header__inner {
	min-height: 64px;
}

.c-tv-header__hamb,
.c-tv-header__search {
	all: unset;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-sm);
	color: var(--c-light);
	cursor: pointer;
}
.c-tv-header__hamb:focus-visible,
.c-tv-header__search:focus-visible {
	outline: 2px solid var(--c-light);
	outline-offset: 2px;
}

/* Nav block: wordmark + links share a row, take remaining horizontal space. */
.c-tv-header__nav {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.c-tv-header__wordmark {
	color: var(--c-light);
	font-family: var(--ff-base);
	font-weight: var(--fw-bold);
	font-size: var(--fs-h1);          /* 36 */
	line-height: var(--lh-h1);        /* 42 */
	letter-spacing: -1.44px;
	text-decoration: none;
	white-space: nowrap;
}
.c-tv-header__wordmark-accent {
	color: var(--c-red);              /* subtle brand accent on ".tv" */
}

.c-tv-header__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-wrap: nowrap;
	overflow: hidden;
}
.c-tv-header__links li { display: inline-flex; }
.c-tv-header__links a {
	display: inline-flex;
	align-items: center;
	padding: 8px 10px;
	color: var(--c-light);
	font-family: var(--ff-base);
	font-size: var(--fs-link-18);     /* 18 */
	line-height: 18px;
	font-weight: var(--fw-semibold);
	letter-spacing: -0.6px;
	text-decoration: none;
	white-space: nowrap;
	border-radius: var(--radius-sm);
	transition: background-color 150ms ease;
}
.c-tv-header__links a:hover,
.c-tv-header__links a:focus-visible {
	background: rgba(255, 255, 255, 0.08);
}
.c-tv-header__links .current-menu-item a,
.c-tv-header__links [aria-current="page"] {
	background: rgba(255, 255, 255, 0.10);
}

/* Search icon sits at the far right. */
.c-tv-header__search { margin-left: auto; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 900px) {
	.c-tv-header__wordmark { font-size: 24px; line-height: 28px; }
	.c-tv-header__links a  { font-size: 14px; padding: 6px 8px; letter-spacing: -0.3px; }
}
@media (max-width: 700px) {
	/* Hide subnav on small screens; user opens it via hamburger. */
	.c-tv-header__links { display: none; }
	.c-tv-header__inner { gap: var(--space-4); }
}

/* ============================================================
   Body-level dark theme (applied by header-tv.php as `is-tv-theme`)
   ============================================================ */

body.is-tv-theme {
	background: var(--c-purple-dark);
	color: var(--c-light);
}

/* Section header — defaults to black; flip to white on dark theme. */
body.is-tv-theme .c-section-header__title,
body.is-tv-theme .c-section-header__more,
body.is-tv-theme .c-section-header__arrow { color: var(--c-light); }
body.is-tv-theme .c-section-header__rule  { background: rgba(255, 255, 255, 0.16); }
body.is-tv-theme .c-section-header__bullet { background: var(--c-red); }

/* Generic links inside TV body should stay readable on dark bg. */
body.is-tv-theme a { color: var(--c-light); }

/* Card surfaces look fine because reels/podcasts are already dark; but if
   any white-background component sneaks onto the TV page, give it a soft
   panel rather than a hard white block. */
body.is-tv-theme .c-card-vertical,
body.is-tv-theme .c-card-horizontal {
	background: rgba(255, 255, 255, 0.04);
	color: var(--c-light);
}
body.is-tv-theme .c-card-vertical__title,
body.is-tv-theme .c-card-horizontal__title { color: var(--c-light); }
body.is-tv-theme .c-card-vertical__meta,
body.is-tv-theme .c-card-horizontal__meta { color: var(--c-grey-medium); }