/*
Theme Name: AngelArmsTheme
Theme URI:
Author:
Author URI:
Description: Custom theme for the Angel Arms website.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: angelarms
*/

/* ==========================================================================
   All site styles live in this file.
   Do not use the "Additional CSS" field in the WordPress Customizer —
   add any new styles only to this file.
   ========================================================================== */

:root {
	--aafp-font: 'Source Sans Pro', sans-serif;
	--aafp-heading-font: 'Nunito', sans-serif;
	--aafp-orange: #f9ae01;
	--aafp-orange-dark: #e09c00;
	--aafp-red: #fc4727;
	--aafp-cream: #ffe7b1;
	--aafp-text: #070713;
	--aafp-text-light: #6e6e6e;
	--aafp-paragraph: #385469;
	--aafp-border: #9ca3af;
	--aafp-programs-bg: #fef7ef;
	--aafp-programs-green: #7cb342;
	--aafp-programs-purple: #9b8ee0;
	--aafp-pink: #ff88b0;
	--aafp-programs-blue: #4fb3c4;
}

/* ---------- Preloader ---------- */

.aafp-preloader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	background: var(--aafp-cream);
	opacity: 1;
	visibility: visible;
	transition: opacity 0.4s ease, visibility 0.4s ease;
}

.aafp-preloader__text {
	font-family: var(--aafp-heading-font);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--aafp-text);
}

.aafp-preloader__cubes {
	display: flex;
	align-items: center;
	gap: 8px;
}

.aafp-preloader__cube {
	width: 12px;
	height: 12px;
	background: var(--aafp-orange);
	border-radius: 3px;
	animation: aafp-preloader-cube 1s ease-in-out infinite;
}

.aafp-preloader__cube:nth-child(1) {
	animation-delay: 0s;
}

.aafp-preloader__cube:nth-child(2) {
	animation-delay: 0.12s;
}

.aafp-preloader__cube:nth-child(3) {
	animation-delay: 0.24s;
}

.aafp-preloader__cube:nth-child(4) {
	animation-delay: 0.36s;
}

@keyframes aafp-preloader-cube {
	0%,
	80%,
	100% {
		transform: scale(0.6);
		opacity: 0.4;
	}
	40% {
		transform: scale(1);
		opacity: 1;
	}
}

.aafp-preloader.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Repeat page loads within the same browser tab session: skip it
   entirely, no flash — see the inline script in header.php and
   assets/js/preloader.js. */
html.aafp-no-preloader .aafp-preloader {
	display: none;
}

/* ---------- Base reset and site font ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--aafp-font);
	font-size: 16px;
	line-height: 1.5;
	color: var(--aafp-text);
}

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

ul {
	margin: 0;
	padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--aafp-heading-font);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 16px;
}

/* ---------- TOP MENU: top row (contacts + social) ---------- */

.aafp-top-bar {
	background: #ffffff;
	border-bottom: 1px dashed var(--aafp-border);
}

/* Inner pages: the contact bar blends into the cream background
   instead of staying white, and is shorter — matching how the
   reference site's header is taller/two white blocks on the
   homepage, but thinner/one white block on inner pages. */
body:not(.home) .aafp-top-bar {
	background: var(--aafp-cream);
	border-bottom: none;
}

.aafp-top-bar__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 24px 36px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}

body:not(.home) .aafp-top-bar__inner {
	padding: 12px 36px;
}

.aafp-top-bar__contacts {
	/* Hidden below 1400px, same as the reference (visible only on xxl screens). */
	display: none;
	align-items: center;
	gap: 24px;
}

@media (min-width: 1400px) {
	.aafp-top-bar__contacts {
		display: flex;
	}
}

.aafp-contact-item {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #000000;
	text-decoration: none;
	font-size: 14px;
	font-weight: 400;
}

.aafp-contact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--aafp-orange);
	color: #ffffff;
	flex-shrink: 0;
}

.aafp-contact-icon svg {
	width: 16px;
	height: 16px;
}

.aafp-top-bar__social {
	/* Always visible at every width — social links must never disappear. */
	display: flex;
	align-items: center;
	gap: 16px;
}

.aafp-social-icon {
	display: inline-flex;
	color: #000000;
}

.aafp-social-icon svg {
	width: 20px;
	height: 20px;
}

.aafp-social-icon:hover {
	color: var(--aafp-orange);
}

/* ---------- TOP MENU: logo + navigation row ----------
   In the real reference, .aafp-nav-wrap is a plain block in normal
   document flow (cream background, same color as the HERO section
   below it), containing a white menu card rounded ONLY on the
   bottom corners. There is no position:absolute/overlap — the
   "overlap" look comes purely from the rounded bottom corners of
   the card sitting on the same cream background as header+HERO.
   ------------------------------------------------------------- */

.aafp-nav-wrap {
	background-color: var(--aafp-cream);
	background-position: center;
	background-repeat: repeat;
	background-size: auto;
}

/* Only the homepage's nav sits on the patterned background — inner
   pages keep it plain cream (matching their thinner, simpler header
   treatment). */
body.home .aafp-nav-wrap {
	background-image: url('assets/images/hero_bg.png');
}

.aafp-nav-row {
	position: relative;
	max-width: 1320px;
	margin: 0 auto;
	background: #ffffff;
	border-radius: 0 0 50px 50px;
}

/* Inner pages: the contact bar above no longer reads as its own white
   block (it's cream now), so the nav pill floats on cream on all
   sides — rounded all the way round, matching the reference. */
body:not(.home) .aafp-nav-row {
	border-radius: 16px;
}

.aafp-nav-row__inner {
	padding: 24px 36px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

.aafp-logo {
	display: flex;
	align-items: center;
	text-decoration: none;
}

.aafp-logo__image {
	max-width: 130px;
	height: auto;
	display: block;
}

.aafp-logo__text {
	font-family: var(--aafp-heading-font);
	font-size: 24px;
	font-weight: 700;
	color: var(--aafp-text);
}

.aafp-main-nav {
	/* Hidden below 1200px, same as the reference — a hamburger toggle
	   takes over below that (see .aafp-mobile-toggle / .aafp-main-nav.is-open). */
	display: none;
	flex: 1;
}

@media (min-width: 1200px) {
	.aafp-main-nav {
		display: block;
	}
}

/* Below 1200px the nav becomes an off-canvas side panel sliding in from
   the left, matching the reference's ".mobile-menu" panel: fixed, 300px
   wide, full height, white background, closed by translateX(-100%). */
@media (max-width: 1199.98px) {
	.aafp-main-nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 300px;
		max-width: 85vw;
		height: 100vh;
		background: #ffffff;
		z-index: 999;
		padding: 64px 24px 24px;
		overflow-y: auto;
		transform: translateX(-100%);
		transition: transform 0.3s ease;
		display: block;
	}

	.aafp-main-nav.is-open {
		transform: translateX(0);
	}
}

.aafp-main-menu {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
}

@media (max-width: 1199.98px) {
	.aafp-main-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		width: 100%;
	}

	.aafp-main-menu li {
		width: 100%;
	}

	.aafp-main-menu a {
		display: block;
		width: 100%;
		padding: 10px 0;
		border-bottom: 1px solid #eee;
	}

	/* Collapsed by default here — same click-to-expand technique as
	   the footer's "Quick Links" (see assets/js/navigation.js and
	   style.css's "Footer Quick Links" accordion rules). Parent items
	   only exist to group their children; their own href is just a
	   placeholder that reloads the page. */
	.aafp-main-menu ul.sub-menu {
		position: static;
		box-shadow: none;
		padding: 0 4px 0 20px;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease;
	}

	.aafp-main-menu li.menu-item-has-children.is-open > ul.sub-menu {
		max-height: 400px;
		padding: 4px 4px 4px 20px;
	}

	.aafp-main-menu ul.sub-menu li a {
		border-bottom: none;
		padding: 8px 14px;
	}

	.aafp-main-menu li.menu-item-has-children > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		cursor: pointer;
	}

	.aafp-main-menu li.menu-item-has-children > a::after {
		margin-left: 0;
		transition: transform 0.2s ease;
	}

	.aafp-main-menu li.menu-item-has-children.is-open > a::after {
		transform: rotate(-135deg);
	}
}

/* Dark overlay behind the off-canvas panel. */
.aafp-nav-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.74);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: 998;
}

.aafp-nav-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* Close (X) button inside the off-canvas panel — only exists there,
   so it must stay hidden on desktop where .aafp-main-nav is the plain
   top menu (not the sliding panel). */
.aafp-nav-close {
	display: none;
}

@media (max-width: 1199.98px) {
	.aafp-nav-close {
		position: absolute;
		top: 16px;
		right: 16px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		border: none;
		border-radius: 50%;
		background: #5c6672;
		color: #ffffff;
		cursor: pointer;
		padding: 0;
	}
}

.aafp-mobile-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: none;
	background: transparent;
	color: var(--aafp-text);
	cursor: pointer;
	padding: 0;
}

.aafp-mobile-toggle svg {
	width: 32px;
	height: 32px;
}

@media (min-width: 1200px) {
	.aafp-mobile-toggle {
		display: none;
	}
}

.aafp-main-menu a {
	color: var(--aafp-text);
	text-decoration: none;
	font-size: 16px;
	font-weight: 500;
}

.aafp-main-menu li.current-menu-item > a,
.aafp-main-menu a:hover {
	color: var(--aafp-red);
}

.aafp-main-menu li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	margin-left: 5px;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
}

.aafp-main-menu ul.sub-menu {
	list-style: none;
	margin: 0;
	padding: 8px;
	background: #ffffff;
}

.aafp-main-menu ul.sub-menu li a {
	border-radius: 4px;
}

/* Desktop: submenus become hover dropdowns (matching the reference
   site's nav) instead of a permanently visible stacked list. */
@media (min-width: 1200px) {
	.aafp-main-menu li.menu-item-has-children {
		position: relative;
	}

	.aafp-main-menu li.menu-item-has-children > ul.sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 200px;
		border-radius: 10px;
		opacity: 0;
		visibility: hidden;
		transform: scaleY(0);
		transform-origin: top;
		transition: all 0.4s ease;
		z-index: 999;
	}

	.aafp-main-menu li.menu-item-has-children:hover > ul.sub-menu {
		opacity: 1;
		visibility: visible;
		transform: scaleY(1);
	}

	.aafp-main-menu ul.sub-menu li a {
		display: block;
		padding: 8px 14px;
		white-space: nowrap;
	}

	.aafp-main-menu ul.sub-menu li a:hover {
		background: var(--aafp-cream);
	}
}

.aafp-nav-row__actions {
	display: flex;
	align-items: center;
	gap: 14px;
}

.aafp-enroll-btn {
	/* Hidden below 576px, same as the reference. */
	display: none;
	align-items: center;
	gap: 10px;
	background: var(--aafp-orange);
	color: #ffffff;
	text-decoration: none;
	font-weight: 400;
	font-size: 16px;
	padding: 14px 32px;
	border-radius: 16px;
	transition: background-color 0.2s ease;
}

@media (min-width: 576px) {
	.aafp-enroll-btn {
		display: inline-flex;
	}
}

.aafp-enroll-btn:hover {
	background: var(--aafp-orange-dark);
}

/* Copy of the button shown inside the mobile off-canvas menu panel —
   the header-row copy is hidden below 576px, so without this it would
   be unreachable on small screens. Always visible once inside the
   panel, regardless of the header-row copy's own breakpoint. */
.aafp-enroll-btn.aafp-enroll-btn--mobile {
	display: inline-flex;
	justify-content: center;
	width: 100%;
	margin-top: 24px;
}

@media (min-width: 1200px) {
	.aafp-enroll-btn.aafp-enroll-btn--mobile {
		display: none;
	}
}

/* ---------- HERO ---------- */

.aafp-hero {
	position: relative;
	z-index: 3;
	overflow: hidden;
	/* Section padding steps up at the same breakpoints as the reference. */
	padding: 30px 0 60px;
	background-color: var(--aafp-cream);
	background-image: url('assets/images/hero_bg.png');
	background-position: center;
	background-repeat: repeat;
	background-size: auto;
}

@media (min-width: 576px) {
	.aafp-hero {
		padding: 46px 0 80px;
	}
}

@media (min-width: 992px) {
	.aafp-hero {
		padding: 74px 0 120px;
	}
}

.aafp-hero__shape {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: auto;
	pointer-events: none;
}

.aafp-hero__shape--1 {
	z-index: -1;
}

.aafp-hero__shape--2 {
	z-index: 1;
}

/* Decorative flying butterfly: wing-flap frame swap is handled by JS
   (butterfly.js), the slow up/down float is the same technique as the
   reference's ".animation-upDown" (8s, linear, infinite). */
.aafp-hero__butterfly {
	position: absolute;
	top: 12%;
	right: 8%;
	width: 60px;
	z-index: 3;
	pointer-events: none;
	animation: aafp-float-updown 8s linear infinite;
}

@media (min-width: 768px) {
	.aafp-hero__butterfly {
		width: 150px;
		height: auto;
		top: 10%;
		right: 10%;
	}
}
@media (max-width: 768px) {
	.aafp-hero__butterfly {
		display: none;
	}
}

.aafp-hero__butterfly img {
	width: 100%;
	height: auto;
	display: block;
}

@keyframes aafp-float-updown {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-20px);
	}
	100% {
		transform: translateY(0);
	}
}

/* Decorative globe: same 4-frame swap technique as the butterfly, but
   no up/down float, and hidden below 768px. */
.aafp-hero__globe {
	position: absolute;
	width: 169px;
        top: 46%;
        left: 5%;;
	z-index: 3;
	pointer-events: none;

}

@media (min-width: 768px) {
	.aafp-hero__globe {
		width: 169px;
        top: 46%;
        left: 5%;
	z-index: 1;
	}
}

@media (max-width: 767.98px) {
	.aafp-hero__globe {
		display: none;
	}
}

.aafp-hero__globe img {
	width: 100%;
	height: auto;
	display: block;
}

.aafp-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}

@media (min-width: 992px) {
	.aafp-hero__inner {
		flex-direction: row;
	}
}

.aafp-hero__content {
	width: 100%;
}

@media (min-width: 992px) {
	.aafp-hero__content {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

.aafp-hero__title {
	/* Same fluid clamp() formula as the reference: 26px min, 72px max. */
	font-size: clamp(1.625rem, 1.0496rem + 3.0687vw, 4.5rem);
	line-height: 1.2;
	margin: 0 0 20px;
}

.aafp-hero__text {
	font-size: 18px;
	line-height: 1.6;
	color: var(--aafp-paragraph);
	max-width: 550px;
	margin: 0 0 32px;
}

.aafp-hero__actions {
	display: flex;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap;
}

.aafp-hero__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--aafp-red);
	color: #ffffff;
	text-decoration: none;
	font-weight: 400;
	font-size: 16px;
	padding: 14px 32px;
	border-radius: 16px;
	transition: background-color 0.2s ease;
}

.aafp-hero__btn:hover {
	background: var(--aafp-orange-dark);
}

.aafp-hero__call {
	display: flex;
	align-items: center;
	gap: 12px;
}

.aafp-hero__call-icon {
	width: auto;
	height: 120px;
}

.aafp-hero__call-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.aafp-hero__call-label {
	font-size: 16px;
	color: var(--aafp-text);
}

.aafp-hero__call-number {
	display: block;
	font-family: var(--aafp-heading-font);
	font-size: 18px;
	font-weight: 700;
	color: var(--aafp-red);
	text-decoration: none;
}

.aafp-hero__media {
	width: 100%;
}

@media (min-width: 992px) {
	.aafp-hero__media {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

.aafp-hero__image {
	width: 100%;
	height: auto;
	display: block;
}

/* ---------- STATS ---------- */

.aafp-stats {
	position: relative;
	overflow: hidden;
	/* Section padding steps up at the same breakpoints as the reference. */
	padding: 40px 0 0;
}

@media (min-width: 576px) {
	.aafp-stats {
		padding: 60px 0 0;
	}
}

@media (min-width: 992px) {
	.aafp-stats {
		padding: 110px 0 0;
	}
}

.aafp-stats__fox {
	display: none;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 110px;
	height: auto;
	z-index: 1;
	pointer-events: none;
}

@media (min-width: 992px) {
	.aafp-stats__fox {
		display: block;
	}
}

@media (min-width: 1200px) {
	.aafp-stats__fox {
		width: 110px;
	}
}

.aafp-stats__inner {
	position: relative;
	z-index: 2;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 20px;
}

.aafp-stats__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}

.aafp-stats__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.aafp-stats__label {
	display: block;
	font-family: var(--aafp-font);
	font-size: 18px;
	font-weight: 600;
	color: #4b5563;
	margin-bottom: 16px;
}

.aafp-stats__number {
	display: block;
	font-family: var(--aafp-heading-font);
	font-weight: 400;
	color: var(--aafp-red);
	line-height: 1.2;
	/* Same fluid clamp() formula as the reference's counter heading:
	   36px min, 88px max. */
	font-size: clamp(2.25rem, 1.4368rem + 4.3369vw, 5.5rem);
}

.aafp-stats__divider {
	display: none;
	width: 1px;
	height: 96px;
	border-left: 1px dashed var(--aafp-border);
}

@media (min-width: 1200px) {
	.aafp-stats__divider {
		display: block;
	}
}

/* ---------- ABOUT US ---------- */

.aafp-about {
	position: relative;
	/* Section padding steps up at the same breakpoints as the reference. */
	padding: 40px 0;
}

/* Decorative swinging child: hangs from a fixed point at the top and
   rocks side to side, like a pendant on a string — the rotation
   pivots around the top of the image, not its center. */
.aafp-about__child {
	display: none;
	position: absolute;
	top: 0;
	right: 4%;
	width: 100px;
	height: auto;
	z-index: -1;
	pointer-events: none;
	transform-origin: top center;
	animation: aafp-swing-top 3.5s ease-in-out infinite;
}

@media (min-width: 992px) {
	.aafp-about__child {
		display: block;
	}
}

@media (min-width: 1200px) {
	.aafp-about__child {
		width: 220px;
		right: 6%;
	}
}

@keyframes aafp-swing-top {
	0%,
	100% {
		transform: rotate(-8deg);
	}
	50% {
		transform: rotate(8deg);
	}
}

@media (min-width: 576px) {
	.aafp-about {
		padding: 60px 0;
	}
}

@media (min-width: 992px) {
	.aafp-about {
		padding: 110px 0 20px;
	}
}

.aafp-about__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 20px;
}

.aafp-about__row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}

@media (min-width: 992px) {
	.aafp-about__row {
		flex-direction: row;
		align-items: flex-start;
	}
}

.aafp-about__media {
	width: 100%;
}

@media (min-width: 992px) {
	.aafp-about__media {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

.aafp-about__image {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 24px;
}

.aafp-about__content {
	width: 100%;
	max-width: 520px;
}

@media (min-width: 992px) {
	.aafp-about__content {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

.aafp-about__eyebrow {
	display: inline-block;
	font-family: var(--aafp-font);
	font-size: 18px;
	font-weight: 400;
	color: var(--aafp-red);
	margin-bottom: 24px;
}

.aafp-about__title {
	/* Same fluid clamp() formula as the reference's h4 heading: 28px min, 52px max. */
	font-size: clamp(1.75rem, 1.3405rem + 2.1838vw, 3.25rem);
	line-height: 1.2;
	margin: 0 0 28px;
}

.aafp-about__text {
	font-size: 16px;
	line-height: 1.75;
	color: #5c707e;
	margin: 0 0 28px;
}

.aafp-about__features {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 28px;
	max-width: 550px;
}

.aafp-about__feature {
	display: flex;
	align-items: center;
	gap: 16px;
}

.aafp-about__feature-icon {
	width: 60px;
	height: 60px;
	display: block;
	flex-shrink: 0;
}

.aafp-about__feature-text {
	font-family: var(--aafp-heading-font);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--aafp-text);
}

/* ---------- ICONS ---------- */

.aafp-icons {
	padding: 40px 0;
}

@media (min-width: 576px) {
	.aafp-icons {
		padding: 60px 0;
	}
}

@media (min-width: 992px) {
	.aafp-icons {
		padding: 40px 0 80px;
	}
}

.aafp-icons__inner {
	/* Same max-width as the other blocks' containers — this is what
	   actually clips the strip, so only ~5 icons show at once like
	   the reference, instead of the strip spanning the full viewport. */
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 20px;
	overflow: hidden;
	/* Fade the strip to transparent at both edges, same as the
	   reference's "left-right-gradient" mask on its Swiper. */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.aafp-icons__track {
	display: flex;
	align-items: center;
	width: max-content;
	gap: 30px;
	/* assets/js/icons-scroll.js clones the item list as many times as
	   needed and moves the track step by step (2s pause, 1.5s slide,
	   matching the reference's Swiper) — no CSS animation here. */
	transform: translateX(0);
}

.aafp-icons__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	/* Width is set in JS so exactly 5/4/3/2 items (by breakpoint) fit
	   the visible container — see icons-scroll.js. */
}

.aafp-icons__icon {
	width: 100px;
	height: auto;
	display: block;
}

.aafp-icons__label {
	font-family: var(--aafp-heading-font);
	font-size: 16px;
	font-weight: 400;
	color: var(--aafp-text);
	white-space: nowrap;
}

/* ---------- OUR PROGRAMS ---------- */

.aafp-programs {
	position: relative;
	overflow: hidden;
	background-color: var(--aafp-programs-bg);
	padding: 60px 0 60px;
}

@media (min-width: 576px) {
	.aafp-programs {
		padding: 70px 0 70px;
	}
}

@media (min-width: 992px) {
	.aafp-programs {
		padding: 90px 0 90px;
	}
}

/* Wavy top border strip: a single wide image, repeated horizontally
   so it never runs out at any width (same idea as the ICONS strip). */
.aafp-programs__border {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	display: block;
	pointer-events: none;
}

/* Corner decorations — fixed size and position, hidden on narrow
   screens so they never crowd the text. */
.aafp-programs__sun,
.aafp-programs__cloud,
.aafp-programs__plane,
.aafp-programs__fox,
.aafp-programs__bush {
	display: none;
	position: absolute;
	pointer-events: none;
}

@media (min-width: 1200px) {

	.aafp-programs__sun {
		display: block;
		top: 300px;
		left: 3%;
		width: 130px;
		height: auto;
		animation: aafp-swing-top 4.5s ease-in-out infinite;
	}

	.aafp-programs__cloud {
		display: block;
		width: 70px;
		height: auto;
	}

	.aafp-programs__cloud--1 {
		top: 150px;
		left: 25%;
	}

	.aafp-programs__cloud--2 {
		top: 222px;
		right: 25%;
	}

	.aafp-programs__plane {
		display: block;
		top: 250px;
		right: 3%;
		width: 140px;
		height: auto;
		animation: aafp-float-updown 6s ease-in-out infinite;
	}

	.aafp-programs__fox {
		display: block;
		bottom: 0;
		left: 0;
		width: 190px;
		height: auto;
	}

	.aafp-programs__bush {
		display: block;
		bottom: 0;
		right: 0;
		width: 210px;
		height: auto;
	}
}

.aafp-programs__inner {
	position: relative;
	z-index: 2;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 20px;
}

@media (min-width: 1200px) {
	.aafp-programs__inner {
		/* The sun/clouds/plane decorations sit ~130-260px from the top
		   of the section at this breakpoint — push the header down so
		   the heading text doesn't run into them. */
		padding-top: 100px;
	}
}
@media (min-width: 2680px) {
	.aafp-programs__inner {
		/* The sun/clouds/plane decorations sit ~130-260px from the top
		   of the section at this breakpoint — push the header down so
		   the heading text doesn't run into them. */
		padding-top: 150px;
	}
}

.aafp-programs__header {
	max-width: 720px;
	margin: 0 auto 48px;
	text-align: center;
}

.aafp-programs__eyebrow {
	display: inline-block;
	font-family: var(--aafp-font);
	font-size: 18px;
	font-weight: 400;
	color: var(--aafp-red);
	margin-bottom: 16px;
}

.aafp-programs__title {
	/* Same fluid clamp() formula used for the ABOUT US heading. */
	font-size: clamp(1.75rem, 1.3405rem + 2.1838vw, 3.25rem);
	line-height: 1.2;
	margin: 0 0 16px;
}

.aafp-programs__text {
	font-size: 16px;
	line-height: 1.75;
	color: var(--aafp-paragraph);
	margin: 0;
}

/* 6 cards as two even rows of 3: 3 columns at desktop width. Kept
   justify-content:center (rather than flex-start) so an uneven count
   still centers a leftover row instead of a lopsided split, if a card
   is ever added/removed again. Cards don't grow to fill a shorter
   row, so all rows use the same card width. */
.aafp-programs__cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px;
}

.aafp-programs__card {
	background: #ffffff;
	border-radius: 24px;
	padding: 16px;
	box-shadow: 0 12px 30px rgba(7, 7, 19, 0.06);
	flex: 0 1 100%;
}

@media (min-width: 576px) {
	.aafp-programs__card {
		flex-basis: calc(50% - 16px);
	}
}

@media (min-width: 1200px) {
	.aafp-programs__card {
		flex-basis: calc(33.333% - 21.333px);
	}
}

/* One accent color per card position, matching the reference design
   — 6 distinct colors so nothing repeats across the 6 cards. */
.aafp-programs__card:nth-child(6n + 1) {
	--aafp-card-accent: var(--aafp-red);
}

.aafp-programs__card:nth-child(6n + 2) {
	--aafp-card-accent: var(--aafp-programs-green);
}

.aafp-programs__card:nth-child(6n + 3) {
	--aafp-card-accent: var(--aafp-programs-purple);
}

.aafp-programs__card:nth-child(6n + 4) {
	--aafp-card-accent: var(--aafp-orange);
}

.aafp-programs__card:nth-child(6n + 5) {
	--aafp-card-accent: var(--aafp-pink);
}

.aafp-programs__card:nth-child(6n + 6) {
	--aafp-card-accent: var(--aafp-programs-blue);
}

.aafp-programs__media {
	position: relative;
	margin-bottom: 20px;
}

.aafp-programs__image {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
	border-radius: 20px;
}

.aafp-programs__badge {
	position: absolute;
	top: 16px;
	left: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 54px;
	background: var(--aafp-card-accent, var(--aafp-red));
	color: #ffffff;
	font-family: var(--aafp-heading-font);
	line-height: 1.2;
	text-align: center;
	padding: 8px 10px;
	border-radius: 14px;
}

.aafp-programs__badge-number {
	font-size: 15px;
	font-weight: 700;
}

.aafp-programs__badge-label {
	font-size: 11px;
	font-weight: 600;
}

.aafp-programs__decor {
	position: absolute;
	bottom: -33px;
	right: -10px;
	width: 80px;
	height: auto;
	pointer-events: none;
}

.aafp-programs__card-title {
	font-size: 20px;
	line-height: 1.3;
	margin: 0 0 10px;
}

.aafp-programs__card-text {
	font-size: 15px;
	line-height: 1.6;
	color: var(--aafp-paragraph);
	margin: 0 0 20px;
}

.aafp-programs__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--aafp-card-accent, var(--aafp-red));
	color: #ffffff;
	text-decoration: none;
	font-weight: 400;
	font-size: 15px;
	padding: 12px 24px;
	border-radius: 14px;
	transition: opacity 0.2s ease;
}

.aafp-programs__btn:hover {
	opacity: 0.85;
}

/* ---------- WHY FAMILIES LOVE ANGEL ARMS ---------- */

.aafp-why {
	background-color: #ffffff;
	padding: 60px 0;
}

@media (min-width: 768px) {
	.aafp-why {
		padding: 80px 0;
	}
}

@media (min-width: 1200px) {
	.aafp-why {
		padding: 100px 0;
	}
}

.aafp-why__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 20px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: start;
}

@media (min-width: 992px) {
	.aafp-why__inner {
		grid-template-columns: 0.85fr 1.15fr;
		gap: 40px;
	}
}

.aafp-why__star {
	display: inline-flex;
	gap: 4px;
	color: var(--aafp-orange);
	margin-bottom: 16px;
}

.aafp-why__title {
	font-family: var(--aafp-heading-font);
	font-size: clamp(1.75rem, 1.3405rem + 2.1838vw, 3.25rem);
	line-height: 1.2;
	font-weight: 800;
	color: var(--aafp-text);
	margin: 0 0 20px;
}

.aafp-why__title-accent {
	color: var(--aafp-red);
}

.aafp-why__text {
	font-size: 16px;
	line-height: 1.6;
	color: var(--aafp-paragraph);
	max-width: 460px;
	margin: 0 0 32px;
}

.aafp-why__stats {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.aafp-why__stat {
	display: flex;
	flex-direction: column;
	width: 160px;
	padding: 24px;
	border-radius: 20px;
	background: var(--aafp-red);
}

.aafp-why__stat:nth-child(2) {
	background: var(--aafp-orange);
}

.aafp-why__stat-icon {
	width: 44px;
	height: auto;
	margin-bottom: 16px;
}

.aafp-why__stat-label {
	font-size: 14px;
	font-weight: 500;
	color: #ffffff;
	margin-bottom: 8px;
}

.aafp-why__stat-value {
	font-family: var(--aafp-heading-font);
	font-size: 32px;
	font-weight: 700;
	color: #ffffff;
}

.aafp-why__features {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

@media (min-width: 576px) {
	.aafp-why__features {
		grid-template-columns: repeat(3, 1fr);
	}
}

.aafp-why__feature {
	padding: 28px 24px;
	border-radius: 24px;
	background: #f7f7f7;
}

/* One pastel accent color per card position, matching the reference
   design (and the matching tint already baked into each icon jpg). */
.aafp-why__feature:nth-child(1) {
	background: #fdeeed;
}

.aafp-why__feature:nth-child(2) {
	background: #f7edf6;
}

.aafp-why__feature:nth-child(3) {
	background: #fef1e1;
}

.aafp-why__feature:nth-child(4) {
	background: #f1f3e3;
}

.aafp-why__feature:nth-child(5) {
	background: #eaf1f7;
}

.aafp-why__feature:nth-child(6) {
	background: #fdeeed;
}

.aafp-why__feature-icon {
	display: block;
	width: 60px;
	height: 60px;
	margin-bottom: 20px;
	border-radius: 14px;
}

.aafp-why__feature-label {
	display: block;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--aafp-text);
}

/* ---------- OUR TEACHERS (work in progress: background only) ---------- */

.aafp-teachers {
	position: relative;
    width: 100%;
    min-height: 800px;
    /* aspect-ratio: 1820 / 957; */
    background-image: url(assets/images/bg_teachers.png);
    /* background-size: 100% 100%; */
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Decorative flying bird: 3-frame wing-flap swap via sprite-frames.js
   (same generic .aafp-frame-cycle technique as the HERO butterfly). */
.aafp-teachers__bird {
	position: absolute;
	top: 6%;
	right: 6%;
	width: 60px;
	height: auto;
	z-index: 1;
	pointer-events: none;
}

@media (min-width: 768px) {
	.aafp-teachers__bird {
		width: 140px;
		top: 20%;
		right: 8%;
	}
}

@media (max-width: 767.98px) {
	.aafp-teachers__bird {
		display: none;
	}
}

.aafp-teachers__inner {
	position: relative;
	z-index: 2;
	max-width: 1320px;
	margin: 0 auto;
	padding: 60px 20px 0;
}

.aafp-teachers__header {
	max-width: 720px;
	margin: 0 auto 48px;
	text-align: center;
}

.aafp-teachers__eyebrow {
	display: inline-block;
	font-family: var(--aafp-font);
	font-size: 18px;
	font-weight: 600;
	color: var(--aafp-red);
	margin-bottom: 16px;
}

.aafp-teachers__title {
	/* Same fluid clamp() formula used for ABOUT US / OUR PROGRAMS. */
	font-size: clamp(1.75rem, 1.3405rem + 2.1838vw, 3.25rem);
	line-height: 1.2;
	font-weight: 700;
	color: var(--aafp-text);
	margin: 0;
}

.aafp-teachers__cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	justify-items: center;
}

@media (min-width: 768px) {
	.aafp-teachers__cards {
		grid-template-columns: repeat(3, 1fr);
	}
}

.aafp-teachers__card {
	width: 100%;
	max-width: 280px;
	background: #ffffff;
	border-radius: 12px;
	padding: 16px 16px 24px;
	box-shadow: 0 12px 30px rgba(7, 7, 19, 0.12);
	text-align: center;
}

.aafp-teachers__card:nth-child(1) {
	transform: rotate(-3deg);
}

.aafp-teachers__card:nth-child(2) {
	transform: rotate(2deg);
}

.aafp-teachers__card:nth-child(3) {
	transform: rotate(-2deg);
}

.aafp-teachers__photo {
	width: 100%;
	aspect-ratio: 4 / 5;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 16px;
	background: var(--aafp-cream);
}

.aafp-teachers__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aafp-teachers__photo-placeholder {
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(
		45deg,
		#e9e6df,
		#e9e6df 10px,
		#f4f2ec 10px,
		#f4f2ec 20px
	);
}

.aafp-teachers__name {
	font-size: 20px;
	font-weight: 700;
	color: var(--aafp-text);
	margin: 0 0 4px;
}

.aafp-teachers__role {
	font-size: 14px;
	color: var(--aafp-paragraph);
	margin: 0;
}

/* ---------- ORGANIC NUTRITION PROGRAM (Meal Plan) ---------- */

.aafp-meal-plan {
	position: relative;
	overflow: hidden;
	background-color: beige;
	padding: 60px 0 140px;
}

@media (max-width: 768px) {
	.aafp-meal-plan {
		padding: 80px 0 80px;
	}
}

@media (min-width: 1200px) {
	.aafp-meal-plan {
		padding: 100px 0 200px;
	}
}



/* Decor layer: full section height, but width-clamped to the same
   1320px column as .aafp-meal-plan__inner, and positioned relative
   to the whole section (not the content grid) so it never gets
   dragged around by the grid row's height. */
.aafp-meal-plan__decor {
	position: absolute;
	inset: 0;
	z-index: 1;
	max-width: 1320px;
	margin: 0 auto;
	pointer-events: none;
}

.aafp-meal-plan__sun,
.aafp-meal-plan__cloud {
	display: none;
	position: absolute;
	pointer-events: none;
}

@media (min-width: 1200px) {
	.aafp-meal-plan__sun,
	.aafp-meal-plan__cloud {
		display: block;
	}

	.aafp-meal-plan__sun {
		top: 6%;
		left: 52%;
		width: 150px;
		height: auto;
	}

	.aafp-meal-plan__cloud--1 {
		top: 4%;
		right: 4%;
		width: 150px;
		height: auto;
	}

	.aafp-meal-plan__cloud--2 {
		top: 20%;
		left: 63%;
		width: 90px;
		height: auto;
	}

	.aafp-meal-plan__cloud--3 {
		top: 34%;
		left: 27%;
		width: 130px;
		height: auto;
	}

	.aafp-meal-plan__cloud--4 {
		top: 46%;
		right: 8%;
		width: 90px;
		height: auto;
	}
}

.aafp-meal-plan__bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
	pointer-events: none;
}

.aafp-meal-plan__inner {
	position: relative;
	z-index: 2;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 20px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: start;
}

@media (min-width: 992px) {
	.aafp-meal-plan__inner {
		grid-template-columns: 1.1fr 0.9fr;
		gap: 40px;
	}
}

.aafp-meal-plan__heading-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.aafp-meal-plan__leaf {
	    width: 58px;
    position: absolute;
    height: auto;
    flex-shrink: 0;
    top: 2px;
    left: -46px;
}

.aafp-meal-plan__title {
	font-family: var(--aafp-heading-font);
	font-size: clamp(1.75rem, 1.3405rem + 2.1838vw, 3.25rem);
	line-height: 1.2;
	font-weight: 700;
	color: var(--aafp-text);
	margin: 0;
max-width: 500px;
}

.aafp-meal-plan__underline {
	display: block;
	width: 150px;
	height: 0;
	margin: 20px 0 24px;
	border-top: 3px dashed var(--aafp-orange);
}

.aafp-meal-plan__text {
	font-size: 16px;
	line-height: 1.6;
	color: var(--aafp-paragraph);
	max-width: 480px;
	margin: 0 0 32px;
}

.aafp-meal-plan__features {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

@media (min-width: 576px) {
	.aafp-meal-plan__features {
		grid-template-columns: repeat(4, 1fr);
max-width: 500px;
	}
}

.aafp-meal-plan__feature {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
}

.aafp-meal-plan__feature-icon {
	width: 60px;
	height: auto;
}

.aafp-meal-plan__feature-label {
	font-size: 15px;
	font-weight: 500;
	color: var(--aafp-text);
	line-height: 1.3;
}

.aafp-meal-plan__media {
	position: relative;
	display: flex;
	justify-content: center;
}

.aafp-meal-plan__fox {
	width: 100%;
	max-width: 460px;
	height: auto;
	display: block;
}

@media (min-width: 992px) {
	.aafp-meal-plan__fox {
		position: absolute;
    top: 122px;
	}
}

.aafp-meal-plan__badge {
	position: absolute;
	top: 0;
	right: 0;
	width: 110px;
	height: auto;
}

@media (min-width: 768px) {
	.aafp-meal-plan__badge {
		width: 140px;
	}
}

/* Light back-and-forth rotation — a small wobble, not a full spin. */
.aafp-meal-plan__sun {
	animation: aafp-wobble 6s ease-in-out infinite;
}

.aafp-meal-plan__badge {
	animation: aafp-wobble 7s ease-in-out infinite;
}

@keyframes aafp-wobble {
	0%,
	100% {
		transform: rotate(-6deg);
	}
	50% {
		transform: rotate(6deg);
	}
}

/* ---------- OUR TESTIMONIALS (placeholder: 3 static cards, no
   carousel, no plugin fields yet) ---------- */

.aafp-testimonials {
	position: relative;
	overflow: hidden;
	background-color: white;
	background-image: url('assets/images/testimonials/clouds.png');
	background-repeat: repeat-x;
	background-position: top center;
	background-size: auto;
	animation: aafp-clouds-drift 60s linear infinite;
	padding: 60px 0;
}

/* The clouds PNG tiles seamlessly left-to-right at its native 1719px
   width, so sliding the background by exactly that width loops with
   no visible seam. */
@keyframes aafp-clouds-drift {
	from {
		background-position-x: 0;
	}
	to {
		background-position-x: -1719px;
	}
}

@media (min-width: 768px) {
	.aafp-testimonials {
		padding: 80px 0;
	}
}

@media (min-width: 1200px) {
	.aafp-testimonials {
		padding: 100px 0;
	}
}

/* Decorative fox-on-balloon: hangs from a fixed point at the top,
   like the ABOUT US child — small pendulum swing combined with a
   slow, small up/down bob, both in one animation so they stay in
   sync. */
.aafp-testimonials__fox {
	display: none;
	position: absolute;
	top: 20%;
	right: 4%;
	width: 90px;
	height: auto;
	z-index: 2;
	pointer-events: none;
	transform-origin: top center;
	animation: aafp-swing-float-small 5s ease-in-out infinite;
}

@media (min-width: 992px) {
	.aafp-testimonials__fox {
		display: block;
	}
}

@media (min-width: 1200px) {
	.aafp-testimonials__fox {
		width: 130px;
		right: 6%;
	}
}

@keyframes aafp-swing-float-small {
	0%,
	100% {
		transform: rotate(-4deg) translateY(0);
	}
	50% {
		transform: rotate(4deg) translateY(-8px);
	}
}

.aafp-testimonials__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 20px;
}

.aafp-testimonials__header {
	max-width: 720px;
	margin: 0 auto 48px;
	text-align: center;
}

.aafp-testimonials__eyebrow {
	display: inline-block;
	font-family: var(--aafp-font);
	font-size: 18px;
	font-weight: 600;
	color: var(--aafp-red);
	margin-bottom: 16px;
}

.aafp-testimonials__title {
	font-size: clamp(1.75rem, 1.3405rem + 2.1838vw, 3.25rem);
	line-height: 1.2;
	font-weight: 700;
	color: var(--aafp-text);
	margin: 0;
}

/* Same auto-scroll technique as the ICONS strip (see
   assets/js/testimonials-scroll.js) — .aafp-testimonials__viewport
   clips the strip and .aafp-testimonials__track is the flex row the
   script clones and steps along. Card width is set in JS so exactly
   3/2/1 (by breakpoint) fit the visible container at once. */
.aafp-testimonials__viewport {
	overflow: hidden;
}

.aafp-testimonials__cta {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.aafp-testimonials__cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--aafp-red);
	color: #ffffff;
	border-radius: 16px;
	padding: 14px 32px;
	font-family: var(--aafp-font);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.aafp-testimonials__cta-btn:hover {
	background: var(--aafp-orange-dark);
	color: #ffffff;
}

.aafp-testimonials__track {
	display: flex;
	align-items: stretch;
	width: max-content;
	gap: 32px;
	transform: translateX(0);
}

/* One accent color per card position — reuses existing tokens
   (gold/orange, pink, red) instead of introducing new colors. Cycles
   correctly through the clones the scroll script appends, since
   nth-child just keeps counting along the track. */
.aafp-testimonials__card:nth-child(3n + 1) {
	--aafp-card-accent: var(--aafp-orange);
}

.aafp-testimonials__card:nth-child(3n + 2) {
	--aafp-card-accent: var(--aafp-pink);
}

.aafp-testimonials__card:nth-child(3n + 3) {
	--aafp-card-accent: var(--aafp-red);
}

.aafp-testimonials__card {
	background: linear-gradient(
		160deg,
		color-mix(in srgb, var(--aafp-card-accent) 14%, #ffffff),
		color-mix(in srgb, var(--aafp-card-accent) 4%, #ffffff)
	);
	border-radius: 24px;
	padding: 28px;
	flex-shrink: 0;
	/* Width is set in JS — see testimonials-scroll.js. */
}

.aafp-testimonials__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.aafp-testimonials__quote {
	display: flex;
	color: var(--aafp-card-accent);
}

.aafp-testimonials__quote--close {
	opacity: 0.9;
}

.aafp-testimonials__stars {
	display: flex;
	align-items: center;
	gap: 2px;
	color: var(--aafp-card-accent);
}

.aafp-testimonials__text {
	font-size: 16px;
	line-height: 1.6;
	color: var(--aafp-text);
	margin: 0 0 24px;
}

.aafp-testimonials__divider {
	display: block;
	border-top: 1px dashed color-mix(in srgb, var(--aafp-card-accent) 40%, transparent);
	margin-bottom: 20px;
}

.aafp-testimonials__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.aafp-testimonials__person {
	display: flex;
	align-items: center;
	gap: 12px;
}

.aafp-testimonials__avatar {
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--aafp-card-accent) 35%, #ffffff);
	border: 3px solid #ffffff;
	flex-shrink: 0;
}

.aafp-testimonials__person-text {
	display: flex;
	flex-direction: column;
}

.aafp-testimonials__name {
	font-size: 16px;
	font-weight: 700;
	color: var(--aafp-text);
}

/* ---------- REQUEST A TOUR (shown just above the footer, sitewide) ---------- */

/* Overlaps the footer below it, matching the reference design (its
   equivalent block uses margin-bottom: -210px + z-index: 3 over the
   footer). position:relative + z-index here, combined with the
   negative bottom margin, pulls .aafp-footer up underneath this block
   instead of sitting below it — footer.php adds matching extra
   top padding so its own content (logo/columns) still clears it. */
.aafp-footer-cta {
	position: relative;
	z-index: 3;
	padding: 60px 20px 0;
	margin-bottom: -160px;
}

/* The "footer_topblock" image (set inline via style="background-image:...")
   IS the block's background — it already contains the cream card and
   the schoolhouse artwork together, so this is sized to roughly the
   image's own proportions and the text is simply laid over its left
   (empty) half. No background-color here above 900px — the image is
   the only background; a solid color fill only gets added back in
   the 900px-and-below override, where the image is hidden instead. */
.aafp-footer-cta__inner {
	max-width: 1320px;
	margin: 0 auto;
	background-image: none;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 48px;
	aspect-ratio: 1650 / 685;
	display: flex;
	align-items: center;
	padding: 56px;
}

.aafp-footer-cta__content {
	max-width: 500px;
	margin-left: 50px;
}

.aafp-footer-cta__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid rgba(7, 7, 19, 0.08);
	border-radius: 999px;
	padding: 10px 20px;
	font-size: 15px;
	font-weight: 700;
	color: var(--aafp-red);
	margin-bottom: 20px;
}

.aafp-footer-cta__heading {
	font-family: var(--aafp-heading-font);
	font-weight: 800;
	font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
	line-height: 1.2;
	color: var(--aafp-text);
	margin: 0 0 20px;
}

.aafp-footer-cta__text {
	color: var(--aafp-paragraph);
	font-size: 17px;
	line-height: 1.7;
	margin-bottom: 28px;
}

.aafp-footer-cta__text p {
	margin: 0 0 16px;
}

.aafp-footer-cta__text p:last-child {
	margin-bottom: 0;
}

.aafp-footer-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--aafp-red);
	color: #ffffff;
	border-radius: 16px;
	padding: 16px 32px;
	font-family: var(--aafp-font);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.aafp-footer-cta__btn:hover {
	background: var(--aafp-orange-dark);
	color: #ffffff;
}

/* Below 900px the illustration has nowhere clear to sit behind the
   text without the two overlapping, so the background image is
   dropped entirely (needs !important — it's set inline via
   style="background-image:...") in favor of a plain solid fill, with
   the text and button centered. */
@media (max-width: 900px) {
	.aafp-footer-cta__inner {
		background-color: var(--aafp-programs-bg);
		background-image: none !important;
		aspect-ratio: auto;
		padding: 40px 24px;
		border-radius: 32px;
		text-align: center;
		justify-content: center;
	}

	.aafp-footer-cta__content {
		max-width: none;
		margin-left: 0px;
	}


	.aafp-footer-cta__btn {
		margin: 0 auto;
	}

	/* Smaller overlap on mobile/tablet — the card is much shorter here
	   (no fixed aspect-ratio, just its own content height), so pulling
	   the footer up by the full 160px would swallow too much of it. */
	.aafp-footer-cta {
		margin-bottom: -60px;
	}
}

/* ---------- FOOTER ---------- */

.aafp-footer {
	position: relative;
	overflow: hidden;
	background-color: var(--aafp-cream);
}

/* Dedicated footer top wave/border strip (own graphic, not reused
   from HERO) — single wide image stretched to the full width. */
.aafp-footer__shape {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: auto;
	display: block;
	pointer-events: none;
}

.aafp-footer__inner {
	position: relative;
	z-index: 2;
	max-width: 1320px;
	margin: 0 auto;
	/* Extra top padding (120px + 160px) so the footer's own content
	   (logo/columns) still clears the "Request a Tour" block
	   overlapping down from above by that same 160px. */
	padding: 280px 20px 40px;
}

@media (max-width: 900px) {
	.aafp-footer__inner {
		/* Matches the smaller 60px mobile/tablet overlap above. */
		padding-top: 180px;
	}
}

/* -- Top row: about/logo, quick links, map -- */

.aafp-footer__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

@media (min-width: 768px) {
	.aafp-footer__row {
		grid-template-columns: 1fr 1fr;
	}

	.aafp-footer__col--hours {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1200px) {
	.aafp-footer__row {
		grid-template-columns: 1fr 1fr 2fr;
	}

	.aafp-footer__col--hours {
		grid-column: auto;
	}
}

.aafp-footer__logo {
	display: inline-block;
	margin-bottom: 16px;
	text-decoration: none;
}

.aafp-footer__logo-image {
	max-width: 200px;
	height: auto;
	display: block;
}

.aafp-footer__logo-text {
	font-family: var(--aafp-heading-font);
	font-size: 24px;
	font-weight: 700;
	color: var(--aafp-text);
}

.aafp-footer__about-text {
	font-size: 16px;
	line-height: 1.6;
	color: var(--aafp-paragraph);
	margin: 0 0 24px;
	max-width: 320px;
}

.aafp-footer__social {
	display: flex;
	align-items: center;
	gap: 10px;
}

.aafp-footer__social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: #ffffff;
	color: var(--aafp-text);
}

.aafp-footer__heading {
	font-family: var(--aafp-heading-font);
	font-size: 22px;
	font-weight: 700;
	color: var(--aafp-text);
	margin: 0;
}

.aafp-footer__underline {
	display: block;
	width: 82px;
	height: 4px;
	margin: 16px 0 24px;
	background: linear-gradient(to right, var(--aafp-red), rgba(252, 71, 39, 0));
}

.aafp-footer__links-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.aafp-footer__links-list a {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	color: var(--aafp-paragraph);
	text-decoration: none;
	transition: color 0.2s ease;
}

.aafp-footer__links-list a:hover {
	color: var(--aafp-red);
}

.aafp-footer__links-list a::before {
	content: '\00BB';
	font-weight: 700;
	color: var(--aafp-red);
}

/* Parent items (e.g. "Programs") only exist to group their child
   links in the header's own dropdown — their own href is just a
   placeholder that reloads the page, so in the footer they toggle
   their nested list open/closed instead of navigating (see
   assets/js/footer-nav-accordion.js). The chevron rotates to show
   open/closed state. */
.aafp-footer__links-list li.menu-item-has-children > a {
	justify-content: space-between;
	cursor: pointer;
}

.aafp-footer__links-list li.menu-item-has-children > a::after {
	content: "";
	width: 7px;
	height: 7px;
	margin-left: auto;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	flex-shrink: 0;
}

.aafp-footer__links-list li.menu-item-has-children.is-open > a::after {
	transform: rotate(-135deg);
}

.aafp-footer__links-list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0 0 0 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease, margin-top 0.3s ease;
}

.aafp-footer__links-list li.menu-item-has-children.is-open > .sub-menu {
	max-height: 400px;
	margin-top: 10px;
}

.aafp-footer__hours-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.aafp-footer__hours-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 14px;
	border-bottom: 1px dashed rgba(7, 7, 19, 0.15);
}

.aafp-footer__hours-row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.aafp-footer__hours-day {
	font-size: 16px;
	font-weight: 600;
	color: var(--aafp-text);
}

.aafp-footer__hours-time {
	font-size: 16px;
	color: var(--aafp-paragraph);
}

.aafp-footer__hours-time--closed {
	color: var(--aafp-red);
	font-weight: 600;
}

/* -- Divider + bottom contact row -- */

.aafp-footer__divider {
	display: block;
	max-width: 1320px;
	margin: 30px auto 0;
	border-top: 1px dashed #f39f5f;
}

.aafp-footer__contacts {
	max-width: 1320px;
	margin: 0 auto;
	padding: 32px 20px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

@media (min-width: 992px) {
	.aafp-footer__contacts {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.aafp-footer__contact {
	display: flex;
	align-items: center;
	gap: 16px;
}

.aafp-footer__contact-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	color: #ffffff;
	flex-shrink: 0;
}

.aafp-footer__contact-icon--phone {
	background: var(--aafp-red);
}

.aafp-footer__contact-icon--email {
	background: var(--aafp-orange);
}

.aafp-footer__contact-icon--address {
	background: var(--aafp-pink);
}

.aafp-footer__contact-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.aafp-footer__contact-label {
	font-size: 16px;
	font-weight: 500;
	color: var(--aafp-paragraph);
}

.aafp-footer__contact-value {
	display: block;
	font-size: 18px;
	font-weight: 600;
	color: var(--aafp-text);
	text-decoration: none;
}

/* ---------- Page title / breadcrumb banner (inner pages) ---------- */

.aafp-page-title {
	position: relative;
	overflow: hidden;
	background-color: var(--aafp-cream);
	padding: 60px 20px 40px;
}

.aafp-page-title__shape {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: auto;
	z-index: 1;
	pointer-events: none;
}

.aafp-inner-header-wrap {
	position: relative;
}

.aafp-inner-header-wrap__opossum {
	position: absolute;
	right: 50px;
	width: 300px;
	top: 90px;
	height: auto;
	z-index: 2;
	pointer-events: none;
	display: block;
}




@media (min-width: 2000px) {
	.aafp-inner-header-wrap__opossum {
		display: block;
		right: 50px;
		width: 300px;
		top: 90px;
	}
}

@media (max-width: 2000px) {
	.aafp-inner-header-wrap__opossum {
		display: block;
		right: 50px;
		width: 300px;
		top: 255px;
	}
}

@media (max-width: 1420px) {
	.aafp-inner-header-wrap__opossum {
		display: block;
		right: 50px;
		width: 220px;
		top: 255px;
	}
}

@media (max-width: 1400px) {
	.aafp-inner-header-wrap__opossum {
		display: block;
		right: 50px;
		width: 220px;
		top: 375px;
	}
}

@media (max-width: 992px) {
	.aafp-inner-header-wrap__opossum {
		display: none;
	}
}


.aafp-inner-header-wrap__bird {
	position: absolute;
	left: 50px;
	top: 20px;
	height: 300px;
	width: auto;
	z-index: 2;
	pointer-events: none;
	display: block;
	transform-origin: left center;
	animation: aafp-branch-sway 4s ease-in-out infinite;
}

@media (min-width: 992px) {
	.aafp-inner-header-wrap__bird {
		display: block;
		left: -20px;
		height: 220px;
		width: auto;
		top: 215px;
	}
}

@media (min-width: 2000px) {
	.aafp-inner-header-wrap__bird {
		display: block;
		left: -1px;
		height: 220px;
		width: auto;
		top: 90px;
	}
}

@media (max-width: 2000px) {
	.aafp-inner-header-wrap__bird {
		display: block;
		left: -1px;
		height: 220px;
		width: auto;
		top: 255px;
	}
}
@media (max-width: 1550px) {
	.aafp-inner-header-wrap__bird {
		display: block;
		left: -1px;
		height: 180px;
		width: auto;
		top: 255px;
	}
}

@media (max-width: 1400px) {
	.aafp-inner-header-wrap__bird {
		display: block;
		left: -1px;
		height: 180px;
		width: auto;
		top: 355px;
	}
}
@media (max-width: 992px) {
	.aafp-inner-header-wrap__bird {
		display: none;
	}
}

@keyframes aafp-branch-sway {
	0%,
	100% {
		transform: rotate(-2deg);
	}
	50% {
		transform: rotate(2deg);
	}
}

@media (min-width: 992px) {
	.aafp-page-title {
		padding: 110px 20px 70px;
	}
}

.aafp-page-title__inner {
	position: relative;
	z-index: 2;
	max-width: 1320px;
	margin: 0 auto;
	text-align: center;
}

.aafp-page-title__heading {
	font-family: var(--aafp-heading-font);
	font-size: 44px;
	font-weight: 800;
	color: var(--aafp-text);
	margin: 0 0 12px;
}

.aafp-page-title__breadcrumb {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 16px;
	color: var(--aafp-paragraph);
}

.aafp-page-title__breadcrumb a {
	color: var(--aafp-paragraph);
	text-decoration: none;
}

.aafp-page-title__breadcrumb a:hover {
	color: var(--aafp-red);
}

.aafp-page-title__breadcrumb-current {
	color: var(--aafp-red);
	font-weight: 600;
}

@media (min-width: 768px) {
	.aafp-page-title__heading {
		font-size: 56px;
	}
}

/* ---------- Our Teachers page (full list) ---------- */

.aafp-teachers-page {
	padding: 80px 20px;
}

.aafp-teachers-page__inner {
	max-width: 1320px;
	margin: 0 auto;
}

.aafp-teachers-page__empty {
	text-align: center;
	color: var(--aafp-text-light);
}

.aafp-teachers-page__title {
	font-family: var(--aafp-heading-font);
	font-size: 32px;
	font-weight: 800;
	color: var(--aafp-text);
	text-align: center;
	margin: 0 0 16px;
}

.aafp-teachers-page__intro {
	max-width: 720px;
	margin: 0 auto 48px;
	text-align: center;
	font-size: 18px;
	line-height: 1.7;
	color: var(--aafp-paragraph);
}

.aafp-teachers-page__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px;
}

.aafp-teachers-page__card {
	flex: 0 1 100%;
	text-align: center;
	background: #ffffff;
	border-radius: 24px;
	padding: 16px;
	box-shadow: 0 12px 30px rgba(7, 7, 19, 0.06);
}

@media (min-width: 576px) {
	.aafp-teachers-page__card {
		flex-basis: calc(50% - 16px);
	}
}

@media (min-width: 992px) {
	.aafp-teachers-page__card {
		flex-basis: calc(33.333% - 21.333px);
	}
}

.aafp-teachers-page__media {
	border-radius: 18px;
	overflow: hidden;
	margin-bottom: 16px;
	aspect-ratio: 1 / 1;
	background: var(--aafp-programs-bg);
}

.aafp-teachers-page__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aafp-teachers-page__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(
		45deg,
		var(--aafp-programs-bg),
		var(--aafp-programs-bg) 10px,
		#f0e4d4 10px,
		#f0e4d4 20px
	);
}

.aafp-teachers-page__name {
	font-family: var(--aafp-heading-font);
	font-size: 22px;
	font-weight: 700;
	color: var(--aafp-text);
	margin: 0 0 4px;
}

.aafp-teachers-page__spec {
	display: inline-block;
	font-size: 15px;
	color: var(--aafp-red);
	font-weight: 600;
}

/* ---------- FAQ page (accordion) ---------- */

.aafp-faq-page {
	padding: 80px 20px;
}

.aafp-faq-page__inner {
	max-width: 1320px;
	margin: 0 auto;
}

.aafp-faq-page__empty {
	text-align: center;
	color: var(--aafp-text-light);
}

.aafp-faq-block {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 40px;
	margin-bottom: 60px;
}

.aafp-faq-block:last-child {
	margin-bottom: 0;
}

.aafp-faq-block__media {
	flex: 1 1 100%;
}

.aafp-faq-block__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 24px;
	object-fit: cover;
}

.aafp-faq-block__content {
	flex: 1 1 100%;
	min-width: 0;
}

.aafp-faq-block__title {
	font-family: var(--aafp-heading-font);
	font-size: 28px;
	font-weight: 800;
	color: var(--aafp-text);
	margin: 0 0 24px;
}

@media (min-width: 992px) {
	.aafp-faq-block {
		flex-wrap: nowrap;
	}

	.aafp-faq-block__media {
		flex: 0 0 42%;
		max-width: 42%;
	}

	.aafp-faq-block__content {
		flex: 1 1 auto;
	}

	.aafp-faq-block--reverse {
		flex-direction: row-reverse;
	}
}

.aafp-faq-item {
	background: #ffffff;
	border-radius: 6px 6px 24px 24px;
	box-shadow: 0 4px 25px rgba(0, 0, 0, 0.06);
	margin-bottom: 16px;
	overflow: hidden;
}

.aafp-faq-item__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 16px 20px;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: var(--aafp-heading-font);
	font-size: 20px;
	font-weight: 700;
	color: var(--aafp-text);
	transition: color 0.2s ease;
}

.aafp-faq-item.is-open .aafp-faq-item__question {
	color: var(--aafp-red);
}

.aafp-faq-item__icon {
	display: inline-flex;
	flex-shrink: 0;
	transition: transform 0.35s ease;
}

.aafp-faq-item.is-open .aafp-faq-item__icon {
	transform: rotate(180deg);
}

.aafp-faq-item__panel {
	height: 0;
	overflow: hidden;
	transition: height 0.35s ease;
}

.aafp-faq-item__panel-inner {
	padding: 0 20px 16px;
}

.aafp-faq-item__panel-inner p {
	margin: 0;
	color: var(--aafp-paragraph);
	font-size: 16px;
	line-height: 1.6;
}

/* ---------- Folder-scan galleries (angel-arms-galleries plugin) ---------- */

.aag-gallery-grid {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}

.aag-gallery-card {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	cursor: pointer;
}

.aag-gallery-card__frame {
	position: relative;
	width: 260px;
	height: 260px;
	background: #ffffff;
	border: 10px solid #ffffff;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
	overflow: hidden;
}

.aag-gallery-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 4px;
	transition: transform 0.4s ease;
}

.aag-gallery-card:hover .aag-gallery-card__img {
	transform: scale(1.08);
}

.aag-gallery-card__title {
	font-family: var(--aafp-heading-font);
	font-weight: 700;
	font-size: 18px;
	color: var(--aafp-text);
	text-align: center;
}

.aag-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
}

.aag-lightbox.is-open {
	display: flex;
}

body.aag-lightbox-open {
	overflow: hidden;
}

.aag-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
}

.aag-lightbox__inner {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.aag-lightbox__image {
	position: relative;
	z-index: 1;
	max-width: 90vw;
	max-height: 85vh;
	border-radius: 8px;
}

.aag-lightbox__close,
.aag-lightbox__prev,
.aag-lightbox__next {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: rgba(255, 255, 255, 0.9);
	border: none;
	border-radius: 50%;
	font-size: 20px;
	cursor: pointer;
}

.aag-lightbox__close {
	top: -50px;
	right: 0;
}

.aag-lightbox__prev {
	top: 50%;
	left: -60px;
	transform: translateY(-50%);
}

.aag-lightbox__next {
	top: 50%;
	right: -60px;
	transform: translateY(-50%);
}

.aag-lightbox__counter {
	position: absolute;
	bottom: -36px;
	left: 50%;
	transform: translateX(-50%);
	color: #ffffff;
	font-size: 14px;
}

@media (max-width: 767px) {
	.aag-lightbox__close {
		top: 8px;
		right: 8px;
	}

	.aag-lightbox__prev {
		left: 8px;
	}

	.aag-lightbox__next {
		right: 8px;
	}
}

/* ---------- Gallery page (Site Pages -> Gallery) ---------- */

.aafp-gallery-page {
	padding: 80px 20px;
}

.aafp-gallery-page__inner {
	max-width: 1320px;
	margin: 0 auto;
}

.aafp-gallery-page__title {
	font-family: var(--aafp-heading-font);
	font-size: 32px;
	font-weight: 800;
	color: var(--aafp-text);
	text-align: center;
	margin: 0 0 16px;
}

.aafp-gallery-page__intro {
	max-width: 720px;
	margin: 0 auto 48px;
	text-align: center;
	font-size: 18px;
	line-height: 1.7;
	color: var(--aafp-paragraph);
}

.aafp-gallery-page__empty {
	text-align: center;
	color: var(--aafp-text-light);
}

.aag-gallery-grid--page {
	max-width: none;
	padding: 0;
	justify-content: center;
}

/* ---------- Scroll-reveal (matches reference AOS behavior) ---------- */

[data-reveal] {
	opacity: 0;
	transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-reveal="fade-up"] {
	transform: translateY(60px);
}

[data-reveal="zoom-in"] {
	transform: scale(0.85);
	transition-duration: 0.9s;
}

[data-reveal].aafp-reveal--visible {
	opacity: 1;
	transform: none;
}

[data-reveal].aafp-reveal--no-transition {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	[data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------- Program Details page (native WP content, no sidebar) ---------- */

.aafp-program-page {
	padding: 80px 20px;
}

.aafp-program-page__inner {
	max-width: 1320px;
	margin: 0 auto;
}

/* Keeps a comfortable reading width for plain single-column pages
   (no sidebar configured) — the wider 1320px .aafp-program-page__inner
   above is only meant to give the two-column layout (content + sidebar)
   room to sit side by side, matching the reference's container width. */
.aafp-program-page__content--solo {
	max-width: 900px;
	margin: 0 auto;
}

.aafp-program-page__content {
	color: var(--aafp-paragraph);
	font-size: 16px;
	line-height: 1.75;
}

.aafp-program-page__content h1,
.aafp-program-page__content h2,
.aafp-program-page__content h3,
.aafp-program-page__content h4 {
	font-family: var(--aafp-heading-font);
	font-weight: 800;
	color: var(--aafp-text);
	line-height: 1.3;
}

.aafp-program-page__content h2 {
	font-size: 30px;
}

.aafp-program-page__content h3 {
	font-size: 24px;
}

.aafp-program-page__content h4 {
	font-size: 20px;
}

.aafp-program-page__content p {
	margin: 0 0 24px;
}

.aafp-program-page__content ul,
.aafp-program-page__content ol {
	margin: 0 0 24px;
	padding-left: 0;
	list-style: none;
}

.aafp-program-page__content img,
.aafp-program-page__content figure {
	margin: 0 0 24px;
}

.aafp-program-page__content > *:last-child {
	margin-bottom: 0;
}

.aafp-program-page__content ul li,
.aafp-program-page__content ol li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 12px;
}

.aafp-program-page__content ul li:last-child,
.aafp-program-page__content ol li:last-child {
	margin-bottom: 0;
}

.aafp-program-page__content ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--aafp-red);
}

.aafp-program-page__content ol {
	counter-reset: aafp-program-ol;
}

.aafp-program-page__content ol li::before {
	counter-increment: aafp-program-ol;
	content: counter(aafp-program-ol);
	position: absolute;
	left: 0;
	top: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--aafp-red);
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
}

.aafp-program-page__content img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 24px;
}

/* Respects the size/alignment chosen in the editor instead of
   stretching every image to the full content width. */
.aafp-program-page__content .aligncenter {
	margin-left: auto;
	margin-right: auto;
}

.aafp-program-page__content .alignleft {
	float: left;
	margin: 0 24px 24px 0;
}

.aafp-program-page__content .alignright {
	float: right;
	margin: 0 0 24px 24px;
}

.aafp-program-page__content a {
	color: var(--aafp-red);
	text-decoration: underline;
}

/* ---------- Program Details sidebar (gallery + colored highlight
   text) — only rendered when a program has one or both set under
   Site Pages -> Program Details; matches the reference design's
   two-column layout, with its video/info-table swapped for these. ---------- */

.aafp-program-page__layout {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
}

.aafp-program-page__main {
	flex: 1 1 100%;
	min-width: 0;
}

.aafp-program-page__sidebar {
	flex: 1 1 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}

@media (min-width: 992px) {
	.aafp-program-page__main {
		/* flex-basis: 0 (not "auto") — with "auto" the browser sizes
		   this item by its content's un-wrapped max-content width
		   before deciding whether the sidebar fits on the same line,
		   which for a paragraph of text is huge and pushed the
		   sidebar onto its own line below. Basis 0 makes both items
		   fit on one line first, then flex-grow fills the space. */
		flex: 1 1 0%;
	}

	.aafp-program-page__sidebar {
		flex: 0 0 34%;
		max-width: 34%;
	}
}

.aafp-program-page__sidebar-gallery {
	width: 100%;
	display: flex;
	justify-content: center;
}

/* Scoped override, not a change to the shared .aag-gallery-card rules
   (those still apply as-is on the Gallery hub page) — here the card
   fills the sidebar's width at roughly the same size/ratio as the
   reference design's video thumbnail (416x299) instead of the fixed
   260x260 square used in the gallery grid. */
.aafp-program-page__sidebar-gallery .aag-gallery-card {
	width: 100%;
}

.aafp-program-page__sidebar-gallery .aag-gallery-card__frame {
	width: 100%;
	height: auto;
	aspect-ratio: 416 / 299;
}

/* Gallery title above the photo here (per the client's requested
   sidebar order: text box, then gallery title, then gallery) — the
   shared component itself still renders title after the frame in the
   markup (unchanged, so the Gallery hub page keeps its own order),
   this just flips the visual order via flexbox for this one
   placement. */
.aafp-program-page__sidebar-gallery .aag-gallery-card__title {
	order: -1;
}

/* Matches the reference design's info-table frame: white background,
   thin border, rounded corners — no colored fill. Typography inside
   comes from the shared .aafp-program-page__content rules above (this
   element carries both classes) so the highlight text formats exactly
   like the main content block — headings, lists, bold, links — just
   in black instead of the body's grey-blue paragraph color. */
.aafp-program-sidebar-highlight {
	width: 100%;
	background: #ffffff;
	border: 1px solid var(--aafp-border);
	border-radius: 12px;
	padding: 40px 28px;
	font-size: 15px;
	color: var(--aafp-text);
}

.aafp-program-sidebar-highlight p {
	color: var(--aafp-text);
}

/* Selector repeats the parent class (instead of just
   .aafp-program-sidebar-highlight__cta) so its specificity beats the
   .aafp-program-page__content a rule above (this button is also a
   descendant of .aafp-program-page__content, since the highlight box
   carries both classes) — otherwise that rule's red text color and
   underline win out, making the label invisible against the button's
   own red background until :hover. Sizing matches the reference
   design's "Enroll Your Kid" button (max 300px wide, 32px side
   padding). */
.aafp-program-sidebar-highlight .aafp-program-sidebar-highlight__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	max-width: 300px;
	margin: 8px auto 0;
	background: var(--aafp-red);
	color: #ffffff;
	border: none;
	border-radius: 16px;
	padding: 14px 32px;
	font-family: var(--aafp-font);
	font-size: 16px;
	font-weight: 400;
	text-decoration: none;
	text-align: center;
	transition: background-color 0.2s ease;
}

.aafp-program-sidebar-highlight .aafp-program-sidebar-highlight__cta:hover {
	background: var(--aafp-orange-dark);
	color: #ffffff;
}

.aafp-program-sidebar-highlight__social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 20px;
}

/* ---------- Tuition & Enrollment form (appended below the content on
   the "Tuition & Enrollment" page template) ---------- */

.aafp-tuition-form-wrap {
	max-width: 760px;
	margin: 64px auto 0;
	padding-top: 48px;
	border-top: 1px dashed var(--aafp-border);
}

.aafp-tuition-form-wrap__heading {
	font-family: var(--aafp-heading-font);
	font-weight: 800;
	font-size: 30px;
	color: var(--aafp-text);
	text-align: center;
	margin: 0 0 32px;
}

/* ---------- Contact Us page ---------- */

.aafp-contact-page {
	padding: 80px 20px;
}

.aafp-contact-page__inner {
	max-width: 1320px;
	margin: 0 auto;
}

.aafp-contact-page__header {
	max-width: 640px;
	margin: 0 auto 48px;
	text-align: center;
}

.aafp-contact-page__eyebrow {
	display: inline-block;
	font-family: var(--aafp-font);
	font-size: 18px;
	font-weight: 400;
	color: var(--aafp-red);
	margin-bottom: 16px;
}

.aafp-contact-page__heading {
	font-size: clamp(1.75rem, 1.3405rem + 2.1838vw, 3.25rem);
	line-height: 1.2;
	margin: 0;
}

.aafp-contact-page__row {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
}

.aafp-contact-page__info {
	flex: 1 1 100%;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.aafp-contact-page__form-col {
	flex: 1 1 100%;
	min-width: 0;
}

@media (min-width: 992px) {
	.aafp-contact-page__info {
		flex: 0 0 38%;
		max-width: 38%;
	}

	.aafp-contact-page__form-col {
		flex: 1 1 auto;
	}
}

.aafp-contact-page__info-item {
	display: flex;
	align-items: center;
	gap: 16px;
}

.aafp-contact-page__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--aafp-red);
	color: #ffffff;
	flex-shrink: 0;
}

.aafp-contact-page__info-item:nth-child(2) .aafp-contact-page__icon {
	background: var(--aafp-pink);
}

.aafp-contact-page__info-item:nth-child(3) .aafp-contact-page__icon {
	background: var(--aafp-orange);
}

.aafp-contact-page__info-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.aafp-contact-page__label {
	font-size: 14px;
	color: var(--aafp-text-light);
}

.aafp-contact-page__value {
	font-size: 18px;
	font-weight: 700;
	color: var(--aafp-text);
	text-decoration: none;
	word-break: break-word;
}

.aafp-contact-page__map {
	width: 100%;
	height: 500px;
}

.aafp-contact-page__map iframe {
	display: block;
	width: 100%;
	height: 100%;
}

.aafp-contact-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.aafp-contact-form__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-bottom: 16px;
}

@media (min-width: 576px) {
	.aafp-contact-form__row {
		grid-template-columns: 1fr 1fr;
	}
}

.aafp-contact-form__field {
	position: relative;
	margin-bottom: 16px;
}

.aafp-contact-form__required-mark {
	position: absolute;
	top: 16px;
	right: 18px;
	color: var(--aafp-red);
	font-weight: 700;
	pointer-events: none;
}

.aafp-contact-form__required-note .aafp-contact-form__required-mark {
	position: static;
}

.aafp-contact-form__row .aafp-contact-form__field {
	margin-bottom: 0;
}

.aafp-contact-form__field input,
.aafp-contact-form__field textarea {
	width: 100%;
	background: var(--aafp-cream);
	border: none;
	border-radius: 12px;
	padding: 18px 20px;
	font-family: var(--aafp-font);
	font-size: 15px;
	color: var(--aafp-text);
}

.aafp-contact-form__field--required input,
.aafp-contact-form__field--required textarea {
	padding-right: 34px;
}

.aafp-contact-form__field input::placeholder,
.aafp-contact-form__field textarea::placeholder {
	color: var(--aafp-text-light);
}

.aafp-contact-form__field input:focus,
.aafp-contact-form__field textarea:focus {
	outline: 2px solid var(--aafp-red);
	outline-offset: 2px;
}

.aafp-contact-form__field--message textarea {
	resize: vertical;
	min-height: 140px;
}

.aafp-contact-form__required-note {
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--aafp-text-light);
}

.aafp-contact-form__submit {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--aafp-red);
	color: #ffffff;
	border: none;
	border-radius: 16px;
	padding: 14px 32px;
	font-size: 16px;
	font-weight: 400;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.aafp-contact-form__submit:hover {
	background: var(--aafp-orange-dark);
}

.aafp-contact-form__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.aafp-contact-form__status {
	margin: 16px 0 0;
	font-weight: 600;
}

.aafp-contact-form__status.is-success {
	color: var(--aafp-programs-green);
}

.aafp-contact-form__status.is-error {
	color: var(--aafp-red);
}