/*
Theme Name: Journey Christian Academy
Theme URI: https://journeychristianacademy.com
Author: Great Fish Agility
Author URI: https://greatfishagility.com
Description: Custom block theme for Journey Christian Academy, a college-preparatory Christian homeschool cooperative learning program and ministry of Journey Christian Church. Standalone since 2026-07-31 — formerly a child of Twenty Twenty-Five, detached because JCA's design is locked to the Journey Christian Church brand and inherited nothing it used. The design system (palette, typography, spacing) is defined in theme.json; this file holds only CSS that theme.json cannot express.
Version: 0.2.0
Requires at least: 6.7
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jca
*/

/*
 * Intentionally minimal. theme.json is the source of truth for the JCA
 * design system. Add CSS overrides below only for things theme.json
 * cannot express, and document why each one exists.
 */

/*
 * Focus-visible ring.
 *
 * theme.json cannot target :focus-visible, and Twenty Twenty-Five's baked-in
 * button :focus rule points at --wp--preset--color--accent-4, a parent palette
 * slug our child theme replaces (we ship base/contrast/accent/surface only).
 * That left interactive elements without a reliable visible focus indicator.
 * Define one ourselves, on-brand (Journey Orange) and meeting WCAG 2.4.7.
 */
:where(a, button, .wp-element-button, .wp-block-button__link, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/*
 * Skip link. First focusable element on the page (top of the header pattern);
 * off-screen until it receives keyboard focus, then it reveals at top-left so a
 * keyboard/screen-reader user can jump straight past the header chrome to
 * <main id="jca-main">. Kept above the sticky announcement bar via z-index.
 */
.jca-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 0.6rem 1rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: none;
	border-radius: 0 0 4px 0;
}
.jca-skip-link:focus {
	left: 0;
}
/* main is a scroll/focus target only; never show a persistent outline on it. */
#jca-main:focus {
	outline: none;
}

/*
 * Link underline offset.
 *
 * theme.json sets link color and underline, but has no property for
 * text-underline-offset. A little breathing room keeps underlines off the
 * descenders in Lato.
 */
a:where(:not(.wp-element-button)) {
	text-underline-offset: 0.18em;
}

/* ===========================================================================
 * Homepage design-spike components (Editorial state).
 *
 * Ported from the approved disposable mockup (docs reference the spike). Token
 * names mirror theme.json slugs; these are the bespoke bits that blocks and
 * theme.json can't express cleanly (eyebrow labels, the short orange accent
 * rule, pillar cards, the quiet secondary link, 4:5 founder frames, the slate
 * footer, and the header wordmark lockup). Logged in docs/decisions.md.
 * ======================================================================== */

/* Eyebrow label above a section heading. */
.jca-eyebrow {
	font-weight: 900;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--custom--slate-soft);
	margin: 0 0 1rem;
}

/* Short orange accent rule under a heading — the sparing use of orange beyond
   the CTA. Left-aligned for the Editorial layout. */
.jca-rule {
	width: 48px;
	height: 3px;
	background-color: var(--wp--preset--color--accent);
	border: 0;
	margin: 1.5rem 0 2rem;
}

/* Hero lead paragraph stays at a readable measure inside the wide hero. */
.jca-hero__lead {
	max-width: 46rem;
}

/* Quiet secondary link (beside CTAs, "read full bio", "visit journeyrva"). */
.jca-link-quiet {
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--custom--hairline);
	padding-bottom: 2px;
}
.jca-link-quiet:hover {
	color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

/* Quiet link over the dark hero overlay reads white. */
.jca-hero .jca-link-quiet {
	color: var(--wp--preset--color--base);
	border-color: rgba( 255, 255, 255, 0.4 );
}
.jca-hero .jca-link-quiet:hover {
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--accent);
}

/* Surface section band — off-white with hairline top/bottom borders. */
.jca-band {
	border-top: 1px solid var(--wp--custom--hairline);
	border-bottom: 1px solid var(--wp--custom--hairline);
}

/* Three pillars as cards, each capped by a short orange stroke. */
.jca-pillar {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--hairline);
	border-radius: 12px;
	padding: 2rem 1.9rem;
	box-shadow: 0 1px 2px rgba( 54, 66, 74, 0.04 ), 0 10px 28px rgba( 54, 66, 74, 0.05 );
}
.jca-pillar h3 {
	margin-top: 0.25rem;
}
.jca-pillar h3::before {
	content: "";
	display: block;
	width: 28px;
	height: 3px;
	background: var(--wp--preset--color--accent);
	border-radius: 2px;
	margin-bottom: 1.1rem;
}
.jca-pillar p {
	color: var(--wp--custom--slate-soft);
}

/* Sticky announcement bar; orange-underlined link. */
.jca-announcement {
	position: sticky;
	top: 0;
	z-index: 100;
}
.jca-announcement a {
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 2px;
}

/* Header: bottom hairline + brand lockup (monogram + wordmark). */
.jca-header {
	border-bottom: 1px solid var(--wp--custom--hairline);
}
.jca-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	font-weight: 900;
	font-size: 1.15rem;
	letter-spacing: -0.01em;
	line-height: 1.1;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.jca-brand:hover {
	color: var(--wp--preset--color--contrast);
}
.jca-brand img {
	display: block;
	height: 48px;
	width: auto;
	max-width: 100%;
}

/* Founders: 4:5 portrait frames + orange role label. object-position favors
   the upper portion so faces stay framed when cropped. */
.jca-founder__photo {
	position: relative;
	width: 100%;
	max-width: 360px;
	aspect-ratio: 4 / 5;
	margin: 0;
	border-radius: 8px;
	overflow: hidden;
}
.jca-founder__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
}
.jca-founder__role {
	color: var(--wp--preset--color--accent);
	font-weight: 700;
	font-size: 0.95rem;
	margin: 0 0 1rem;
}

/* Slate footer. */
.jca-footer {
	background: var(--wp--preset--color--contrast);
}
.jca-footer,
.jca-footer p {
	color: #cfd6da;
}
.jca-footer h2 {
	color: var(--wp--preset--color--base);
}
/* Footer link colors. The :not() is load-bearing, not tidiness.
   These selectors are (0,2,1) and (0,3,1), which outrank the (0,2,0) rules
   theme.json generates for .wp-block-button__link — so without the exclusion
   this rule captured the "Share your interest" CTA and turned its label
   Journey Orange on hover: #F26825 on the #A63D0E hover fill is 2.06:1.
   The header CTA was unaffected only because no .jca-header link rule exists.
   Measured and fixed 2026-08-05; see docs/decisions.md. */
.jca-footer a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--base);
}
.jca-footer a:not(.wp-block-button__link):hover {
	/* A LIGHTER orange than the brand accent, on purpose. Journey Orange
	   #F26825 on the slate footer #36424A is only 3.33:1; #F89A6E is 4.83:1
	   and passes WCAG AA. This is the same reasoning that moved
	   .jca-footer__meta from #9aa5ac to #a7b1b7 — the slate backdrop needs
	   lighter values than white does. Logged as a permitted functional
	   extension in docs/decisions.md (2026-08-05). Do NOT "restore" this to
	   the accent token for brand consistency; the footer is the exception
	   because of its background. */
	color: var(--wp--custom--footer-link-hover, #F89A6E);
}
.jca-footer__meta {
	/* #A7B1B7 on the slate footer is 4.73:1 — passes WCAG AA for this small
	   secondary text (the earlier #9aa5ac was 4.10:1, below 4.5:1). */
	color: #a7b1b7;
	font-size: 0.92rem;
	line-height: 1.8;
}
.jca-footer__base {
	gap: 0.6rem 2rem;
}
.jca-footer__credit {
	/* Same secondary tone as the address meta; the link itself inherits the
	   lighter .jca-footer a color, so it reads as a link. */
	color: #a7b1b7;
	font-size: 0.92rem;
}
.jca-footer__links {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.2rem;
	padding: 0;
	margin: 1.5rem 0 0;
}
.jca-footer__links a {
	text-decoration: none;
}

/* ===========================================================================
 * Inner-page header band ("page hero").
 *
 * Reusable header strip at the top of every non-home page: eyebrow + H1 +
 * orange rule + a one-line lead, on the off-white surface band (.jca-band
 * supplies the hairline borders). page.html renders no core/post-title, so this
 * band is the page's only title — no duplication.
 * ======================================================================== */
/* Header content sits in a capped, left-aligned column inside the wide band
   (matches the Editorial left-alignment of the homepage). */
.jca-page-header__inner {
	max-width: 52rem;
}
.jca-page-header h1 {
	margin: 0;
}
.jca-lead {
	max-width: 46rem;
	color: var(--wp--custom--slate-soft);
	font-size: 1.2rem;
	line-height: 1.6;
}

/* Core-values card grid: two across on desktop, one on mobile. Cards reuse
   the .jca-pillar treatment (hairline, orange stroke over the title). */
.jca-card-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	align-items: stretch;
}
/* The grid container is a WP "flow" group, so core adds a block-gap top margin
   to every child after the first. In a grid that margin offsets the alternate
   cards inside their cells (unequal heights / staggered tops). `gap` already
   spaces the cards, so cancel the flow margin and let every card stretch to its
   row height. */
.jca-card-grid > * {
	margin-block-start: 0;
}
.jca-card-grid > .jca-pillar {
	height: 100%;
}
/* Three-up variant. The base grid is two columns because it was built for the
   six core values (three tidy rows of two). Three cards in that grid leaves an
   orphan on row two beside a half-width gap — which is exactly how the Contact
   page rendered before this was added. Declared BEFORE the mobile rule below so
   that rule still collapses it to one column at narrow widths. */
.jca-card-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 781px) {
	.jca-card-grid {
		grid-template-columns: 1fr;
	}
}

/* ===========================================================================
 * Capped reading measure for long-form content (.jca-prose) and the FAQ
 * accordion (.jca-faq).
 *
 * HOW THIS MUST BE USED, and why. Both are plain flow children placed
 * INSIDE an `alignwide` wrapper — never on the alignwide element itself:
 *
 *   <section class="alignfull">          <- full-bleed background
 *     <div class="alignwide">            <- the 1400px container, centered
 *       <div class="jca-prose">          <- capped measure, left edge = container
 *
 * That is the same structure as .jca-page-header__inner, which is why the
 * body lines up with the page heading above it.
 *
 * Do NOT put these classes on the alignwide element and force
 * `margin-left: 0`. Tried 2026-07-31 and it is wrong: it left-aligns
 * against the FULL-BLEED section, so the block sits at the viewport edge
 * and drifts further left from the logo the wider the browser gets. It
 * looks correct at ~1440px, where the container is nearly the viewport
 * width, and only reveals itself when you resize. Caught by Mark.
 *
 * 52rem matches .jca-page-header__inner so headings and body align exactly.
 * ======================================================================== */
.jca-prose {
	max-width: 52rem;
}

/* ===========================================================================
 * FAQ accordion (core/details). Hairline dividers; orange +/- marker.
 * Measure and alignment come from the shared rule above — .jca-faq must
 * sit inside an `alignwide` wrapper, not on it.
 *
 * CORRECTED 2026-07-31. This rule previously read `.jca-faq.alignwide`
 * with a comment claiming "the .alignwide override beats core's centering
 * rule." It never did — the FAQ rendered centered rather than aligned with
 * its page heading, and a first attempt to fix it with `!important`
 * over-corrected, pinning the block to the viewport edge instead of the
 * content container. Both are described above.
 * ======================================================================== */
.jca-faq {
	max-width: 52rem;
}
.jca-faq .wp-block-details {
	border-bottom: 1px solid var(--wp--custom--hairline);
	padding: 1.15rem 0;
}
.jca-faq > .wp-block-details:first-child {
	border-top: 1px solid var(--wp--custom--hairline);
}
.jca-faq summary {
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 2.25rem;
}
.jca-faq summary::-webkit-details-marker {
	display: none;
}
.jca-faq summary::marker {
	content: "";
}
.jca-faq summary::after {
	content: "+";
	position: absolute;
	right: 0.25rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--wp--preset--color--accent);
	font-size: 1.5rem;
	line-height: 1;
}
.jca-faq details[open] summary::after {
	content: "\2212";
}
.jca-faq .wp-block-details > *:not(summary) {
	color: var(--wp--custom--slate-soft);
	margin-top: 0.85rem;
	margin-bottom: 0;
}
.jca-card-grid .jca-pillar p {
	margin-bottom: 0.75rem;
}
.jca-card-grid .jca-pillar ul {
	color: var(--wp--custom--slate-soft);
	margin: 0;
	padding-left: 1.1rem;
}

/* ===========================================================================
 * Navigation submenu (About dropdown).
 *
 * Desktop: a white dropdown panel (hairline + soft shadow). Mobile overlay:
 * the panel is reset to a flat, indented, full-width list inside the open menu.
 * openSubmenusOnClick is set on the block, so the panel opens on click/tap
 * (keyboard- and touch-friendly) rather than hover.
 * ======================================================================== */
.jca-header .wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--hairline);
	border-radius: 8px;
	box-shadow: 0 10px 28px rgba( 54, 66, 74, 0.10 );
	padding: 0.4rem;
	min-width: 230px;
}
.jca-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 0.75rem;
	border-radius: 4px;
}
/* Inside the open mobile overlay, flatten the submenu: drop the panel chrome and
   make it a full-width, left-aligned, indented list. The `li`/`ul` tag qualifiers
   (with the .jca-header + .wp-block-navigation ancestors) raise specificity above
   core's later inline <style> blocks, which set the submenu li to
   align-items:flex-end and push the panel to the right. align-items:stretch makes
   the submenu fill the full width and left-align under its parent. */
.jca-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-submenu {
	align-items: stretch;
}
.jca-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__submenu-container {
	position: static;
	width: 100%;
	margin: 0;
	padding: 0 0 0 1.25rem;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	min-width: 0;
}

/* ===========================================================================
 * Mobile navigation overlay.
 *
 * The header nav is right-justified on desktop (intentional). Without an
 * override, that right-justification carries into the open mobile overlay, so
 * the menu items hug the right edge — hard to read and tap (Codex review,
 * 2026-06-29; mirrors renew.org's full-width left-aligned mobile panel). Scope
 * a left-aligned, full-width treatment to the OPEN overlay only (.is-menu-open)
 * so the desktop bar is untouched. Core Navigation already supplies the a11y
 * mechanics (focus trap, aria-modal, Esc/close, focus return); we add only
 * layout and WCAG 2.5.8 tap-target sizing.
 * ======================================================================== */
.jca-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--50);
}
.jca-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.jca-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: stretch;
	width: 100%;
}
.jca-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
}
.jca-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--wp--custom--hairline);
}
.jca-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 0.85rem 0;
	text-align: left;
	font-size: 1.125rem;
}
/* Open/close toggles meet the 44px minimum target size. */
.jca-header .wp-block-navigation__responsive-container-open,
.jca-header .wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
}

/* Closed mobile header: keep the brand + hamburger together on one row by
 * dropping the persistent header CTA at the nav's collapse breakpoint (core's
 * overlayMenu:"mobile" collapses below 600px). The sticky announcement bar
 * (always visible) still carries the interest CTA, and the hero CTA sits
 * immediately below, so the conversion path is preserved. Reversible: delete
 * this block to restore the header button on mobile. */
@media (max-width: 600px) {
	.jca-header__nav .wp-block-buttons {
		display: none;
	}
	/* Brand left, hamburger right, on a single row (conventional mobile
	   header). nowrap + margin-left:auto pins the toggle to the right; the
	   brand wordmark may wrap to two lines on very narrow screens, which is
	   fine. */
	.jca-header .alignwide {
		flex-wrap: nowrap;
	}
	.jca-header__nav {
		margin-left: auto;
		flex: 0 0 auto;
	}
	.jca-brand {
		min-width: 0;
	}
	.jca-brand img {
		height: 40px;
	}
}

/* ===========================================================================
 * Rules recovered from Twenty Twenty-Five when `jca` became standalone
 * (2026-07-31).
 *
 * A child theme loads its parent's functions.php, so TT5's
 * twentytwentyfive_enqueue_styles() was inlining style.min.css into every
 * page — 713 bytes that never appeared in wp_get_global_stylesheet() and were
 * therefore invisible to the migration's first verification plan. Codex caught
 * it; these are the rules from that payload worth keeping.
 *
 * Deliberately NOT recovered:
 *   - a{text-decoration-thickness:1px!important} — the !important was
 *     overriding JCA's own underline treatment. Dropping it lets the values
 *     chosen for this site actually apply.
 *   - .wp-block-navigation submenu margin/outline-offset — JCA owns submenu
 *     and mobile nav layout; re-adding parent rules would fight it.
 * ======================================================================== */

/* Focus fallback for anything outside the :focus-visible list above. Wrapped
   in :where() so it carries zero specificity and never beats JCA's own rule. */
:where(.wp-site-blocks :focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Avoid typographic orphans in running text. */
blockquote,
caption,
figcaption,
h1,
h2,
h3,
h4,
h5,
h6,
p {
	text-wrap: pretty;
}

/* Excerpt "read more" links sit on their own line. Unused until the blog
   exists, but it belongs with the generic post/archive baseline. */
.more-link {
	display: block;
}

/* Long code/pre content scrolls rather than blowing out the layout. */
:where(pre) {
	overflow-x: auto;
}

/* ===========================================================================
 * Fluent Forms — make the plugin's markup wear the JCA design system.
 *
 * Added 2026-08-01 with the four interest/recruiting forms. The decision was
 * to OVERRIDE the plugin stylesheet rather than dequeue it: dequeuing risks
 * losing layout the plugin's JS depends on (conditional logic, validation
 * states), and the override surface turned out to be small.
 *
 * ALIGNMENT. `.jca-form` is a capped-measure class and follows exactly the
 * same rule as `.jca-prose` above: it must sit INSIDE an `alignwide` wrapper,
 * never on it. Putting it on the alignwide element and forcing margin-left:0
 * left-aligns against the FULL-BLEED section, so the form drifts away from the
 * page heading as the viewport widens — the trap already documented for
 * `.jca-prose` and `.jca-faq`. 52rem matches both, so the form's left edge
 * lines up with the H1 above it.
 * ======================================================================== */
.jca-form {
	max-width: 52rem;
}

.jca-form .fluentform .ff-el-group {
	margin-bottom: var(--wp--preset--spacing--40);
}

/* Labels carry the same weight as the rest of the site's UI text. */
.jca-form .fluentform .ff-el-input--label label {
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	line-height: 1.35;
	margin-bottom: 0.4rem;
}

/* Required asterisk in Journey Orange rather than the plugin's red. */
.jca-form .fluentform .ff-el-is-required.asterisk-right label:after,
.jca-form .fluentform .ff-el-is-required.asterisk-left label:before {
	color: var(--wp--preset--color--accent);
}

/*
 * Help text. The build script sets helpMessagePlacement to 'under_label' so
 * this renders as real text rather than a hover tooltip — the Interest form's
 * K-3 eligibility note has to be readable on a phone, and a tooltip is not.
 */
.jca-form .fluentform .ff-el-help-message {
	color: var(--wp--custom--slate-soft);
	font-size: 0.9rem;
	line-height: 1.5;
	margin: 0 0 0.5rem;
	font-style: normal;
}

/* Inputs: hairline border and the site's own radius, not the plugin's. */
.jca-form .fluentform input[type="text"],
.jca-form .fluentform input[type="email"],
.jca-form .fluentform input[type="tel"],
.jca-form .fluentform input[type="url"],
.jca-form .fluentform input[type="number"],
.jca-form .fluentform select,
.jca-form .fluentform textarea {
	border: 1px solid var(--wp--custom--hairline);
	border-radius: 5px;
	padding: 0.65rem 0.8rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	box-shadow: none;
	max-width: 100%;
}

.jca-form .fluentform textarea {
	min-height: 7rem;
}

/*
 * Focus. The site-wide :focus-visible rule is wrapped in :where() and so
 * carries ZERO specificity — any plugin rule beats it. Restate it here with
 * real specificity so form fields keep the same orange focus ring as every
 * other control on the site. Accessibility, not decoration.
 */
.jca-form .fluentform input:focus,
.jca-form .fluentform select:focus,
.jca-form .fluentform textarea:focus,
.jca-form .fluentform input:focus-visible,
.jca-form .fluentform select:focus-visible,
.jca-form .fluentform textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-color: var(--wp--custom--hairline);
	box-shadow: none;
}

/* Radio and checkbox lists: breathing room and a comfortable hit target. */
.jca-form .fluentform .ff-el-form-check {
	margin-bottom: 0.45rem;
}

/*
 * Align the control with the FIRST LINE of its label.
 *
 * Fluent Forms leaves the input inline inside the label, so it baseline-aligns
 * against the text and visibly sits low - and on a two-line option it drifts
 * further. Flex with align-items: flex-start puts the control at the top of the
 * label box; the margin then optically centers it on the first line:
 * (1.5rem line box - 1rem control) / 2 = 0.25rem as a starting point, then
 * nudged to 0.34rem by eye. The geometric center is not the OPTICAL center:
 * a line box reserves room for descenders, so lowercase text reads as sitting
 * slightly lower than the maths suggests and the control looks high at 0.25rem.
 * Trust the render over the arithmetic here. Spotted by Mark 2026-08-01.
 *
 * NOTE: align-items is flex-start, NOT center, and that is deliberate. Centering
 * looks fine on a one-line option but on a two- or three-line one the control
 * drifts to the middle of the block and ends up beside the gap between lines
 * rather than pointing at the option. The Volunteer form has several of those.
 */
.jca-form .fluentform .ff-el-form-check-label {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
	padding-left: 0;
}

.jca-form .fluentform .ff-el-form-check-label input[type="checkbox"],
.jca-form .fluentform .ff-el-form-check-label input[type="radio"] {
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	margin: 0.34rem 0 0;
	/* Checked state in Journey Orange rather than the browser's default blue. */
	accent-color: var(--wp--preset--color--accent);
}

/*
 * Short-option lists (the ten grade levels on the Interest form) run to a
 * wasteful single column at full height. Flow them into columns instead;
 * `break-inside: avoid` keeps a label from splitting across the gutter.
 */
.jca-form .fluentform .ff-el-group:has(input[data-name="grade_levels"]) .ff-el-input--content {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.35rem var(--wp--preset--spacing--40);
}

/*
 * Grid, not CSS columns. The help message is a SIBLING of the checkboxes
 * inside .ff-el-input--content, so `columns` flowed it into the third column
 * as if it were another option. Grid lets it span the full width and take
 * order:-1 so the K-3 note reads BEFORE the boxes it qualifies.
 */
.jca-form .fluentform .ff-el-group:has(input[data-name="grade_levels"]) .ff-el-help-message {
	grid-column: 1 / -1;
	order: -1;
	margin-bottom: 0.4rem;
}

.jca-form .fluentform .ff-el-group:has(input[data-name="grade_levels"]) .ff-el-form-check {
	break-inside: avoid;
}

/*
 * `data-name` sits on the INPUT, not on the group wrapper, so the group has to
 * be selected with :has(). Checked against the rendered markup rather than
 * assumed -- an earlier [data-name] selector on the group matched nothing and
 * silently did nothing, which is the failure mode of guessing at plugin markup.
 * :has() is baseline in every browser this site targets; if it ever fails the
 * list simply renders as one column, which is the pre-existing behavior.
 *
 * Help text renders AFTER the options for checkbox and radio groups, which
 * puts the K-3 eligibility note below the ten grade boxes instead of under the
 * question. Reorder with flex so it reads before the choices a parent is about
 * to make.
 */
.jca-form .fluentform .ff-el-group:has(.ff-el-help-message) {
	display: flex;
	flex-direction: column;
}

.jca-form .fluentform .ff-el-group:has(.ff-el-help-message) .ff-el-input--label {
	order: 1;
}

.jca-form .fluentform .ff-el-group:has(.ff-el-help-message) .ff-el-help-message {
	order: 2;
}

.jca-form .fluentform .ff-el-group:has(.ff-el-help-message) .ff-el-input--content {
	order: 3;
}

/* Submit button: reuse the site's CTA button exactly.
   Use --wp--custom--button-bg, NOT --wp--preset--color--accent. Journey Orange
   (#F26825) is the brand accent but only reaches 3.10:1 against white text;
   theme.json's elements.button deliberately uses #C94A16 (4.69:1) so CTAs pass
   WCAG AA. See docs/decisions.md 2026-07-31 (Pending Decision #5) and
   2026-08-05, where this rule was found to have reintroduced the failing pair. */
.jca-form .fluentform .ff-btn-submit {
	background-color: var(--wp--custom--button-bg, #C94A16) !important;
	border: none;
	border-radius: 5px;
	color: #fff !important;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	padding: 0.7rem 1.6rem;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.jca-form .fluentform .ff-btn-submit:hover,
.jca-form .fluentform .ff-btn-submit:focus {
	background-color: var(--wp--custom--button-bg-hover, #A63D0E) !important;
}

/* Validation and confirmation states, on brand rather than plugin default. */
.jca-form .fluentform .error.text-danger,
.jca-form .fluentform .ff-el-is-error .text-danger {
	color: #B3261E;
	font-size: 0.9rem;
	margin-top: 0.3rem;
}

.jca-form .fluentform .ff-el-is-error input,
.jca-form .fluentform .ff-el-is-error select,
.jca-form .fluentform .ff-el-is-error textarea {
	border-color: #B3261E;
}

.jca-form .ff-message-success {
	border-left: 3px solid var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--surface);
	padding: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--contrast);
}

@media (max-width: 600px) {
	.jca-form .fluentform .ff-el-group[data-name="grade_levels"] .ff-el-input--content {
		columns: 2;
	}
}