/*
 * CSA Toolbox → BEA design language.
 *
 * The CSA Toolbox plugins style themselves with --csa-* tokens (and fall back to
 * CSA teal without them). BEA's child theme defines its own tokens in
 * bea-theme.css (:root and [data-theme="dark"] on <html>). Pointing each
 * --csa-* token at the BEA token makes every Toolbox block — Directory,
 * Partners, Advisories, Forms, Rate Tables, Files, Gallery, Feature Sections,
 * Site Toolkit contact/map blocks — follow BEA's colors in light AND dark mode.
 *
 * Only custom properties and the five shared utility classes the plugins
 * expect from a CSA theme (.csa-sr, .csa-glass, .csa-btn, .csa-eyebrow,
 * .csa-tel/.csa-addr). BEA's own markup never uses these, so nothing that is
 * on the site today changes.
 */

:root {
	/* Surfaces and ink */
	--csa-bg: var(--bg, #ECF1F9);
	--csa-bg-alt: var(--bg2, #F5F8FD);
	--csa-bg-elev: rgba(255, 255, 255, 0.78);
	--csa-ink: var(--text1, #0D1A30);
	--csa-ink-2: var(--text2, #3A4F72);
	--csa-ink-3: var(--text3, #5A6E8C);
	--csa-line: var(--divider, rgba(34, 48, 85, 0.10));

	/* Brand */
	--csa-accent: var(--accent, #223055);
	--csa-accent-ink: var(--accent-text, #fff);
	--csa-accent-hover: #16233f;
	--csa-link: var(--link, #2F517E);
	--csa-link-hover: var(--link-hover, #16233f);
	--csa-eyebrow: var(--eyebrow, #223055);
	--csa-danger: #B3261E;

	/* Glass cards, the same recipe as BEA's .gcard */
	--csa-glass: var(--card);
	--csa-glass-strong: rgba(255, 255, 255, 0.92);
	--csa-glass-line: var(--card-border, rgba(255, 255, 255, 0.9));
	--csa-glass-shadow: var(--card-shadow, 0 2px 24px rgba(34, 48, 85, 0.09));
	--csa-tile-shadow: var(--btn-shadow, 0 2px 8px rgba(34, 48, 85, 0.14));

	/* Ombre gradients (navy → blue, never rainbow) */
	--csa-grad-brand: var(--ombre-navy);
	--csa-grad-chapter: var(--ombre-band);
	--csa-grad-text: linear-gradient(92deg, #223055 0%, #2F517E 55%, #BA941C 100%);

	/* Shape, type, motion, layout — measured from bea-theme.css */
	--csa-r-sm: 11px;   /* .btn */
	--csa-r-md: 14px;   /* .gcard .ico */
	--csa-r-lg: 20px;   /* .gcard */
	--csa-r-pill: 980px;
	--csa-font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--csa-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--csa-dur: 0.3s;
	--csa-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--csa-wrap: 1140px;
	--csa-gutter: 40px;
	--csa-sticky-top: 156px; /* sticky header + breathing room, as html{scroll-padding-top} */
}

[data-theme="dark"] {
	--csa-bg-elev: rgba(255, 255, 255, 0.05);
	--csa-accent-hover: var(--gold-hover, #F0CE5C);
	--csa-danger: #FF8A80;
	--csa-glass-strong: rgba(14, 20, 40, 0.88);
	--csa-grad-text: linear-gradient(92deg, #F0CE5C 0%, #E8B923 52%, #BA941C 100%);
}

@media (max-width: 860px) {
	:root { --csa-gutter: 20px; --csa-sticky-top: 144px; }
}

/* ---------- Shared utility classes (BEA look) ---------- */

.csa-sr {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.csa-glass {
	background: var(--card);
	border: 1px solid var(--card-border);
	box-shadow: var(--card-shadow);
	backdrop-filter: blur(22px);
	-webkit-backdrop-filter: blur(22px);
}

.csa-eyebrow {
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--eyebrow);
}

/* Same as BEA's .btn.btn-gold.btn-md; --sm and --ghost mirror .btn-sm / .btn-outline. */
.csa-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 13px 26px;
	font: 600 15px/1.2 var(--csa-font-text);
	text-decoration: none; cursor: pointer;
	border: none; border-radius: 11px;
	background: var(--gold); color: var(--gold-text);
	box-shadow: var(--btn-shadow);
	transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.csa-btn:hover { transform: translateY(-2px); background: var(--gold-hover); box-shadow: 0 10px 30px rgba(232, 185, 35, 0.4); }
.csa-btn--sm { min-height: 36px; padding: 9px 18px; font-size: 13px; }
.csa-btn--ghost { background: transparent; color: var(--link); border: 1px solid var(--divider); box-shadow: none; }
.csa-btn--ghost:hover { background: transparent; color: var(--link-hover); border-color: var(--gold); box-shadow: var(--btn-shadow); }
@media (prefers-reduced-motion: reduce) { .csa-btn, .csa-btn:hover { transition: none; transform: none; } }

/* Click-to-call and directions links: link color, no underline, accent on hover. */
.csa-tel, .csa-addr { color: var(--link); text-decoration: none; }
.csa-tel:hover, .csa-addr:hover { color: var(--link-hover); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }