/* ============================================================================
 * LUMEN — MULTI-PURPOSE
 * Any small business. The free template.
 *
 * The free template, so it has to be the most persuasive thing in the product — a demo that works better than the competition's paid tier. It is deliberately the most BALANCED of the five rather than the most opinionated: it has to flatter a plumber, a bookkeeper and a florist equally, so its identity is clarity and generous spacing rather than a strong stylistic position. Nothing is withheld from it.
 *
 * THIS IS A STRUCTURAL SYSTEM, NOT A PALETTE. The five dials below — proportion,
 * density, type ratio, surface language and composition — are what make this
 * theme unlike the other four even where they share a section shape. A skin that
 * only swapped colours would leave two themes on the same shape looking
 * identical, which is precisely the "clones and different colours" charge.
 *
 * Type ratio 1.26 · line-height 1.65 · radius 12px ·
 * separation by EDGE · container 1160px · regular density
 *
 * On-brand ink is RESOLVED: #FFFFFF on #1F4D3D = 9.60:1.
 * ========================================================================== */

.bfy-prime.bfy-lumen {
	/* ── PALETTE ── */
	--p-bg: #FBFBF9; --p-surface: #FFFFFF; --p-ink: #14171A;
	--p-muted: #5A6470; --p-border: rgba(20,23,26,0.12);
	/* v3.8.15 — the free template now FOLLOWS the chosen brand colour instead
	   of a hardcoded green. In Briefly Free the owner picks from a curated set
	   of presets; in Pro the full colour picker is unlocked. Either way the
	   choice is published on :root by Briefly_Page_Palette (custom/host mode)
	   as --wp--preset--color--primary, and the demo swatches set
	   --ewpk-brand-override. Falls back to Lumen's own forest green when neither
	   is set (template mode). Scoped to .bfy-lumen: the other four Prime themes
	   keep the foundation default. */
	--p-brand: var(--ewpk-brand-override, var(--wp--preset--color--primary, #1F4D3D));
	--p-on-brand: var(--wp--preset--color--on-primary, #FFFFFF);
	--p-band-bg: #F2F3EF; --p-band-surface: #FFFFFF;
	--p-ink-bg: #14171A; --p-ink-fg: #F7F8F9;
	--p-ink-muted: rgba(247,248,249,0.68); --p-ink-border: rgba(255,255,255,0.16);
	--p-ink-surface: rgba(255,255,255,0.05);

	/* ── TYPE SYSTEM — generated from a RATIO of 1.26, so every step
	   moves together. Hand-picked sizes are why the previous suite had one
	   theme carrying 28 distinct literal font-sizes and no scale at all. ── */
	--p-font-display: 'Sora',system-ui,sans-serif;
	--p-font-body: 'Public Sans',system-ui,sans-serif;
	--p-t-hero: clamp(2.20rem, 5.5vw, 3.18rem);
	--p-t-h1: clamp(2.00rem, 4.9vw, 2.64rem);
	--p-t-display: clamp(1.80rem, 3.9vw, 2.19rem);
	--p-t-h2: clamp(1.55rem, 3.1vw, 1.82rem);
	--p-t-h2-sm: clamp(1.25rem, 2.1vw, 1.45rem);
	--p-t-h3: 1.136rem;
	--p-t-h4: 1.035rem;
	--p-t-lead: clamp(1.040rem, 1.4vw, 1.122rem);
	--p-t-body: 1rem;
	--p-t-sm: 0.900rem;
	--p-t-xs: 0.820rem;
	--p-t-micro: 0.750rem;
	--p-lh: 1.65;
	--p-lh-tight: 1.15;
	--p-track-tight: -0.014em;
	--p-track-micro: 0.1em;

	/* ── PROPORTION ── */
	--p-w: 1160px;
	--p-w-wide: 1299px;
	--p-w-mid: 904px;
	--p-w-prose: 680px;
	--p-w-narrow: 503px;
	--p-sect: clamp(3.25rem, 5.5vw, 5.0rem);
	--p-sect-tight: clamp(2.34rem, 4.0vw, 3.50rem);
	--p-sect-loose: clamp(4.06rem, 6.6vw, 6.25rem);
	--p-gut: clamp(1.5rem, 4vw, 3rem);

	/* ── SURFACE ── */
	--p-radius: 12px;
	--p-radius-sm: 8px;
	--p-hairline: 1px;

	/* ── DENSITY + COMPOSITION — these reach the shared component packs, so a
	   shape recomposes for this theme instead of merely recolouring. ── */
	--p-card-pad: clamp(1.25rem,2.2vw,1.75rem);
	--p-story-cols: 1fr 0.88fr;
	--p-story-ratio: 4/3;
	--p-story-gap: clamp(1.5rem, 4vw, 3.5rem);
	--p-faq-cols: 1fr 0.88fr;
	--p-contact-cols: 1fr 0.88fr;
	--p-hours-cols: 1fr 0.88fr;
	--bfy-head-mb: calc(var(--p-sect-tight, 2rem) * 1.4);
	--bfy-hero-cols: 1fr 0.88fr;
	--bfy-hero-ratio: 4/3;
	--bfy-quotes-gap: clamp(1rem,2vw,1.5rem);
	--bfy-svc-gap: clamp(1rem,2vw,1.5rem);
	--bfy-gal-gap: clamp(1rem,2vw,1.5rem);
	--bfy-proc-gap: clamp(1rem,2vw,1.5rem);
	--bfy-quote-pad: clamp(1.25rem,2.2vw,1.75rem);
	--bfy-svc-pad: clamp(1.25rem,2.2vw,1.75rem);
	--bfy-btn-radius: 8px;
	--bfy-quote-radius: 12px;
	--bfy-svc-radius: 12px;
	--bfy-gal-radius: 12px;
	--bfy-hero-radius: 12px;
	--bfy-proc-radius: 12px;
}

/* ── MICRO-LABELS. Tracking is a signature people read without noticing: at
   0.1em this theme's eyebrows are a different object from the
   other four, on every single section. ── */
.bfy-prime.bfy-lumen .bfy-head__eyebrow, .bfy-prime.bfy-lumen .bfy-micro, .bfy-prime.bfy-lumen .bfy-pr__plan-tag,
.bfy-prime.bfy-lumen .bfy-svc__cat, .bfy-prime.bfy-lumen .bfy-pr__stat-l {
	letter-spacing: var(--p-track-micro, 0.1em);
	text-transform: none;
	font-size: var(--p-t-micro, 0.75rem);
}

/* ── HEADINGS ── */
.bfy-prime.bfy-lumen h1, .bfy-prime.bfy-lumen h2, .bfy-prime.bfy-lumen h3, .bfy-prime.bfy-lumen h4 {
	line-height: var(--p-lh-tight, 1.15);
	letter-spacing: var(--p-track-tight, -0.014em);
	font-weight: 700;
}
.bfy-prime.bfy-lumen .bfy-head__title { font-size: var(--p-t-h2, 2rem); }
.bfy-prime.bfy-lumen .bfy-head__lede { max-width: 557px; line-height: var(--p-lh, 1.6); }

/* SEPARATION: a brand edge on the leading side. Applied to every raised
   surface in the theme, not to one .motif class — the previous suite's
   signatures touched 2-5 elements out of 14+ per page, which is why 70-85%
   of any page looked identical regardless of theme. */
.bfy-prime.bfy-lumen .bfy-pr__plan, .bfy-prime.bfy-lumen .bfy-pr__contact-form,
.bfy-prime.bfy-lumen .bfy-quotes--grid .bfy-quote, .bfy-prime.bfy-lumen .bfy-quotes--rail .bfy-quote,
.bfy-prime.bfy-lumen .bfy-quotes--wall .bfy-quote,
.bfy-prime.bfy-lumen .bfy-svc--grid .bfy-svc__item, .bfy-prime.bfy-lumen .bfy-svc--rail .bfy-svc__item,
.bfy-prime.bfy-lumen .bfy-proc--steps .bfy-proc__item {
	border-left: 3px solid var(--p-brand, #1F4D3D);
}
/* v3.8.30 — CARD SHAPES ONLY. The edge used to land on every process step,
   service and testimonial whatever the shape. Only the card shapes above carry
   inner padding; on the timeline, runs, pillars, split and marginalia shapes
   the text sat flush against the rule (the "no padding" report), pillars got a
   top AND a left rule meeting in a corner, and marginalia got two rules. */
.bfy-prime.bfy-lumen .bfy-head__rule { height: 3px; width: 44px; background: var(--p-accent-ink, var(--p-brand, #1F4D3D)); }

/* COMPOSITION — Lumen is the free template and the one most people judge the
   plugin by, so it optimises for legibility over attitude: a single clear
   column of attention, headers left, nothing clever. It is also the widest
   prose measure of the five, because a general-purpose template gets the
   longest and most uneven copy. */
.bfy-prime.bfy-lumen .bfy-pr__proof { text-align: left; }
.bfy-prime.bfy-lumen .bfy-pr__stat-v { font-weight: 700; }
.bfy-prime.bfy-lumen .bfy-btn { font-weight: 600; }

/* ── TESTIMONIAL SPOTLIGHT (v3.8.16) ─────────────────────────────────────────
   The free template's signature interaction. The plain testimonial grid is
   collapsed by lumen-signature.js into one rotating spotlight (dots, arrow
   keys, swipe). These rules apply ONLY once .is-spotlight is added by that
   script — with no JS the grid renders exactly as before, every testimonial
   visible. Scoped to .bfy-lumen so the other Prime themes are untouched. */
.bfy-prime.bfy-lumen .bfy-quotes--grid.is-spotlight .bfy-quotes__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	max-width: 760px;
	margin-inline: auto;
	touch-action: pan-y;
}
.bfy-prime.bfy-lumen .bfy-quotes--grid.is-spotlight .bfy-quotes__list:focus-visible {
	outline: 3px solid var(--p-brand, #1F4D3D);
	outline-offset: 8px;
	border-radius: var(--p-radius, 12px);
}
/* All quotes share one grid cell and crossfade. The cell is as tall as the
   tallest quote, so no JS height measurement and no jump on rotate. */
.bfy-prime.bfy-lumen .is-spotlight .bfy-quote {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease;
	/* A touch more presence than a grid card: it is the whole section now. */
	font-size: var(--p-t-lead, 1.12rem);
}
.bfy-prime.bfy-lumen .is-spotlight .bfy-quote.is-active {
	opacity: 1;
	visibility: visible;
}
.bfy-prime.bfy-lumen .is-spotlight .bfy-quote .bfy-quote__text {
	font-size: var(--p-t-h2-sm, 1.35rem);
	line-height: 1.5;
}
.bfy-prime.bfy-lumen .bfy-quotes__dots {
	display: flex;
	gap: 0.55rem;
	justify-content: center;
	margin-top: 1.6rem;
}
.bfy-prime.bfy-lumen .bfy-quotes__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: var(--p-border, rgba(20,23,26,0.2));
	transition: background 0.2s ease, transform 0.2s ease;
}
.bfy-prime.bfy-lumen .bfy-quotes__dot:hover { background: var(--p-muted, #5A6470); }
.bfy-prime.bfy-lumen .bfy-quotes__dot[aria-pressed="true"] {
	background: var(--p-brand, #1F4D3D);
	transform: scale(1.3);
}
@media (prefers-reduced-motion: reduce) {
	.bfy-prime.bfy-lumen .is-spotlight .bfy-quote { transition: none; }
	.bfy-prime.bfy-lumen .bfy-quotes__dot { transition: none; }
}