/**
 * Single Alert — "Briefing Room" newsletter card.
 *
 * Loaded only on is_singular('alert') (see inc/enqueue.php). Uses the theme's
 * :root design tokens from main.css so the alert matches the site palette
 * (navy --color-primary) rather than the source email's colours.
 */

/* Banner — reuses .page-hero (see main.css); only the --alert layout is added
   here so the title sits left and the date pins bottom-right. Size/width/overlay
   come straight from the shared .page-hero rules, matching the Page Banner. */
.page-hero--alert {
	align-items: stretch;
}

.page-hero--alert .page-hero__inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.page-hero--alert .alert-hero__date {
	/* position: absolute;
	right: 0;
	bottom: 0; */
	text-align: left;
	margin: 10px 0;
	font-family: var(--font-body);
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.85);
}

/* Vertical rhythm only — horizontal alignment comes from the inner .container,
   so the content aligns with the banner content edges. */
.alert-single {
	/* padding-block: clamp(24px, 5vw, 56px) clamp(32px, 6vw, 72px); */
	/* background-color: var(--color-surface); */
}

/* The newsletter card ---------------------------------------------------- */
.alert-newsletter {
	/* background-color: var(--color-surface-container-lowest);
	border: 1px solid var(--color-outline-variant);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(2, 47, 117, 0.06); */
}

/* Body: author-written content ------------------------------------------ */
.alert-newsletter__body {
	padding: 60px 0;
	color: var(--color-on-surface);
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	line-height: var(--body-line-height);
}

.alert-newsletter__body>*+* {
	margin-top: var(--stack-lg);
}

.alert-newsletter__body h2,
.alert-newsletter__body h3,
.alert-newsletter__body h4 {
	font-family: var(--font-display);
	color: var(--color-primary);
	line-height: 1.25;
	font-weight: var(--heading-font-weight);
	margin-top: var(--section-padding, 32px);
}

.alert-newsletter__body h2 {
	font-size: 1.6rem;
}

.alert-newsletter__body h3 {
	font-size: 1.3rem;
}

.alert-newsletter__body h4 {
	font-size: 1.1rem;
}

.alert-newsletter__body h2:first-child,
.alert-newsletter__body h3:first-child,
.alert-newsletter__body h4:first-child {
	margin-top: 0;
}

.alert-newsletter__body p {
	margin: 0;
}

.alert-newsletter__body a {
	color: var(--color-secondary);
	text-decoration: underline;
}

.alert-newsletter__body strong {
	color: #000;
}

.alert-newsletter__body ul,
.alert-newsletter__body ol {
	margin: 0;
	padding-left: 1.5em;
}

.alert-newsletter__body li+li {
	margin-top: var(--stack-sm);
}

.alert-newsletter__body ul li {
	list-style: disc;
}

.alert-newsletter__body img {
	max-width: 100%;
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Optional disclaimer / note box — wrap content in .alert-callout -------- */
.alert-newsletter__body .alert-callout {
	background-color: var(--color-primary-5);
	border-left: 3px solid var(--color-secondary);
	border-radius: var(--radius-md);
	padding: clamp(16px, 3vw, 28px);
	font-size: 0.85rem;
	line-height: 1.7;
	color: var(--color-on-surface-variant);
	text-align: center;
}

.alert-newsletter__body .alert-callout>*+* {
	margin-top: var(--stack-md);
}

/* Optional external "View original" button ------------------------------ */
.alert-newsletter__source {
	margin: 0 clamp(20px, 4vw, 48px) clamp(20px, 4vw, 40px);
}

/* Footer: social share --------------------------------------------------- */
.alert-newsletter__footer {
	padding: 0 clamp(20px, 4vw, 48px) clamp(24px, 4vw, 40px);
	border-top: 1px solid var(--color-outline-variant);
	margin-top: var(--stack-lg);
	padding-top: clamp(20px, 3vw, 28px);
	display: none;
}

/* Mobile ---------------------------------------------------------------- */
@media (max-width: 640px) {
	.alert-single {
		padding-left: 12px;
		padding-right: 12px;
	}
}