/* /newsletter/ archive and issues (lib/newsletter.php). Versioned filename:
   remove_query_strings_split strips ?ver, so bump the name to bust caches. */

:root {
	--nl-blue: #014153;
	--nl-grey: #e0e1e4;
	--nl-yellow: #fdb913;
	--nl-teal: #009fb1;
	--nl-ink: #292929;
	--nl-muted: #6b7079;
}

* { box-sizing: border-box; }

body.nl {
	margin: 0;
	background: var(--nl-grey);
	color: var(--nl-ink);
	font-family: Arial, Helvetica, sans-serif;
	-webkit-text-size-adjust: 100%;
}

.nl-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	max-width: 800px;
	margin: 0 auto;
	padding: 20px 16px;
}

.nl-logo img { display: block; max-width: 100%; height: auto; }

.nl-nav { display: flex; gap: 20px; }

.nl-nav a {
	color: var(--nl-blue);
	font-size: 15px;
	font-weight: bold;
	letter-spacing: 0.5px;
	text-decoration: none;
	border-bottom: 3px solid transparent;
	padding: 4px 0;
}

.nl-nav a:hover,
.nl-nav a[aria-current="page"] { border-bottom-color: var(--nl-yellow); }

.nl a:focus-visible { outline: 3px solid var(--nl-teal); outline-offset: 2px; }

/* Archive */

.nl-archive { max-width: 800px; margin: 0 auto; padding: 8px 16px 56px; }

.nl-archive h1 { margin: 0 0 8px; color: var(--nl-blue); font-size: 32px; line-height: 1.2; }

.nl-intro { margin: 0 0 28px; font-size: 16px; line-height: 1.6; }

.nl-list { margin: 0; padding: 0; list-style: none; }

.nl-card {
	margin: 0 0 16px;
	padding: 24px 28px;
	background: #fff;
	border-top: 4px solid var(--nl-yellow);
}

.nl-card:nth-child(even) { border-top-color: var(--nl-teal); }

.nl-card time {
	display: block;
	margin: 0 0 6px;
	color: var(--nl-muted);
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.nl-card h2 { margin: 0 0 10px; font-size: 22px; line-height: 1.3; }

.nl-card h2 a { color: var(--nl-blue); text-decoration: none; }

.nl-card h2 a:hover { text-decoration: underline; }

.nl-card p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; }

.nl-more { color: var(--nl-blue); font-weight: bold; }

.nl-empty { padding: 24px 28px; background: #fff; }

.nl-archive .navigation { margin-top: 24px; font-size: 16px; }

.nl-archive .navigation a,
.nl-archive .navigation span { margin-right: 12px; color: var(--nl-blue); }

/* Issue: the email's own inline-styled markup. Its <style> block is stripped
   on render, so the phone-width rules it relied on live here. */

.nl-issue { padding: 0 0 40px; overflow-x: hidden; }

.nl-issue table { max-width: 100% !important; }

.nl-issue img { max-width: 100%; height: auto; }

.nl-issue a { color: var(--nl-blue); }

@media screen and (max-width: 800px) {
	/* Class names from the Zealifi email template. */
	.nl-issue .wrap { width: 100% !important; }
	.nl-issue .stack { display: block !important; width: 100% !important; max-width: 100% !important; }
	.nl-issue .pad { padding-left: 20px !important; padding-right: 20px !important; }
	.nl-issue .h1 { font-size: 28px !important; line-height: 34px !important; }
	.nl-issue .h2 { font-size: 21px !important; line-height: 27px !important; }
}

/* Elementor Pro prints its popup templates into wp_footer on every page; its
   stylesheet (swept here) is what normally hides them. */
.elementor-location-popup { display: none !important; }