/*
 * Klaviyo signup embed ([sisa_klaviyo_form], functions/integrations/klaviyo.php)
 * — theme the third-party form onto the design system.
 *
 * Klaviyo's onsite JS renders the form with INLINE styles (white card, Lato,
 * rounded inputs) + obfuscated utility classes. Inline styles lose only to
 * `!important` author rules, so every override here carries it — scoped under
 * .sisa-klaviyo so nothing leaks to other Klaviyo surfaces. Stable hooks used:
 * .klaviyo-form, .klaviyo-form-richtext, .klaviyo-form-button,
 * [data-testid="form-row"] — the go… class names are versioned, never target
 * them. Lives in the dark newsletter bands (home + /aktuell/ + /checkliste/):
 * 52px field/button geometry, fluid within its column.
 *
 * Degrades gracefully: if Klaviyo changes markup, unmatched rules fall back to
 * body font + muted light text via the blanket rules below.
 */

/* ---- strip Klaviyo's white card: the dark band is the surface ---- */
.sisa-klaviyo form.klaviyo-form {
	background: transparent !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
}
.sisa-klaviyo form.klaviyo-form > div { min-height: 0 !important; }

/* ---- typography: everything onto the system stack, light-on-dark ---- */
.sisa-klaviyo .klaviyo-form,
.sisa-klaviyo .klaviyo-form * {
	font-family: var(--sisa-body) !important;
}
.sisa-klaviyo .klaviyo-form-richtext,
.sisa-klaviyo .klaviyo-form-richtext * {
	color: var(--sisa-on-emphasis-muted) !important;
	text-align: left !important;
}

/* Form heading (Klaviyo builder: 25px rich-text h1) → quiet uppercase label,
   so it doesn't compete with the band's Brauer display heading beside it. */
.sisa-klaviyo .klaviyo-form-richtext h1 span[style*="25px"] {
	display: inline-block;
	color: var(--sisa-on-emphasis) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 1.6px !important;
	text-transform: uppercase !important;
	line-height: 1.4 !important;
}

/* Supporting copy (builder: 16px) → 14px muted. */
.sisa-klaviyo .klaviyo-form-richtext h1 span[style*="16px"] {
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.55 !important;
}

/* Row rhythm. */
.sisa-klaviyo [data-testid="form-row"] { padding: 0 !important; }
.sisa-klaviyo [data-testid="form-row"] + [data-testid="form-row"] { margin-top: 12px !important; }

/* ---- field + button: the design system's 52px dark-band geometry ---- */
.sisa-klaviyo .klaviyo-form input[type="email"],
.sisa-klaviyo .klaviyo-form input[type="text"] {
	height: 52px !important;
	padding: 0 16px !important;
	border: 1px solid var(--sisa-emphasis-line) !important;
	border-radius: 0 !important;
	background: var(--sisa-emphasis-2) !important;
	color: var(--sisa-on-emphasis) !important;
	font-size: 14px !important;
	letter-spacing: normal !important; /* Klaviyo's 2px tracking clips the placeholder on mobile */
	box-shadow: none !important;
}
.sisa-klaviyo .klaviyo-form input::placeholder { color: var(--sisa-on-emphasis-muted) !important; }

.sisa-klaviyo .klaviyo-form button {
	height: 52px !important;
	padding: 0 22px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--sisa-yellow) !important;
	color: var(--sisa-yellow-ink) !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	letter-spacing: 1.2px !important;
	text-transform: uppercase !important;
	white-space: nowrap;
	cursor: pointer;
}
.sisa-klaviyo .klaviyo-form button:hover { opacity: .9; }

/* Success / error feedback stays legible on the dark band. */
.sisa-klaviyo .klaviyo-form [role="alert"],
.sisa-klaviyo .klaviyo-form [data-testid="form-component"] p {
	color: var(--sisa-on-emphasis) !important;
}

/* ---- dark newsletter band (block-markup group, /checkliste/) ---- */
/* Desktop paddings live in the block markup; on small screens tighten them to
   the same 32/22 the other dark bands use (aktuell.css mobile rule). */
@media (max-width: 767px) {
	.sisa-nl-band { padding: 32px 22px !important; }
}

/* ---- consent fallback (server-rendered, pre-consent on .de / declined) ---- */
.sisa-klaviyo__consent {
	border: 1px solid var(--sisa-emphasis-line);
	padding: 20px;
}
.sisa-klaviyo__consent p {
	margin: 0 0 14px;
	color: var(--sisa-on-emphasis-muted);
	font-size: 14px;
	line-height: 1.55;
}
.sisa-klaviyo__consent-btn {
	display: inline-block;
	padding: 12px 20px;
	border: 1px solid var(--sisa-yellow);
	color: var(--sisa-yellow);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	text-decoration: none;
}
.sisa-klaviyo__consent-btn:hover {
	background: var(--sisa-yellow);
	color: var(--sisa-yellow-ink);
}