/* =========================================================================
   Newsletter popup (Brevo) — overlay + branding overrides
   Markup: template-parts/newsletter-popup.php
   Behaviour: js/newsletter-popup.js
   Brevo's form ships with inline styles, so brand overrides below use
   !important to win over them.
   ========================================================================= */

/* --- Overlay & modal shell ------------------------------------------------ */
.newsletter-popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: #00000070;
	z-index: -1;
	opacity: 0;
	visibility: hidden;
	transform: scale(1.15);
	transition: opacity ease-in-out 350ms, transform ease-in-out 350ms, visibility 0s linear 350ms;
}

.newsletter-popup.open {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
	z-index: 9999;
	transition: opacity ease-in-out 350ms, transform ease-in-out 350ms, visibility 0s;
}

.newsletter-popup__inner {
	position: relative;
	width: 100%;
	max-width: 540px;
	max-height: 90vh;
	overflow: auto;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

/* Close button — mirrors the contest popup closer */
.newsletter-popup__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	width: 38px;
	height: 38px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	line-height: 1;
	font-weight: 400;
	color: #fff;
	background: #1A4D66;
	border: 0;
	border-radius: 100%;
	cursor: pointer;
	transition: background ease-in-out 150ms;
}

.newsletter-popup__close:hover {
	background: #297CA5;
}

/* --- Brand overrides on the Brevo form ----------------------------------- */
.newsletter-popup .sib-form {
	background-color: #ffffff !important;
	padding: 10px !important;
	border-radius: 12px;
}

.newsletter-popup #sib-container {
	border: 0 !important;
	border-radius: 12px !important;
	padding: 30px 28px !important;
	background-color: #ffffff !important;
}

/* Heading — Raleway, brand dark blue */
.newsletter-popup #sib-form .sib-form-block p,
.newsletter-popup #sib-form .sib-form-block {
	font-family: 'Raleway', sans-serif !important;
}

.newsletter-popup #sib-form .sib-form-block[style*="32px"] p {
	color: #1A4D66 !important;
	font-weight: 700 !important;
}

/* Body copy & labels — Lato */
.newsletter-popup .sib-text-form-block p,
.newsletter-popup .entry__label,
.newsletter-popup .entry__specification,
.newsletter-popup .input {
	font-family: 'Lato', sans-serif !important;
	color: #232323 !important;
}

.newsletter-popup .entry__specification {
	color: #6b7280 !important;
}

/* Email field */
.newsletter-popup .input {
	border-radius: 6px !important;
	border: 1px solid #C0CCD9 !important;
}

.newsletter-popup .input:focus {
	border-color: #7EBF8E !important;
	outline: none;
}

/* Subscribe button — matches the theme .button (pill, Raleway, uppercase) */
.newsletter-popup .sib-form-block__button {
	display: inline-block !important;
	width: 100%;
	justify-content: center;
	background-color: #7EBF8E !important;
	color: #ffffff !important;
	font-family: 'Raleway', sans-serif !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	text-align: center !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: 30px !important;
	padding: 16px 30px !important;
	transition: background-color ease-in-out 150ms;
}

.newsletter-popup .sib-form-block__button:hover {
	background-color: #6DA67B !important;
}

/* Centre the button block (Brevo left-aligns it) */
.newsletter-popup #sib-form > div:last-of-type .sib-form-block,
.newsletter-popup .sib-form-block:has(.sib-form-block__button) {
	text-align: center !important;
}

/* Confirmation / error panels keep Brevo's colours but pick up brand font */
.newsletter-popup .sib-form-message-panel {
	font-family: 'Lato', sans-serif !important;
	max-width: 100% !important;
}

/* --- Footer trigger link -------------------------------------------------- */
.newsletter-footer-link-wrap {
	margin-bottom: 8px;
}

.newsletter-footer-link {
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color ease-in-out 150ms;
}

.newsletter-footer-link:hover {
	color: #7EBF8E;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 600px) {
	.newsletter-popup {
		padding: 14px;
	}

	.newsletter-popup #sib-container {
		padding: 24px 18px !important;
	}

	.newsletter-popup #sib-form .sib-form-block[style*="32px"] p {
		font-size: 26px !important;
	}
}