/**
 * Single On-Air Show Template — Scoped Styling
 *
 * Loaded only on /on-air-show/<slug>/ pages by the
 * Radio_On_Air_Staff_Single_Template class. Designed to coexist with any
 * theme; selectors are prefixed `.roas-*` and color tokens fall back
 * gracefully when Elementor's global tokens aren't present.
 */

.roas-single {
	--roas-accent: var(--e-global-color-accent, #d73a49);
	--roas-primary: var(--e-global-color-primary, #0f172a);
	/* Dark by default because these sit on white cards. The Settings page
	   switch overrides them with Elementor's Text/Secondary colours. */
	--roas-text: #1f2937;
	--roas-muted: #64748b;
	--roas-bg: #ffffff;
	--roas-bg-soft: #f8fafc;
	--roas-border: rgba(15, 23, 42, 0.08);
	--roas-radius: 16px;
	--roas-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 30px rgba(15, 23, 42, .07);
	--roas-shadow-hover: 0 2px 4px rgba(15, 23, 42, .06), 0 20px 45px rgba(15, 23, 42, .12);

	--roas-font-title: var(--e-global-typography-primary-font-family, inherit);
	--roas-font-text: var(--e-global-typography-text-font-family, inherit);

	color: var(--roas-text);
	font-family: var(--roas-font-text);
}

/* =====================================================
 * Hero
 * ===================================================== */
.roas-hero {
	position: relative;
	max-height: 300px;
	padding: 28px 24px;
	overflow: hidden;
	isolation: isolate;
	color: #fff;
	display: flex;
	align-items: center;
}

.roas-hero--no-image {
	background:
		radial-gradient(120% 80% at 0% 0%, rgba(215, 58, 73, 0.35) 0%, transparent 60%),
		linear-gradient(135deg, #1f2937 0%, #0b1220 100%);
}

.roas-hero__bg {
	position: absolute;
	inset: 0;
	background-image: var(--roas-hero-bg, none);
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	z-index: -2;
}

.roas-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(15, 23, 42, 0.25) 0%, rgba(15, 23, 42, 0.55) 50%, rgba(15, 23, 42, 0.94) 100%),
		radial-gradient(60% 60% at 20% 20%, rgba(215, 58, 73, 0.15) 0%, transparent 70%);
	z-index: -1;
}

.roas-hero__inner {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.roas-hero__content {
	display: flex;
	flex-direction: column;
	gap: 18px;
	flex: 1 1 auto;
	min-width: 0;
}

/* ---- Host portrait (head shot) ---- */
.roas-hero__portrait {
	flex: 0 0 auto;
	width: clamp(120px, 22vw, 200px);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.08);
	border: 4px solid rgba(255, 255, 255, 0.92);
	box-shadow:
		0 10px 30px rgba(0, 0, 0, 0.45),
		0 0 0 1px rgba(0, 0, 0, 0.06) inset;
}

.roas-hero__portrait-img,
.roas-hero__portrait img {
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	object-position: center;
	display: block;
	border-radius: 50%;
}

@media (min-width: 720px) {
	.roas-hero__inner {
		/* HTML order is [portrait, content]. On wider screens we use
		   row-reverse so content sits on the left and the round portrait
		   sits on the right next to the title. On mobile the default
		   column flow keeps the portrait above the heading. */
		flex-direction: row-reverse;
		align-items: flex-end;
		justify-content: flex-end;
		gap: 36px;
	}
}

/* Scoped + !important so Elementor kit / theme h1 rules and accidental
 * dark "Page title" colors cannot wash out text on the photo banner. */
.roas-single .roas-hero .roas-hero__title {
	margin: 0;
	color: #fff !important;
	font-family: var(--roas-font-title);
	font-weight: 800;
	font-size: clamp(2.25rem, 5vw, 4rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.roas-single .roas-hero .roas-hero__summary {
	margin: 0;
	max-width: 70ch;
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.92) !important;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* ---- Status pill (Live / Next / Default) ---- */
.roas-status {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px 8px 14px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--roas-primary);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 999px;
	backdrop-filter: blur(10px) saturate(160%);
	-webkit-backdrop-filter: blur(10px) saturate(160%);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
	width: fit-content;
}

.roas-status .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
	color: inherit;
}

.roas-status--live {
	color: #b91c1c;
	background: #fff;
}

.roas-status__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #ef4444;
	box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
	animation: roas-pulse 1.6s ease-out infinite;
}

@keyframes roas-pulse {
	0%   { box-shadow: 0 0 0 0   rgba(239, 68, 68, 0.7); }
	70%  { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
	100% { box-shadow: 0 0 0 0   rgba(239, 68, 68, 0); }
}

.roas-status--default {
	color: #92400e;
}

/* ---- Stat strip ---- */
.roas-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 6px 0 0;
}

.roas-stat {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 12px;
	padding: 12px 18px;
	min-width: 130px;
}

.roas-stat dt {
	margin: 0 0 4px;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

.roas-stat dd {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 800;
	line-height: 1;
	color: #fff;
}

/* ---- Hero socials ----
 * Near-white pills with dark glyphs so icons stay readable on any photo.
 * Dashicons get color: inherit !important so Elementor accent cannot
 * recolor them to a low-contrast pink on a dark translucent circle. */
.roas-hero__socials {
	display: flex;
	gap: 10px;
	margin-top: 6px;
}

.roas-single .roas-hero .roas-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid rgba(255, 255, 255, 0.95);
	color: #0f172a;
	text-decoration: none;
	transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.roas-single .roas-hero .roas-social:hover,
.roas-single .roas-hero .roas-social:focus-visible {
	background: var(--roas-accent);
	border-color: var(--roas-accent);
	color: #fff;
	transform: translateY(-2px) scale(1.05);
}

.roas-single .roas-hero .roas-social .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
	color: inherit !important;
}

/* =====================================================
 * Body grid
 * ===================================================== */
.roas-body {
	background: var(--roas-bg-soft);
	padding: 60px 24px 80px;
}

.roas-body__inner {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 40px;
}

@media (max-width: 900px) {
	.roas-body {
		padding: 40px 16px 60px;
	}
	.roas-body__inner {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* =====================================================
 * Sections
 * ===================================================== */
.roas-section {
	background: var(--roas-bg);
	border: 1px solid var(--roas-border);
	border-radius: var(--roas-radius);
	padding: 32px;
	box-shadow: var(--roas-shadow);
	margin-bottom: 28px;
}

.roas-section:last-child {
	margin-bottom: 0;
}

.roas-section__heading {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 22px;
	font-family: var(--roas-font-title);
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--roas-primary);
	letter-spacing: -0.01em;
}

.roas-section__heading .dashicons {
	color: var(--roas-accent);
	font-size: 22px;
	width: 22px;
	height: 22px;
}

.roas-bio {
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--roas-text);
}

/* Beat theme and Elementor kit rules that colour paragraphs directly. */
.roas-single .roas-bio p,
.roas-single .roas-bio li {
	color: inherit;
}

.roas-bio > *:first-child {
	margin-top: 0;
}

.roas-bio > *:last-child {
	margin-bottom: 0;
}

/* =====================================================
 * Schedule grid (single-show specific)
 * ===================================================== */
.roas-schedule-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 14px;
}

.roas-slot {
	position: relative;
	background: var(--roas-bg-soft);
	border: 1px solid var(--roas-border);
	border-radius: 12px;
	padding: 18px 16px;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.roas-slot:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
	border-color: rgba(15, 23, 42, 0.16);
}

.roas-slot--live {
	background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
	border-color: rgba(239, 68, 68, 0.4);
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08);
}

.roas-slot__day {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--roas-muted);
	margin-bottom: 6px;
}

.roas-slot--live .roas-slot__day {
	color: #b91c1c;
}

.roas-slot__time {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--roas-primary);
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.roas-slot__sep {
	opacity: 0.4;
	font-weight: 400;
}

.roas-slot__tbd {
	color: var(--roas-muted);
	font-style: italic;
	font-weight: 500;
}

.roas-slot__live-pill {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border-radius: 999px;
	background: #ef4444;
	color: #fff;
	font-size: 0.62rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.roas-slot__live-dot {
	width: 6px;
	height: 6px;
	background: #fff;
	border-radius: 50%;
	animation: roas-blink 1.4s linear infinite;
}

@keyframes roas-blink {
	50% { opacity: 0.3; }
}

/* =====================================================
 * Sidebar cards
 * ===================================================== */
.roas-side {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.roas-card {
	background: var(--roas-bg);
	border: 1px solid var(--roas-border);
	border-radius: var(--roas-radius);
	padding: 22px;
	box-shadow: var(--roas-shadow);
}

.roas-card__heading {
	margin: 0 0 16px;
	font-family: var(--roas-font-title);
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--roas-muted);
}

.roas-card__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	color: var(--roas-text);
	text-decoration: none;
	border-bottom: 1px solid var(--roas-border);
	transition: color .15s ease;
}

.roas-card__row:last-child {
	border-bottom: none;
}

.roas-card__row:hover {
	color: var(--roas-accent);
}

.roas-card__row .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
	color: var(--roas-muted);
	flex-shrink: 0;
	transition: color .15s ease;
}

.roas-card__row:hover .dashicons {
	color: var(--roas-accent);
}

.roas-card__row-label {
	font-size: 0.95rem;
	word-break: break-word;
}

/* ---- Sponsor card ---- */
.roas-card--sponsor {
	text-align: center;
}

.roas-sponsor__link,
.roas-sponsor__logo-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.roas-sponsor__logo {
	display: block;
	height: auto;
	width: auto;
	max-width: 100%;
	max-height: 72px;
	object-fit: contain;
	margin: 0 auto;
}

.roas-sponsor__link:hover .roas-sponsor__logo,
.roas-sponsor__link:focus-visible .roas-sponsor__logo {
	opacity: 0.85;
}

.roas-sponsor__name {
	display: block;
	margin-top: 10px;
	font-size: 1rem;
	font-weight: 600;
	color: var(--roas-text);
	text-decoration: none;
	word-break: break-word;
}

a.roas-sponsor__name:hover,
a.roas-sponsor__name:focus-visible {
	color: var(--roas-accent);
}

.roas-card--sponsor .roas-sponsor__logo + .roas-sponsor__name {
	margin-top: 12px;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--roas-muted);
}

/* ---- Next broadcast card ---- */
.roas-card--next .roas-card__heading {
	color: var(--roas-accent);
}

.roas-next__day {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--roas-muted);
	margin-bottom: 4px;
}

.roas-next__time {
	font-family: var(--roas-font-title);
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--roas-primary);
	margin-bottom: 8px;
}

.roas-next__sep {
	opacity: 0.4;
	margin: 0 4px;
}

.roas-next__countdown {
	display: inline-block;
	background: rgba(215, 58, 73, 0.08);
	color: var(--roas-accent);
	font-weight: 700;
	font-size: 0.85rem;
	padding: 5px 12px;
	border-radius: 999px;
}

/* ---- Related shows ---- */
.roas-related {
	list-style: none;
	padding: 0;
	margin: 0;
}

.roas-related__item + .roas-related__item {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--roas-border);
}

.roas-related__link {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 6px;
	border-radius: 10px;
	color: var(--roas-text);
	text-decoration: none;
	transition: background .15s ease;
}

.roas-related__link:hover {
	background: var(--roas-bg-soft);
}

.roas-related__thumb {
	position: relative;
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	overflow: hidden;
	background: linear-gradient(135deg, #1f2937 0%, #0b1220 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.6);
}

.roas-related__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.roas-related__thumb .dashicons {
	font-size: 24px;
	width: 24px;
	height: 24px;
}

.roas-related__live {
	position: absolute;
	bottom: 4px;
	right: 4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #ef4444;
	border: 2px solid #fff;
	box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
	animation: roas-pulse 1.6s ease-out infinite;
}

.roas-related__meta {
	flex: 1;
	min-width: 0;
}

.roas-related__title {
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.25;
	color: var(--roas-primary);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.roas-related__summary {
	margin-top: 3px;
	font-size: 0.8rem;
	color: var(--roas-muted);
	line-height: 1.4;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* =====================================================
 * Accessibility
 * ===================================================== */
.roas-single .screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	width: 1px;
	overflow: hidden;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.roas-status__dot,
	.roas-related__live,
	.roas-slot__live-dot {
		animation: none;
	}
	.roas-social,
	.roas-slot {
		transition: none;
	}
}