/*
 * BAP design tokens (design-system.md). Prefixed --bap-* to sit alongside the
 * existing child theme's --bap-navy/--bap-red without colliding.
 * Utility classes are added in Elementor via Advanced → CSS Classes.
 */
:root {
	--bap-navy-900: #0B3A52;
	--bap-navy-700: #135A7E;
	--bap-navy-100: #E7F0F5;
	--bap-navy-50: #F4F8FB;
	--bap-red-600: #D23F2C;
	--bap-red-700: #B3321F;
	--bap-red-50: #FDF1EF;
	--bap-slate-700: #33434F;
	--bap-slate-500: #5F6F7B;
	--bap-slate-200: #D5DEE5;
	--bap-white: #FFFFFF;
	--bap-success-700: #1E7A4C;
	--bap-error-700: #A4262C;
	--bap-focus: #F5B700;
	--bap-grad-brand: linear-gradient(135deg, #135A7E 0%, #0B3A52 100%);

	--bap-font-head: "Poppins", "Segoe UI", Arial, sans-serif;
	--bap-font-body: "Inter", "Segoe UI", Roboto, Arial, sans-serif;

	--bap-r-sm: 8px;
	--bap-r-md: 14px;
	--bap-r-lg: 24px;
	--bap-r-pill: 999px;
	--bap-shadow-1: 0 1px 2px rgba(11, 58, 82, .06), 0 4px 16px rgba(11, 58, 82, .06);
	--bap-shadow-2: 0 12px 40px rgba(11, 58, 82, .12);

	--bap-space-section: 64px;
}
@media (min-width: 1024px) {
	:root { --bap-space-section: 96px; }
}

/* Visible focus for everyone. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--bap-focus);
	outline-offset: 2px;
}

/* Layout helpers */
.bap-container { max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
.bap-section { padding-block: var(--bap-space-section); }
.bap-bg-tint { background: var(--bap-navy-50); }
.bap-bg-brand { background: var(--bap-grad-brand); color: var(--bap-white); }
.bap-bg-brand :is(h1, h2, h3, h4, p, li, a):not(.bap-form-panel *) { color: var(--bap-white); }

/* Eyebrow (echoes the "P L A N S" lockup) */
.bap-eyebrow {
	font-family: var(--bap-font-head);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--bap-red-600);
}

/* Buttons */
.bap-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 56px;
	padding: 0 32px;
	border-radius: var(--bap-r-pill);
	font: 600 18px/1.2 var(--bap-font-head);
	text-decoration: none;
	background: var(--bap-red-600);
	color: var(--bap-white);
	transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.bap-btn:hover { background: var(--bap-red-700); color: var(--bap-white); box-shadow: var(--bap-shadow-1); transform: translateY(-1px); }
.bap-btn--phone { background: var(--bap-grad-brand); }
.bap-btn--phone:hover { background: var(--bap-navy-900); }
.bap-btn--secondary { background: var(--bap-white); color: var(--bap-navy-700); box-shadow: inset 0 0 0 2px var(--bap-navy-700); }
.bap-btn--secondary:hover { background: var(--bap-navy-50); color: var(--bap-navy-900); }

.bap-phone-link { color: var(--bap-navy-700); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

/* Tiles (feature / promise / step) — named to avoid the child theme's .bap-card */
.bap-tile {
	background: var(--bap-white);
	border: 1px solid var(--bap-slate-200);
	border-radius: var(--bap-r-md);
	padding: 24px;
	box-shadow: var(--bap-shadow-1);
}
.bap-tile__icon {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--bap-navy-100);
	color: var(--bap-navy-700);
	margin-bottom: 16px;
}
.bap-step-num { font: 700 40px/1 var(--bap-font-head); color: var(--bap-red-600); }

/* Form panel */
.bap-form-panel {
	background: var(--bap-white);
	border-radius: var(--bap-r-lg);
	padding: 28px;
	box-shadow: var(--bap-shadow-2);
}

/* Disclaimer */
.bap-disclaimer { font: 400 15px/1.6 var(--bap-font-body); color: var(--bap-slate-500); }
.bap-disclaimer p { margin: 0 0 12px; }
.bap-disclaimer__meta { font-size: 14px; }
.bap-disclaimer-band { background: var(--bap-navy-50); padding-block: 32px; border-top: 1px solid var(--bap-slate-200); }

/* Section reveal: add .bap-reveal in Elementor; JS (Phase 2) adds .is-visible. */
.bap-reveal { opacity: 1; }
.js .bap-reveal:not(.is-visible) { opacity: 0; transform: translateY(12px); }
.js .bap-reveal { transition: opacity .4s ease-out, transform .4s ease-out; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
	.js .bap-reveal:not(.is-visible) { opacity: 1; transform: none; }
}