/**
 * Klaviyo newsletter band — "Join the Hurayra Family"
 *
 * Scoped to .hpf-klaviyo. The heading, sub-heading and teal band are ours; the
 * input and button are rendered by Klaviyo's onsite script, so the rules at the
 * bottom nudge whatever Klaviyo outputs into the brand's shape. Those are
 * deliberately light — if the form is already styled to match inside Klaviyo's
 * builder, they can be deleted without affecting the band itself.
 *
 * @package HPF_Trickle_Up
 */

.hpf-klaviyo {
	--k-teal: var(--hrp-teal, #60babf);
	--k-gold: var(--hrp-gold, #e4b451);
	--k-gold-deep: var(--hrp-gold-deep, #cf9d35);

	background: var(--k-teal);
	padding: clamp(38px, 6vw, 64px) 20px;
	text-align: center;
	overflow: hidden;
	/* Light hairline closing the band off against the footer. */
	border-bottom: 1px solid rgba(255, 255, 255, .3);
}

/* Removed on successful subscribe — height/opacity so it collapses rather than
   snapping away and jolting the page. */
.hpf-klaviyo {
	transition: opacity .4s ease, max-height .5s ease, padding .5s ease, border-color .4s ease;
	max-height: 600px;
	opacity: 1;
}
.hpf-klaviyo.is-subscribed {
	max-height: 0;
	opacity: 0;
	padding-top: 0;
	padding-bottom: 0;
	pointer-events: none;
	/* Fade the rule out with the band, so no stray hairline is left mid-collapse. */
	border-bottom-color: transparent;
}

.hpf-klaviyo__wrap {
	max-width: 720px;
	margin: 0 auto;
}

/* Scoped with the section class so these beat the homepage's own heading rule
   (`.hrp-home h2`, specificity 0-1-1) — a bare `.hpf-klaviyo__title` loses to it
   and the title renders in the body grey instead of white. */
.hpf-klaviyo .hpf-klaviyo__title {
	margin: 0 0 12px;
	font-family: var(--hrp-head, 'Quicksand', system-ui, sans-serif);
	font-weight: 700;
	font-size: clamp(1.75rem, 5.2vw, 2.75rem);
	line-height: 1.15;
	color: #fff;
	text-wrap: balance;
}
.hpf-klaviyo .hpf-klaviyo__hl { color: var(--k-gold); }

.hpf-klaviyo .hpf-klaviyo__sub {
	margin: 0 auto clamp(22px, 3.4vw, 30px);
	max-width: 46ch;
	font-size: clamp(.95rem, 2.6vw, 1.06rem);
	line-height: 1.5;
	color: #fff;
}

.hpf-klaviyo__form {
	max-width: 560px;
	margin: 0 auto;
}

/* =========================================================
 * Klaviyo-rendered form.
 *
 * Klaviyo owns this markup and lays it out correctly on its own — input and
 * button side by side, the right placeholder, a gold button. An earlier version
 * of this file imposed its own flexbox on top and the two fought: the input
 * stretched to 260px tall and dropped onto its own row.
 *
 * So: no layout here. Only the two cosmetic corrections needed to match the
 * supplied design, both non-structural. Anything else — sizing, spacing,
 * typography — belongs in Klaviyo's own form builder, which is where the rest
 * of this form's styling already lives.
 * =======================================================*/

/* Design has softly rounded corners; Klaviyo ships square. */
.hpf-klaviyo__form input[type="email"],
.hpf-klaviyo__form input[type="text"],
.hpf-klaviyo__form button,
.hpf-klaviyo__form input[type="submit"] {
	border-radius: 6px;
}

/* Design has white button text; Klaviyo ships black on the gold. */
.hpf-klaviyo__form button,
.hpf-klaviyo__form input[type="submit"] {
	color: #fff;
}

/* Visible focus for keyboard users, on both controls. */
.hpf-klaviyo__form input:focus-visible {
	outline: 3px solid var(--k-gold);
	outline-offset: 2px;
}
.hpf-klaviyo__form button:focus-visible,
.hpf-klaviyo__form input[type="submit"]:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.hpf-klaviyo { transition: none; }
}