/**
 * Fantasia — global styles: base, header, footer, buttons, cards, grids, heroes, sections,
 * the "bokeh" circles. Design tokens come from theme.json (--wp--preset--*).
 * Block-specific styles live in assets/css/blocks/ and load only with their block.
 */

:root {
	--fc-blue: var(--wp--preset--color--primary);
	--fc-blue-dark: var(--wp--preset--color--primary-dark);
	--fc-ink: var(--wp--preset--color--contrast);
	--fc-muted: var(--wp--preset--color--muted);
	--fc-accent: var(--wp--preset--color--accent);
	--fc-accent-dark: #93127f;
	--fc-line: var(--wp--preset--color--line);
	--fc-radius-card: 28px;
	--fc-radius-media: 40px;
	--fc-shadow: var(--wp--preset--shadow--card);
	--fc-heading: var(--wp--preset--font-family--heading);
	--fc-gutter: clamp(16px, 4vw, 56px);
}

/* Base ---------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--fc-blue);
	outline-offset: 2px;
	border-radius: 4px;
}

::selection {
	background: var(--wp--preset--color--butter);
	color: var(--fc-ink);
}

img {
	max-width: 100%;
	height: auto;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Bound meta paragraphs with no value (e.g. an empty lead) take no space. */
p:empty {
	display: none;
}

.skip-link.screen-reader-text:focus {
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	padding: 12px 20px;
	top: 8px;
	left: 8px;
	z-index: 100000;
	background: var(--fc-ink);
	color: #fff;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
}

/* Buttons -------------------------------------------------------------- */

.fc-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	box-sizing: border-box;
	padding: 12px 26px;
	border-radius: 999px;
	background: var(--fc-accent);
	color: #fff;
	font-family: var(--fc-heading);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.fc-button:hover,
.fc-button:focus-visible {
	background: var(--fc-accent-dark);
	color: #fff;
}

.fc-button--secondary,
.is-style-outline > .wp-block-button__link,
.wp-block-button__link.is-style-outline {
	background: #fff;
	color: var(--fc-blue);
	border: 2px solid var(--fc-blue);
	padding: 10px 24px;
}

.fc-button--secondary:hover,
.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--tint-blue);
	color: var(--fc-blue-dark);
	border-color: var(--fc-blue-dark);
}

.site-header .fc-trial-cta,
.fc-hero__actions .fc-trial-cta,
.entity-hero .fc-trial-cta {
	margin: 0;
}

/* Header --------------------------------------------------------------- */

/*
 * The header sticks to the top while scrolling; the phone bar (desktop only) scrolls away first:
 * top is negative by the bar's height. --wp-admin--admin-bar--height is set by WordPress for
 * logged-in users.
 */
.site-header {
	--fc-topbar-h: 0px;
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--fc-topbar-h));
	z-index: 20;
	background: #fff;
}

/* An open phone menu must cover the chat button and everything else. */
.site-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	z-index: 100000;
}

.site-topbar {
	box-sizing: border-box;
	height: 34px; /* Fixed: the sticky header offset (--fc-topbar-h) relies on it. */
	padding-block: 6px;
	font-size: 14px;
	font-weight: 700;
	line-height: 22px;
}

.site-topbar .fc-phones {
	max-width: var(--wp--style--global--wide-size);
	margin: 0;
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 4px 24px;
}

.site-topbar .fc-phones a {
	color: var(--fc-ink);
	text-decoration: none;
}

.site-topbar .fc-phones a:hover {
	color: var(--fc-blue);
	text-decoration: underline;
}

.fc-phones__city {
	color: var(--fc-muted);
	font-weight: 600;
	margin-right: 4px;
}

.site-header__main {
	padding-block: 12px;
	background: #fff;
}

.site-header__row {
	gap: 24px;
	min-height: 84px; /* Fixed height: no layout shift while fonts and the logo load. */
}

/*
 * Same size as before (70% of clamp(110px, 12vw, 150px)), but set on the image itself: with max-width: 70%
 * the logo block stayed 150px wide around a 105px image and took 45px from the menu.
 */
.site-header__logo img {
	display: block;
	width: clamp(77px, 8.4vw, 105px);
	max-width: none;
	height: auto;
}

@media (min-width: 1200px) {
	.site-header__row > .site-header__nav {
		flex: 1 1 auto; /* Menu right after the logo, buttons at the far right. */
	}
}

.site-header__nav .wp-block-navigation__container {
	gap: 4px clamp(14px, 1.8vw, 28px);
}

.site-header__actions {
	gap: 10px;
	flex-shrink: 0;
}

/* "Log In" (desktop): a button with a menu — Log In (Student/Parent Portal) or Sign Up. <details>, no JS needed. */
.site-account {
	position: relative;
	margin: 0;
}

.site-account__button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	min-height: 44px;
	padding: 8px 16px;
	border: 2px solid var(--fc-blue);
	border-radius: 999px;
	background: #fff;
	color: var(--fc-blue);
	font-family: var(--fc-heading);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2; /* 44px tall like the trial button next to it. */
	white-space: nowrap;
	cursor: pointer;
	list-style: none;
}

.site-account__button::-webkit-details-marker {
	display: none;
}

/* Person icon before, chevron after (rotates when open). */
.site-account__button::before,
.site-account__button::after {
	content: "";
	background: currentColor;
}

.site-account__button::before {
	width: 16px;
	height: 16px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-4.4 0-9 2.2-9 5.5V22h18v-2.5C21 16.2 16.4 14 12 14z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-4.4 0-9 2.2-9 5.5V22h18v-2.5C21 16.2 16.4 14 12 14z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.site-account__button::after {
	width: 10px;
	height: 10px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 8l8 8 8-8' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 8l8 8 8-8' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.15s ease;
}

.site-account[open] .site-account__button::after {
	transform: rotate(180deg);
}

.site-account__button:hover,
.site-account[open] .site-account__button {
	background: var(--wp--preset--color--tint-blue);
	color: var(--fc-blue-dark);
	border-color: var(--fc-blue-dark);
}

.site-account__menu {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	z-index: 30;
	min-width: 250px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 12px 32px rgba(27, 43, 68, 0.18);
}

.site-account__option {
	display: block;
	padding: 10px 14px;
	border-radius: 14px;
	color: var(--fc-ink);
	text-decoration: none;
}

.site-account__option:hover,
.site-account__option:focus-visible {
	background: var(--wp--preset--color--tint-blue);
}

.site-account__title {
	display: block;
	font-family: var(--fc-heading);
	font-weight: 700;
	font-size: 17px;
}

.site-account__hint {
	display: block;
	color: var(--fc-muted);
	font-size: 14px;
}

.site-header__cta .fc-button {
	min-height: 44px;
	padding: 10px 20px;
	font-size: 16px;
}

/* "Book a Free Trial ▾": the trial button opens a menu (book online / trial form), like "Log In / Sign Up".
   The menu itself reuses .site-account__menu / __option / __title / __hint. */
.site-trial {
	position: relative;
	margin: 0;
}

.site-trial[open] {
	z-index: 3; /* Over the "Log In" button below it in the phone panel. */
}

.site-trial__button {
	gap: 8px;
	cursor: pointer;
	list-style: none;
	white-space: nowrap;
}

.site-trial__button::-webkit-details-marker {
	display: none;
}

.site-trial__button::after {
	content: "";
	flex: 0 0 10px;
	width: 10px;
	height: 10px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 8l8 8 8-8' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 8l8 8 8-8' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.15s ease;
}

.site-trial[open] .site-trial__button::after {
	transform: rotate(180deg);
}

/* "Call" button: menu of both studios on phones; on desktop the numbers are in the top bar. */
.fc-call {
	position: relative;
}

.fc-call__button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 8px 16px;
	border: 2px solid var(--fc-blue);
	border-radius: 999px;
	background: #fff;
	color: var(--fc-blue);
	font-family: var(--fc-heading);
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	cursor: pointer;
	list-style: none;
}

/* In the header the studio list opens under the whole row, aligned to its right edge (stays on screen). */
.site-header__row {
	position: relative;
}

.site-header__call.fc-call {
	position: static;
}

/* <summary> is content-box by default: 44px + padding + border would make it 64px tall in the header. */
.site-header__call .fc-call__button {
	box-sizing: border-box;
}

.fc-call__button::-webkit-details-marker {
	display: none;
}

.fc-call__button::before {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.fc-call__menu {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	z-index: 30;
	min-width: 240px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 12px 32px rgba(27, 43, 68, 0.18);
}

.fc-call__option {
	display: block;
	padding: 12px 14px;
	border-radius: 14px;
	color: var(--fc-ink);
	font-weight: 700;
	text-decoration: none;
}

.fc-call__option:hover {
	background: var(--wp--preset--color--tint-blue);
}

.fc-call__option .fc-phones__city {
	display: block;
	font-size: 13px;
}

/* Desktop from 1200px (the full menu fits in one row); below — "Call" + short button + burger. */
@media (min-width: 1200px) {
	.site-header {
		--fc-topbar-h: 34px;
	}

	.site-header__call {
		display: none;
	}
}

@media (max-width: 1199px) {
	.site-topbar,
	.site-header__login,
	.site-header__cta-long {
		display: none;
	}

	/* The trial menu opens under the header row at its right edge (stays on screen). */
	.site-header__cta .site-trial {
		position: static;
	}

	.site-header__row {
		gap: 12px;
	}

	.site-header__actions {
		gap: 8px;
	}

	.site-header__cta .fc-button,
	.fc-call__button {
		padding-inline: 14px;
	}
}

/* Narrow desktops: "Log In / Sign Up" is wide — tighter menu gaps keep the header in one row. */
@media (min-width: 1200px) and (max-width: 1319px) {
	.site-header__nav .wp-block-navigation__container {
		gap: 4px 14px;
	}

	.site-header__login .site-account__button {
		padding-inline: 12px;
	}
}

/* Narrowest phones: the trial button lives in the menu panel. */
@media (max-width: 379px) {
	.site-header__cta {
		display: none;
	}
}

/*
 * Compact header on scroll (84 → 64px row, smaller logo, shadow) — CSS scroll-driven animations.
 * Browsers without them keep a sticky header of normal size.
 */
@supports (animation-timeline: scroll()) {
	@media not (prefers-reduced-motion) {
		.site-header__main,
		.site-header__row,
		.site-header__logo img {
			animation-duration: 1ms; /* Firefox needs a non-zero duration for scroll timelines. */
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: scroll(root block);
			animation-range: 0 100px;
		}

		.site-header__main {
			animation-name: fc-header-main;
		}

		.site-header__row {
			animation-name: fc-header-row;
		}

		.site-header__logo img {
			animation-name: fc-header-logo;
		}
	}
}

@keyframes fc-header-main {
	to {
		padding-block: 4px;
		box-shadow: 0 6px 20px rgba(27, 43, 68, 0.1);
	}
}

@keyframes fc-header-row {
	to {
		min-height: 64px;
	}
}

@keyframes fc-header-logo {
	to {
		width: 63px;
	}
}

/* Main ----------------------------------------------------------------- */

/*
 * MyMusicStaff widgets — Student/Parent Portal (templates/page-sign-in.html), Sign-up
 * (templates/page-sign-up.html) and trial lesson booking (templates/page-book-trial-music-lesson.html). The widget script creates a 0px iframe and grows it to the form's
 * height once it loads; that height is reserved up front so the page does not jump. min-height, not
 * height: the form may still grow (error messages, more fields).
 */
.fc-portal {
	box-sizing: border-box;
	width: 100%;
	margin: var(--wp--preset--spacing--40) auto var(--wp--preset--spacing--60);
}

.fc-portal iframe {
	display: block; /* Inline iframes leave a line-height gap below: +9px, a small jump. */
}

/* Login: the widget's own max width is 350px; its form is 466px tall at any screen width. */
.fc-portal--login {
	max-width: 350px;
	min-height: 466px;
}

/* Sign-up: full content width (alignwide); form height measured 2026-11-06 per screen width. */
.fc-portal--signup {
	min-height: 1922px; /* phones */
}

@media (min-width: 600px) {
	.fc-portal--signup {
		min-height: 1866px;
	}
}

@media (min-width: 900px) {
	.fc-portal--signup {
		min-height: 1846px;
	}
}

@media (min-width: 1200px) {
	.fc-portal--signup {
		min-height: 1882px;
	}
}

/* Trial lesson booking: full content width (alignwide); form height measured 2026-11-06. */
.fc-portal--trial {
	min-height: 460px; /* phones */
}

@media (min-width: 600px) {
	.fc-portal--trial {
		min-height: 390px;
	}
}

.site-main {
	padding-bottom: var(--wp--preset--spacing--80);
	overflow-x: clip; /* Decorative circles may stick out of the viewport edge. */
}

.site-main > .wp-block-fantasia-breadcrumbs {
	margin-top: var(--wp--preset--spacing--40);
}

.page-title {
	margin-top: var(--wp--preset--spacing--50);
}

.page-intro {
	font-size: 20px;
	color: var(--fc-muted);
}

/* Page intro (lead paragraph) becomes wide when the page holds wide sections or listings. */
.site-main:has(> .wp-block-post-content > :is(.alignwide, .alignfull, .wp-block-fantasia-lesson-grid, .wp-block-fantasia-teacher-grid, .wp-block-fantasia-studio-cards, .wp-block-fantasia-related-posts, .wp-block-fantasia-reviews, .wp-block-fantasia-events-list, .wp-block-fantasia-pricing-table, .wp-block-fantasia-gallery, .wp-block-fantasia-videos)) > .wp-block-post-content > .page-intro {
	max-width: var(--wp--style--global--wide-size);
}

/* Listings placed without "wide" alignment still get the wide width inside text columns. */
.is-layout-constrained > :where(.wp-block-fantasia-lesson-grid, .wp-block-fantasia-teacher-grid, .wp-block-fantasia-studio-cards, .wp-block-fantasia-related-posts, .wp-block-fantasia-reviews, .wp-block-fantasia-events-list, .wp-block-fantasia-pricing-table, .wp-block-fantasia-gallery, .wp-block-fantasia-videos, .wp-block-fantasia-studio-details, .wp-block-fantasia-teacher-credentials):not(.alignfull) {
	max-width: var(--wp--style--global--wide-size);
}

/* Sections ------------------------------------------------------------- */

.fc-section-title {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-family: var(--fc-heading);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.1;
}

:where(.site-main) > :where([class*="wp-block-fantasia-"], .fc-section, .fc-cta) {
	margin-top: var(--wp--preset--spacing--80);
}

.fc-section--butter {
	padding-block: var(--wp--preset--spacing--80);
}

.fc-eyebrow {
	margin: 0;
	color: var(--fc-blue);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Bokeh circles: decoration only, never behind text. */
.has-bokeh {
	position: relative;
	isolation: isolate;
}

.has-bokeh::before,
.has-bokeh::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	pointer-events: none;
}

.has-bokeh::before {
	width: clamp(120px, 18vw, 220px);
	aspect-ratio: 1;
	background: var(--wp--preset--color--butter);
	opacity: 0.55;
	right: -2%;
	top: 0;
}

.has-bokeh::after {
	width: clamp(70px, 9vw, 120px);
	aspect-ratio: 1;
	background: var(--wp--preset--color--pink);
	opacity: 0.55;
	left: 46%;
	bottom: -24px;
}

/* Heroes --------------------------------------------------------------- */

.fc-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60);
	align-items: center;
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}

.fc-hero__text {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 600px;
}

.fc-hero__text > * {
	margin: 0;
}

.fc-hero__title {
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.02;
}

.fc-hero__lead {
	font-size: 20px;
	line-height: 1.55;
	color: var(--fc-muted);
}

.fc-hero__actions {
	gap: 14px;
}

.fc-hero__actions > * {
	margin: 0;
}

.fc-hero__image {
	position: relative;
	margin: 0;
}

.fc-hero__image::before {
	content: "";
	position: absolute;
	z-index: -1;
	width: 60%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--wp--preset--color--mint);
	right: -6%;
	top: -8%;
}

.fc-hero__image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--fc-radius-media);
}

@media (min-width: 900px) {
	.fc-hero {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.fc-hero--page .fc-hero__title {
		font-size: var(--wp--preset--font-size--x-large);
	}
}

/* Hero of single studio / lesson / teacher pages. */
.entity-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60);
	align-items: center;
	margin-top: var(--wp--preset--spacing--40);
}

.entity-hero__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.entity-hero__text > * {
	margin: 0;
}

.entity-hero__lead,
.entity-hero__lead p {
	font-size: 20px;
	color: var(--fc-muted);
	margin: 0;
}

.entity-hero__subtitle {
	color: var(--fc-blue);
	font-weight: 700;
	font-size: 20px;
}

.entity-hero__actions {
	gap: 12px;
	align-items: center;
}

.entity-hero__actions .fc-call__button {
	min-height: 44px;
	padding: 2px 26px;
	font-size: 18px;
}

.entity-hero__actions .fc-button,
.entity-hero__actions .fc-call__button {
	white-space: nowrap;
}

/* Studio details grid (used as wp:group className) */
.fc-studio-details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 24px;
}

.entity-hero__image img,
.entity-hero__portrait img {
	border-radius: var(--fc-radius-media);
}

.entity-hero__portrait {
	max-width: 420px;
}

@media (min-width: 900px) {
	.entity-hero {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.entity-hero--profile {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}
}

.teacher-quote {
	position: relative;
	padding: 20px 24px 20px 56px;
	border-radius: 24px;
	background: var(--wp--preset--color--tint-butter);
	font-family: var(--fc-heading);
	font-size: 20px;
	line-height: 1.4;
}

.teacher-quote::before {
	content: "“";
	position: absolute;
	left: 18px;
	top: 4px;
	font-size: 56px;
	line-height: 1;
	color: var(--fc-accent);
}

/* Cards & grids (lesson, teacher, studio and post cards from fantasia-core) ---- */

.fc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: clamp(16px, 2.4vw, 28px);
}

.fc-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border-radius: var(--fc-radius-card);
	box-shadow: var(--fc-shadow);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fc-card:hover {
	box-shadow: 0 10px 32px rgba(27, 43, 68, 0.14);
}

@media (prefers-reduced-motion: no-preference) {
	.fc-card:hover {
		transform: translateY(-2px);
	}
}

.fc-card__media img,
.fc-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
}

/* Same 4:3 preview as lesson cards (equal height in the same grid); portraits keep faces in frame. */
.fc-teacher-card .fc-card__media img {
	object-position: center 25%;
}

.fc-card__media {
	display: block;
	overflow: hidden; /* The zoomed preview stays inside the card. */
	background: var(--wp--preset--color--photo-blue);
}

/*
 * Lesson, teacher and blog post cards: the preview zooms in on hover (and when the card's link has keyboard
 * focus). Blog lists use core Featured Image inside the card, related posts — .fc-card__media.
 */
@media (prefers-reduced-motion: no-preference) {
	:is(.fc-lesson-card, .fc-teacher-card, .fc-post-card) :is(.fc-card__media, .wp-block-post-featured-image) :is(img, .fc-card__placeholder) {
		transition: transform 0.4s ease;
	}

	:is(.fc-lesson-card, .fc-teacher-card, .fc-post-card):is(:hover, :focus-within) :is(.fc-card__media, .wp-block-post-featured-image) :is(img, .fc-card__placeholder) {
		transform: scale(1.08);
	}
}

.fc-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px 24px 26px;
	flex-grow: 1;
}

.fc-card__body > * {
	margin: 0;
}

.fc-card__title {
	font-family: var(--fc-heading);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.15;
}

.fc-card__title a {
	color: var(--fc-ink);
	text-decoration: none;
}

.fc-card__title a:hover {
	color: var(--fc-blue);
	text-decoration: underline;
}

.fc-card__subtitle {
	color: var(--fc-blue);
	font-weight: 700;
}

.fc-card__text {
	color: var(--fc-muted);
	font-size: 16px;
}

.fc-card__meta {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: var(--fc-muted);
	font-size: 15px;
}

.fc-price {
	color: var(--fc-ink);
	font-weight: 700;
}

.fc-card__link {
	margin-top: auto;
	padding-top: 8px;
	font-weight: 700;
	font-size: 15px;
}

/* Post list (blog, categories, search) uses the same card. */
.post-list .wp-block-post-template {
	gap: clamp(16px, 2.4vw, 28px);
}

.post-list .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden; /* The zoomed preview stays inside the card. */
}

/* Same spacing under the preview as lesson cards: no block gap above the card body. */
.fc-card > .fc-card__body {
	margin-top: 0;
}

/* Preview placeholder for posts without an image: pastel bokeh circles (logo motif) and the logo, 4:3. */
.fc-card__placeholder {
	display: block;
	aspect-ratio: 4 / 3;
	background:
		url("../images/logo.png") center / auto 46% no-repeat,
		radial-gradient(circle at 18% 28%, var(--wp--preset--color--butter) 0 13%, transparent 13.5%),
		radial-gradient(circle at 84% 22%, var(--wp--preset--color--pink) 0 10%, transparent 10.5%),
		radial-gradient(circle at 78% 82%, var(--wp--preset--color--mint) 0 16%, transparent 16.5%),
		radial-gradient(circle at 24% 86%, var(--wp--preset--color--peach) 0 9%, transparent 9.5%),
		var(--wp--preset--color--tint-blue);
}

.post-list .fc-card__title {
	font-size: 22px;
}

/*
 * Cards in a row are equally tall whatever the title length: the card fills its grid cell (the <li> already
 * stretches to the row). Very long titles stop at 3 lines.
 */
.post-list .wp-block-post-template > .wp-block-post {
	display: flex;
}

.post-list .wp-block-post-template > .wp-block-post > .fc-card {
	flex: 1 1 auto;
}

.fc-post-card .fc-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

/* Core makes the Post Title link inline-block — one unbreakable box that line clamping cannot cut. */
.fc-post-card .fc-card__title a {
	display: inline;
}

/*
 * Pagination (blog, categories, archives, search): page numbers are round 44px buttons, the current page
 * is filled Forte Blue; Previous / Next are outline pills like the secondary button.
 */
.wp-block-query-pagination {
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	font-family: var(--fc-heading);
	font-weight: 700;
	font-size: 17px;
}

.post-list .wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--60);
}

.wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 44px;
	height: 44px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--wp--preset--color--tint-blue);
	color: var(--fc-ink);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.wp-block-query-pagination a.page-numbers:hover {
	background: var(--wp--preset--color--photo-blue);
	color: var(--fc-blue-dark);
}

.wp-block-query-pagination .page-numbers.current {
	background: var(--fc-blue);
	color: #fff;
}

.wp-block-query-pagination .page-numbers.dots {
	min-width: 24px;
	background: none;
}

.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: 44px;
	padding: 8px 22px;
	border: 2px solid var(--fc-blue);
	border-radius: 999px;
	background: #fff;
	color: var(--fc-blue);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wp-block-query-pagination-previous::before {
	content: "←";
}

.wp-block-query-pagination-next::after {
	content: "→";
}

.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	background: var(--wp--preset--color--tint-blue);
	color: var(--fc-blue-dark);
	border-color: var(--fc-blue-dark);
}

/* Proof points, steps, CTA band ------------------------------------------- */

.fc-proof__number {
	margin: 0;
	font-family: var(--fc-heading);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1;
	color: var(--fc-blue);
}

.fc-steps {
	counter-reset: fc-step;
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	gap: 24px;
}

.fc-steps > li {
	counter-increment: fc-step;
	position: relative;
	padding: 72px 24px 24px;
	border-radius: var(--fc-radius-card);
	background: var(--wp--preset--color--tint-blue);
}

.fc-steps > li::before {
	content: counter(fc-step);
	position: absolute;
	left: 24px;
	top: 20px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--fc-blue);
	color: #fff;
	font-family: var(--fc-heading);
	font-weight: 800;
	font-size: 20px;
}

.fc-steps strong {
	display: block;
	font-family: var(--fc-heading);
	font-size: 22px;
	margin-bottom: 4px;
}

.fc-cta.has-bokeh::before {
	right: auto;
	left: -40px;
	top: -40px;
}

.fc-cta.has-bokeh::after {
	left: auto;
	right: -20px;
	bottom: -30px;
}

.fc-cta {
	padding: var(--wp--preset--spacing--70) var(--fc-gutter);
	border-radius: var(--fc-radius-media);
	background: var(--wp--preset--color--tint-butter);
	text-align: center;
}

.fc-cta > * {
	margin-inline: auto;
}

.fc-cta__title {
	margin-top: 0;
}

.fc-cta__text {
	max-width: 560px;
	color: var(--fc-muted);
	font-size: 20px;
}

.fc-cta .fc-trial-cta {
	margin-top: 24px;
}

.fc-founder {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60);
	align-items: center;
}

@media (min-width: 900px) {
	.fc-founder {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	}
}

.fc-checklist {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 8px;
}

.fc-checklist li {
	position: relative;
	padding-left: 32px;
	font-weight: 700;
}

.fc-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--wp--preset--color--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B2B44' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.fc-trial-page {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60);
	align-items: start;
	padding-top: var(--wp--preset--spacing--50);
}

@media (min-width: 960px) {
	.fc-trial-page {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}
}

.blog-categories {
	margin-top: var(--wp--preset--spacing--80);
}

/* Footer --------------------------------------------------------------- */

.site-footer-wrap {
	margin-top: 0;
}

.site-footer {
	padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--50);
	font-size: 16px;
}

.site-footer__title {
	font-size: var(--wp--preset--font-size--large);
	margin-bottom: 20px;
}

.site-footer .fc-studio-card {
	box-shadow: none;
}

.site-footer__links {
	margin-top: var(--wp--preset--spacing--70);
	gap: var(--wp--preset--spacing--50);
}

/*
 * Below 782px core columns stack one per row. Footer: brand (logo, text, social) on its own row,
 * then the link groups two per row.
 */
@media (max-width: 781px) {
	.site-footer__links.wp-block-columns {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--50) 24px;
	}

	.site-footer__links > .wp-block-column {
		flex-basis: auto !important; /* Core sets 100% on stacked columns. */
		min-width: 0;
	}

	.site-footer__links > .wp-block-column:first-child {
		grid-column: 1 / -1;
	}

	.site-footer__tagline {
		max-width: none;
	}
}

.site-footer__heading {
	font-size: 18px;
	margin: 0 0 12px;
}

.site-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 8px;
}

.site-footer__nav .wp-block-navigation__container {
	display: grid;
	gap: 8px;
	flex-direction: column;
}

.site-footer__nav .wp-block-navigation-item__content {
	padding: 0;
}

.site-footer__list a,
.site-footer__legal a,
.site-footer__nav .wp-block-navigation-item__content {
	color: var(--fc-ink);
	text-decoration: none;
}

.site-footer__list a:hover,
.site-footer__legal a:hover,
.site-footer__nav .wp-block-navigation-item__content:hover {
	color: var(--fc-blue);
	text-decoration: underline;
}

.site-footer__tagline {
	color: var(--fc-muted);
	max-width: 280px;
}

.site-footer__legal {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: 20px;
	border-top: 1px solid #cddcec;
	gap: 8px 24px;
	color: var(--fc-muted);
	font-size: 14px;
}

.site-footer__legal p {
	margin: 0;
}

.site-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

/* "Trusted by families from schools across the area" list on the home page. */
.fc-school-list {
	columns: 3 220px;
	column-gap: 32px;
	padding: 0;
	list-style: none;
	color: var(--fc-muted);
	font-weight: 600;
}

.fc-school-list li {
	break-inside: avoid;
	padding: 4px 0;
}

/* Chat (fantasia-core + @n8n/chat) ----------------------------------------- */

/* Brand colors for the n8n widget. Set on the wrapper so they win over the widget's own :root defaults. */
.fc-chat {
	--chat--color--primary: var(--fc-accent);
	--chat--color--primary-shade-50: var(--fc-accent-dark);
	--chat--color--primary--shade-100: #7a0f6a;
	--chat--color--secondary: var(--fc-blue);
	--chat--color-secondary-shade-50: var(--fc-blue-dark);
	--chat--color-dark: var(--fc-ink);
	--chat--color-light: var(--wp--preset--color--tint-blue);
	--chat--font-family: var(--wp--preset--font-family--body);
	--chat--border-radius: 20px;
	--chat--window--border-radius: 24px;
	--chat--window--bottom: 20px;
	--chat--window--right: 20px;
	--chat--header--background: var(--fc-blue);
	--chat--header--color: #fff;
	--chat--heading--font-size: 1.5em;
	--chat--toggle--background: var(--fc-accent);
	--chat--toggle--hover--background: var(--fc-accent-dark);
	--chat--toggle--active--background: var(--fc-accent-dark);
	--chat--toggle--color: #fff;
	--chat--message--bot--background: var(--wp--preset--color--tint-blue);
	--chat--message--bot--color: var(--fc-ink);
	--chat--message--user--background: var(--fc-blue);
	--chat--message--user--color: #fff;
}

.fc-chat__launcher {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9998;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 56px;
	padding: 0 22px 0 18px;
	border: 0;
	border-radius: 999px;
	background: var(--fc-accent);
	color: #fff;
	font-family: var(--fc-heading);
	font-weight: 700;
	font-size: 17px;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(27, 43, 68, 0.25);
}

.fc-chat__launcher:hover,
.fc-chat__launcher:focus-visible {
	background: var(--fc-accent-dark);
}

.fc-chat__icon {
	width: 24px;
	height: 24px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H9l-5 4v-4H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm3 6.5a1.5 1.5 0 1 0 0 .01zm5 0a1.5 1.5 0 1 0 0 .01zm5 0a1.5 1.5 0 1 0 0 .01z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H9l-5 4v-4H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm3 6.5a1.5 1.5 0 1 0 0 .01zm5 0a1.5 1.5 0 1 0 0 .01zm5 0a1.5 1.5 0 1 0 0 .01z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.fc-chat.is-loading .fc-chat__launcher {
	cursor: progress;
	opacity: 0.8;
}

/* Once the widget is ready, its own toggle button takes over. */
.fc-chat.is-ready .fc-chat__launcher {
	display: none;
}

@media (max-width: 599px) {
	.fc-chat__launcher {
		right: 16px;
		bottom: 16px;
		width: 56px;
		padding: 0;
		justify-content: center;
	}

	.fc-chat__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
}

/* Compact chat header: the theme's heading margins would otherwise make it take half a phone screen. */
.fc-chat .chat-header {
	gap: 4px;
	padding: 16px 20px;
}

.fc-chat .chat-header h1,
.fc-chat .chat-header p {
	margin: 0;
	color: inherit;
}

.fc-chat .chat-header h1 {
	font-size: 22px;
	line-height: 1.2;
}

.fc-chat .chat-header p {
	font-size: 15px;
	line-height: 1.4;
	opacity: 0.9;
}

/* Landing pages (/lp/) */
.lp-page {
	font-family: var(--fc-body);
	color: #1b2a44;
}

/* Variant B hero */
.lp-hero-b__grid {
	max-width: 1100px;
	margin-inline: auto;
}

.lp-hero-b__img img {
	width: 100%;
	height: 100%;
	min-height: 340px;
	object-fit: cover;
	border-radius: 32px;
}

@media (min-width: 768px) {
	.lp-hero__form-col,
	.lp-hero-b__form {
		position: sticky;
		top: 24px;
		align-self: start;
	}
}
.fc-studio-map {
	height: 400px;
	border-radius: var(--fc-radius-card);
	overflow: hidden;
}