/* ============================================================================
   blz-core — primitives + token fallbacks for the Bizlift Design System.

   TOKENS: every rule reads semantic --blz-* custom properties. The fallbacks
   below live in :where(:root) — ZERO specificity — so any theme's plain
   `:root { --blz-… }` sheet wins regardless of load order. Fallback values are
   deliberately neutral (grayscale, system fonts): a site without a tokens
   sheet looks unskinned, never broken. Contract: docs/TOKENS.md.
   ========================================================================== */

:where(:root) {
	/* surfaces */
	--blz-bg: #fafafa;            /* page/band background            */
	--blz-bg-2: #f0f0ee;          /* alternate band background       */
	--blz-card-bg: #ffffff;       /* cards on light bands            */
	--blz-dark-bg: #1f1f1f;       /* hero / media backdrop           */
	/* ink */
	--blz-ink: #222222;           /* primary text + dark-band bg     */
	--blz-ink-2: #2c2c2c;
	--blz-ink-soft: #444444;
	--blz-mute: #707070;
	--blz-dark-2: #2a2a2a;        /* alt dark band bg (site-tinted)  */
	--blz-band-veil: rgba(0, 0, 0, .55); /* wash over band bg images on dark */
	--blz-hl-bg: rgba(0, 0, 0, .08);     /* ~highlight~ wash                */
	/* accents */
	--blz-accent: #3a3a3a;        /* primary brand (solid buttons)   */
	--blz-accent-dark: #262626;   /* its hover                       */
	--blz-accent-2: #6b6b6b;      /* secondary accent (eyebrows, links, primary CTA) */
	--blz-accent-2-dark: #555555; /* its hover                       */
	--blz-accent-2-soft: rgba(0, 0, 0, .06);
	--blz-accent-3: #9a9a9a;      /* highlight on dark (stars, quotes) */
	--blz-grad: linear-gradient(100deg, var(--blz-accent-2) 0%, var(--blz-accent-3) 100%);   /* primary gradient  */
	--blz-grad-2: linear-gradient(100deg, var(--blz-accent) 0%, var(--blz-accent-dark) 100%); /* secondary gradient */
	/* text on colored surfaces */
	--blz-on-accent: #ffffff;
	--blz-on-accent-2: var(--blz-on-accent); /* text on the SECONDARY accent (accent-2) buttons; defaults to on-accent, skins can differ */
	--blz-on-dark: #ededed;       /* body text on dark bands         */
	--blz-on-dark-strong: #ffffff;
	--blz-on-dark-soft: rgba(255, 255, 255, .75);
	/* hairlines */
	--blz-line: rgba(0, 0, 0, .12);
	--blz-line-2: rgba(0, 0, 0, .06);
	--blz-line-inv: rgba(255, 255, 255, .16);
	/* type + shape */
	--blz-serif: Georgia, 'Times New Roman', serif;
	--blz-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--blz-radius: 22px;
	--blz-radius-sm: 14px;
	--blz-shadow: 0 24px 60px rgba(0, 0, 0, .12);
	/* functional */
	--blz-error: #b3474c;
	--blz-error-dark: #8e3237;
	/* rhythm */
	--blz-band-pad: 116px;
	--blz-band-pad-m: 82px;
	--blz-wrap-max: 1220px;
	--blz-wrap-pad: 40px;
	--blz-wrap-pad-m: 22px;
}

/* ---------------------------------------------------------------------------
   Divi neutralizer. Modules render their own <section class="blz-band">; the
   surrounding et_pb_section is a zero-padded transparent shell (the builders
   stamp module_class="blz-host" on it). Only this block may target et_pb_*
   classes — it is deletable wholesale in a Divi 5 world.
--------------------------------------------------------------------------- */
.et_pb_section.blz-host {
	padding: 0 !important;
	margin: 0 !important;
}
/* Hosts WITHOUT a band class are pure shells (the band lives in the module's
   own <section>) → transparent. Hybrid sections carry .blz-band themselves
   and must keep their band background (.blz-band--dark etc.) — an unscoped
   `background: transparent !important` here rendered dark hybrids as
   on-dark text over the page background. Paper hybrids are unaffected
   (var(--blz-bg) equals the page background). */
.et_pb_section.blz-host:not(.blz-band) {
	background: transparent !important;
}
.blz-host > .et_pb_module,
.blz-host .et_pb_fullwidth_section {
	margin: 0 !important;
}
/* Divi core keeps "empty" columns 1px tall — the sliver above heroes */
.blz-host .et_pb_column { min-height: 0; }

/* ---------------------------------------------------------------------------
   Layout primitives
--------------------------------------------------------------------------- */
.blz-wrap {
	max-width: var(--blz-wrap-max);
	margin: 0 auto;
	padding-left: var(--blz-wrap-pad);
	padding-right: var(--blz-wrap-pad);
}
/* RULE (hard-won): never set shorthand padding on a .blz-wrap element —
   vertical rhythm uses padding-top/bottom only so the horizontals survive. */

.blz-band {
	position: relative;
	padding-top: var(--blz-band-pad);
	padding-bottom: var(--blz-band-pad);
	background: var(--blz-bg);
	color: var(--blz-ink);
	font-family: var(--blz-sans);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
.blz-band--paper-2 {
	background: var(--blz-bg-2) repeating-linear-gradient(135deg, var(--blz-accent-2-soft) 0 1px, transparent 1px 16px);
	border-top: 1px solid var(--blz-line-2);
	border-bottom: 1px solid var(--blz-line-2);
}
.blz-band--dark {
	background: var(--blz-ink);
	color: var(--blz-on-dark);
}
.blz-band--dark-2 {
	background: var(--blz-dark-2);
	color: var(--blz-on-dark);
}
.blz-band--none {
	padding-top: 0;
	padding-bottom: 0;
	background: transparent;
}

/* Band background image layer (band_bg field). Sits under the content;
   dark bands get a token veil so copy stays readable. Oversized when the
   image drifts (data-plx) so edges never show. */
.blz-band--has-bg { overflow: hidden; }
.blz-band-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	pointer-events: none;
	will-change: transform;
}
.blz-band-bg[data-plx] { inset: -12% 0; }
.blz-band--dark .blz-band-bg::after,
.blz-band--dark-2 .blz-band-bg::after,
.blz-band--final .blz-band-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--blz-band-veil);
}
.blz-band--has-bg > :not(.blz-band-bg) { position: relative; }
/* Parent-theme heading colors (h1-h6 {color:#…}) beat inherited light text on
   dark bands — reassert inheritance for headings sitting directly on dark. */
.blz-band--dark h1, .blz-band--dark h2, .blz-band--dark h3,
.blz-band--dark h4, .blz-band--dark h5, .blz-band--dark h6,
.blz-band--dark-2 h1, .blz-band--dark-2 h2, .blz-band--dark-2 h3,
.blz-band--dark-2 h4, .blz-band--dark-2 h5, .blz-band--dark-2 h6 {
	color: inherit;
}

/* Links inherit the band's text color (mirrors the design's global
   `a{color:inherit}`), so classed-but-uncolored links (.avvo-link, .book-card,
   etc.) take the band's ink/on-dark. EXCLUDE the links that carry their OWN
   color — buttons (.blz-btn), copper CTAs (.blz-link), pills (a.svc) — or this
   (0,1,1) rule beats their (0,1,0) color and forces inherit. `:where(:not(...))`
   excludes at ZERO added specificity, so this stays (0,1,1): beats Divi's
   customizer olive `a{color:#4a561f}` (0,0,1), loses to module link rules.
   (Do NOT use `:not([class])` — it also drops .avvo-link/.book-card, which have
   a class but no color and must keep inheriting. Add new self-colored link
   classes to this list.) */
.blz-band a:where(:not(.blz-btn):not(.blz-link):not(.svc)) { color: inherit; text-decoration: none; }
.blz-band img { display: block; max-width: 100%; }

/* ---------------------------------------------------------------------------
   Eyebrow
--------------------------------------------------------------------------- */
.blz-eyebrow {
	font-family: var(--blz-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--blz-accent-2);
	display: inline-flex;
	align-items: center;
	gap: 12px;
}
.blz-eyebrow::before {
	content: "";
	width: 26px;
	height: 1px;
	background: var(--blz-accent-2);
}
.blz-eyebrow--gold,
.blz-band--dark .blz-eyebrow,
.blz-band--dark-2 .blz-eyebrow {
	color: var(--blz-accent-3);
}
.blz-eyebrow--gold::before,
.blz-band--dark .blz-eyebrow::before,
.blz-band--dark-2 .blz-eyebrow::before {
	background: var(--blz-accent-3);
}

/* ---------------------------------------------------------------------------
   Buttons
--------------------------------------------------------------------------- */
.blz-btn {
	-webkit-appearance: none;
	appearance: none;
	font-family: var(--blz-sans);
	font-size: 14px;
	font-weight: 600;
	padding: 16px 30px;
	border-radius: 100px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	border: 1px solid transparent;
	text-decoration: none;
	transition: transform .35s cubic-bezier(.22, 1, .36, 1), background .3s, color .3s, box-shadow .3s, border-color .3s;
	position: relative;
	overflow: hidden;
}
.blz-btn--accent {
	background: var(--blz-accent);
	color: var(--blz-on-accent);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}
.blz-btn--accent:hover {
	background: var(--blz-accent-dark);
	color: var(--blz-on-accent);
	transform: translateY(-2px) scale(1.02);
}
.blz-btn--accent-2 {
	background: var(--blz-accent-2);
	color: var(--blz-on-accent-2);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}
.blz-btn--accent-2:hover {
	background: var(--blz-accent-2-dark);
	color: var(--blz-on-accent-2);
	transform: translateY(-2px) scale(1.02);
}
.blz-btn--ghost {
	border-color: var(--blz-line);
	color: var(--blz-ink);
	background: transparent;
}
.blz-btn--ghost:hover {
	border-color: var(--blz-ink);
	background: rgba(0, 0, 0, .04);
	transform: translateY(-2px);
}
.blz-band--dark .blz-btn--ghost,
.blz-band--dark-2 .blz-btn--ghost {
	border-color: var(--blz-on-dark-soft);
	color: var(--blz-on-dark);
}
.blz-band--dark .blz-btn--ghost:hover,
.blz-band--dark-2 .blz-btn--ghost:hover {
	border-color: var(--blz-on-dark-strong);
	background: rgba(255, 255, 255, .08);
}
.blz-btn .blz-arr { transition: transform .3s; }
.blz-btn:hover .blz-arr { transform: translateX(4px); }

.blz-link {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--blz-accent-2);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	transition: gap .3s;
}
.blz-link:hover { gap: 14px; }
.blz-link .blz-arr { transition: transform .3s; }
/* the accent-2 (copper) link color is unreadable on dark bands (WCAG 1.4.3) —
   switch to the on-dark accent token (accent-3) there. */
.blz-band--dark .blz-link,
.blz-band--dark-2 .blz-link,
.blz-band--final .blz-link { color: var(--blz-accent-3); }

/* ---------------------------------------------------------------------------
   Section header
--------------------------------------------------------------------------- */
.blz-sec-head {
	margin-bottom: 60px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;
	flex-wrap: wrap;
}
.blz-sec-title {
	/* Type-scale tokens: per-rule fallbacks ARE the Long Okura defaults, so
	   a skin that sets nothing gets the original serif-led hierarchy. */
	font-family: var(--blz-head-face, var(--blz-serif));
	font-weight: var(--blz-head-weight, 360);
	font-size: var(--blz-head-size, clamp(32px, 4.4vw, 58px));
	line-height: var(--blz-head-leading, 1.04);
	letter-spacing: var(--blz-head-track, -.02em);
	max-width: 19ch;
	margin-top: 20px;
}
.blz-sec-title em {
	font-style: italic;
	color: var(--blz-accent-2);
	/* 'inherit' inside var() is deliberate: when the token is unset the
	   declaration is invalid-at-computed-value-time, which for these
	   inherited properties means "behave as if not declared" — the em keeps
	   inheriting the title's face/weight/tracking exactly as before. */
	font-family: var(--blz-em-face, inherit);
	font-weight: var(--blz-em-weight, inherit);
	letter-spacing: var(--blz-em-track, inherit);
}
.blz-band--dark .blz-sec-title em,
.blz-band--dark-2 .blz-sec-title em { color: var(--blz-accent-3); }
.blz-sec-side {
	font-size: 15px;
	color: var(--blz-mute);
	max-width: 38ch;
	line-height: 1.75;
}
.blz-band--dark .blz-sec-side,
.blz-band--dark-2 .blz-sec-side { color: var(--blz-on-dark-soft); }

/* ---------------------------------------------------------------------------
   Icon tile (.bico)
--------------------------------------------------------------------------- */
.blz-ico {
	width: 46px;
	height: 46px;
	border-radius: 13px;
	background: var(--blz-accent-2-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}
.blz-ico svg {
	width: 21px;
	height: 21px;
	stroke: var(--blz-accent-2);
	fill: none;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Screen-reader-only text (labels for icon-only triggers). */
.blz-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Keyboard focus ring (WCAG 2.4.7). Neutral by default; skins override the color
   by setting --blz-focus in their tokens sheet, or a whole different ring via a
   higher-specificity rule (e.g. `body.<skin> :focus-visible`) — this baseline is
   intentionally weak so skins win. Element selectors (0,1,1) beat WP normalize's
   `a:focus{outline:dotted thin}` (also 0,1,1) by SOURCE ORDER since blz-core
   enqueues after normalize. Only shows for keyboard/AT focus, never mouse click.
   NOTE: a skin's own `outline:none` on a control (e.g. its search input) still
   wins — the skin must restore the ring there itself. */
:where(:root) { --blz-focus: #1a1a1a; --blz-focus-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
	outline: 2px solid var(--blz-focus);
	outline-offset: var(--blz-focus-offset);
}

/* ---------------------------------------------------------------------------
   Inline highlight (~marker~ in blz_em) + decorative seal badge
--------------------------------------------------------------------------- */
.blz-hl {
	background: linear-gradient(transparent 55%, var(--blz-hl-bg) 55%);
	padding: 0 .08em;
}
.blz-seal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 5px;
	background: var(--blz-accent-2);
	color: var(--blz-on-accent);
	font-family: var(--blz-serif);
	font-size: 22px;
	line-height: 1;
	transform: rotate(-4deg);
	box-shadow: inset 0 0 0 2px var(--blz-on-accent), inset 0 0 0 3px var(--blz-accent-2);
	user-select: none;
}

/* ---------------------------------------------------------------------------
   Reveal on scroll. Items carry .blz-rv; grids carry .blz-stagger and the
   delay comes from source order (no per-item stagger classes to manage).
   Legacy pages' .rv elements keep their own embedded CSS; blz-behaviors.js
   observes both selectors during the transition.
--------------------------------------------------------------------------- */
.blz-rv {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity .95s cubic-bezier(.2, .7, .2, 1), transform .95s cubic-bezier(.2, .7, .2, 1);
}
.blz-rv.blz-in { opacity: 1; transform: none; }
.blz-stagger > .blz-rv:nth-child(2) { transition-delay: .08s; }
.blz-stagger > .blz-rv:nth-child(3) { transition-delay: .16s; }
.blz-stagger > .blz-rv:nth-child(4) { transition-delay: .24s; }
.blz-stagger > .blz-rv:nth-child(5) { transition-delay: .32s; }
.blz-stagger > .blz-rv:nth-child(n+6) { transition-delay: .4s; }

/* Never render invisible content inside the Visual Builder… */
.et-fb .blz-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
/* …or for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
	.blz-rv { transition: none; opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   Responsive rhythm
--------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.blz-wrap {
		padding-left: var(--blz-wrap-pad-m);
		padding-right: var(--blz-wrap-pad-m);
	}
	.blz-band {
		padding-top: var(--blz-band-pad-m);
		padding-bottom: var(--blz-band-pad-m);
	}
	.blz-band--none { padding-top: 0; padding-bottom: 0; }
}

/* Flush-edge utilities (band_pad field): collapse the seam when one design
   section is expressed as two adjacent band modules. Kept last + !important
   so they beat theme/media padding at any width. */
.blz-band--pt0 { padding-top: 0 !important; }
.blz-band--pb0 { padding-bottom: 0 !important; }

/* Centered section header (head_align field): stacks and centers; side text
   flows below the title instead of to its right. */
.blz-sec-head--center { display: block; text-align: center; }
.blz-sec-head--center .blz-sec-title { margin-left: auto; margin-right: auto; max-width: 26ch; }
.blz-sec-head--center .blz-eyebrow { justify-content: center; }
.blz-sec-head--center .blz-sec-side { max-width: 58ch; margin: 18px auto 0; }