/*
 * LCLC design tokens. Lake at golden hour: deep lake blues, a bright hill
 * green for the actions that matter, bold grotesque headlines.
 *
 * Contrast checked (Nov 6, 2026): white on Lake 6.3:1, white on Lake deep
 * 10.5:1, Ink on Hill 7.8:1, Sky on Night 10.9:1, Hill on Night 7.9:1,
 * Ink soft on Mist 6.7:1. White on Hill is 2.2:1: never use it.
 *
 * Builder controls win: these are defaults and variables, written with :where()
 * so anything set in Beaver Builder overrides them without a fight.
 */

@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/BricolageGrotesque-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/BricolageGrotesque-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/Figtree-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/Figtree-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/Figtree-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
	--lclc-lake: #355EAB;
	--lclc-lake-deep: #1F3D78;
	--lclc-hill: #85BF62;
	--lclc-sky: #BECEEA;
	--lclc-night: #0E1A33;
	--lclc-mist: #F3F6FB;
	--lclc-ink: #121C2F;
	--lclc-ink-soft: #4B5770;
	--lclc-line: #DCE4F1;
	--lclc-white: #FFFFFF;

	--lclc-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
	--lclc-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;

	--lclc-h1: clamp(2.75rem, 6.2vw, 5rem);      /* 44 → 80 */
	--lclc-h2: clamp(2rem, 4.2vw, 3rem);          /* 32 → 48 */
	--lclc-h3: 1.3125rem;                         /* 21 */
	--lclc-text: 1.0625rem;                       /* 17 */
	--lclc-leading: 1.6;

	--lclc-radius: 18px;
	--lclc-radius-lg: 24px;
	--lclc-pill: 999px;
	--lclc-shadow: 0 1px 2px rgba(18, 28, 47, .06), 0 8px 24px rgba(18, 28, 47, .08);
	--lclc-section: clamp(64px, 9vw, 112px);      /* 64 on phones → 112 on desktop */
	--lclc-focus: 0 0 0 5px #FFFFFF;
}

:where(body) { font-family: var(--lclc-body); font-size: var(--lclc-text); line-height: var(--lclc-leading); color: var(--lclc-ink); -webkit-font-smoothing: antialiased; }
:where(h1, h2, h3, h4) { font-family: var(--lclc-display); letter-spacing: -0.02em; text-wrap: balance; }
:where(h1) { font-weight: 800; line-height: 1; }
:where(h2) { font-weight: 700; line-height: 1.05; color: var(--lclc-lake-deep); }
:where(h3) { font-weight: 700; line-height: 1.15; }
:where(a) { color: var(--lclc-lake); text-underline-offset: 3px; }

/* Keyboard focus shows everywhere, on light and dark bands; a mouse click doesn't draw a box. */
:focus-visible { outline: 3px solid var(--lclc-lake); outline-offset: 2px; box-shadow: var(--lclc-focus); }
:focus:not(:focus-visible) { outline: none; box-shadow: none; }

.lclc-skip { position: absolute; left: -9999px; top: 0; }
.lclc-skip:focus { left: 16px; top: 16px; z-index: 1000; background: #fff; color: var(--lclc-lake-deep); padding: 12px 18px; border-radius: 12px; font-weight: 700; }

/* Classes to put on a Beaver Builder row, column or module (Advanced › Class). */
.lclc-card { border-radius: var(--lclc-radius); box-shadow: var(--lclc-shadow); overflow: hidden; }
.lclc-on-dark, .lclc-on-dark :where(h1, h2, h3, p, li) { color: #fff; }
.lclc-on-dark :where(a:not(.lclc-btn):not(.fl-button)) { color: var(--lclc-sky); }

/* Rows whose photo waits until it's near the screen (functions.php). */
html.lclc-lazy-bgs .lclc-lazy-bg, html.lclc-lazy-bgs .lclc-lazy-bg > .fl-row-content-wrap, html.lclc-lazy-bgs .lclc-lazy-bg > .fl-col-content { background-image: none !important; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
