/*
 * newsletter.css — the Newsletter page template (edition "paper" layout) and
 * the MailPoet sign-up form.
 *
 * Palette and type scale come from style.css / theme.css; the "paper" edition
 * language is ported from the static pack's newsletter.html so the page stays
 * consistent with the approved design. Nothing here is load-bearing: every
 * colour reuses a token already defined by the theme.
 */

/* -------------------------------------------------------------------------- */
/* Shared: the sign-up block (used by the page template, front page, shortcodes) */
/* -------------------------------------------------------------------------- */

.newsletter-signup .eyebrow {
	margin-bottom: 14px;
}

.newsletter-signup-title {
	font-family: 'Italiana', Georgia, serif;
	font-size: clamp(26px, 2.4vw, 34px);
	font-weight: 400;
	line-height: 1.25;
	margin: 0 0 16px;
	color: var(--ink, #25465e);
}

.newsletter-signup > p:not(.eyebrow):not(.newsletter-note):not(.newsletter-status-note) {
	color: var(--muted, #5c7588);
	margin: 0 0 24px;
	max-width: 480px;
}

.newsletter-signup label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 10px;
}

.newsletter-fields {
	display: flex;
	gap: 10px;
}

.newsletter-fields input {
	min-width: 0;
	flex: 1;
	border: 1px solid #9ab9ce;
	border-radius: 0;
	padding: 14px 16px;
	background: #f9fcff;
	color: var(--ink, #25465e);
	font: inherit;
}

.newsletter-fields input:focus-visible {
	outline: 3px solid #3c779e;
	outline-offset: 3px;
}

.newsletter-fields input:disabled,
.newsletter-fields button:disabled {
	cursor: not-allowed;
	opacity: .65;
}

.newsletter-note,
.newsletter-status-note {
	font-size: 13px;
	color: var(--muted, #5c7588);
	line-height: 1.6;
}

.newsletter-note {
	margin-top: 18px;
}

.newsletter-status-note {
	margin-top: 12px;
	font-style: italic;
}

/* Inline layout (bare shortcodes) keeps the form on one comfortable measure. */
.pos-newsletter-inline {
	max-width: 520px;
}

.pos-newsletter-block {
	width: 100%;
}

/* -------------------------------------------------------------------------- */
/* Form messages + honeypot                                                    */
/*                                                                            */
/* The newsletter form reuses the contact form's ARIA live regions, so those  */
/* rules are repeated here: contact.css only loads on the contact template.   */
/* -------------------------------------------------------------------------- */

.pos-newsletter-form + .pos-form-status,
.newsletter-signup .pos-form-status,
.newsletter-signup .pos-form-errors,
.pos-newsletter-inline .pos-form-status,
.pos-newsletter-inline .pos-form-errors,
.pos-edition-signup .pos-form-status,
.pos-edition-signup .pos-form-errors {
	margin: 0 0 14px;
	padding: 14px 18px;
	font-size: 14px;
	line-height: 1.6;
}

.newsletter-signup .pos-form-status-wrap {
	margin-bottom: 4px;
}

.newsletter-signup .pos-form-status {
	background: #e3f1fa;
	border-left: 4px solid #356a8d;
	color: #25465e;
}

.newsletter-signup .pos-form-errors {
	background: #fbeaea;
	border-left: 4px solid #b4433f;
	color: #7c2b28;
}

.newsletter-signup .pos-form-status[hidden],
.newsletter-signup .pos-form-errors[hidden] {
	display: none;
}

.newsletter-signup .pos-field {
	margin-bottom: 16px;
}

.newsletter-signup .pos-field label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 10px;
}

.newsletter-signup .pos-field input {
	width: 100%;
	border: 1px solid #9ab9ce;
	border-radius: 0;
	padding: 14px 16px;
	background: #f9fcff;
	color: var(--ink, #25465e);
	font: inherit;
}

.newsletter-signup .pos-field input:focus-visible {
	outline: 3px solid #3c779e;
	outline-offset: 3px;
}

/* Honeypot — visually and programmatically hidden. */
.newsletter-signup .pos-hp {
	position: absolute !important;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 700px) {
	.newsletter-fields {
		flex-direction: column;
	}

	.newsletter-fields .button {
		width: 100%;
	}
}

/* -------------------------------------------------------------------------- */
/* Landing page hero: stacked book + newsletter callouts                       */
/* -------------------------------------------------------------------------- */

/*
 * The updated design stacks the two discovery callouts in a single centred
 * column. On desktop the wrapper takes over the absolute centring that the
 * book callout used on its own, so style.css's `.hero>.hero-book-callout`
 * centring rule no longer applies once the wrapper is present.
 */
.hero-discover-links {
	position: relative;
	z-index: 2;
	justify-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	width: 170px;
	text-align: center;
}

.hero-discover-links > a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 8px 0;
	border: 0;
	color: #25465e;
	font-size: 21px;
	font-weight: 500;
	line-height: 1.4;
}

.hero-discover-links strong {
	display: block;
	font-weight: 700;
}

.hero-discover-links .book-down-arrow {
	font-size: 32px;
	line-height: 1;
}

.hero-discover-links > a:hover {
	color: #356a8d;
	text-decoration: underline;
	text-underline-offset: 5px;
}

@media (min-width: 1101px) {
	.hero-discover-links {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
}

@media (max-width: 1100px) {
	.hero-discover-links {
		width: auto;
		gap: 18px;
	}

	.hero-discover-links > a {
		flex-direction: row;
		gap: 14px;
		font-size: 21px;
	}

	.hero-discover-links strong {
		display: inline;
	}
}

/* -------------------------------------------------------------------------- */
/* Front page #newsletter section                                              */
/* -------------------------------------------------------------------------- */

.pos-front .newsletter {
	background: #e5f2fa;
	border-top: 1px solid var(--line, #d3e4ef);
	scroll-margin-top: 30px;
}

.pos-front .newsletter .wrap {
	padding-top: 75px;
	padding-bottom: 75px;
}

.pos-front .newsletter-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 70px;
	align-items: center;
}

.pos-front .newsletter-intro > p:not(.eyebrow) {
	max-width: 480px;
	color: var(--muted, #5c7588);
	margin: 24px 0 0;
}

.pos-front .newsletter-intro h2 {
	font-size: clamp(39px, 4.1vw, 58px);
}

@media (max-width: 1000px) {
	.pos-front .newsletter-inner {
		gap: 35px;
	}
}

@media (max-width: 700px) {
	.pos-front .newsletter-inner {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------- */
/* Newsletter page template — the edition "paper"                              */
/* -------------------------------------------------------------------------- */

.pos-newsletter-page {
	background: #f4f7f7;
}

.pos-edition-paper {
	max-width: 800px;
	margin: 30px auto 60px;
	background: #fff;
	box-shadow: 0 12px 60px rgba(36, 62, 74, .03);
}

.pos-edition-masthead {
	text-align: center;
	padding: 40px 28px 28px;
}

.pos-edition-masthead .eyebrow {
	color: #9a793b;
	font-size: 10px;
	letter-spacing: 2.5px;
	margin-bottom: 0;
}

.pos-edition-masthead h1,
.pos-edition-masthead h2 {
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: 32px;
	line-height: 1.2;
	margin: 14px 0 10px;
	color: #263e4a;
}

.pos-edition-tagline {
	font: italic 15px Georgia, 'Times New Roman', serif;
	color: #5e7480;
	margin: 0;
}

.pos-edition-meta {
	display: flex;
	justify-content: space-between;
	margin: 30px 0 0;
	border-top: 1px solid #e2e8e9;
	padding-top: 16px;
	color: #5e7480;
	font-size: 10px;
	letter-spacing: 1.8px;
}

.pos-edition-hero {
	position: relative;
	text-align: center;
	padding: 52px 25px 60px;
	background: #e8f3fa center 68% / cover no-repeat;
}

.pos-edition-hero:before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(234, 244, 250, .92), rgba(234, 244, 250, .52) 45%, rgba(234, 244, 250, 0));
}

.pos-edition-hero > * {
	position: relative;
}

.pos-edition-hero .eyebrow {
	color: #9a793b;
	margin-bottom: 0;
}

.pos-edition-hero h2 {
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(42px, 7vw, 66px);
	line-height: 1.08;
	letter-spacing: -2px;
	margin: 20px 0;
	color: #263e4a;
}

.pos-edition-hero h2 em {
	font-style: normal;
}

.pos-edition-hero p {
	font: 16px/1.6 Georgia, 'Times New Roman', serif;
	margin: 0;
	color: #263e4a;
}

/* The article body is whatever the editor wrote — styled like the pack. */
.pos-edition-article {
	max-width: 610px;
	margin: 0 auto;
	padding: 40px 28px 10px;
}

.pos-edition-article > * {
	font-family: Georgia, 'Times New Roman', serif;
}

.pos-edition-article p {
	font-size: 18px;
	line-height: 1.85;
	margin: 0 0 23px;
	color: #263e4a;
}

.pos-edition-article > p:first-child:first-letter {
	font-size: 58px;
	float: left;
	line-height: .9;
	margin: 10px 8px 0 0;
	color: #9a793b;
}

.pos-edition-article h2 {
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-weight: 400;
	font-size: 29px;
	line-height: 1.3;
	margin: 36px 0 22px;
	color: #263e4a;
}

.pos-edition-article h3 {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 23px;
	font-weight: 400;
	margin: 30px 0 16px;
	color: #263e4a;
}

.pos-edition-article blockquote {
	border-left: 2px solid #b99b60;
	margin: 32px 0;
	padding: 5px 0 5px 24px;
}

.pos-edition-article blockquote p {
	font-size: 26px;
	line-height: 1.5;
	margin: 0;
}

.pos-edition-article a {
	color: #356a8d;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.pos-edition-signature {
	color: #5e7480;
	font: italic 18px Georgia, 'Times New Roman', serif;
	margin: 32px 0 40px;
}

.pos-edition-signature span {
	font: 11px Arial, sans-serif;
	letter-spacing: 1px;
	display: inline-block;
	margin-top: 10px;
}

/* Practice panel inside the edition. */
.pos-edition-practice {
	margin: 10px 46px 40px;
	background: #eaf3f7;
	padding: 30px 38px;
}

.pos-edition-practice .eyebrow {
	color: #9a793b;
	margin-bottom: 0;
}

.pos-edition-practice h2 {
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: 30px;
	line-height: 1.25;
	margin: 13px 0 24px;
	color: #263e4a;
}

.pos-edition-step {
	display: grid;
	grid-template-columns: 32px 1fr;
	gap: 12px;
	margin: 18px 0;
}

.pos-edition-step .num {
	font: italic 22px Georgia, 'Times New Roman', serif;
	color: #9a793b;
}

.pos-edition-step p {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	color: #263e4a;
}

.pos-edition-step strong {
	display: block;
	font-size: 14px;
	margin-bottom: 3px;
}

.pos-edition-practice-note {
	font: italic 16px/1.7 Georgia, 'Times New Roman', serif;
	margin: 22px 0 0;
	color: #263e4a;
}

.pos-edition-practice .button {
	display: inline-block;
	background: #263e4a;
	color: #fff;
	padding: 14px 22px;
	font-size: 12px;
	letter-spacing: .6px;
	margin-top: 15px;
	min-height: 0;
}

.pos-edition-practice .button:hover {
	background: #356a8d;
}

/* Sign-up section inside the edition. */
.pos-edition-signup {
	border-top: 1px solid #e2e8e9;
	margin: 10px 46px 0;
	padding: 34px 0 10px;
}

.pos-edition-signup .newsletter-signup-title {
	font-family: Georgia, 'Times New Roman', serif;
	color: #263e4a;
}

/* Closing + footer of the edition. */
.pos-edition-closing {
	text-align: center;
	padding: 0 30px 38px;
}

.pos-edition-closing h2 {
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: 25px;
	line-height: 1.3;
	margin: 0 0 12px;
	color: #263e4a;
}

.pos-edition-closing p {
	font-size: 14px;
	line-height: 1.8;
	color: #5e7480;
	margin: 0 0 16px;
}

.pos-edition-closing a {
	color: #356a8d;
}

.pos-edition-footer {
	text-align: center;
	border-top: 1px solid #e4eaec;
	padding: 28px 20px;
	color: #5e7480;
	font-size: 11px;
	line-height: 1.9;
}

.pos-edition-footer a {
	margin: 0 7px;
	color: #356a8d;
}

/* Breadcrumb sits above the paper. */
.pos-newsletter-page .pos-breadcrumbs {
	max-width: 800px;
	margin: 20px auto 0;
	padding: 0 20px;
}

@media (max-width: 700px) {
	.pos-edition-paper {
		margin: 16px 0 40px;
		box-shadow: none;
	}

	.pos-edition-masthead {
		padding: 28px 20px 20px;
	}

	.pos-edition-masthead h1,
	.pos-edition-masthead h2 {
		font-size: 27px;
	}

	.pos-edition-hero {
		padding: 40px 20px 46px;
	}

	.pos-edition-article {
		padding: 30px 25px 5px;
	}

	.pos-edition-article p {
		font-size: 17px;
	}

	.pos-edition-practice,
	.pos-edition-signup {
		margin-left: 20px;
		margin-right: 20px;
		padding: 25px;
	}

	.pos-edition-signup {
		padding-bottom: 5px;
	}

	.pos-edition-meta {
		font-size: 9px;
		letter-spacing: 1px;
	}
}

/* Print: the edition is designed to print cleanly. */
@media print {
	.pos-newsletter-page,
	.pos-edition-paper {
		background: #fff;
		box-shadow: none;
		max-width: none;
		margin: 0;
	}

	.pos-edition-practice {
		break-inside: avoid;
	}

	.pos-edition-hero {
		print-color-adjust: exact;
		-webkit-print-color-adjust: exact;
	}
}