/* ============================================================================
   Components — buttons, cards, badges, the language toggle
   ============================================================================ */

/* CTA buttons --------------------------------------------------------------- */
.cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 0.75rem 1.5rem;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--color-deep);
	border: 1.5px solid currentColor;
	transition: transform var(--dur-base) var(--ease-out),
		background-color var(--dur-base) var(--ease-out),
		color var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out);
}

.cta:hover,
.cta:focus-visible {
	transform: translateY(-1px) scale(1.02);
	box-shadow: var(--shadow-md);
}

.cta--coral {
	background: var(--color-coral);
	color: var(--color-paper);
	border-color: var(--color-coral);
}

.cta--coral:hover,
.cta--coral:focus-visible {
	background: var(--color-coral-dark);
	border-color: var(--color-coral-dark);
	color: var(--color-paper);
}

.cta--ghost {
	background: transparent;
	color: var(--color-deep);
}

.cta--lg {
	padding: 1rem 2rem;
	font-size: var(--fs-base);
}

/* Cards --------------------------------------------------------------------- */
.card {
	background: var(--color-paper);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	transition: transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out),
		border-color var(--dur-base) var(--ease-out);
}

.card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: var(--color-coral);
}

/* Stat tile ----------------------------------------------------------------- */
.stat {
	text-align: center;
	padding: var(--space-4);
}

.stat__value {
	font-family: var(--font-display);
	font-size: clamp(var(--fs-xl), 4vw, var(--fs-3xl));
	font-weight: var(--fw-bold);
	color: var(--color-deep);
	line-height: 1;
	display: block;
	margin-bottom: var(--space-2);
}

.stat__label {
	font-size: var(--fs-sm);
	color: var(--color-ink-soft);
	line-height: var(--lh-snug);
}

/* Pending toggle — hidden until i18n is wired ------------------------------ */
.lang-toggle--pending {
	display: none !important;
}

/* Language toggle ----------------------------------------------------------- */
.lang-toggle {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--color-indigo);
	border-radius: var(--radius-pill);
	padding: 2px;
	gap: 0;
	height: 30px;
}

.lang-toggle__btn {
	padding: 0 0.65rem;
	font-size: 0.75rem;
	font-weight: var(--fw-bold);
	color: var(--color-indigo);
	border-radius: var(--radius-pill);
	height: 100%;
	display: inline-flex;
	align-items: center;
	transition: background-color var(--dur-base) var(--ease-out),
		color var(--dur-base) var(--ease-out);
}

.lang-toggle__btn.is-active {
	background: var(--color-indigo);
	color: var(--color-paper);
}

.lang-toggle__btn:not(.is-active):hover {
	color: var(--color-deep);
}

/* Gutenberg blocks inside .page-content — make them feel native ----------- */
.page-content .wp-block-columns {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
	gap: var(--space-5);
	margin-block: var(--space-6);
}

.page-content .wp-block-column {
	background: var(--color-paper);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	transition: transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out),
		border-color var(--dur-base) var(--ease-out);
}

.page-content .wp-block-column:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: var(--color-coral);
}

.page-content .wp-block-column h2,
.page-content .wp-block-column .wp-block-heading {
	font-family: var(--font-display);
	color: var(--color-deep);
	margin-bottom: var(--space-4);
	font-size: var(--fs-xl);
}

.page-content .wp-block-column ul {
	list-style: none;
	padding-left: 0;
}

.page-content .wp-block-column ul li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: var(--space-2);
	color: var(--color-ink);
	font-size: var(--fs-sm);
	line-height: 1.5;
}

.page-content .wp-block-column ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55rem;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-coral);
}

/* Block buttons → use our coral CTA pill style */
.page-content .wp-block-button .wp-block-button__link,
.page-content .wp-block-button__link.wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 0.75rem 1.5rem;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	border-radius: var(--radius-pill);
	background: var(--color-coral);
	color: var(--color-paper);
	border: 1.5px solid var(--color-coral);
	text-decoration: none;
	background-image: none;
	transition: transform var(--dur-base) var(--ease-out),
		background-color var(--dur-base) var(--ease-out);
}

.page-content .wp-block-button .wp-block-button__link:hover {
	background: var(--color-coral-dark);
	border-color: var(--color-coral-dark);
	transform: translateY(-1px) scale(1.02);
}

.page-content .wp-block-buttons {
	margin-block: var(--space-4);
}

.page-content h2.wp-block-heading {
	margin-top: var(--space-8);
}

.page-content p {
	color: var(--color-ink);
}

/* Eyebrow / kicker ---------------------------------------------------------- */
.eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-ember);
	margin-bottom: var(--space-3);
}

/* Contact form ------------------------------------------------------------- */
.contact-form-wrap {
	background: var(--color-paper-warm);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	margin: var(--space-6) auto;
	max-width: 760px;
	box-shadow: var(--shadow-md);
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.contact-form-wrap::before {
	content: "";
	position: absolute;
	inset: -30%;
	z-index: -1;
	background:
		radial-gradient(40% 40% at 80% 20%, rgba(252, 192, 0, 0.12), transparent 60%),
		radial-gradient(40% 40% at 20% 80%, rgba(252, 60, 48, 0.08), transparent 60%);
	pointer-events: none;
}

.contact-form-success {
	text-align: center;
	padding: var(--space-6) var(--space-3);
}

.contact-form-success__svg {
	margin: 0 auto var(--space-4);
	display: block;
}

/* Seed → flower bloom sequence ---------------------------------------------
   Pot drops in → soil → seed falls → stem grows → leaves unfurl → flower blooms
   → ambient petals drift. Total ~3.4s, then the flower keeps a soft sway. */
.seed-pot {
	transform-origin: 100px 234px;
	transform: scale(0) translateY(20px);
	opacity: 0;
	animation: seed-pot-in 0.55s var(--ease-out) 0.05s forwards;
}

.seed-soil {
	transform-origin: 100px 198px;
	transform: scaleX(0);
	opacity: 0;
	animation: seed-soil-in 0.4s var(--ease-out) 0.55s forwards;
}

.seed-seed {
	transform-origin: 100px 196px;
	transform: translateY(-200px);
	opacity: 0;
	animation: seed-seed-fall 0.7s cubic-bezier(0.45, 1.4, 0.5, 1) 0.85s forwards,
		seed-seed-fade 0.5s ease-out 1.5s forwards;
}

.seed-stem {
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	animation: seed-stem-grow 0.9s var(--ease-out) 1.55s forwards;
}

.seed-leaf {
	transform-origin: 100px 158px;
	transform: scale(0);
	animation: seed-leaf-unfurl 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2.2s forwards;
}

.seed-leaf--right {
	transform-origin: 100px 146px;
	animation-delay: 2.45s;
}

.seed-flower {
	transform: translate(100px, 110px) scale(0) rotate(-30deg);
	opacity: 0;
	animation: seed-flower-bloom 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 2.85s forwards,
		seed-flower-sway 8s ease-in-out 4s infinite;
}

.seed-petal {
	opacity: 0;
	transform: translateY(-20px);
	animation: seed-petal-drift 4s ease-in-out 3.4s infinite;
}

.seed-petal--2 { animation-delay: 4.1s; animation-duration: 5s; }
.seed-petal--3 { animation-delay: 4.6s; animation-duration: 6s; }

@keyframes seed-pot-in {
	from { transform: scale(0) translateY(20px); opacity: 0; }
	60%  { transform: scale(1.05) translateY(-2px); opacity: 1; }
	to   { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes seed-soil-in {
	from { transform: scaleX(0); opacity: 0; }
	to   { transform: scaleX(1); opacity: 1; }
}

@keyframes seed-seed-fall {
	0%   { transform: translateY(-200px); opacity: 0; }
	30%  { opacity: 1; }
	100% { transform: translateY(0); opacity: 1; }
}

@keyframes seed-seed-fade {
	to { opacity: 0; }
}

@keyframes seed-stem-grow {
	to { stroke-dashoffset: 0; }
}

@keyframes seed-leaf-unfurl {
	from { transform: scale(0) rotate(-15deg); }
	to   { transform: scale(1) rotate(0); }
}

@keyframes seed-flower-bloom {
	0%   { transform: translate(100px, 110px) scale(0) rotate(-30deg); opacity: 0; }
	60%  { transform: translate(100px, 110px) scale(1.15) rotate(8deg); opacity: 1; }
	100% { transform: translate(100px, 110px) scale(1) rotate(0); opacity: 1; }
}

@keyframes seed-flower-sway {
	0%, 100% { transform: translate(100px, 110px) rotate(0); }
	50%      { transform: translate(100px, 110px) rotate(4deg); }
}

@keyframes seed-petal-drift {
	0%   { transform: translate(0, -10px) rotate(0); opacity: 0; }
	30%  { opacity: 0.7; }
	100% { transform: translate(20px, 60px) rotate(60deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.seed-pot,
	.seed-soil,
	.seed-seed,
	.seed-stem,
	.seed-leaf,
	.seed-flower,
	.seed-petal {
		animation: none;
		transform: none;
		stroke-dashoffset: 0;
		opacity: 1;
	}
	.seed-seed { opacity: 0; }
	.seed-flower { transform: translate(100px, 110px); }
}

.contact-form-success h3 {
	color: var(--color-deep);
	font-family: var(--font-display);
	font-size: clamp(var(--fs-xl), 4vw, var(--fs-2xl));
	margin-bottom: var(--space-3);
}

.contact-form-success p {
	color: var(--color-ink-soft);
	max-width: 38ch;
	margin: 0 auto var(--space-2);
	font-size: var(--fs-md);
}

.contact-form-success__caption {
	color: var(--color-ember) !important;
	font-family: var(--font-display);
	font-size: var(--fs-sm) !important;
	margin-top: var(--space-4) !important;
	opacity: 0.85;
}

.contact-form-error {
	background: var(--color-coral);
	color: var(--color-paper);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-4);
	font-size: var(--fs-sm);
}

.contact-form__hp {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
	margin-bottom: var(--space-4);
}

@media (max-width: 640px) {
	.contact-form__row {
		grid-template-columns: 1fr;
	}
}

.contact-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.contact-form__label {
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--color-deep);
	letter-spacing: 0.01em;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-paper);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: 1.4;
	transition: border-color var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out),
		background-color var(--dur-base) var(--ease-out);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
	outline: none;
	border-color: var(--color-coral);
	box-shadow: 0 0 0 4px rgba(252, 60, 48, 0.14);
	background: var(--color-paper);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
	color: var(--color-ink-soft);
	opacity: 0.65;
}

.contact-form textarea {
	resize: vertical;
	min-height: 160px;
}

.contact-form select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path d='M3 5l4 4 4-4' stroke='%235A4632' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 2.5rem;
}

.contact-form__submit {
	margin-top: var(--space-3);
	width: 100%;
	justify-content: center;
}

@media (min-width: 640px) {
	.contact-form__submit {
		width: auto;
	}
}

.contact-form__footer {
	margin-top: var(--space-3);
	font-size: var(--fs-sm);
	color: var(--color-ink-soft);
	text-align: center;
}

/* Quote / testimonial ------------------------------------------------------- */
.quote {
	background: var(--color-paper);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	border: 1px solid var(--color-border);
}

.quote__stars {
	color: var(--color-sun);
	letter-spacing: 0.1em;
	margin-bottom: var(--space-3);
}

.quote__text {
	font-family: var(--font-display);
	font-size: var(--fs-md);
	font-style: italic;
	color: var(--color-ink);
	margin-bottom: var(--space-4);
	line-height: var(--lh-snug);
}

.quote__attrib {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.quote__avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--color-mist);
	flex-shrink: 0;
	overflow: hidden;
	position: relative;
	border: 2px solid var(--color-paper);
	box-shadow: 0 0 0 1px var(--color-border);
}

/* Source avatars have decorative swirl backgrounds — zoom in tight on the
   face and bias upward so the head fills the circle. */
.quote__avatar img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center 30% !important;
	transform: scale(1.5);
	transform-origin: center 30%;
	display: block;
	border-radius: 50%;
}

/* Initials fallback when no featured image is set on a testimonial.
   Renders a colored circle with the student's initials. */
.quote__avatar--initials {
	background: var(--color-paper);
}

.quote__avatar-initials {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: 18px;
	letter-spacing: 0.04em;
	border-radius: 50%;
}

.quote__name {
	font-weight: var(--fw-bold);
	color: var(--color-deep);
	font-size: var(--fs-sm);
}

.quote__level {
	font-size: var(--fs-xs);
	color: var(--color-ink-soft);
}

/* ============================================================================
   Flower bed — sprouts out of the footer's blue top edge as the user
   scrolls into view (controlled by IntersectionObserver in lwl-marketing.js).

   Choreography:
   - Bed sits ABOVE the footer (bottom: 100%) so flower stems originate
     at the top edge of the footer's blue and grow upward into the section
     above.
   - Each .bed-flower base state is hidden: opacity 0, scale(0.4),
     translateY(20px). Adding .is-grown to .flower-bed transitions all
     flowers to their full pose — but with per-flower --bloom-d delays so
     they cascade in (left → right, like a wave of meadow waking).
   - Removing .is-grown reverses the same transition; per-flower --wilt-d
     delays make the bed wilt back in REVERSE order (right → left), so
     scrolling away looks like flowers tucking themselves in.
   - prefers-reduced-motion users skip the JS entirely; .is-grown +
     .is-reduced is set so the bed renders flat with no transitions.
   ============================================================================ */

.flower-bed {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 130px;
	pointer-events: none;
	overflow: visible;
	z-index: 2;
}

.bed-flower {
	position: absolute;
	bottom: 0;
	display: block;
	opacity: 0;
	transform: translateY(22px) scale(0.4);
	transform-origin: bottom center;
	transition:
		opacity 1.1s ease-out,
		transform 1.6s cubic-bezier(0.34, 1.56, 0.64, 1);
	transition-delay: var(--wilt-d, 0s);
	will-change: opacity, transform;
}

.bed-flower svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Inside each flower, give the petals a tiny extra pop on bloom and a
   gentle sway throughout. Stem is drawn-then-static (no stroke-dashoffset
   here — the whole-flower scale-up reads as growth). */
.bed-flower .flower-petals,
.bed-flower .flower-head {
	transform-box: fill-box;
	transform-origin: center;
}

/* Grown state — flowers settle into their full pose. */
.flower-bed.is-grown .bed-flower {
	opacity: 1;
	transform: translateY(0) scale(1);
	transition-delay: var(--bloom-d, 0s);
}

/* Subtle perpetual sway, applied to the INNER svg so it doesn't fight with
   the .bed-flower wrapper's grow/wilt translate+scale transition. The sway
   only kicks in once the flower has bloomed (same delay as the bloom). */
@keyframes bed-flower-sway {
	0%, 100% { transform: rotate(-2.2deg); }
	50%      { transform: rotate(2.2deg); }
}

.flower-bed.is-grown .bed-flower svg {
	transform-origin: 50% 100%;
	animation: bed-flower-sway 7s ease-in-out infinite;
	animation-delay: var(--bloom-d, 0s);
}

/* Reduced-motion: skip animations and transitions, just show the flowers. */
.flower-bed.is-reduced .bed-flower {
	transition: none;
	animation: none;
	opacity: 1;
	transform: none;
}
.flower-bed.is-reduced .bed-flower svg {
	animation: none;
}

/* Per-flower placements + cascade timings.
   --bloom-d  : delay when growing IN (cascade left → right)
   --wilt-d   : delay when wilting OUT (cascade right → left)
   Picking a 0.10s base step: 12 flowers × 0.10s = 1.2s total cascade. */
.bed-flower--1  { left: 1%;   width: 64px; height: 110px; --bloom-d: 0.00s; --wilt-d: 1.10s; }
.bed-flower--2  { left: 8%;   width: 38px; height: 80px;  --bloom-d: 0.10s; --wilt-d: 1.00s; }
.bed-flower--3  { left: 15%;  width: 52px; height: 100px; --bloom-d: 0.20s; --wilt-d: 0.90s; }
.bed-flower--4  { left: 22%;  width: 64px; height: 110px; --bloom-d: 0.30s; --wilt-d: 0.80s; }
.bed-flower--5  { left: 30%;  width: 50px; height: 110px; --bloom-d: 0.40s; --wilt-d: 0.70s; }
.bed-flower--6  { left: 38%;  width: 50px; height: 100px; --bloom-d: 0.50s; --wilt-d: 0.60s; }
.bed-flower--7  { left: 46%;  width: 38px; height: 80px;  --bloom-d: 0.60s; --wilt-d: 0.50s; }
.bed-flower--8  { left: 56%;  width: 60px; height: 110px; --bloom-d: 0.70s; --wilt-d: 0.40s; }
.bed-flower--9  { left: 64%;  width: 50px; height: 110px; --bloom-d: 0.80s; --wilt-d: 0.30s; }
.bed-flower--10 { left: 72%;  width: 50px; height: 100px; --bloom-d: 0.90s; --wilt-d: 0.20s; }
.bed-flower--11 { left: 82%;  width: 38px; height: 80px;  --bloom-d: 1.00s; --wilt-d: 0.10s; }
.bed-flower--12 { left: 90%;  width: 64px; height: 110px; --bloom-d: 1.10s; --wilt-d: 0.00s; }

@media (max-width: 720px) {
	/* Phones: thin out the meadow so it doesn't crowd. Keep every other one. */
	.flower-bed { height: 100px; }
	.bed-flower--2,
	.bed-flower--5,
	.bed-flower--7,
	.bed-flower--10,
	.bed-flower--11 { display: none; }
	.bed-flower--1  { left: 4%; }
	.bed-flower--3  { left: 18%; }
	.bed-flower--4  { left: 32%; }
	.bed-flower--6  { left: 46%; }
	.bed-flower--8  { left: 60%; }
	.bed-flower--9  { left: 74%; }
	.bed-flower--12 { left: 88%; }
}

@media (prefers-reduced-motion: reduce) {
	.bed-flower {
		transition: none;
		animation: none;
		opacity: 1;
		transform: none;
	}
}