/*
Theme Name: HRN
Theme URI: https://hawaiireggaenetwork.com
Author: Four Braddahs Media Inc.
Description: Lean block theme for Hawaii Reggae Network. Look only: all station features live in the HRN plugins / HRN Core.
Version: 0.1.7
Requires at least: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hrn-theme
*/

/* Header */
.hrn-header {
	background: var(--wp--preset--color--navy);
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}
.hrn-header .wp-block-site-logo img { display: block; }

/* Big, thumb-friendly buttons everywhere */
.wp-block-button__link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--line);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold-bright);
}

/* Listen live: the one green button */
.hrn-listen-toggle > .wp-block-button__link,
.hrn-listen-toggle > .wp-block-button__link:hover {
	background: var(--wp--preset--color--green);
	color: #ffffff;
}
.hrn-listen-toggle > .wp-block-button__link::before {
	content: "";
	width: 0;
	height: 0;
	margin-right: 0.55em;
	border-style: solid;
	border-width: 0.4em 0 0.4em 0.65em;
	border-color: transparent transparent transparent currentColor;
}

/* Small mono labels ("Listen anywhere", "HRN is supported by") */
.hrn-eyebrow,
.hrn-main .hrn-label,
.hrn-footer .hrn-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* Main area */
.hrn-main {
	padding-top: 1.5rem;
	padding-bottom: 4rem;
}

/* Relief / announcement bar */
.hrn-relief {
	background: var(--wp--preset--color--maroon);
	color: #ffffff;
	padding-top: 0.6rem;
	padding-bottom: 0.6rem;
	font-size: var(--wp--preset--font-size--small);
}
.hrn-relief a { color: #ffffff; text-decoration: underline; font-weight: 600; }
.hrn-front .hrn-relief { margin-top: -1.5rem; }

/* Footer: extra bottom room so the sticky player never covers it */
.hrn-footer {
	background: var(--wp--preset--color--navy);
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: 2.5rem;
	padding-bottom: 6rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Keyboard focus that is always visible on the dark background */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* Navigation dropdowns and the mobile menu: dark, matching the site
   (WordPress defaults these to white boxes). */
.hrn-header .wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--card-raised) !important;
	color: var(--wp--preset--color--cream) !important;
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: 12px;
	padding: 0.4rem 0;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
	min-width: 220px;
}
.hrn-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.6rem 1.1rem;
}
.hrn-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--gold);
	background: rgba(201, 168, 76, 0.08);
}
.hrn-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--bg) !important;
	color: var(--wp--preset--color--cream) !important;
	font-size: var(--wp--preset--font-size--medium);
}
.hrn-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none;
}

/* "This week on HRN": make the This Day in Reggae strip work as a card
   next to Top 5 (temporary until the calendar gets a real card layout). */
.hrn-this-week > .wp-block-column { display: flex; flex-direction: column; }
.hrn-this-week .hrn-rc-compact {
	margin: 0 !important;
	max-width: none !important;
	height: 100%;
	border-radius: 14px !important;
}
.hrn-this-week .hrn-rc-compact-inner {
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
}
.hrn-this-week .hrn-rc-compact-divider { width: 100%; height: 1px; }
.hrn-this-week .hrn-rc-compact-event { min-width: 0; }
.hrn-this-week .hrn-rc-compact-label { font-size: 12px; }
.hrn-this-week .hrn-rc-compact-fact,
.hrn-this-week .hrn-rc-compact-event-title { font-size: 15px; }
.hrn-this-week .hrn-rc-compact-event-meta { font-size: 13px; }

/* Sponsors: same height, centered, whatever size the ad image is */
.hrn-sponsors > .wp-block-column {
	display: flex;
	align-items: center;
	justify-content: center;
}
.hrn-sponsors img {
	max-height: 240px;
	width: auto !important;
	max-width: 100%;
	object-fit: contain;
	border-radius: 10px;
}

/* "This week on HRN": line both cards up at the top, same height,
   and center the calendar text instead of leaving a gap at the bottom. */
.hrn-this-week .hrn-top5 { margin-top: 0 !important; margin-bottom: 0 !important; height: 100%; }
.hrn-this-week .hrn-rc-compact { display: flex; flex-direction: column; }
.hrn-this-week .hrn-rc-compact-inner { flex: 1; justify-content: center; }

/* Hero "Now Playing" label: was 9px at 65% opacity, too faint to read */
.hrn-hero__np-card-label {
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: 0.72rem !important;
	letter-spacing: 0.18em !important;
	color: var(--wp--preset--color--gold) !important;
}

/* Social icons in the footer: Threads' official logo is black, which
   disappears on the navy footer, so it uses cream instead. */
.hrn-footer .wp-social-link-threads,
.hrn-footer .wp-social-link-threads a { color: var(--wp--preset--color--cream) !important; fill: var(--wp--preset--color--cream) !important; }
.hrn-footer .wp-block-social-links .wp-social-link { transition: transform .15s; }
.hrn-footer .wp-block-social-links .wp-social-link:hover { transform: scale(1.12); }
@media (prefers-reduced-motion: reduce) { .hrn-footer .wp-block-social-links .wp-social-link:hover { transform: none; } }

/* ── "This week on HRN": Top 5 and This Day in Reggae as a matched pair ──
   Same width, height, card color, border, top stripe, header style and
   row style, so the two read as one section. */
.hrn-this-week { gap: 1.5rem !important; align-items: stretch !important; }
.hrn-this-week > .wp-block-column { display: flex; flex-direction: column; }
.hrn-this-week .hrn-top5 {
	position: relative; display: flex; flex-direction: column;
	width: 100%; max-width: none; height: 100%; margin: 0 !important;
	border: 1px solid var(--wp--preset--color--line); border-top: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	background:
		linear-gradient(90deg, var(--wp--preset--color--green) 0 33.33%, var(--wp--preset--color--gold) 33.33% 66.66%, var(--wp--preset--color--maroon) 66.66% 100%) top / 100% 4px no-repeat,
		var(--wp--preset--color--card);
	padding: calc(1.25rem + 4px) 1.4rem 1.4rem;
	--t5-card: var(--wp--preset--color--card-raised);
	--t5-gold: var(--wp--preset--color--gold);
	--t5-dim: var(--wp--preset--color--muted);
}
/* Header: gold label + small line, like This Day in Reggae */
.hrn-this-week .hrn-top5__title {
	font-family: var(--wp--preset--font-family--mono) !important; font-size: 12px !important; font-weight: 400 !important;
	letter-spacing: .14em !important; text-transform: uppercase; color: var(--wp--preset--color--gold) !important;
}
.hrn-this-week .hrn-top5__sub { font-size: 14px; margin-top: .35rem; }
/* Date range moves to the top right, where This Day shows today's date */
.hrn-this-week .hrn-top5__foot {
	position: absolute; top: calc(1.25rem + 4px); right: 1.4rem; margin: 0;
	font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 14px;
	color: var(--wp--preset--color--muted); text-align: right;
}
.hrn-this-week .hrn-top5__head { padding-right: 7.5rem; }
/* Rows spread to fill the card, so both cards end level */
.hrn-this-week .hrn-top5 .hrn-top5__list { flex: 1; margin-top: 1rem; gap: .5rem; }
.hrn-this-week .hrn-top5 .hrn-top5__item { flex: 1 1 0; min-height: 64px; max-height: 120px; padding: .5rem .9rem .5rem .75rem; gap: 14px; }
.hrn-this-week .hrn-top5 .hrn-top5__art { width: 72px; height: 72px; min-width: 72px; max-width: 72px; border-radius: 8px; }
.hrn-this-week .hrn-top5__rank { font-size: 1.6rem; font-family: var(--wp--preset--font-family--heading); }
.hrn-this-week .hrn-top5__song { font-size: 1.05rem; }
.hrn-this-week .hrn-today { border-radius: 16px; }
.hrn-this-week .hrn-today .hrn-today__row { min-height: 64px; }
.hrn-this-week .hrn-today .hrn-today__row .hrn-today__photo { width: 48px; height: 48px; }
@media (max-width: 781px) {
	.hrn-this-week .hrn-top5__head { padding-right: 0; }
	.hrn-this-week .hrn-top5__foot { position: static; text-align: left; margin-top: .75rem; }
}

/* ── "Be part of the station": three equal cards, each with its own accent ── */
.hrn-community { gap: 1rem !important; align-items: stretch !important; }
.hrn-community > .wp-block-column { display: flex; }
.hrn-community__card {
	flex: 1; display: flex; flex-direction: column; gap: .6rem;
	background: var(--wp--preset--color--card); border: 1px solid var(--wp--preset--color--line);
	border-top: 4px solid var(--wp--preset--color--gold); border-radius: 16px;
	padding: 1.4rem 1.5rem 1.5rem !important;
}
.hrn-community__card.is-green { border-top-color: var(--wp--preset--color--green); }
.hrn-community__card.is-gold { border-top-color: var(--wp--preset--color--gold); }
.hrn-community__card.is-maroon { border-top-color: var(--wp--preset--color--maroon); }
.hrn-community__card > * { margin: 0 !important; max-width: none !important; }
.hrn-community__card .hrn-eyebrow { color: var(--wp--preset--color--gold); }
.hrn-community__card h3 { font-size: var(--wp--preset--font-size--x-large); }
.hrn-community__card p:not(.hrn-eyebrow) { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); line-height: 1.5; }
.hrn-community__card .wp-block-buttons { margin-top: auto !important; padding-top: .5rem; }