/* ==========================================================================
   Wayfinders Academy — Jexii Builder child theme stylesheet
   Phase 1: brand tokens + header/footer chrome only.
   Page-section patterns (hero, cards, etc.) land in Phase 2/3.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1a. Root: kill block-gap between header/main/footer
   -------------------------------------------------------------------------- */

body > .wp-site-blocks > * {
	margin-block: 0 !important;
}

.wf-header,
.wf-main,
.wf-footer {
	margin-block: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.wf-main > * {
	margin-block: 0 !important;
}


/* --------------------------------------------------------------------------
   1b. Header — top bar
   -------------------------------------------------------------------------- */

.wf-header {
	position: relative;
	z-index: 50;
}

.wf-topbar {
	background: #FFF6E6; /* warm gold wash */
	border-bottom: 1px solid var(--wp--preset--color--border);
	margin: 0 !important;
	padding-block: 0.5rem;
}

.wf-topbar__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
	gap: 1rem !important;
	width: 100%;
}

.wf-topbar__note,
.wf-topbar__contact {
	font-family: var(--wp--preset--font-family--jakarta) !important;
	font-size: 0.85rem !important;
	margin: 0 !important;
	line-height: 1.4 !important;
}

.wf-topbar__note {
	color: var(--wp--preset--color--ink-soft) !important;
	font-weight: 600 !important;
}

.wf-topbar__contact a {
	color: var(--wp--preset--color--primary) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}

.wf-topbar__contact a:hover {
	color: #0F6480 !important; /* teal-deep */
}


/* --------------------------------------------------------------------------
   1c. Header — nav bar
   -------------------------------------------------------------------------- */

.wf-navbar {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--wp--preset--color--border);
	margin: 0 !important;
	padding: 0 !important;
}

.wf-nav {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto !important;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem) !important;
	padding-block: 0.85rem !important;
	width: 100%;
	box-sizing: border-box;
	gap: 1.5rem !important;
}

.wf-nav .wp-block-site-logo,
.wf-nav .wp-block-navigation {
	margin: 0 !important;
}

.wf-nav__logo img {
	height: 46px;
	width: auto;
	display: block;
}

.wf-nav__right {
	gap: 1.6rem !important;
}

.wf-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--jakarta);
	font-weight: 600;
	font-size: 1rem;
}

.wf-header .wp-block-navigation a,
.wf-header .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary) !important;
	text-decoration: none !important;
}

.wf-header .wp-block-navigation button.wp-block-navigation-item__content {
	cursor: pointer;
	background: transparent;
	border: 0;
	font: inherit;
}

.wf-header .wp-block-navigation a:hover,
.wf-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: #0F6480 !important; /* teal-deep */
}

.wf-nav .wp-block-navigation__submenu-icon svg {
	width: 0.8em;
	height: 0.8em;
}

.wf-nav .wp-block-navigation__submenu-container {
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--preset--shadow--lg);
	padding: 0.4rem;
	min-width: 240px;
}

.wf-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 0.75rem !important;
	border-radius: var(--wp--custom--radius--sm);
	width: 100%;
	font-size: 0.95rem;
}

.wf-nav .wp-block-navigation__submenu-container a:hover {
	background: #FFF6E6;
	color: var(--wp--preset--color--primary) !important;
}

@media (max-width: 782px) {
	.wf-navbar {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: var(--wp--preset--color--base);
	}

	/* jexii-builder's own CSS opens the mobile menu as a dropdown panel
	   (position:absolute; inset:100% 0 auto) anchored to the nearest
	   positioned ancestor. WP core puts position:relative directly on
	   the <nav>, but once collapsed to just its hamburger toggle, that
	   <nav> shrinks-to-fit to a 24px box (it's a flex item with no
	   explicit width) — so the dropdown's 0%/100% inset values resolve
	   against a 24px reference instead of the full nav bar, producing a
	   24px-wide sliver instead of a full-width panel. Drop the <nav>'s
	   own positioning context on mobile only, so the browser falls back
	   to the next ancestor up — .wf-navbar (position:sticky, already a
	   valid full-width containing block) — without touching desktop
	   submenu positioning, which anchors to individual nav items, not
	   this top-level element. */
	.wf-nav__menu.is-responsive {
		position: static;
	}

	/* jexii-builder's dropdown panel has `height: auto !important` with no
	   max-height, and only `overflow: auto` (which does nothing without a
	   height constraint to overflow against). With 5 top-level items and
	   several submenus all expanded at once on mobile, the panel's real
	   content height (~600-770px) can exceed the space actually available
	   below the navbar once real mobile browser chrome (URL bar, bottom
	   toolbar) is accounted for — leaving part of the menu completely
	   unreachable, with no scroll. Cap it and make it internally
	   scrollable instead. `dvh` (dynamic viewport height, accounts for
	   mobile browser chrome showing/hiding) is preferred; the plain `vh`
	   line above it is the fallback for browsers that don't support dvh. */
	.wp-block-navigation__responsive-container.is-menu-open {
		max-height: 75vh;
		max-height: 75dvh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
}


/* --------------------------------------------------------------------------
   1d. Footer
   -------------------------------------------------------------------------- */

.wf-footer {
	background: var(--wp--preset--color--surface);
	border-top: 1px solid var(--wp--preset--color--border);
	padding-block: clamp(3rem, 5vw, 4.5rem) 1.5rem;
	margin: 0 !important;
}

.wf-footer__main {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.wf-footer__grid {
	gap: 2.5rem !important;
}

.wf-footer__col--brand {
	flex-basis: 32%;
	flex-grow: 1.5;
}

.wf-footer__col {
	flex-basis: 18%;
	flex-grow: 1;
	min-width: 10rem;
}

.wf-footer__logo img {
	height: 54px;
	width: auto;
	margin-bottom: 1.1rem;
	display: block;
}

.wf-footer__tag {
	color: var(--wp--preset--color--ink-soft) !important;
	font-size: 1rem !important;
	max-width: 34ch;
	margin: 0 0 1.2rem 0 !important;
}

.wf-footer__contact {
	color: var(--wp--preset--color--ink-soft) !important;
	font-size: 0.95rem !important;
	line-height: 1.9 !important;
	margin: 0 !important;
}

.wf-footer__contact a {
	color: var(--wp--preset--color--primary) !important;
	text-decoration: none !important;
	font-weight: 600;
}

.wf-footer__contact a:hover {
	color: #0F6480 !important; /* teal-deep */
}

.wf-footer__heading {
	font-family: var(--wp--preset--font-family--jakarta) !important;
	font-weight: 700 !important;
	font-size: 0.8rem !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-dark) !important;
	margin: 0 0 1.1rem 0 !important;
}

.wf-footer__list {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
}

.wf-footer__list li {
	margin-bottom: 0.7rem;
}

.wf-footer__list a {
	color: var(--wp--preset--color--primary) !important;
	text-decoration: none !important;
	font-weight: 500;
	font-size: 1rem;
}

.wf-footer__list a:hover {
	color: #0F6480 !important; /* teal-deep */
}

.wf-footer__bottom {
	max-width: var(--wp--style--global--wide-size);
	margin: clamp(2.5rem, 4vw, 3.5rem) auto 0;
	padding: 1.4rem clamp(1.25rem, 4vw, 2.5rem) 0;
	border-top: 1px solid var(--wp--preset--color--border);
}

.wf-footer__bottom-inner {
	gap: 1rem !important;
}

.wf-footer__copyright,
.wf-footer__legal {
	color: var(--wp--preset--color--muted) !important;
	font-size: 0.85rem !important;
	margin: 0 !important;
}

.wf-footer__legal a {
	color: var(--wp--preset--color--muted) !important;
}

@media (max-width: 782px) {
	.wf-footer__col--brand,
	.wf-footer__col {
		flex-basis: 45%;
	}
	.wf-topbar__note {
		display: none;
	}
}

@media (max-width: 480px) {
	.wf-footer__col--brand,
	.wf-footer__col {
		flex-basis: 100%;
	}
}


/* --------------------------------------------------------------------------
   1e. Element-page cross-link nav ("Keep exploring") — appended by the
   render_block_core/post-content filter in functions.php.
   -------------------------------------------------------------------------- */

.wf-elementnav {
	max-width: 1000px;
	margin: 3.4rem auto 0;
	padding: 2.4rem 1.5rem 0;
	border-top: 1px solid var(--wp--preset--color--border);
	text-align: center;
}

.wf-elementnav__title {
	font-family: var(--wp--preset--font-family--fraunces);
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	font-size: 1.55rem;
	margin: 0.2rem 0 1.4rem;
}

.wf-elementnav__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.7rem;
	text-align: left;
}

.wf-elementnav__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.85rem 1.1rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	box-shadow: var(--wp--preset--shadow--sm);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.wf-elementnav__item:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--md);
	border-color: color-mix(in srgb, var(--wp--preset--color--primary-light) 38%, var(--wp--preset--color--border));
}

.wf-elementnav__go {
	flex: none;
	color: #0F6480; /* teal-deep */
	transition: transform 0.2s ease;
}

.wf-elementnav__item:hover .wf-elementnav__go {
	transform: translateX(3px);
}

.wf-elementnav__back {
	display: inline-block;
	margin-top: 1.4rem;
	color: var(--wp--preset--color--ink-soft);
	font-weight: 600;
	text-decoration: none;
}

.wf-elementnav__back:hover {
	color: #0F6480; /* teal-deep */
}

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


/* --------------------------------------------------------------------------
   1f. Hero — decorative layer (contour lines, glow, compass watermark,
   floating photo card + badges). Purely visual: applied via className hooks
   on wp:group wrappers around real, still-editable native blocks — no
   content lives in CSS or in an inline SVG here.
   -------------------------------------------------------------------------- */

.wf-hero-section {
	position: relative;
	overflow: hidden;
}

.wf-hero-section::before {
	/* radial glow, matching the brand's gold/teal accent wash */
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(40% 50% at 88% 22%, rgba(215, 156, 46, 0.20), transparent 70%),
		radial-gradient(45% 55% at 6% 8%, rgba(19, 123, 158, 0.14), transparent 70%);
	pointer-events: none;
	z-index: 0;
}

.wf-hero-section::after {
	/* topographic contour-line overlay */
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("img/contour.svg");
	background-size: cover;
	background-position: center;
	opacity: 0.5;
	pointer-events: none;
	z-index: 0;
}

.wf-hero-section > * {
	position: relative;
	z-index: 1;
}

.wf-hero-art {
	position: relative;
	min-height: 360px;
}

.wf-hero-art::before {
	/* compass brandmark watermark, silhouetted */
	content: "";
	position: absolute;
	right: -6%;
	top: 50%;
	transform: translateY(-50%);
	width: 118%;
	max-width: 520px;
	aspect-ratio: 1;
	opacity: 0.10;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: url("img/brandmark.svg") center/contain no-repeat;
	mask: url("img/brandmark.svg") center/contain no-repeat;
	pointer-events: none;
	z-index: 0;
}

.wf-hero-art::after {
	/* dotted wayfinding path, behind the photo card */
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("img/dpath.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.55;
	pointer-events: none;
	z-index: 1;
}

.wf-photocard {
	position: relative;
	z-index: 2;
	width: min(100%, 440px);
	margin-inline: auto;
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--xl);
	border: 6px solid #fff;
	transform: rotate(-2deg);
}

.wf-photocard img {
	display: block;
	width: 100%;
	height: 360px;
	object-fit: cover;
	margin: 0 !important;
}

.wf-float {
	position: absolute;
	z-index: 4;
	background: #fff;
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--preset--shadow--lg);
	padding: 0.7rem 0.95rem;
	max-width: 210px;
}

.wf-float p {
	margin: 0 !important;
	font-weight: 700;
	font-size: 0.92rem;
	color: var(--wp--preset--color--primary);
	line-height: 1.3;
}

.wf-float p:last-child {
	font-weight: 500;
	font-size: 0.72rem;
	color: var(--wp--preset--color--muted);
	letter-spacing: 0.02em;
	margin-top: 0.15rem !important;
}

.wf-float--a {
	top: 6%;
	right: -6%;
	border-top: 3px solid var(--wp--preset--color--accent);
}

.wf-float--b {
	bottom: 6%;
	left: -6%;
	border-top: 3px solid var(--wp--preset--color--success);
}

@media (max-width: 782px) {
	.wf-float--a { right: 0; }
	.wf-float--b { left: 0; }
}


/* --------------------------------------------------------------------------
   1g. Day-of-week calendar dots (Programs sections — Home + Join Us).
   Pure decoration: a small colored dot per weekday indicating campus vs
   home, next to the already-editable day label text. Rendered as a ::after
   pseudo-element on the (already content-bearing) .wf-day wrapper rather
   than a separate empty child block — an empty core/group block with no
   innerBlocks shows Gutenberg's own "select a layout" placeholder in the
   editor, which a pseudo-element sidesteps entirely.
   -------------------------------------------------------------------------- */

.wf-week {
	display: flex;
	gap: 0.5rem;
	margin-block: 0.5rem 1rem;
}

.wf-day {
	flex: 1;
	text-align: center;
}

.wf-day__label {
	display: block;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.35rem;
	text-transform: uppercase;
	white-space: nowrap;
}

.wf-day::after {
	content: "";
	display: block;
	height: 36px;
	border-radius: var(--wp--custom--radius--sm);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 18px 18px;
}

.wf-day--campus::after {
	background-color: #E6F8FF;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23137B9E' stroke-width='2'%3E%3Cpath d='M3 21h18M5 21V9l7-5 7 5v12M9 21v-6h6v6' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.wf-day--home::after {
	background-color: #FFF6E6;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9741C' stroke-width='2'%3E%3Cpath d='M3 11l9-7 9 7M5 10v10h14V10' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* --------------------------------------------------------------------------
   1h. Global decoration wins — apply everywhere via WP's own auto-generated
   classes, zero content/HTML changes required.
   -------------------------------------------------------------------------- */

/* Dotted-line flourish before every eyebrow label (the small beaded dash,
   part of the site's "wayfinding trail" motif) */
.has-eyebrow-font-size {
	display: inline-flex !important;
	gap: 0.55rem;
	align-items: center;
}

.has-eyebrow-font-size::before {
	content: "";
	flex: none;
	width: 21px;
	height: 6px;
	background-image: radial-gradient(circle at center, currentColor 1.6px, transparent 2.1px);
	background-size: 7px 6px;
	background-repeat: repeat-x;
	background-position: left center;
	opacity: 0.85;
}

p.has-text-align-center.has-eyebrow-font-size {
	justify-content: center;
}

/* Card hover-lift — targets the exact bordered/base-background card shape
   used everywhere in this project (founder-bio-card, gifts, programs,
   studios, policies, scholarships, values, subjects, etc.) via WP's own
   auto-generated classes, so it applies retroactively with no HTML edits. */
.wp-block-group.has-border-color.has-base-background-color {
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.wp-block-group.has-border-color.has-base-background-color:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--md);
}


/* --------------------------------------------------------------------------
   1i. Centered compass watermark — reusable on any dark or light section
   (CTA band, secondary-page pageheads, the day-trail section). A faint
   silhouette of the real brandmark, centered behind the content.
   -------------------------------------------------------------------------- */

.wf-compass-center {
	position: relative;
	overflow: hidden;
}

.wf-compass-center::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 60%;
	max-width: 460px;
	aspect-ratio: 1;
	background-color: currentColor;
	-webkit-mask: url("img/brandmark.svg") center/contain no-repeat;
	mask: url("img/brandmark.svg") center/contain no-repeat;
	pointer-events: none;
	z-index: 0;
}

.wf-compass-center > * {
	position: relative;
	z-index: 1;
}

.wf-compass-center--light {
	color: var(--wp--preset--color--primary);
}

.wf-compass-center--light::before {
	opacity: 0.045;
}

.wf-compass-center--dark {
	color: #FFFFFF;
}

.wf-compass-center--dark::before {
	opacity: 0.07;
}

/* CTA band — gold radial glow behind the content, on top of the hero-deep gradient */
.wf-cta-glow::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(40% 60% at 50% 12%, rgba(215, 156, 46, 0.30), transparent 70%);
	pointer-events: none;
	z-index: 0;
}


/* --------------------------------------------------------------------------
   1j. FAQ accordion — restore the rounded-shadow-card look (overrides the
   parent theme's flatter divider-row treatment for this className).
   -------------------------------------------------------------------------- */

.wp-block-details.jxb-faq {
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--sm);
	padding: 0 1.5rem;
	margin-bottom: 0.85rem;
	transition: box-shadow 0.2s ease;
}

.wp-block-details.jxb-faq:last-of-type {
	border: 1px solid var(--wp--preset--color--border) !important;
	margin-bottom: 0;
}

.wp-block-details.jxb-faq[open] {
	box-shadow: var(--wp--preset--shadow--md);
}

.wp-block-details.jxb-faq summary {
	padding-block: 1.15rem;
}

.wp-block-details.jxb-faq > :not(summary) {
	padding-bottom: 1.3rem;
}


/* --------------------------------------------------------------------------
   1k. Day-trail — dotted connector line between stops + circular icon nodes,
   matching the old theme's trail motif (used by daily-schedule-timeline.php
   content wherever it's inserted).
   -------------------------------------------------------------------------- */

.wf-daytrail-row {
	position: relative;
}

.wf-daytrail-row::before {
	content: "";
	position: absolute;
	top: 32px;
	left: 6%;
	right: 6%;
	height: 0;
	border-top: 3px dotted color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent);
	z-index: 0;
}

.wf-stop-node {
	position: relative;
	z-index: 2;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	border: 3px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1rem;
	box-shadow: var(--wp--preset--shadow--md);
	font-family: var(--wp--preset--font-family--fraunces);
	font-weight: 700;
	font-size: 1.1rem;
}

.wf-stop-node p {
	margin: 0;
}

@media (max-width: 782px) {
	.wf-daytrail-row::before {
		display: none;
	}
}


/* --------------------------------------------------------------------------
   1l. Themed icon badges — Gift cards (home) + Subject cards (Academics +
   home subjects strip). A colored wash circle with a small line-art icon,
   rendered as a ::before pseudo-element on the card/column wrapper itself
   (not a separate empty child block — see the 1g comment above for why:
   an empty core/group with no innerBlocks triggers Gutenberg's own "select
   a layout" editor placeholder, which a pseudo-element avoids entirely).
   Pure CSS (data-URI background-image), zero impact on block editability.
   -------------------------------------------------------------------------- */

.wf-icon-card::before {
	content: "";
	display: block;
	width: 54px;
	height: 54px;
	border-radius: 16px;
	margin-bottom: 0.4rem;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 27px 27px;
}

.wf-icon-card--teal::before { background-color: #E6F8FF; }
.wf-icon-card--gold::before { background-color: #FFF6E6; }
.wf-icon-card--green::before { background-color: #E6FFF5; }

.wf-icon-card--people::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23137B9E' stroke-width='2'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='17' cy='10' r='2.4'/%3E%3Cpath d='M3 19c0-3.3 2.7-6 6-6s6 2.7 6 6M14.5 18.6c.3-2 1.8-3.6 4-3.6 1.8 0 3.2.9 3.7 2.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

.wf-icon-card--check::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9741C' stroke-width='2'%3E%3Cpath d='M9 12l2 2 4-4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");
}

.wf-icon-card--compass::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232FA779' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15.5 8.5l-2 5-5 2 2-5z' fill='%232FA779' stroke='none'/%3E%3C/svg%3E");
}

.wf-icon-card--book::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23137B9E' stroke-width='2'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h6v16H6a2 2 0 0 0-2 2zM20 5a2 2 0 0 0-2-2h-6v16h6a2 2 0 0 1 2 2z' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.wf-icon-card--bulb::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9741C' stroke-width='2'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 1 4 10.5c-.6.6-1 1.3-1 2.1H9c0-.8-.4-1.5-1-2.1A6 6 0 0 1 12 3z' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.wf-icon-card--heart::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232FA779' stroke-width='2'%3E%3Cpath d='M12 21s-7-4.6-7-9.5A3.5 3.5 0 0 1 12 8a3.5 3.5 0 0 1 7 3.5C19 16.4 12 21 12 21z' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Subject-card icons (Math / Language Arts / Science / Social Studies / Art / Entrepreneurship) */
.wf-icon-card--math::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23137B9E' stroke-width='2'%3E%3Cpath d='M5 7h4M7 5v4' stroke-linecap='round'/%3E%3Cpath d='M15 6h4' stroke-linecap='round'/%3E%3Cpath d='M6 15.5l3 3M9 15.5l-3 3' stroke-linecap='round'/%3E%3Cpath d='M15 16h4M15 18.5h4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.wf-icon-card--openbook::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9741C' stroke-width='2'%3E%3Cpath d='M12 6.5C9.8 5 6.7 4.7 4 5.5v12c2.7-.8 5.8-.5 8 1 2.2-1.5 5.3-1.8 8-1v-12c-2.7-.8-5.8-.5-8 1z' stroke-linejoin='round'/%3E%3Cpath d='M12 6.5v11' stroke-linecap='round'/%3E%3C/svg%3E");
}

.wf-icon-card--atom::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232FA779' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='1.6' fill='%232FA779' stroke='none'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4.2'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4.2' transform='rotate(60 12 12)'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4.2' transform='rotate(120 12 12)'/%3E%3C/svg%3E");
}

.wf-icon-card--globe::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23137B9E' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18' stroke-linecap='round'/%3E%3Cpath d='M12 3c2.5 2.5 2.5 15.5 0 18M12 3c-2.5 2.5-2.5 15.5 0 18' stroke-linecap='round'/%3E%3C/svg%3E");
}

.wf-icon-card--pencil::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9741C' stroke-width='2'%3E%3Cpath d='M4 20l4.5-1L19 8.5a2.5 2.5 0 0 0-3.5-3.5L5 15.5z' stroke-linejoin='round'/%3E%3Cpath d='M14 6.5l3.5 3.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.wf-icon-card--rocket::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232FA779' stroke-width='2'%3E%3Cpath d='M12 3c3 2.2 4.5 5.8 4.5 9.5L14 15h-4l-2.5-2.5C7.5 8.8 9 5.2 12 3z' stroke-linejoin='round'/%3E%3Cpath d='M8 15.5l-1.5 4M16 15.5l1.5 4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='10' r='1.4'/%3E%3C/svg%3E");
}


/* --------------------------------------------------------------------------
   1m. "Most chosen" floating pill badge (Programs — overrides the inline
   label with an absolute-positioned pill overlapping the card's top edge,
   matching the old theme's treatment).
   -------------------------------------------------------------------------- */

.wf-prog-featured {
	position: relative;
	overflow: visible !important;
}

.wf-prog-badge p {
	margin: 0;
}

.wf-prog-badge {
	position: absolute;
	top: -14px;
	left: 1.9rem;
	z-index: 3;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--jakarta);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.32rem 0.7rem;
	border-radius: 999px;
	box-shadow: var(--wp--preset--shadow--sm);
}

.wf-icon-card--sm::before {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background-size: 18px 18px;
	margin-bottom: 0.5rem;
}


/* --------------------------------------------------------------------------
   1n. Programs section — wave-shaped top divider + sand-tint background,
   matching the old theme's section transition.
   -------------------------------------------------------------------------- */

.wf-programs-section {
	position: relative;
	background: var(--wp--preset--color--surface);
}

.wf-programs-section::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	height: 70px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1440 V60 C 960 18 480 18 0 60 Z' fill='%23FDFAF4'/%3E%3C/svg%3E");
	background-size: 100% 100%;
	pointer-events: none;
}


/* --------------------------------------------------------------------------
   1o. Diagram images — border/shadow/radius + styled caption, matching the
   old theme's .wf-diagram treatment (Key Indicators dial, Missions &
   Pathways framework/chicken-challenge diagrams).
   -------------------------------------------------------------------------- */

.wf-diagram-figure {
	max-width: 960px;
	margin-inline: auto;
}

.wf-diagram-figure img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--wp--custom--radius--lg);
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: var(--wp--preset--shadow--md);
	background: #FFFFFF;
}

.wf-diagram-figure figcaption {
	text-align: center;
	font-size: 0.85rem;
	color: var(--wp--preset--color--ink-soft);
	margin-top: 0.6rem;
}


/* --------------------------------------------------------------------------
   1p. Approach — gold Fraunces numerals before each of the seven elements.
   -------------------------------------------------------------------------- */

.wf-element-num {
	font-family: var(--wp--preset--font-family--fraunces);
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--wp--preset--color--accent-dark);
	display: block;
	margin-bottom: 0.4rem;
}


/* --------------------------------------------------------------------------
   1q. Contact form (Jetpack) — rounded pill inputs + gold submit button,
   matching the old theme's .wf-form-wrap treatment.
   -------------------------------------------------------------------------- */

.wf-contact-form .wp-block-jetpack-contact-form input[type="text"],
.wf-contact-form .wp-block-jetpack-contact-form input[type="email"],
.wf-contact-form .wp-block-jetpack-contact-form input[type="tel"],
.wf-contact-form .wp-block-jetpack-contact-form textarea {
	width: 100%;
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: var(--wp--custom--radius--md) !important;
	padding: 0.7rem 0.9rem !important;
	font-family: var(--wp--preset--font-family--jakarta);
	font-size: 1rem;
	background: #FFFFFF !important;
	color: var(--wp--preset--color--primary);
	margin-top: 0.3rem;
}

.wf-contact-form .wp-block-jetpack-contact-form input:focus,
.wf-contact-form .wp-block-jetpack-contact-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary-light) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary-light) 20%, transparent);
}

.wf-contact-form .wp-block-jetpack-contact-form label {
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--wp--preset--color--primary);
}

.wf-contact-form .wp-block-jetpack-contact-form button[type="submit"],
.wf-contact-form .wp-block-jetpack-contact-form .wp-block-button__link {
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--primary) !important;
	font-weight: 700;
	border: none !important;
	border-radius: 999px !important;
	padding: 0.75rem 1.75rem !important;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.wf-contact-form .wp-block-jetpack-contact-form button[type="submit"]:hover,
.wf-contact-form .wp-block-jetpack-contact-form .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent-dark) !important;
	color: #FFFFFF !important;
}


/* --------------------------------------------------------------------------
   1r. Founders — alternating left-right editorial layout. Styled via the
   outer .wf-founder-row wrapper (a validly-preserved custom className on
   the block's own root element) rather than a class on the inner <figure>
   — core/media-text's save() never applies attributes.className to the
   media figure, only to the block's root wrapper, so a class placed there
   directly is a guaranteed editor validation mismatch.
   -------------------------------------------------------------------------- */

.wf-founder-row .wp-block-media-text__media img {
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--md);
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
	display: block;
}

.wf-founder-role {
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-dark) !important;
	margin: 0.3rem 0 0.8rem !important;
}