/**
 * Newsletter sign-up page (page-newsletter.php).
 *
 * Styled from DESIGN-SYSTEM.md — no mockup exists. Reuses the shared page head
 * (.namieru-head), button (.btn) and form-control (.field / .form-consent /
 * .inquiry__form) styles, which are enqueued alongside this file from
 * pages/page-namieru.css. Only newsletter-specific layout lives here: the
 * centered intro copy, the centered form panel and the yes/no radio row.
 *
 * Mobile-first; scales at the theme's two breakpoints (>=561px, >=981px).
 *
 * @package Bozpo_Custom
 */

/* ============================ Page head intro ============================= */
/* Slightly wider than the default head so both intro paragraphs read well. */
.newsletter-head {
	max-width: 720px;
}

.newsletter-head__intro {
	margin: 0;
}

.newsletter-head__intro p {
	margin: 0 0 var(--space-12);
	font-size: var(--text-16);
	color: var(--color-muted);
	line-height: var(--leading-relaxed);
}

.newsletter-head__intro p:last-child {
	margin-bottom: 0;
}

.newsletter-head__intro strong {
	color: var(--color-text);
	font-weight: 600;
}

/* ============================ Sign-up section ============================= */
.newsletter-signup {
	max-width: var(--container);
	margin: 0 auto;
	padding: var(--space-28) var(--wrap-pad) var(--space-6);
}

/* Centered, comfortably narrow form panel. */
.newsletter-signup__panel {
	max-width: 520px;
	margin: 0 auto;
}

.newsletter-signup__title {
	margin: 0 0 var(--space-20);
	font-family: var(--font-display);
	font-size: var(--text-25);
	font-weight: 700;
	text-align: center;
}

/* ---- Yes/No database-consent radio row (CF7 [radio radio-33]) ---- */
.newsletter-radio {
	margin: var(--space-2) 0 var(--space-18);
	padding: 0;
	border: 0;
}

.newsletter-radio__label {
	display: block;
	margin-bottom: var(--space-8);
	font-size: var(--text-13);
	font-weight: 600;
	color: var(--color-text);
}

.newsletter-radio .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-16);
}

.newsletter-radio .wpcf7-list-item {
	margin: 0;
}

.newsletter-radio .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	font-size: var(--text-14);
	color: var(--color-text);
	cursor: pointer;
}

.newsletter-radio .wpcf7-list-item input {
	width: 17px;
	height: 17px;
	accent-color: var(--color-primary);
}

/* Submit spans the panel on this page. */
.newsletter-signup__panel .form-submit {
	width: 100%;
	margin-top: var(--space-6);
}

/* ============================== Desktop ================================== */
@media (min-width: 981px) {
	.newsletter-signup {
		padding-top: var(--space-46);
	}
}