/*
 * Justfootball Academy: only what theme.json can't express.
 * Colours, sizes and spacing come from theme.json presets.
 */

/* ---------- Browser surfaces ---------- */

::selection {
	background: var(--wp--preset--color--navy-800);
	color: var(--wp--preset--color--white);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--cyan-500);
	outline-offset: 2px;
}

a {
	text-underline-offset: 0.18em;
}

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

/* ---------- Caps label (paragraph block style) ---------- */

p.is-style-jfa-label {
	color: var(--wp--preset--color--red-500);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--label);
	line-height: var(--wp--custom--leading--normal);
	text-transform: uppercase;
}

/* Red never sits on navy: labels turn cyan inside dark sections. */
.is-style-section-navy p.is-style-jfa-label {
	color: var(--wp--preset--color--cyan-300);
}

.is-style-section-deep p.is-style-jfa-label {
	color: var(--wp--preset--color--cyan-500);
}

/* ---------- Light cards keep their own text colours ----------
   These cards are cream or white whatever section they sit in, so the section style's white
   text and headings must not reach them. A card that has a section style itself is left to it.
   Kept near the top so a card's own later rules (e.g. a red price) still win. */
:is(.jfa-key-point, .jfa-level-card, .jfa-detail-card, .jfa-image-card, .jfa-feature-card, .jfa-pillar-card, .jfa-program-card, .jfa-review-card, .jfa-lesson-card, .jfa-flexi-card, .jfa-coach-card, .jfa-stat-callout):not([class*="is-style-section-"]) {
	color: var(--wp--preset--color--ink-700);
}

:is(.jfa-key-point, .jfa-level-card, .jfa-detail-card, .jfa-image-card, .jfa-feature-card, .jfa-pillar-card, .jfa-program-card, .jfa-review-card, .jfa-lesson-card, .jfa-flexi-card, .jfa-coach-card, .jfa-stat-callout):not([class*="is-style-section-"]) :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--ink-900);
}

:is(.jfa-key-point, .jfa-level-card, .jfa-detail-card, .jfa-image-card, .jfa-feature-card, .jfa-pillar-card, .jfa-program-card, .jfa-review-card, .jfa-lesson-card, .jfa-flexi-card, .jfa-coach-card, .jfa-stat-callout):not([class*="is-style-section-"]) p.is-style-jfa-label {
	color: var(--wp--preset--color--red-500);
}

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

.wp-block-button__link {
	transition: background-color var(--wp--custom--duration--fast) var(--wp--custom--ease--standard),
		color var(--wp--custom--duration--fast) var(--wp--custom--ease--standard),
		border-color var(--wp--custom--duration--fast) var(--wp--custom--ease--standard);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--navy-800);
	color: var(--wp--preset--color--white);
}

/* Outline buttons on navy: white text and white border. */
:is(.is-style-section-navy, .is-style-section-deep) .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
}

:is(.is-style-section-navy, .is-style-section-deep) .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy-800);
}

.wp-block-button.jfa-button-small .wp-block-button__link {
	align-items: center;
	box-sizing: border-box;
	display: inline-flex;
	font-size: var(--wp--preset--font-size--body-sm);
	justify-content: center;
	/* Small, but still a comfortable tap target. */
	min-height: 2.75rem;
	padding: 0.75rem 1.375rem;
	text-align: center;
}

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

.jfa-topbar {
	border-bottom: 1px solid var(--wp--preset--color--navy-700);
	font-size: 0.8125rem;
	font-weight: 600;
}

.jfa-topbar > .wp-block-group {
	min-height: 2.5rem;
}

.jfa-topbar p {
	margin: 0;
}

.jfa-topbar a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.jfa-topbar a:hover {
	text-decoration: underline;
}

.jfa-topbar .jfa-phone a {
	color: var(--wp--preset--color--cyan-300);
}

.jfa-mainbar > .wp-block-group {
	min-height: 5.5rem;
}

.jfa-logo {
	flex-shrink: 0;
	margin: 0;
}

.jfa-logo img {
	aspect-ratio: 534 / 160;
	border-radius: 0;
	display: block;
	height: 2.5rem;
	width: auto;
}

.jfa-logo--footer img {
	height: 2.75rem;
}

.jfa-mainbar__right {
	gap: var(--wp--preset--spacing--8);
}

.jfa-mainbar .wp-block-navigation {
	gap: 2.25rem;
}

.jfa-mainbar .wp-block-navigation a,
.jfa-mainbar .wp-block-navigation .wp-block-navigation-submenu__toggle {
	color: inherit;
	text-decoration: none;
}

/* Current page: cyan text with a 2px underline 4px below. */
.jfa-mainbar .wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--cyan-300);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.5em;
}

/* In the white dropdown panel cyan would fail contrast: current page is red there. */
.jfa-mainbar .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--red-600);
	text-decoration: none;
}

/* Submenu panel (desktop). */
.jfa-mainbar .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--white);
	border: 0;
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--md);
	color: var(--wp--preset--color--ink-900);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 600;
	letter-spacing: 0;
	min-width: 15rem;
	overflow: hidden;
	padding: var(--wp--preset--spacing--2);
	text-transform: none;
}

.jfa-mainbar .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-radius: var(--wp--custom--radius--sm);
	padding: 0.625rem 0.875rem;
}

.jfa-mainbar .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--cream-100);
}

/* Desktop: submenus also open on hover (click and keyboard still work, as set on the block).
   Top-level items fill the navy bar's full height, so a panel at top: 100% meets the bar's
   bottom edge whatever the header height, and the pointer never crosses a gap on the way down. */
@media (min-width: 1200px) {
	.jfa-mainbar .jfa-mainbar__right,
	.jfa-mainbar .jfa-mainbar__right > .wp-block-navigation,
	.jfa-mainbar .wp-block-navigation__responsive-container,
	.jfa-mainbar .wp-block-navigation__responsive-container-content > .wp-block-navigation__container,
	.jfa-mainbar .wp-block-navigation__container > .wp-block-navigation-item {
		align-self: stretch;
	}

	.jfa-mainbar .wp-block-navigation__responsive-close,
	.jfa-mainbar .wp-block-navigation__responsive-dialog,
	.jfa-mainbar .wp-block-navigation__responsive-container-content {
		height: 100%;
	}

	/* Panel starts 24px left of its label and opens to the right (core right-aligns it). */
	.jfa-mainbar .wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
		left: -1.5rem;
		right: auto;
	}

	/* Panels keep their size while hidden, so closing is only a fade. Hiding waits 150ms,
	   which lets the pointer cut a corner on its way into a panel without it vanishing. */
	.jfa-mainbar .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
		height: auto;
		min-width: 13.5rem;
		overflow: visible;
		top: 100%;
		transition: opacity var(--wp--custom--duration--fast) var(--wp--custom--ease--standard), visibility 0s linear 150ms;
		width: auto;
	}

	.jfa-mainbar .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
	.jfa-mainbar .wp-block-navigation .has-child > [aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		opacity: 1;
		transition-delay: 0s;
		visibility: visible;
	}

	/* Third level (e.g. Holiday Programs → Ryde): flies out to the right of its row, top
	   lined up with it. It starts inside the parent panel's padding, so there's no gap to cross. */
	.jfa-mainbar .wp-block-navigation .wp-block-navigation__container .wp-block-navigation__submenu-container .has-child > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
		left: 100%;
		right: auto;
		top: calc(-1 * var(--wp--preset--spacing--2));
	}

	.jfa-mainbar .wp-block-navigation .has-child .wp-block-navigation__submenu-icon svg {
		transition: transform var(--wp--custom--duration--fast) var(--wp--custom--ease--standard);
	}

	/* Only the top-level chevron flips; a nested one points right, towards its flyout. */
	.jfa-mainbar .wp-block-navigation .wp-block-navigation__container > .has-child:hover > .wp-block-navigation__submenu-icon svg,
	.jfa-mainbar .wp-block-navigation .wp-block-navigation__container > .has-child > [aria-expanded="true"] ~ .wp-block-navigation__submenu-icon svg {
		transform: rotate(180deg);
	}

	/* Nested parents are a link plus this arrow button (inc/menus.php). */
	.jfa-mainbar .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
		position: relative;
		z-index: 2; /* above the row's link, which core stacks at 1 */
	}

	.jfa-mainbar .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon svg {
		transform: rotate(-90deg);
	}

	.jfa-mainbar .wp-block-navigation .wp-block-navigation__container > .has-child:hover > .wp-block-navigation-item__content,
	.jfa-mainbar .wp-block-navigation .wp-block-navigation__container > .has-child > [aria-expanded="true"] {
		color: var(--wp--preset--color--cyan-300);
	}

	/* An open parent inside a panel looks like a hovered row (cyan would fail on white). */
	.jfa-mainbar .wp-block-navigation__submenu-container .has-child:hover > .wp-block-navigation-item__content,
	.jfa-mainbar .wp-block-navigation__submenu-container .has-child > [aria-expanded="true"] {
		background: var(--wp--preset--color--cream-200);
		color: var(--wp--preset--color--red-600);
	}

	/* One line per item: a flyout sits at left: 100%, so without this its labels wrap
	   to fit the space left of the panel's edge. */
	.jfa-mainbar .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-size: var(--wp--preset--font-size--body-md);
		padding: 0.75rem 0.875rem;
		white-space: nowrap;
	}

	.jfa-mainbar .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.jfa-mainbar .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
		background: var(--wp--preset--color--cream-200);
		color: var(--wp--preset--color--red-600);
	}
}

/* Links that only belong in the mobile menu overlay. */
.jfa-mainbar .wp-block-navigation .jfa-menu-only {
	display: none;
}

/* Call icon: phones and tablets only. */
.jfa-phone--icon {
	display: none;
}

.jfa-phone--icon a {
	align-items: center;
	color: var(--wp--preset--color--white);
	display: flex;
	height: 2.75rem;
	justify-content: center;
	width: 2.75rem;
}

/*
 * ---------- MOBILE MENU BREAKPOINT (1200px) ----------
 * The core Navigation block switches between the menu button and the full menu at 600px.
 * This block moves that switch to 1200px, where the full header menu stops fitting on
 * one line (9 Oct 2026; it wrapped below that on staging). It relies on core class names, so
 * CHECK THIS AFTER EVERY WORDPRESS UPDATE (docs/theme-setup.md §8).
 */
@media (min-width: 600px) and (max-width: 1199.98px) {
	.jfa-mainbar .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.jfa-mainbar .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}
/* ---------- end mobile menu breakpoint ---------- */

@media (max-width: 1199.98px) {
	.jfa-topbar.wp-block-group,
	.jfa-header-cta.wp-block-buttons {
		display: none;
	}

	.jfa-mainbar > .wp-block-group {
		min-height: 4rem;
	}

	.jfa-logo img {
		height: 1.875rem;
	}

	.jfa-mainbar__right {
		gap: var(--wp--preset--spacing--1);
	}

	.jfa-phone--icon {
		display: block;
	}

	.jfa-mainbar .wp-block-navigation__responsive-container-open {
		align-items: center;
		color: var(--wp--preset--color--white);
		height: 2.75rem;
		justify-content: center;
		width: 2.75rem;
	}

	/*
	 * Overlay: a navy panel, big parent rows with dividers, and submenus that
	 * fold open one at a time (assets/js/menu.js). Colours are set here, not on the block,
	 * so desktop submenus keep their own look.
	 */
	.jfa-mainbar .wp-block-navigation:not(.has-background):not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open {
		--navigation-layout-justification-setting: flex-start;
		--navigation-layout-justify: flex-start;
		background: var(--wp--preset--color--navy-900);
		color: var(--wp--preset--color--white);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--gutter) var(--wp--preset--spacing--10);
	}

	.jfa-mainbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		color: var(--wp--preset--color--white);
	}

	.jfa-mainbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding-top: var(--wp--preset--spacing--10);
	}

	.jfa-mainbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
	.jfa-mainbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		align-items: stretch;
		gap: 0;
		width: 100%;
	}

	.jfa-mainbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		align-items: stretch;
	}

	/* Top-level rows. */
	.jfa-mainbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.jfa-menu-only) {
		border-bottom: 1px solid var(--wp--preset--color--navy-700);
	}

	.jfa-mainbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		align-items: center;
		box-sizing: border-box;
		display: flex;
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--heading-lg);
		font-weight: 700;
		justify-content: space-between;
		letter-spacing: -0.01em;
		min-height: 4.25rem;
		padding: 0.75rem 0;
		text-align: left;
		text-transform: none;
		width: 100%;
	}

	/* Chevron on parent rows; turns over when the row is open. */
	.jfa-mainbar .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation-submenu__toggle::after {
		/* A plain background image, not a mask: older phone browsers show an unprefixed mask as a solid square. Stroke is ink-200. */
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C7CBD6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
		content: "";
		flex-shrink: 0;
		height: 1.125rem;
		transition: transform var(--wp--custom--duration--fast) var(--wp--custom--ease--standard);
		width: 1.125rem;
	}

	.jfa-mainbar .wp-block-navigation__responsive-container.is-menu-open .has-child.jfa-is-expanded > .wp-block-navigation-submenu__toggle::after {
		transform: rotate(180deg);
	}

	/* Core shows submenus open in the overlay; only the open row's list shows here. */
	.jfa-mainbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child:not(.jfa-is-expanded) > .wp-block-navigation__submenu-container {
		display: none;
	}

	/* A nested list (Holiday Programs → Ryde) stays open, indented under its parent link. */
	.jfa-mainbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
		display: none;
	}

	.jfa-mainbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .has-child {
		flex-direction: column;
	}

	.jfa-mainbar .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		display: flex;
		padding: 0 0 0 var(--wp--preset--spacing--4);
	}

	.jfa-mainbar .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		background: transparent;
		border-radius: 0;
		box-shadow: none;
		color: var(--wp--preset--color--ink-200);
		font-size: var(--wp--preset--font-size--body-lg);
		font-weight: 500;
		min-width: 0;
		padding: 0 0 var(--wp--preset--spacing--5);
	}

	.jfa-mainbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		align-items: center;
		display: flex;
		min-height: 2.75rem;
		padding: 0;
	}

	.jfa-mainbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		background: transparent;
		color: var(--wp--preset--color--white);
	}

	/* Current page: cyan-300, as on the desktop bar. */
	.jfa-mainbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current="page"] {
		color: var(--wp--preset--color--cyan-300);
		text-decoration: none;
	}

	/* Free trial, login and phone sit below the list. */
	.jfa-mainbar .wp-block-navigation__responsive-container.is-menu-open .jfa-menu-only {
		display: flex;
	}

	.jfa-mainbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .jfa-menu-only > .wp-block-navigation-item__content {
		font-size: var(--wp--preset--font-size--body-lg);
		font-weight: 600;
		min-height: 2.75rem;
		text-transform: none;
	}

	.jfa-mainbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .jfa-menu-only.jfa-menu-cta > .wp-block-navigation-item__content {
		background: var(--wp--preset--color--red-500);
		border-radius: var(--wp--custom--radius--pill);
		color: var(--wp--preset--color--white);
		font-size: var(--wp--preset--font-size--label-lg);
		font-weight: 700;
		justify-content: center;
		letter-spacing: 0.03em;
		margin: var(--wp--preset--spacing--6) 0 var(--wp--preset--spacing--2);
		padding: 1.0625rem 1.875rem;
		text-transform: uppercase;
	}
}

/* ---------- Mobile action bar ---------- */

/* Core's layout classes set display:flex at the same specificity, hence the doubled selectors. */
.jfa-action-bar.wp-block-group {
	display: none;
}

@media (max-width: 781.98px) {
	.jfa-action-bar.wp-block-group {
		background: var(--wp--preset--color--white);
		border-top: 1px solid var(--wp--preset--color--ink-100);
		bottom: 0;
		box-shadow: 0 -6px 18px rgba(15, 23, 48, 0.1);
		display: flex;
		gap: 0.625rem;
		left: 0;
		padding: 0.75rem 0.875rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
		position: fixed;
		right: 0;
		z-index: 90;
	}

	.jfa-action-bar > * {
		margin: 0;
	}

	.jfa-action-bar .jfa-phone--button {
		flex: 1 1 0;
	}

	.jfa-action-bar .jfa-action-bar__cta {
		flex: 1.6 1 0;
	}

	.jfa-action-bar .wp-block-button {
		width: 100%;
	}

	.jfa-action-bar .jfa-phone--button a,
	.jfa-action-bar .wp-block-button__link {
		align-items: center;
		border-radius: var(--wp--custom--radius--md);
		box-sizing: border-box;
		display: flex;
		font-size: var(--wp--preset--font-size--body-sm);
		font-weight: 700;
		gap: 0.5rem;
		justify-content: center;
		letter-spacing: var(--wp--custom--tracking--button);
		min-height: 3.125rem;
		padding: 0 0.75rem;
		text-decoration: none;
		text-transform: uppercase;
		width: 100%;
	}

	.jfa-action-bar .jfa-phone--button a {
		border: 2px solid var(--wp--preset--color--navy-800);
		color: var(--wp--preset--color--navy-800);
	}

	.jfa-action-bar .jfa-phone--button svg {
		color: var(--wp--preset--color--red-500);
	}

	/* Keep the footer clear of the bar, and hide the bar behind the open menu. */
	body {
		padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
	}

	.has-modal-open .jfa-action-bar.wp-block-group {
		display: none;
	}

	/* Kidsbook assistant (jfa-core): lift it above the bar, hide it behind the open menu.
	   !important because the widget sets bottom inline. */
	.kb-chat-container {
		bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px) + 0.75rem) !important;
		right: 0.875rem !important;
	}

	/* The "Hey, how can we help?" bubble pops up after 5 s and covers page content on phones. */
	.kb-chat-nudge {
		display: none !important;
	}

	/* The open chat panel (600px tall, 80vh max) would run off the top once lifted:
	   keep it between the top of the screen and the bar. */
	.kb-chat-panel {
		max-height: calc(100vh - 4.75rem - env(safe-area-inset-bottom, 0px) - 2rem) !important;
		max-height: calc(100dvh - 4.75rem - env(safe-area-inset-bottom, 0px) - 2rem) !important;
		max-width: calc(100vw - 1.75rem) !important;
	}

	.has-modal-open .kb-chat-container {
		display: none !important;
	}
}

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

.jfa-footer {
	padding-bottom: var(--wp--preset--spacing--8);
	padding-top: clamp(3rem, 6vw, 4.5rem);
}

/* Four equal columns, as mocked. Two-class selector so it also beats the core grid
   layout on footers saved before 0.7.13 (that layout auto-filled a fifth, empty column). */
.jfa-footer .jfa-footer__columns {
	display: grid;
	gap: var(--wp--preset--spacing--10);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.jfa-footer .jfa-footer__columns > * {
	margin-block: 0;
}

@media (max-width: 899.98px) {
	.jfa-footer .jfa-footer__columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599.98px) {
	.jfa-footer .jfa-footer__columns {
		gap: var(--wp--preset--spacing--8);
		grid-template-columns: minmax(0, 1fr);
	}
}

.jfa-footer__about p {
	font-size: 0.9375rem;
	margin-top: var(--wp--preset--spacing--5);
}

.jfa-footer h2.jfa-footer__heading {
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	margin-bottom: var(--wp--preset--spacing--4);
	text-transform: uppercase;
}

.jfa-footer .wp-block-navigation {
	font-size: 0.9375rem;
	font-weight: 400;
	gap: var(--wp--preset--spacing--2);
	letter-spacing: 0;
	text-transform: none;
}

.jfa-footer a {
	color: var(--wp--preset--color--ink-100);
	text-decoration: none;
}

.jfa-footer a:hover,
.jfa-footer a:focus-visible {
	text-decoration: underline;
}

.jfa-footer .jfa-area-links {
	display: flex;
	flex-direction: column;
	font-size: 0.9375rem;
	gap: var(--wp--preset--spacing--2);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Same gap under every column heading, so the first link in each column lines up.
   Without this, the flow layout's block gap (24px) pushed the menus and the phone
   lower than the Locations list (16px). */
.jfa-footer .jfa-footer__columns > * > .jfa-footer__heading {
	margin-block: 0 var(--wp--preset--spacing--4);
}

.jfa-footer .jfa-footer__columns > * > .jfa-footer__heading + * {
	margin-block-start: 0;
}

.jfa-footer .jfa-phone--link {
	line-height: 1.2;
	margin-bottom: var(--wp--preset--spacing--3);
}

/* Social icons under the blurb (25 Oct 2026): white, cyan on hover and focus, 44px targets.
   Each icon sits at the left of its target, so the row lines up with the blurb without a
   negative margin; the focus ring goes round the icon. */
.jfa-footer .jfa-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	list-style: none;
	margin: var(--wp--preset--spacing--6) 0 0;
	padding: 0;
}

.jfa-footer .jfa-social a {
	align-items: center;
	color: var(--wp--preset--color--white);
	display: flex;
	height: 44px;
	justify-content: flex-start;
	transition: color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
	width: 44px;
}

.jfa-footer .jfa-social svg {
	border-radius: var(--wp--custom--radius--sm);
	display: block;
	height: 22px;
	width: 22px;
}

.jfa-footer .jfa-social a:hover,
.jfa-footer .jfa-social a:focus-visible {
	color: var(--wp--preset--color--cyan-500);
	text-decoration: none;
}

.jfa-footer .jfa-social a:focus-visible {
	outline: none;
}

.jfa-footer .jfa-social a:focus-visible svg {
	outline: 2px solid var(--wp--preset--color--cyan-500);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.jfa-footer .jfa-social a {
		transition: none;
	}
}

.jfa-footer .jfa-phone--link a {
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: 700;
}

.jfa-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	color: var(--wp--preset--color--ink-200);
	margin-top: var(--wp--preset--spacing--12);
	padding-top: var(--wp--preset--spacing--6);
}

.jfa-footer__bottom p {
	margin: 0;
}

.jfa-footer .jfa-footer__legal {
	font-size: var(--wp--preset--font-size--body-sm);
	gap: var(--wp--preset--spacing--6);
}

/* ---------- Blog cards ---------- */

.jfa-post-card {
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--md);
	height: 100%;
}

/* Featured image at the top of a post: same radius as images in the content. */
.jfa-post-image img {
	border-radius: var(--wp--custom--radius--lg);
}

/* ---------- Numbers ---------- */

.jfa-tabular {
	font-variant-numeric: tabular-nums;
}


/* =====================================================================
   Page sections and homepage patterns
   ===================================================================== */

.jfa-section {
	padding-block: var(--wp--preset--spacing--section);
}

.jfa-band {
	padding-block: var(--wp--preset--spacing--band);
}

/* Header, main and footer sit flush; sections bring their own padding. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Default page template, plain text pages: title above, room below the text. */
.jfa-page-head + .wp-block-post-content {
	margin-block-start: var(--wp--preset--spacing--stack);
	padding-bottom: var(--wp--preset--spacing--section);
}

/* Sections sit flush against each other; their own padding does the spacing. */
.wp-block-post-content > .alignfull,
.wp-block-post-content > .alignfull + .alignfull {
	margin-block: 0;
}

.jfa-heading-group {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
}

/* Child margin resets double their class (".jfa-x.jfa-x > *") so they beat core's
   ":root :where(.is-layout-flow) > *" gap in the editor, where global styles load after this file. */
.jfa-heading-group.jfa-heading-group > * {
	margin-block: 0;
}

.jfa-heading-group > .is-style-jfa-label + * {
	margin-top: calc(var(--wp--preset--spacing--2) - var(--wp--preset--spacing--3));
}

.jfa-center {
	align-items: center;
	text-align: center;
}

.jfa-section > .jfa-heading-group + *,
.jfa-section > .jfa-reviews__header + * {
	margin-block-start: var(--wp--preset--spacing--stack);
}

.jfa-center-buttons {
	justify-content: center;
	margin-block-start: var(--wp--preset--spacing--stack);
}

.jfa-icon,
.jfa-stars {
	flex-shrink: 0;
	margin: 0;
}

.jfa-icon img,
.jfa-stars img {
	border-radius: 0;
	display: block;
}

.jfa-stars img {
	height: 1rem;
	width: auto;
}

.jfa-stars--lg img {
	height: 1.125rem;
}

/* ---------- Hero with overlapping card ---------- */

/* The card overlaps the photo through shared grid rows, not a negative margin. */
.jfa-hero {
	--jfa-hero-overlap: clamp(2.5rem, 6vw, 5.625rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto var(--jfa-hero-overlap) auto;
	padding-bottom: var(--wp--preset--spacing--section);
}

.jfa-hero.jfa-hero > * {
	margin-block: 0;
}

.jfa-hero__image {
	grid-column: 1;
	grid-row: 1 / 3;
	margin: 0;
}

.jfa-hero__image img {
	border-radius: 0;
	display: block;
	height: clamp(16.25rem, 32vw, 28.75rem);
	object-fit: cover;
	object-position: var(--jfa-hero-position, 50% 0);
	width: 100%;
}

.jfa-hero__card {
	align-items: center;
	background: var(--wp--preset--color--white);
	border-bottom: 5px solid var(--wp--preset--color--red-500);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--lg);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
	grid-column: 1;
	grid-row: 2 / 4;
	justify-self: center;
	padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1.375rem, 5vw, 4rem) clamp(1.375rem, 4vw, 2.5rem);
	position: relative;
	text-align: center;
	width: min(57.5rem, calc(100% - 1.75rem));
}

.jfa-hero__card.jfa-hero__card > * {
	margin-block: 0;
}

.jfa-hero__tagline {
	font-size: var(--wp--preset--font-size--label-lg);
}

.jfa-hero--home h1 {
	text-transform: uppercase;
}

.jfa-hero__intro {
	max-width: 42.5rem;
}

.jfa-hero__star {
	color: var(--wp--preset--color--ink-900);
}

.jfa-hero__card .wp-block-buttons.wp-block-buttons {
	gap: 0.875rem;
	justify-content: center;
	margin-top: var(--wp--preset--spacing--2);
}

.jfa-rating {
	align-items: center;
	color: var(--wp--preset--color--ink-500);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	justify-content: center;
}

.jfa-rating > * {
	margin: 0;
}

.jfa-rating strong {
	color: var(--wp--preset--color--ink-900);
}

@media (max-width: 600px) {
	.jfa-hero__card {
		border-bottom-width: 4px;
	}

	.jfa-hero__card .wp-block-buttons,
	.jfa-hero__card .wp-block-button {
		width: 100%;
	}

	.jfa-hero__card .wp-block-button__link {
		box-sizing: border-box;
		display: block;
		width: 100%;
	}
}

/* =====================================================================
   Academy page and pricing page patterns
   ===================================================================== */

/* The one-row free-trial band is navy-900, one step lighter than other deep sections. */
.wp-block-group.is-style-section-deep.jfa-band--900 {
	background-color: var(--wp--preset--color--navy-900);
}

@media (max-width: 600px) {
	.wp-block-button.jfa-hide-on-phone {
		display: none;
	}
}

/* ---------- Academy hero (jfa/academy-hero block) ---------- */

.jfa-hero--academy {
	--jfa-hero-overlap: clamp(2.25rem, 7.5vw, 6.875rem);
	padding-bottom: 0;
}

.jfa-hero--academy .jfa-hero__image img {
	height: clamp(16.25rem, 35vw, 31.25rem);
	object-position: var(--jfa-hero-position, 50% 40%);
}

.jfa-hero--academy .jfa-hero__card {
	gap: 0;
	overflow: hidden;
	padding: 0;
	width: min(60rem, calc(100% - 1.75rem));
}

.jfa-hero--no-image,
.jfa-hero--home:not(:has(> .jfa-hero__image)) {
	padding-top: var(--wp--preset--spacing--8);
}

/* No photo (no featured image): the card sits on its own. */
.jfa-hero--no-image .jfa-hero__card,
.jfa-hero--home:not(:has(> .jfa-hero__image)) .jfa-hero__card {
	grid-row: 1 / 4;
}

.jfa-hero__body {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
	padding: clamp(1.375rem, 4vw, 2.75rem) clamp(1.375rem, 5vw, 4rem) clamp(1.375rem, 3vw, 1.75rem);
}

.jfa-hero__body.jfa-hero__body > * {
	margin-block: 0;
}

.jfa-breadcrumb ol {
	color: var(--wp--preset--color--ink-500);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 600;
	gap: 0.625rem;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.jfa-breadcrumb li + li::before {
	content: "›";
	margin-right: 0.625rem;
}

.jfa-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.jfa-breadcrumb a:hover {
	text-decoration: underline;
}

.jfa-breadcrumb [aria-current="page"] {
	color: var(--wp--preset--color--ink-900);
}

.jfa-hero__facts {
	background: var(--wp--preset--color--cream-100);
	border-top: 1px solid var(--wp--preset--color--ink-100);
	box-sizing: border-box;
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.jfa-hero__facts li {
	align-items: center;
	color: var(--wp--preset--color--ink-900);
	display: flex;
	font-size: 0.9375rem;
	font-weight: 600;
	gap: 0.625rem;
	justify-content: center;
	padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--4);
}

.jfa-hero__facts li + li {
	border-left: 1px solid var(--wp--preset--color--ink-100);
}

.jfa-hero__facts svg {
	color: var(--wp--preset--color--red-500);
	flex-shrink: 0;
}

@media (max-width: 781.98px) {
	.jfa-hero__body {
		align-items: stretch;
		text-align: left;
	}

	.jfa-breadcrumb ol {
		justify-content: flex-start;
	}

	.jfa-hero__facts {
		background: transparent;
		gap: 0.625rem;
		grid-auto-flow: row;
		padding: 0.875rem clamp(1.375rem, 5vw, 4rem) 1.375rem;
	}

	.jfa-hero__facts li {
		font-size: var(--wp--preset--font-size--body-sm);
		justify-content: flex-start;
		padding: 0;
	}

	.jfa-hero__facts li + li {
		border-left: 0;
	}
}

/* Tick list. It grows so the button sits at the bottom of every card. */
.jfa-checks {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	font-size: 0.9375rem;
	gap: 0.625rem;
	line-height: 1.45;
	list-style: none;
	margin: 0;
	padding: 0;
}

.jfa-checks li {
	padding-left: 1.75rem;
	position: relative;
}

.jfa-checks li::before {
	background: var(--wp--preset--color--red-500);
	content: "";
	height: 1.125rem;
	left: 0;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%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' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
	position: absolute;
	top: 0.125rem;
	width: 1.125rem;
}
/* ---------- Photo hero (pricing) ---------- */

.jfa-hero-photo {
	/* Shows when the page has no featured image. */
	background: var(--wp--preset--color--navy-900);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.jfa-hero-photo.jfa-hero-photo > * {
	grid-column: 1;
	grid-row: 1;
	margin-block: 0;
}

.jfa-hero-photo__image.jfa-hero-photo__image {
	height: auto;
	margin: 0;
	min-height: clamp(16.25rem, 24vw, 20rem);
	position: relative;
}

.jfa-hero-photo__image img {
	border-radius: 0;
	display: block;
	height: 100%;
	inset: 0;
	object-fit: cover;
	object-position: var(--jfa-hero-position, 50% 45%);
	position: absolute;
	width: 100%;
}

/* Navy tint over the photo so white text stays readable. */
.jfa-hero-photo__image::after {
	background: var(--wp--preset--color--navy-950);
	content: "";
	inset: 0;
	opacity: 0.62;
	position: absolute;
}

.jfa-hero-photo__content {
	align-content: center;
	display: grid;
	padding-block: var(--wp--preset--spacing--10);
	position: relative;
}

.jfa-hero-photo__text {
	/* A grid item with auto side margins would shrink to its text and sit centred; fill the wide width instead. */
	box-sizing: border-box;
	display: flex;
	width: 100%;
	flex-direction: column;
	gap: 0.875rem;
}

.jfa-hero-photo__text.jfa-hero-photo__text > * {
	margin-block: 0;
}

.jfa-hero-photo h1 {
	color: var(--wp--preset--color--white);
}

.jfa-hero-photo__intro {
	color: var(--wp--preset--color--ink-100);
	max-width: 38.75rem;
}

.jfa-breadcrumb-text {
	color: var(--wp--preset--color--ink-200);
	font-weight: 600;
}

.jfa-breadcrumb-text a {
	color: inherit;
	text-decoration: none;
}

.jfa-breadcrumb-text a:hover {
	text-decoration: underline;
}

.jfa-breadcrumb-text strong {
	color: var(--wp--preset--color--white);
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
	}
}


/* ---------- Shared: arrow links, cyan ticks, chips, stat card ---------- */

/* A section that follows another on the same background: no second gap above it. */
.jfa-section.jfa-section--flush-top {
	padding-top: 0;
}

/* "Explore the Advanced program →" and similar: bold red link on its own line. */
p.jfa-arrow-link {
	font-weight: 700;
}

p.jfa-arrow-link a {
	color: var(--wp--preset--color--red-500);
	text-decoration: none;
}

p.jfa-arrow-link a:hover,
p.jfa-arrow-link a:focus-visible {
	color: var(--wp--preset--color--red-700);
	text-decoration: underline;
}

/* Tick list with cyan ticks (Our philosophy). Same shape as the red pricing ticks. */
.jfa-checks.jfa-checks--cyan {
	flex-grow: 0;
	font-size: var(--wp--preset--font-size--body-md);
	padding-left: 0;
}

.jfa-checks.jfa-checks--cyan li::before {
	background: var(--wp--preset--color--cyan-500);
}

/* List block style "Chips": short words as cream pills. */
ul.is-style-jfa-chips {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.625rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.is-style-jfa-chips li {
	background: var(--wp--preset--color--cream-200);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--ink-900);
	font-size: var(--wp--preset--font-size--body-md);
	font-weight: 700;
	line-height: var(--wp--custom--leading--snug);
	margin: 0;
	padding: 0.625rem 1.125rem;
}

/* Stat card: one big red figure beside a sentence (jfa/stat-callout). */
.jfa-stat-callout {
	align-items: center;
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--md);
	display: flex;
	gap: var(--wp--preset--spacing--6);
	padding: var(--wp--preset--spacing--7) var(--wp--preset--spacing--8);
}

.jfa-stat-callout.jfa-stat-callout > * {
	margin-block: 0;
}

p.jfa-stat-callout__figure {
	color: var(--wp--preset--color--red-500);
	flex-shrink: 0;
	font-family: var(--wp--preset--font-family--display);
	line-height: 1;
}

p.jfa-stat-callout__text {
	color: var(--wp--preset--color--ink-900);
	line-height: var(--wp--custom--leading--normal);
}

@media (max-width: 600px) {
	.jfa-stat-callout {
		gap: var(--wp--preset--spacing--4);
		padding: var(--wp--preset--spacing--5);
	}
}

/* =====================================================================
   Club Partnerships page (docs/patterns.md §21–27)
   ===================================================================== */

/* Caps label style on a real heading ("Current club partners", "As the partnership grows"). */
:is(h2, h3).is-style-jfa-label.is-style-jfa-label {
	color: var(--wp--preset--color--red-500);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--label);
	line-height: var(--wp--custom--leading--normal);
	text-transform: uppercase;
}

/* =====================================================================
   Coaches
   ===================================================================== */

.jfa-meta {
	color: var(--wp--preset--color--ink-500);
}

.kb-chat-container
.kb-chat-btn {background: var(--wp--preset--color--navy-600) !important;}


/* Hero photo extras: caps label (cyan-300 on the navy tint) and a note line with a white phone link. */
.jfa-hero-photo p.is-style-jfa-label {
	color: var(--wp--preset--color--cyan-300);
}

.jfa-hero-photo__note {
	color: var(--wp--preset--color--ink-100);
	max-width: 38.75rem;
}

.jfa-hero-photo__note a {
	color: var(--wp--preset--color--white);
	font-weight: 700;
}