/* ==========================================================================
   Nashpubrad homepage boxes
   One section per box. Colors, fonts and sizes are settings at the top;
   change them there. Sizes are in px on purpose: the theme's small base
   font size shrinks rem-based sizes.
   Colors are placeholders until the branding firm's final palette arrives.
   ========================================================================== */

:root {
	--hb-navy: #14234b;          /* dark backgrounds, member headline */
	--hb-blue: #1f5fbf;          /* featured label tag; match station-feeds.css */
	--hb-orange: #e05a22;        /* member button */
	--hb-orange-dark: #b8441a;   /* member label, button hover */
	--hb-tint: #f9dbc8;          /* member box background */
	--hb-newsletter-bg: #dce5f4; /* newsletter section background */
	--hb-panel-border: #c3cfe6;  /* newsletter panel outline */
	--hb-text: #1f2328;
	--hb-white: #ffffff;
	--hb-dot: #c3cad6;           /* slider dots that aren't current */
	--hb-serif: Georgia, "Times New Roman", serif;

	--hb-featured-title: 34px;
	--hb-featured-title-phone: 24px;
	--hb-featured-summary: 15px;
	--hb-member-title: 22px;
	--hb-body: 15px;
	--hb-label: 11px;
	--hb-radius: 4px;
	--hb-gap: 24px;              /* space between boxes, across and down */
}

/* Editors-only message when a box can't display ------------------------- */
.nashpubrad-hb-notice {
	padding: 12px 16px;
	border: 2px dashed #c0392b;
	font-size: 14px;
}

/* Featured story -------------------------------------------------------- */
.nashpubrad-featured {
	margin: 0 0 var(--hb-gap);
}

.nashpubrad-featured .nashpubrad-featured__link {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	border-radius: var(--hb-radius);
	background: var(--hb-navy);
	color: var(--hb-white);
	text-decoration: none;
	border: 0;
	box-shadow: none;
}

.nashpubrad-featured .nashpubrad-featured__link:hover,
.nashpubrad-featured .nashpubrad-featured__link:focus {
	color: var(--hb-white);
	text-decoration: none;
}

.nashpubrad-featured .nashpubrad-featured__link:focus-visible {
	outline: 3px solid var(--hb-orange);
	outline-offset: 3px;
}

.nashpubrad-featured .nashpubrad-featured__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	margin: 0;
}

/* Shade the bottom of the photo so white text stays readable */
.nashpubrad-featured .nashpubrad-featured__link::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 18, 40, 0.9) 0%, rgba(10, 18, 40, 0.55) 38%, rgba(10, 18, 40, 0) 68%);
}

.nashpubrad-featured .nashpubrad-featured__text {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	max-width: 680px;
	padding: 28px 32px;
}

.nashpubrad-featured .nashpubrad-featured__label {
	display: inline-block;
	margin: 0 0 10px;
	padding: 4px 8px;
	border-radius: 2px;
	background: var(--hb-blue);
	color: var(--hb-white);
	font-size: var(--hb-label);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.nashpubrad-featured .nashpubrad-featured__title {
	margin: 0 0 10px;
	color: var(--hb-white);
	font-family: var(--hb-serif);
	font-size: var(--hb-featured-title);
	font-weight: 700;
	line-height: 1.15;
}

.nashpubrad-featured a:hover .nashpubrad-featured__title,
.nashpubrad-featured a:focus-visible .nashpubrad-featured__title {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.nashpubrad-featured .nashpubrad-featured__summary {
	margin: 0;
	color: var(--hb-white);
	font-size: var(--hb-featured-summary);
	line-height: 1.5;
	opacity: 0.92;
}

/* Phones: photo on top, words underneath on navy */
@media (max-width: 600px) {
	.nashpubrad-featured .nashpubrad-featured__link {
		aspect-ratio: auto;
	}
	.nashpubrad-featured .nashpubrad-featured__link::after {
		display: none;
	}
	.nashpubrad-featured .nashpubrad-featured__image {
		position: static;
		height: auto;
		aspect-ratio: 16 / 9;
	}
	.nashpubrad-featured .nashpubrad-featured__text {
		position: static;
		padding: 18px 20px 22px;
	}
	.nashpubrad-featured .nashpubrad-featured__title {
		font-size: var(--hb-featured-title-phone);
	}
}

/* Featured stories slider ---------------------------------------------- */
.nashpubrad-featured-slider {
	margin: 0 0 var(--hb-gap);
}

.nashpubrad-featured-slider .nashpubrad-featured-slider__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: var(--hb-radius);
}

.nashpubrad-featured-slider .nashpubrad-featured-slider__track::-webkit-scrollbar {
	display: none;
}

.nashpubrad-featured-slider .nashpubrad-featured-slider__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
}

.nashpubrad-featured-slider .nashpubrad-featured {
	margin: 0;
}

/* Inside the strip, focus outlines sit inside the edge so they aren't cut off */
.nashpubrad-featured-slider .nashpubrad-featured__link:focus-visible {
	outline-offset: -4px;
}

.nashpubrad-featured-slider {
	position: relative;
}

/* Controls sit on the photo, top right, so they don't add a row below it */
.nashpubrad-featured-slider .nashpubrad-featured-slider__controls {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 2px 4px;
	border-radius: 999px;
	background: rgba(10, 18, 40, 0.6);
}

.nashpubrad-featured-slider .nashpubrad-featured-slider__dots {
	display: flex;
	gap: 0;
}

.nashpubrad-featured-slider button.nashpubrad-featured-slider__arrow,
.nashpubrad-featured-slider button.nashpubrad-featured-slider__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: var(--hb-white);
	cursor: pointer;
}

.nashpubrad-featured-slider button.nashpubrad-featured-slider__arrow:hover {
	background: rgba(255, 255, 255, 0.15);
}

/* The visible dot is small; the button around it is big enough to tap */
.nashpubrad-featured-slider button.nashpubrad-featured-slider__dot {
	width: 20px;
}

.nashpubrad-featured-slider button.nashpubrad-featured-slider__dot::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
}

.nashpubrad-featured-slider button.nashpubrad-featured-slider__dot[aria-current="true"]::before {
	background: var(--hb-white);
}

.nashpubrad-featured-slider button.nashpubrad-featured-slider__arrow:focus-visible,
.nashpubrad-featured-slider button.nashpubrad-featured-slider__dot:focus-visible {
	outline: 3px solid var(--hb-orange);
	outline-offset: 1px;
}

/* Phones: make every slide as tall as the tallest so the controls don't jump */
@media (max-width: 600px) {
	.nashpubrad-featured-slider .nashpubrad-featured,
	.nashpubrad-featured-slider .nashpubrad-featured__link {
		height: 100%;
	}
}

/* Member box ------------------------------------------------------------ */
.nashpubrad-member {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0 0 var(--hb-gap);
	padding: 24px;
	border-radius: var(--hb-radius);
	background: var(--hb-tint);
	color: var(--hb-text);
}

.nashpubrad-member .nashpubrad-member__body {
	flex: 1 1 auto;
	min-width: 0;
}

.nashpubrad-member .nashpubrad-member__label {
	margin: 0 0 8px;
	color: var(--hb-orange-dark);
	font-size: var(--hb-label);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.nashpubrad-member .nashpubrad-member__title {
	margin: 0 0 8px;
	color: var(--hb-navy);
	font-family: var(--hb-serif);
	font-size: var(--hb-member-title);
	font-weight: 700;
	line-height: 1.2;
}

.nashpubrad-member .nashpubrad-member__text {
	margin: 0 0 16px;
	font-size: var(--hb-body);
	line-height: 1.5;
}

.nashpubrad-member .nashpubrad-member__button {
	display: inline-block;
	padding: 11px 18px;
	border: 0;
	border-radius: 3px;
	background: var(--hb-orange);
	box-shadow: none;
	color: var(--hb-white);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
}

.nashpubrad-member .nashpubrad-member__button:hover,
.nashpubrad-member .nashpubrad-member__button:focus {
	background: var(--hb-orange-dark);
	color: var(--hb-white);
	text-decoration: none;
}

.nashpubrad-member .nashpubrad-member__button:focus-visible {
	outline: 3px solid var(--hb-navy);
	outline-offset: 3px;
}

.nashpubrad-member .nashpubrad-member__image {
	flex: 0 0 auto;
	width: 96px;
	height: auto;
	margin: 0;
}

@media (max-width: 420px) {
	.nashpubrad-member .nashpubrad-member__image {
		display: none;
	}
}

/* Newsletter box --------------------------------------------------------
   The form's HTML lives in MC4WP (see /forms). Panels sit side by side
   when the box is wide enough and stack when it's narrow, e.g. in a
   sidebar column. */
.nashpubrad-newsletter {
	container-type: inline-size;
	margin: 0 0 var(--hb-gap);
	padding: 24px;
	border-radius: var(--hb-radius);
	background: var(--hb-newsletter-bg);
	color: var(--hb-text);
}

.nashpubrad-newsletter .nashpubrad-newsletter__heading {
	margin: 0 0 16px;
	color: var(--hb-navy);
	font-family: var(--hb-serif);
	font-size: var(--hb-member-title);
	font-weight: 700;
	line-height: 1.2;
}

.nashpubrad-newsletter .nashpubrad-newsletter__options {
	display: grid;
	gap: 12px;
	margin: 0 0 16px;
}

@container (min-width: 560px) {
	.nashpubrad-newsletter .nashpubrad-newsletter__options {
		grid-template-columns: 1fr 1fr;
	}
}

/* Each newsletter is one big clickable panel */
.nashpubrad-newsletter .nashpubrad-newsletter__option {
	position: relative;
	padding: 16px 16px 14px;
	border: 2px solid var(--hb-panel-border);
	border-radius: var(--hb-radius);
	background: var(--hb-white);
}

.nashpubrad-newsletter .nashpubrad-newsletter__option:has(input:checked) {
	border-color: var(--hb-navy);
	background: #eef2fb;
}

.nashpubrad-newsletter .nashpubrad-newsletter__option label {
	display: block;
	margin: 0;
	padding-right: 32px; /* room for the checkbox */
	cursor: pointer;
	font-weight: 400;
}

/* Stretch the click area over the whole panel */
.nashpubrad-newsletter .nashpubrad-newsletter__option label::after {
	content: "";
	position: absolute;
	inset: 0;
}

.nashpubrad-newsletter .nashpubrad-newsletter__option input[type="checkbox"] {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--hb-navy);
	cursor: pointer;
}

.nashpubrad-newsletter .nashpubrad-newsletter__option input[type="checkbox"]:focus-visible {
	outline: 3px solid var(--hb-orange);
	outline-offset: 2px;
}

.nashpubrad-newsletter .nashpubrad-newsletter__name {
	display: block;
	margin: 0 0 6px;
	color: var(--hb-blue);
	font-size: var(--hb-label);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.nashpubrad-newsletter .nashpubrad-newsletter__hook {
	display: block;
	margin: 0 0 6px;
	color: var(--hb-navy);
	font-family: var(--hb-serif);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
}

.nashpubrad-newsletter .nashpubrad-newsletter__pitch {
	display: block;
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.5;
}

.nashpubrad-newsletter .nashpubrad-newsletter__when {
	display: block;
	color: #5a6272;
	font-size: 13px;
	font-style: italic;
	line-height: 1.4;
}

/* Sits above the panel's click area so it stays its own link */
.nashpubrad-newsletter .nashpubrad-newsletter__sample {
	position: relative;
	z-index: 1;
	display: inline-block;
	margin-top: 8px;
	color: var(--hb-blue);
	font-size: 13px;
	text-decoration: underline;
}

/* Hidden until a real issue address replaces the # */
.nashpubrad-newsletter .nashpubrad-newsletter__sample[href="#"] {
	display: none;
}

.nashpubrad-newsletter .nashpubrad-newsletter__signup {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Read by screen readers, hidden on screen (the field's placeholder says the same) */
.nashpubrad-newsletter .nashpubrad-newsletter__email-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.nashpubrad-newsletter input[type="email"] {
	flex: 1 1 200px;
	min-width: 0;
	margin: 0;
	padding: 11px 12px;
	border: 1px solid #b8c0cf;
	border-radius: 3px;
	background: var(--hb-white);
	font-size: 15px;
}

.nashpubrad-newsletter input[type="email"]:focus-visible {
	outline: 3px solid var(--hb-orange);
	outline-offset: 1px;
}

.nashpubrad-newsletter button.nashpubrad-newsletter__button {
	flex: 0 0 auto;
	margin: 0;
	padding: 11px 20px;
	border: 0;
	border-radius: 3px;
	background: var(--hb-navy);
	box-shadow: none;
	color: var(--hb-white);
	cursor: pointer;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	text-transform: uppercase;
}

.nashpubrad-newsletter button.nashpubrad-newsletter__button:hover {
	background: var(--hb-blue);
}

.nashpubrad-newsletter button.nashpubrad-newsletter__button:focus-visible {
	outline: 3px solid var(--hb-orange);
	outline-offset: 2px;
}

.nashpubrad-newsletter .nashpubrad-newsletter__error {
	margin: 10px 0 0;
	color: #b3261e;
	font-size: 14px;
	font-weight: 700;
}

/* MC4WP's own success and error messages */
.nashpubrad-newsletter .mc4wp-response .mc4wp-alert {
	margin: 12px 0 0;
	font-size: 15px;
	line-height: 1.5;
}

.nashpubrad-newsletter .mc4wp-response .mc4wp-success {
	color: var(--hb-navy);
	font-weight: 700;
}

.nashpubrad-newsletter .mc4wp-response .mc4wp-error {
	color: #b3261e;
}

/* Listen box ------------------------------------------------------------ */
.nashpubrad-listen {
	margin: 0 0 var(--hb-gap);
	padding: 24px;
	border-radius: var(--hb-radius);
	background: var(--hb-navy);
	color: var(--hb-white);
}

.nashpubrad-listen .nashpubrad-listen__label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	color: var(--hb-white);
	font-size: var(--hb-label);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

/* Small "on air" dot */
.nashpubrad-listen .nashpubrad-listen__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--hb-orange);
}

.nashpubrad-listen .nashpubrad-listen__title {
	margin: 0 0 12px;
	color: var(--hb-white);
	font-family: var(--hb-serif);
	font-size: var(--hb-member-title);
	font-weight: 700;
	line-height: 1.2;
}

.nashpubrad-listen .nashpubrad-listen__streams {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.nashpubrad-listen .nashpubrad-listen__streams li {
	margin: 0;
	padding: 5px 9px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 3px;
	color: var(--hb-white);
	font-size: 13px;
	line-height: 1.2;
	list-style: none;
}

.nashpubrad-listen .nashpubrad-listen__text {
	margin: 0 0 16px;
	color: var(--hb-white);
	font-size: 14px;
	line-height: 1.5;
	opacity: 0.85;
}

.nashpubrad-listen .nashpubrad-listen__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	border: 0;
	border-radius: 3px;
	background: var(--hb-white);
	box-shadow: none;
	color: var(--hb-navy);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
}

.nashpubrad-listen .nashpubrad-listen__button:hover,
.nashpubrad-listen .nashpubrad-listen__button:focus {
	background: #fbefe7;
	color: var(--hb-navy);
	text-decoration: none;
}

.nashpubrad-listen .nashpubrad-listen__button:focus-visible {
	outline: 3px solid var(--hb-orange);
	outline-offset: 3px;
}

/* Read by screen readers, hidden on screen */
.nashpubrad-listen .nashpubrad-listen__new-window {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Page layout helpers ----------------------------------------------------
   When these boxes sit in a Columns block:
   - both columns end on the same line: the featured story and the member
     box stretch to fill their column, whichever column is shorter;
   - the space between columns matches the space between boxes;
   - the last box in a column adds no extra space below it. */
.wp-block-columns:has(.nashpubrad-featured, .nashpubrad-featured-slider, .nashpubrad-member, .nashpubrad-listen) {
	gap: var(--hb-gap);
	margin-bottom: var(--hb-gap);
}

.wp-block-column:has(> .nashpubrad-featured, > .nashpubrad-featured-slider, > .nashpubrad-member) {
	display: flex;
	flex-direction: column;
}

.wp-block-column > .nashpubrad-featured,
.wp-block-column > .nashpubrad-member,
.wp-block-column > .nashpubrad-listen,
.wp-block-column > .nashpubrad-newsletter {
	margin-bottom: var(--hb-gap);
}

.wp-block-column > .nashpubrad-featured:last-child,
.wp-block-column > .nashpubrad-featured-slider:last-child,
.wp-block-column > .nashpubrad-member:last-child,
.wp-block-column > .nashpubrad-listen:last-child,
.wp-block-column > .nashpubrad-newsletter:last-child {
	margin-bottom: 0;
}

/* Member box takes whatever height its column has left */
.wp-block-column > .nashpubrad-member {
	flex: 1 1 auto;
}

/* Featured story (single or slider) grows taller to match the other column;
   the photo is cropped to fit, never stretched */
.wp-block-column > .nashpubrad-featured,
.wp-block-column > .nashpubrad-featured-slider {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.wp-block-column > .nashpubrad-featured > .nashpubrad-featured__link,
.wp-block-column > .nashpubrad-featured-slider > .nashpubrad-featured-slider__track {
	flex: 1 1 auto;
}

.wp-block-column > .nashpubrad-featured-slider .nashpubrad-featured {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.wp-block-column > .nashpubrad-featured-slider .nashpubrad-featured__link {
	flex: 1 1 auto;
}