/* Site Builder — Law Firm shared design tokens.
 *
 * Single source of truth for typography and brand color across every widget
 * stylesheet in this plugin. Before this file each stylesheet hardcoded its
 * own font stacks, which drifted apart over time: most used the OS-native
 * sans (`-apple-system, …`) plus Georgia, while the testimonials and contact
 * widgets had already moved on to "Playfair Display". On top of that,
 * Elementor's own global kit still defaulted to Roboto / Roboto Slab, so a
 * single page could paint four unrelated families at once.
 *
 * Everything now resolves through --sb-font-sans / --sb-font-serif, and both
 * families are real web fonts (enqueued in site-builder.php) rather than
 * OS-native stacks — so the site renders identically on macOS, Windows and
 * Android instead of silently swapping San Francisco for Segoe UI.
 */

:root {
	/* Display / editorial voice — headings, pull quotes, the logo wordmark. */
	--sb-font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
	/* Interface voice — navigation, buttons, labels, body copy. */
	--sb-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Weights are named rather than numeric at call sites so "semi-bold"
	   means one thing everywhere — the nav, the buttons and the contact
	   pills previously ranged over 600/700/800 with no rule behind it. */
	--sb-weight-regular: 400;
	--sb-weight-medium: 500;
	--sb-weight-semibold: 600;
	--sb-weight-bold: 700;

	/* Tracking scale. Small uppercase text needs open tracking to stay
	   legible; large display serif needs slightly negative tracking so it
	   doesn't read as loose. */
	--sb-tracking-tight: -0.01em;
	--sb-tracking-normal: 0;
	--sb-tracking-wide: 0.02em;
	--sb-tracking-caps: 0.14em;

	/* Page-hero headline treatment.
	   Every page opens with a hero, and each one had drifted into its own
	   settings: weights ranged 300–800, sizes 38–59px, some uppercase and
	   some sentence case, and the About and Testimonials headings were light
	   *italic* gold while the homepage was heavy upright white. Naming the
	   treatment once here is what keeps the pages opening in one voice —
	   change it in this block and every hero follows.

	   The values are the homepage hero's, which is the reference the rest
	   are being brought in line with. */
	--sb-hero-title-size: clamp(26px, 3.6vw, 46px);
	--sb-hero-title-weight: 800;
	--sb-hero-title-leading: 1.2;
	--sb-hero-title-tracking: 0.01em;
	/* The small italic label above each hero headline. Same treatment on
	   every page; only the tracking had drifted (0.14 / 0.18 / 0.2em). */
	--sb-hero-eyebrow-tracking: 0.18em;

	/* Brand palette */
	--sb-gold: #b6912c;
	--sb-gold-light: #d9c98f;
	--sb-gold-bright: #d9b654;
	--sb-ink: #0a0a0c;
}

/* Inter ships proper optical sizing and tabular figures; opting into
   contextual alternates + kerning is what separates it from a default
   fallback render, and matters most at the small sizes the header uses. */
.sb-lf-header,
.sb-lf-footer {
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* =====================================================================
   PHOTOGRAPH STACK  (shared — see SB_Law_Firm_Widget_Base::render_photo_stack)
   =====================================================================
   Three photographs on a vertical carousel: a large centre frame with a
   smaller one above and below, rotating upward so each takes a turn in the
   middle.

   Every frame is positioned and sized in percentages of the stack, and only
   `top`/`height` differ between the three slots, so a slot change animates
   as a slide and a resize at once. Give the stack's column a height (the
   usual way is `align-items: stretch` on the two-column grid, so it matches
   the text beside it) and the three frames fill it.

   Per-use knobs, set on the column:
     --sb-photostack-ratio   shape of each frame          (default 4 / 5)
     --sb-photostack-radius  corner radius                (default 12px)
   ===================================================================== */

.sb-lf-photostack {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.sb-lf-photostack-item {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	max-width: 100%;
	aspect-ratio: var(--sb-photostack-ratio, 4 / 5);
	transition: top 0.95s cubic-bezier(0.65, 0, 0.35, 1),
		height 0.95s cubic-bezier(0.65, 0, 0.35, 1),
		opacity 0.95s ease,
		filter 0.95s ease;
}

/* Slot geometry. 26.7% + 2% gap + 42.6% + 2% gap + 26.7% comes to exactly
   100%, so the three frames span the column top to bottom. */
.sb-lf-photostack-item.is-top {
	top: 0;
	height: 26.7%;
	opacity: 0.62;
	filter: saturate(0.85);
	z-index: 1;
}

.sb-lf-photostack-item.is-mid {
	top: 28.7%;
	height: 42.6%;
	opacity: 1;
	filter: none;
	/* Above the other two so the frame travelling the full height of the
	   column on its way round passes behind it rather than across it. */
	z-index: 3;
}

.sb-lf-photostack-item.is-bot {
	top: 73.3%;
	height: 26.7%;
	opacity: 0.62;
	filter: saturate(0.85);
	z-index: 1;
}

.sb-lf-photostack-frame {
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: var(--sb-photostack-radius, 12px);
	box-shadow: 0 16px 32px -16px rgba(10, 23, 48, 0.3);
}

.sb-lf-photostack-item.is-mid .sb-lf-photostack-frame {
	box-shadow: 0 30px 60px -20px rgba(10, 23, 48, 0.4);
}

.sb-lf-photostack-frame img {
	display: block;
	width: 100%;
	/* !important because Elementor's frontend reset sets `img { height: auto }`,
	   which leaves the photograph at its own intrinsic ratio and overflowing
	   the frame instead of filling it. */
	height: 100% !important;
	object-fit: cover;
	max-width: none;
}

@media (prefers-reduced-motion: reduce) {
	.sb-lf-photostack-item {
		transition: none;
	}
}

/* Elementor renders an icon control's value as <svg class="e-font-icon-svg">
   with no fill of its own, so anywhere one sits inside a coloured chip it fell
   back to black — a black speech bubble on a navy card, for instance. Every
   icon in the plugin takes the colour of the element holding it instead. The
   attribute selector catches all of them in one rule rather than needing a
   line per component. */
[class*="sb-lf-"] > svg.e-font-icon-svg,
[class*="sb-lf-"] > i > svg.e-font-icon-svg {
	fill: currentColor;
}

/* =====================================================================
   NAVY WEAVE
   =====================================================================
   The faint diagonal texture the Insights banner introduced, promoted to a
   token so every navy band shares one definition rather than each re-typing
   the gradient. Apply it as a `background-image` layer over the band's own
   `background-color` — no pseudo-element, no markup change:

       .sb-lf-something { background-image: var(--sb-weave); }

   Watch for `background:` shorthand on the same rule, which would reset the
   image; those rules set `background-color` separately instead.
   ===================================================================== */
:root {
	--sb-weave: repeating-linear-gradient(
		45deg,
		rgba(255, 255, 255, 0.022) 0,
		rgba(255, 255, 255, 0.022) 1px,
		transparent 1px,
		transparent 9px
	);
}