/* ============================================================
   28 — NEWSLETTER (Brevo embed restyled to BYR glass aesthetic)
   ============================================================
   Wrapper:    .byr-newsletter-wrap                  (around the form)
   Variants:   .byr-newsletter-homepage-wrap         (homepage spacer)
               .byr-newsletter-condition-footer      (5 conditions + contact + about)

   Brevo ships heavy inline styles on .sib-form / #sib-container —
   every rule below uses !important to outrank them. We only override
   colour/border/font/radius — Brevo's JS still selects by id/class so
   structural attributes are untouched.

   Light mode: --glass-bg / --glass-border auto-remap inside .mode-light
   (see 01-core-tokens-base.css §14), so no per-mode override of the
   container chrome is needed. The input fill uses an explicit rgba so
   we add one .mode-light rule to nudge it for legibility.
============================================================ */

/* ── Reset Brevo's outer chrome ─────────────────────────── */
.byr-newsletter-wrap .sib-form {
	background: transparent !important;
	padding: 0 !important;
}

.byr-newsletter-wrap #sib-container {
	background: var(--glass-bg) !important;
	border-color: var(--glass-border) !important;
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
	border-radius: var(--radius-md) !important;
	max-width: 100% !important;
	padding: 1.25rem 1.5rem !important;
}

/* ── Labels and text ────────────────────────────────────── */
.byr-newsletter-wrap .entry__label,
.byr-newsletter-wrap .sib-form-block p {
	color: var(--color-text-primary) !important;
	font-family: inherit !important;
}

.byr-newsletter-wrap .sib-form-block p {
	margin: 0;
}

.byr-newsletter-wrap .entry__specification {
	color: var(--color-text-muted) !important;
	font-family: inherit !important;
}

/* ── Input ──────────────────────────────────────────────── */
.byr-newsletter-wrap .input {
	background: rgba(255, 255, 255, 0.07) !important;
	border: 1px solid var(--glass-border) !important;
	color: var(--color-text-primary) !important;
	border-radius: var(--radius-sm) !important;
	padding: 0.6rem 0.85rem !important;
	width: 100% !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	box-sizing: border-box !important;
}

.byr-newsletter-wrap .input::placeholder {
	color: var(--color-text-muted) !important;
	opacity: 0.7;
}

.byr-newsletter-wrap .input:focus {
	outline: none !important;
	border-color: var(--color-accent-primary) !important;
	box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18) !important;
}

/* ── Submit button — match BYR primary gradient ─────────── */
.byr-newsletter-wrap .sib-form-block__button {
	background: linear-gradient(135deg, var(--byr-primary-a), var(--byr-primary-b)) !important;
	color: #FFFFFF !important;
	border: 0 !important;
	border-radius: var(--radius-sm) !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	font-weight: 650 !important;
	padding: 0.7rem 1.4rem !important;
	width: 100%;
	cursor: pointer;
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
	transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
	text-align: center !important;
	justify-content: center;
}

.byr-newsletter-wrap .sib-form-block__button:hover,
.byr-newsletter-wrap .sib-form-block__button:focus {
	filter: saturate(1.06) contrast(1.02);
	box-shadow:
		0 14px 28px rgba(0, 0, 0, 0.32),
		0 0 28px rgba(34, 211, 238, 0.28);
	outline: none;
}

/* ── Success / error message panels ─────────────────────── */
.byr-newsletter-wrap #success-message,
.byr-newsletter-wrap #error-message {
	max-width: 100% !important;
	border-radius: var(--radius-sm) !important;
	font-family: inherit !important;
}

/* ── Light mode — input fill needs darker tint for contrast ─ */
.mode-light .byr-newsletter-wrap .input {
	background: rgba(0, 0, 0, 0.04) !important;
}

.mode-light .byr-newsletter-wrap .input:focus {
	box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.18) !important;
}

/* ============================================================
   Condition / contact / about footer variant
============================================================ */
.byr-newsletter-condition-footer {
	max-width: 600px;
	margin: 2.5rem auto 0;
	padding-top: 2rem;
	border-top: 1px solid var(--glass-border);
	text-align: center;
}

.byr-newsletter-condition-heading {
	font-size: 1.35rem;
	margin: 0 0 0.4rem;
	display: inline-block;
}

.byr-newsletter-condition-subtext {
	color: var(--color-text-muted);
	font-size: 0.95rem;
	margin: 0 0 1.25rem;
}

/* ============================================================
   Homepage variant
============================================================ */
.byr-newsletter-homepage-wrap {
	margin-top: 2rem;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

/* ============================================================
   Hide Brevo's redundant inner copy when the form is auto-
   appended to a condition / contact / about page. The outer
   .byr-newsletter-condition-heading + ...-subtext already say
   the same thing, and the "Provide your email address..." hint
   duplicates the input label. Keep both visible on the homepage
   variant where the form has no outer framing.
============================================================ */
.byr-newsletter-condition-footer .sib-text-form-block,
.byr-newsletter-condition-footer .entry__specification {
	display: none !important;
}

/* Also tighten the first padding wrapper inside the form when
   the inner blurb above is hidden — avoids a stranded gap. */
.byr-newsletter-condition-footer #sib-form > div:first-child {
	padding-top: 0 !important;
}