/* HRN Core — hero, Up Next, sticky player. Colors come from the HRN theme
   (with fallbacks so it still looks right under another theme). */
.hrn-hero, .hrn-upnext, .hrn-sticky {
	--h-gold: var(--wp--preset--color--gold, #C9A84C);
	--h-gold-2: var(--wp--preset--color--gold-bright, #E0C46A);
	--h-green: var(--wp--preset--color--green, #1A5C2A);
	--h-maroon: var(--wp--preset--color--maroon, #6B1F2A);
	--h-cream: var(--wp--preset--color--cream, #F5ECD7);
	--h-muted: var(--wp--preset--color--muted, #A39A88);
	--h-card: var(--wp--preset--color--card, #15161B);
	--h-card-2: var(--wp--preset--color--card-raised, #1D1F26);
	--h-line: var(--wp--preset--color--line, #2C2F38);
	--h-head: var(--wp--preset--font-family--heading, Poppins, sans-serif);
	--h-mono: var(--wp--preset--font-family--mono, ui-monospace, Menlo, monospace);
	box-sizing: border-box;
}
.hrn-hero *, .hrn-upnext *, .hrn-sticky * { box-sizing: border-box; }
.hrn-hero p, .hrn-upnext p { margin: 0; }

.hrn-eyebrow-label {
	font-family: var(--h-mono); font-size: 12px; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--h-gold); margin: 0;
}

/* ── Hero layout ── */
.hrn-hero { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1rem; color: var(--h-cream); }
.hrn-hero__onair {
	flex: 999 1 540px; min-width: 0; background: var(--h-card);
	border: 1px solid var(--h-line); border-radius: 20px; overflow: hidden;
	display: flex; flex-direction: column;
}
.hrn-stripe { display: flex; height: 4px; }
.hrn-stripe span { flex: 1; }
.hrn-stripe span:nth-child(1) { background: var(--h-green); }
.hrn-stripe span:nth-child(2) { background: var(--h-gold); }
.hrn-stripe span:nth-child(3) { background: var(--h-maroon); }
.hrn-hero__main { flex: 1; padding: 2rem 2.25rem; display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; align-content: center; }

.hrn-hero__photo {
	width: 200px; height: 200px; flex: none; border-radius: 50%;
	border: 4px solid var(--h-gold); overflow: hidden; display: block;
	background: var(--h-card-2); box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.hrn-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hrn-hero__photo.is-station img { object-fit: contain; padding: 14px; }

.hrn-hero__text { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.hrn-hero__badge {
	align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5em;
	background: var(--h-maroon); color: #fff; font-family: var(--h-mono); font-size: 12px;
	font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px;
}
.hrn-hero__dot { width: 8px; height: 8px; border-radius: 50%; background: #FF5A4E; display: inline-block; animation: hrn-pulse 1.6s ease-in-out infinite; }
@keyframes hrn-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .hrn-hero__dot { animation: none; } }

.hrn-hero__name {
	font-family: var(--h-head) !important; font-weight: 800 !important; color: var(--h-cream) !important;
	font-size: clamp(30px, 4.4vw, 46px) !important; line-height: 1.05 !important; margin: 0 !important; letter-spacing: -0.01em;
}
.hrn-hero__show { color: var(--h-gold); font-family: var(--h-head); font-weight: 600; font-size: 1.1rem; }
.hrn-hero__show:empty, .hrn-hero__time:empty { display: none; }
.hrn-hero__time { font-family: var(--h-mono); font-size: 14px; color: var(--h-muted); }
.hrn-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }

/* ── Buttons ── */
.hrn-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
	min-height: 52px; padding: 0 1.6rem; border-radius: 999px; cursor: pointer;
	font-family: var(--h-head); font-weight: 700; font-size: 1rem; text-decoration: none !important;
	border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s;
}
.hrn-btn--listen { background: var(--h-green); color: #fff !important; }
.hrn-btn--listen:hover { background: #22733A; }
.hrn-btn--outline { background: transparent; color: var(--h-cream) !important; border-color: var(--h-line); }
.hrn-btn--outline:hover { border-color: var(--h-gold); color: var(--h-gold-2) !important; }

.hrn-play-icon {
	width: 0; height: 0; border-style: solid; border-width: 0.45em 0 0.45em 0.75em;
	border-color: transparent transparent transparent currentColor; display: inline-block;
}
.hrn-is-playing [data-hrn-play] .hrn-play-icon {
	width: 0.7em; height: 0.85em; border: 0;
	border-left: 0.24em solid currentColor; border-right: 0.24em solid currentColor;
}

/* ── Now playing card ── */
.hrn-np {
	flex: 1 1 300px; min-width: 0; background: var(--h-card); border: 1px solid var(--h-line);
	border-radius: 20px; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.9rem;
}
.hrn-np__track { display: flex; gap: 1rem; align-items: center; }
.hrn-np__track img { width: 112px; height: 112px; flex: none; border-radius: 12px; object-fit: cover; background: var(--h-card-2); }
.hrn-np__meta { min-width: 0; }
.hrn-np__title { font-family: var(--h-head); font-weight: 700; font-size: 1.25rem; line-height: 1.2; color: var(--h-cream); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hrn-np__artist { color: var(--h-gold); font-weight: 600; }
.hrn-np__album { color: var(--h-muted); font-size: 13px; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hrn-np__album:empty { display: none; }
.hrn-np__recent { list-style: none; margin: 0; padding: 0.9rem 0 0; border-top: 1px solid var(--h-line); display: flex; flex-direction: column; gap: 0.6rem; }
.hrn-np__row { display: flex; gap: 0.75rem; align-items: center; }
.hrn-np__row img { width: 40px; height: 40px; flex: none; border-radius: 6px; object-fit: cover; background: var(--h-card-2); }
.hrn-np__row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; line-height: 1.3; }
.hrn-np__row-title { font-weight: 600; color: var(--h-cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hrn-np__row-artist { color: var(--h-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hrn-np__row-ago { font-family: var(--h-mono); font-size: 12px; color: var(--h-muted); flex: none; }
.hrn-np__empty, .hrn-upnext__empty { color: var(--h-muted); font-size: 14px; list-style: none; }
.hrn-np__more { margin-top: auto; font-weight: 600; font-size: 14px; color: var(--h-gold) !important; }

/* ── Up Next ── */
.hrn-upnext { background: var(--h-card); border: 1px solid var(--h-line); border-radius: 16px; padding: 1rem 1.25rem 1.25rem; margin-bottom: 2rem; color: var(--h-cream); }
.hrn-upnext__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.75rem; }
.hrn-upnext__head a { font-size: 14px; font-weight: 600; color: var(--h-gold) !important; }
.hrn-upnext__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; }
.hrn-upnext__card { display: flex; gap: 0.75rem; align-items: center; background: var(--h-card-2); border-radius: 12px; padding: 0.7rem 0.9rem; color: var(--h-cream) !important; text-decoration: none !important; height: 100%; }
a.hrn-upnext__card:hover { outline: 1px solid var(--h-gold); }
.hrn-upnext__card img { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid var(--h-gold); background: var(--h-card); }
.hrn-upnext__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.hrn-upnext__when { font-family: var(--h-mono); font-size: 12px; color: var(--h-gold); }
.hrn-upnext__name { font-weight: 700; font-size: 15px; }
.hrn-upnext__show { color: var(--h-muted); font-size: 13px; }

/* ── Sticky player ── */
.hrn-sticky {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
	background: rgba(11, 12, 15, 0.97); border-top: 1px solid var(--h-line); color: var(--h-cream);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	backdrop-filter: blur(8px);
}
.hrn-sticky[hidden] { display: none; }
.hrn-sticky__inner { max-width: 1240px; margin: 0 auto; padding: 0.6rem 1.25rem; display: flex; gap: 0.9rem; align-items: center; }
.hrn-sticky__play {
	width: 48px; height: 48px; flex: none; border-radius: 50%; border: 0; cursor: pointer;
	background: var(--h-green); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
}
.hrn-sticky__art { width: 44px; height: 44px; flex: none; border-radius: 6px; object-fit: cover; background: var(--h-card-2); }
.hrn-sticky__info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.hrn-sticky__title { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hrn-sticky__artist { color: var(--h-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hrn-sticky__live { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--h-mono); font-size: 12px; font-weight: 700; color: #FF7A70; letter-spacing: .1em; text-transform: uppercase; }
.hrn-sticky__vol input { width: 110px; accent-color: var(--h-green); }
.hrn-sticky__close { width: 44px; height: 44px; flex: none; border: 0; background: transparent; color: var(--h-muted); font-size: 22px; cursor: pointer; border-radius: 50%; }
.hrn-sticky__close:hover { color: var(--h-cream); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 600px) {
	.hrn-hero__main { padding: 1.5rem; flex-direction: column; text-align: center; gap: 1.25rem; }
	.hrn-hero__photo { width: 140px; height: 140px; }
	.hrn-hero__badge { align-self: center; }
	.hrn-hero__actions { justify-content: center; }
	.hrn-hero__actions .hrn-btn { flex: 1 1 100%; }
	.hrn-sticky__live, .hrn-sticky__vol { display: none; }
	.hrn-sticky__inner { padding: 0.5rem 0.9rem; }
}