/* ============================================================
   /newsletter/ + /newsletter-thank-you/ — native, Elementor-free.
   Loads only on those two pages.
   ============================================================ */

.uj-newsletter {
	font: 1rem/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #1f2937;
}
.uj-newsletter h1,
.uj-newsletter h2 {
	font-family: "Oswald", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif !important;
	letter-spacing: 0.01em;
}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.uj-newsletter-hero {
	background: linear-gradient(135deg, #FFF5F0 0%, #FCE9DF 100%);
	padding: 3rem 1.25rem 3.5rem;
	text-align: center;
}
.uj-newsletter-hero__inner {
	max-width: 720px;
	margin: 0 auto;
}
.uj-newsletter-hero__headline {
	margin: 0 0 0.75rem;
	font-size: clamp(2rem, 5vw, 3.25rem);
	font-weight: 600;
	color: #B3421D;
	line-height: 1.05;
}
.uj-newsletter-hero__lede {
	margin: 0 0 1.5rem;
	font-size: 1.0625rem;
	color: #374151;
	line-height: 1.55;
}
.uj-newsletter-hero__sub {
	margin: 0.625rem 0 0;
	color: #4b5563;
}
.uj-newsletter-hero__form {
	margin: 1.5rem auto 0.625rem;
	padding: 1.5rem 1.75rem;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 4px 14px rgba(179, 66, 29, 0.1);
	max-width: 480px;
	text-align: left;
}
.uj-newsletter-hero__fineprint {
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	color: #6b7280;
}

/* Keep email input + Subscribe button on one line inside the hero card.
   The shared .uj-mc-form__row in site-chrome.css uses flex-wrap: wrap so
   the inline-banner version (sitting in narrower article columns) can
   stack vertically when squeezed. The newsletter hero form has its own
   card width and the bigger CTA-pill button, so we want it horizontal at
   all viewport widths — the email's min-width:0 lets it shrink to fit. */
.uj-newsletter-hero__form .uj-mc-form__row {
	flex-wrap: nowrap;
	align-items: center;
}

/* Submit button → site CTA pill. The form is the native [uj_newsletter_inline]
   shortcode (.uj-mc-form); the legacy .forminator-button-submit selector
   from the page's pre-rewrite Forminator era was removed. */
.uj-newsletter-hero__form button[type="submit"] {
	display: inline-block !important;
	padding: 0.875rem 2rem !important;
	background: #B3421D !important;
	color: #fff !important;
	font: 600 1rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	text-decoration: none !important;
	border-radius: 999px !important;
	border: 0 !important;
	cursor: pointer !important;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background 0.15s ease, transform 0.15s ease;
}
.uj-newsletter-hero__form button[type="submit"]:hover {
	background: #8E331A !important;
	transform: translateY(-1px);
}

/* Footer-CTA variant of the hero — slightly lighter; not the page H1. */
.uj-newsletter-hero--footer {
	padding: 2.75rem 1.25rem 3.25rem;
	background: linear-gradient(135deg, #FCE9DF 0%, #FFF5F0 100%);
}
.uj-newsletter-hero__headline--h2 {
	font-size: clamp(1.625rem, 3.4vw, 2.25rem);
}

/* ------------------------------------------------------------
   Generic section
   ------------------------------------------------------------ */
.uj-newsletter-section {
	padding: 3rem 1.25rem;
}
.uj-newsletter-section--alt {
	background: #f9fafb;
}
.uj-newsletter-section__inner {
	max-width: 1100px;
	margin: 0 auto;
}
.uj-newsletter-section__inner--narrow {
	max-width: 720px;
}
.uj-newsletter-section__heading {
	margin: 0 0 0.75rem;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 600;
	color: #B3421D;
}
.uj-newsletter-section__sub {
	margin: 0 0 1.5rem;
	color: #4b5563;
}
.uj-newsletter-section__more {
	margin: 1.25rem 0 0;
}
.uj-newsletter-section__more a {
	color: #B3421D;
	font-weight: 600;
	text-decoration: none;
}
.uj-newsletter-section__more a:hover { text-decoration: underline; }

/* Sample posts grid — uses .uj-front-card from page-front.css */
.uj-newsletter-samples {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}
.uj-newsletter-samples--four {
	grid-template-columns: repeat(4, 1fr);
}

/* ------------------------------------------------------------
   Aside cards (newsletter page bottom — Discord / Insider mini-pitches)
   ------------------------------------------------------------ */
.uj-newsletter-aside-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}
.uj-newsletter-aside {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-left: 4px solid #B3421D;
	border-radius: 8px;
	padding: 1.5rem;
}
.uj-newsletter-aside h3 {
	margin: 0 0 0.625rem;
	font: 600 1.25rem/1.2 "Oswald", "Arial Narrow", Impact, sans-serif;
	color: #B3421D;
	letter-spacing: 0.01em;
}
.uj-newsletter-aside p {
	margin: 0 0 1rem;
	color: #374151;
}
.uj-newsletter-aside__cta {
	display: inline-block;
	padding: 0.625rem 1.25rem;
	background: #B3421D;
	color: #fff !important;
	text-decoration: none;
	border-radius: 999px;
	font: 600 0.9375rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	transition: background 0.15s ease, transform 0.15s ease;
}
.uj-newsletter-aside__cta:hover {
	background: #8E331A;
	transform: translateY(-1px);
}
.uj-newsletter-aside__cta--ghost {
	background: transparent;
	color: #B3421D !important;
	border: 2px solid #B3421D;
	padding: 0.5rem 1.125rem;
}
.uj-newsletter-aside__cta--ghost:hover {
	background: #B3421D;
	color: #fff !important;
}

/* ------------------------------------------------------------
   Thank-you page extras
   ------------------------------------------------------------ */
.uj-newsletter-thanks-hero__check {
	margin: 0 auto 1.25rem;
	width: 64px;
	height: 64px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(179, 66, 29, 0.15);
}

/* Topic browser — 6 cards in a 3-col grid that morph to category links */
.uj-newsletter-topics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.875rem;
}
.uj-newsletter-topics a {
	display: block;
	padding: 1rem 1.25rem;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.uj-newsletter-topics a:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	border-color: #B3421D;
}
.uj-newsletter-topics span {
	display: block;
	font: 600 1.0625rem/1.1 "Oswald", "Arial Narrow", Impact, sans-serif;
	color: #B3421D;
	letter-spacing: 0.01em;
	margin-bottom: 0.25rem;
}
.uj-newsletter-topics small {
	display: block;
	font-size: 0.8125rem;
	color: #6b7280;
	font-weight: 400;
}

/* Discord micro-pitch */
.uj-newsletter-discord {
	text-align: center;
	padding: 1.5rem 0;
}
.uj-newsletter-discord h2 {
	margin: 0 0 0.625rem;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	color: #B3421D;
}
.uj-newsletter-discord p {
	margin: 0 0 1.25rem;
	color: #4b5563;
	max-width: 56ch;
	margin-left: auto;
	margin-right: auto;
}

/* Soft Insider mention — small, quiet, doesn't compete */
.uj-newsletter-section--soft-insider {
	padding: 2rem 1.25rem;
}
.uj-newsletter-soft-insider {
	margin: 0;
	text-align: center;
	color: #6b7280;
}
.uj-newsletter-soft-insider a {
	color: #B3421D;
	font-weight: 600;
	text-decoration: none;
}
.uj-newsletter-soft-insider a:hover { text-decoration: underline; }

/* ------------------------------------------------------------
   404 page — reuses .uj-newsletter chrome with a few extras
   ------------------------------------------------------------ */
.uj-error-404__big {
	margin: 0 0 0.25rem;
	font: 700 clamp(3rem, 8vw, 5.5rem)/1 "Oswald", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
	color: #B3421D;
	letter-spacing: 0.04em;
	opacity: 0.7;
}
.uj-error-404__hero .uj-newsletter-hero__headline {
	margin-top: 0;
}

.uj-error-404__search {
	margin: 1.75rem auto 0.5rem;
	display: flex;
	gap: 0.5rem;
	max-width: 520px;
}
.uj-error-404__search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.875rem 1.125rem;
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 999px;
	font: 1rem/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #1f2937;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}
.uj-error-404__search input[type="search"]:focus {
	outline: none;
	border-color: #B3421D;
	box-shadow: 0 0 0 3px rgba(179, 66, 29, 0.15);
}
.uj-error-404__search button[type="submit"] {
	flex-shrink: 0;
	padding: 0.875rem 1.75rem;
	background: #B3421D;
	color: #fff;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	font: 600 1rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	transition: background 0.15s ease, transform 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}
.uj-error-404__search button[type="submit"]:hover {
	background: #8E331A;
	transform: translateY(-1px);
}

.uj-error-404__footer {
	padding: 2rem 1.25rem;
	text-align: center;
}
.uj-error-404__footer p {
	margin: 0;
	color: #4b5563;
}
.uj-error-404__footer a {
	color: #B3421D;
	font-weight: 600;
	text-decoration: none;
}
.uj-error-404__footer a:hover { text-decoration: underline; }

/* ------------------------------------------------------------
   Long-form sections (mission / "what you get" / archive / FAQ)
   added 2026-05 as part of the /newsletter/ SEO + value-prop rewrite.
   ------------------------------------------------------------ */

/* Prose paragraphs inside narrow sections — comfortable measure, slightly
   larger than default body for editorial feel. */
.uj-newsletter-prose {
	margin: 0 0 1rem;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: #374151;
}
.uj-newsletter-prose:last-child { margin-bottom: 0; }

/* "What you get every week" — 5 short topic blurbs in an asymmetric grid:
   3 across on desktop, 2 on tablet, 1 on mobile (cascaded via media queries
   below). Card styling intentionally lighter than the article tiles so the
   eye doesn't read them as outbound article links. */
.uj-newsletter-topics-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}
.uj-newsletter-topic {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-top: 3px solid #B3421D;
	border-radius: 6px;
	padding: 1.25rem 1.25rem 1.125rem;
}
.uj-newsletter-topic h3 {
	margin: 0 0 0.5rem;
	font: 600 1.0625rem/1.2 "Oswald", "Arial Narrow", Impact, sans-serif;
	color: #B3421D;
	letter-spacing: 0.01em;
}
.uj-newsletter-topic p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: #374151;
}

/* Mailchimp archive list — server-rendered campaigns. Two columns on
   desktop, one on mobile. Date is muted, title carries the weight (it's
   what readers AND Googlebot scan). */
.uj-newsletter-archive {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.625rem 1rem;
}
.uj-newsletter-archive__item { margin: 0; }
.uj-newsletter-archive__link {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	padding: 0.75rem 1rem;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.uj-newsletter-archive__link:hover {
	border-color: #B3421D;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	transform: translateY(-1px);
}
.uj-newsletter-archive__date {
	font-size: 0.8125rem;
	color: #6b7280;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.uj-newsletter-archive__title {
	font-size: 0.9375rem;
	line-height: 1.35;
	color: #1f2937;
	font-weight: 500;
}
.uj-newsletter-archive__link:hover .uj-newsletter-archive__title { color: #B3421D; }

/* FAQ — native <details>/<summary> accordion. No JS. */
.uj-newsletter-faq {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}
.uj-newsletter-faq__item {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	padding: 0;
	overflow: hidden;
}
.uj-newsletter-faq__item[open] { border-color: #B3421D; }
.uj-newsletter-faq__q {
	display: block;
	padding: 1rem 2.5rem 1rem 1.125rem;
	cursor: pointer;
	font: 600 1rem/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #1f2937;
	position: relative;
	list-style: none;
	transition: color 0.15s ease;
}
.uj-newsletter-faq__q::-webkit-details-marker { display: none; }
.uj-newsletter-faq__q::after {
	content: "+";
	position: absolute;
	right: 1.125rem;
	top: 50%;
	transform: translateY(-50%);
	font: 400 1.375rem/1 "Oswald", sans-serif;
	color: #B3421D;
	transition: transform 0.15s ease;
}
.uj-newsletter-faq__item[open] .uj-newsletter-faq__q { color: #B3421D; }
.uj-newsletter-faq__item[open] .uj-newsletter-faq__q::after {
	content: "−";
}
.uj-newsletter-faq__a {
	padding: 0 1.125rem 1rem;
	color: #374151;
	font-size: 0.9375rem;
	line-height: 1.55;
}
.uj-newsletter-faq__a p { margin: 0; }

/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */
@media (max-width: 900px) {
	.uj-newsletter-samples,
	.uj-newsletter-samples--four { grid-template-columns: repeat(2, 1fr); }
	.uj-newsletter-aside-grid { grid-template-columns: 1fr; }
	.uj-newsletter-topics { grid-template-columns: repeat(2, 1fr); }
	.uj-newsletter-topics-grid { grid-template-columns: repeat(2, 1fr); }
	.uj-newsletter-archive { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.uj-newsletter-hero { padding: 2.25rem 1rem 2.5rem; }
	.uj-newsletter-section { padding: 2rem 1rem; }
	.uj-newsletter-samples,
	.uj-newsletter-samples--four { grid-template-columns: 1fr; gap: 1rem; }
	.uj-newsletter-topics { grid-template-columns: 1fr; }
	.uj-newsletter-topics-grid { grid-template-columns: 1fr; }
}