/* ==========================================================================
   Brandroot Motion — global design system
   --------------------------------------------------------------------------
   Elementor Site Settings remain the source of truth for typography and colour
   on widgets. Everything here is either:
     • a token (CSS variable) mirrored in Site Settings, or
     • a zero-specificity default wrapped in :where(), so any value you set in
       Elementor always wins, or
     • structural layout that the motion system depends on (clearly marked).
   ========================================================================== */

:root {
	/* Palette — mirror these in Elementor → Site Settings → Global Colors */
	--br-bg: #ecebe6;            /* Plaster: page background */
	--br-surface: #f6f5f2;       /* Lifted surfaces, cards */
	--br-text: #1d211f;          /* Graphite: primary text (13.6:1 on plaster) */
	--br-muted: #60645c;         /* Stone: secondary text (5.1:1 on plaster) */
	--br-accent: #34514a;        /* Patina: links, focus, progress (7.3:1 on plaster) */
	--br-dark: #151816;          /* Charcoal: dark sections, footer */
	--br-on-dark: #eeede8;       /* Text on charcoal (15.3:1) */
	--br-on-dark-muted: #a9aca5; /* Secondary text on charcoal (7.8:1) */
	--br-border: rgba(29, 33, 31, 0.14);
	--br-border-on-dark: rgba(238, 237, 232, 0.16);

	/* Type — mirror in Site Settings → Global Fonts (Primary = display, Text = body) */
	--br-font-display: "Bodoni Moda", "Bodoni 72", "Didot", Georgia, serif;
	--br-font-body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	--br-fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--br-fs-small: 0.875rem;
	--br-fs-h3: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
	--br-fs-h2: clamp(2.25rem, 1.5rem + 3vw, 4.5rem);
	--br-fs-display: clamp(3rem, 1.2rem + 7.5vw, 9.5rem);
	--br-lh-tight: 0.98;
	--br-lh-body: 1.6;

	/* Shape */
	--br-radius: 4px;
	--br-radius-lg: 14px;

	/* Spacing scale */
	--br-space-xs: 0.5rem;
	--br-space-sm: 1rem;
	--br-space-md: 2rem;
	--br-space-lg: clamp(2.5rem, 5vw, 4.5rem);
	--br-space-xl: clamp(3.75rem, 9vw, 11.25rem);
	--br-section-y: 150px;      /* overridden per breakpoint in responsive.css */
	--br-gutter: clamp(20px, 4vw, 64px);
	--br-max: 1400px;

	/* Motion */
	--br-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--br-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--br-dur: 0.6s;

	/* Layout values written by JS */
	--br-header-h: 88px;
}

/* --------------------------------------------------------------------------
   Base (zero specificity — Elementor / Hello styles override freely)
   -------------------------------------------------------------------------- */
:where(html) {
	scroll-padding-top: calc(var(--br-header-h) + 16px);
	-webkit-text-size-adjust: 100%;
}

:where(body.br-theme) {
	background-color: var(--br-bg);
	color: var(--br-text);
	font-family: var(--br-font-body);
	font-size: var(--br-fs-body);
	line-height: var(--br-lh-body);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Clip, not hide: prevents sideways scroll from any stray transform without creating a scroll
   container (which would break position: sticky). */
body.br-theme {
	overflow-x: clip;
}

/* Smooth anchor scrolling only when the motion engine is NOT running: CSS smooth scrolling
   fights ScrollTrigger's own scroll restoration during refreshes (pins can land in the wrong place). */
@media (prefers-reduced-motion: no-preference) {
	:where(html:not(.br-motion)) {
		scroll-behavior: smooth;
	}
}

::selection {
	background: var(--br-accent);
	color: var(--br-on-dark);
}

:where(img) {
	max-width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   Focus — always visible for keyboard users, never for mouse clicks
   -------------------------------------------------------------------------- */
.br-theme :focus-visible {
	outline: 2px solid var(--br-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

.br-theme .br-dark :focus-visible,
.br-theme .br-hero :focus-visible,
.br-theme .br-final-cta :focus-visible,
.br-theme .br-footer :focus-visible,
.br-theme .br-header:not(.is-scrolled) :focus-visible {
	outline-color: var(--br-on-dark);
}

/* Hello's skip link, styled to match */
.br-theme .skip-link.screen-reader-text:focus {
	background: var(--br-dark);
	color: var(--br-on-dark);
	font-family: var(--br-font-body);
	padding: 14px 20px;
	border-radius: var(--br-radius);
	z-index: 100000;
}

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

/* --------------------------------------------------------------------------
   Utility classes (opt-in via Elementor → Advanced → CSS Classes)
   -------------------------------------------------------------------------- */
:where(.br-dark) {
	background-color: var(--br-dark);
	color: var(--br-on-dark);
}

:where(.br-dark) :where(.elementor-heading-title, p) {
	color: inherit;
}

:where(.br-section) {
	padding-block: var(--br-section-y);
	padding-inline: var(--br-gutter);
}

:where(.br-display) .elementor-heading-title,
:where(.br-display.elementor-heading-title) {
	font-family: var(--br-font-display);
	font-size: var(--br-fs-display);
	font-weight: 400;
	line-height: var(--br-lh-tight);
	letter-spacing: -0.02em;
}

:where(.br-muted) {
	color: var(--br-muted);
}

:where(.br-rule) {
	border-top: 1px solid var(--br-border);
}

/* Arrow CTA: button text slides, arrow icon nudges on hover */
.br-arrow-link .elementor-button-icon,
.br-arrow-link .elementor-icon {
	transition: transform var(--br-dur) var(--br-ease-out);
}

.br-arrow-link:hover .elementor-button-icon,
.br-arrow-link:hover .elementor-icon,
.br-arrow-link a:focus-visible .elementor-button-icon {
	transform: translate(4px, -4px);
}

/* Image hover zoom (pairs with the "View" cursor) */
.br-hover-image {
	overflow: hidden;
}

.br-hover-image img {
	transition: transform 1.1s var(--br-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.br-hover-image:hover img {
		transform: scale(1.05);
	}
}

/* ==========================================================================
   Header (Elementor Pro Theme Builder → Header, outer container class: br-header)
   ========================================================================== */

/*
 * Elementor Pro renders the header template inside <header class="elementor-location-header">.
 * Sticky/fixed positioning must live on that wrapper (sticky on the inner container would have no
 * room to move). components.js also tags it .br-header-host for browsers without :has().
 */
.elementor-location-header:has(.br-header),
.br-header-host {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 900;
	width: 100%;
}

/* Pages that open with a .br-hero: the header floats over it. */
html.br-has-hero .br-header-host,
body:has(.br-hero) .elementor-location-header:has(.br-header) {
	position: fixed;
	left: 0;
	right: 0;
}

.br-header {
	position: relative;
	width: 100%;
	background-color: var(--br-bg);
	transition:
		background-color 0.5s var(--br-ease-out),
		padding 0.5s var(--br-ease-out),
		box-shadow 0.5s var(--br-ease-out),
		-webkit-backdrop-filter 0.5s var(--br-ease-out),
		backdrop-filter 0.5s var(--br-ease-out);
}

html.br-has-hero .br-header,
body:has(.br-hero) .br-header {
	background-color: transparent;
	color: var(--br-on-dark);
}

html.br-has-hero .br-header:not(.is-scrolled) :is(.elementor-heading-title, .elementor-item, .elementor-nav-menu a, .elementor-icon, .elementor-menu-toggle),
body:has(.br-hero) .br-header:not(.is-scrolled) :is(.elementor-heading-title, .elementor-item, .elementor-nav-menu a, .elementor-icon, .elementor-menu-toggle) {
	color: var(--br-on-dark);
	fill: var(--br-on-dark);
}

/* Optional: a light-on-dark logo can be swapped automatically.
   Put two Site Logo / Image widgets in the header with classes br-logo-light and br-logo-dark. */
.br-header .br-logo-light {
	display: none;
}

html.br-has-hero .br-header:not(.is-scrolled) .br-logo-light,
body:has(.br-hero) .br-header:not(.is-scrolled) .br-logo-light {
	display: block;
}

html.br-has-hero .br-header:not(.is-scrolled) .br-logo-dark,
body:has(.br-hero) .br-header:not(.is-scrolled) .br-logo-dark {
	display: none;
}

/* Scrolled: subtle background, blur, reduced height */
.br-header.is-scrolled {
	background-color: rgba(236, 235, 230, 0.78);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	backdrop-filter: saturate(140%) blur(14px);
	box-shadow: 0 1px 0 var(--br-border);
	color: var(--br-text);
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.br-header.is-scrolled {
		background-color: rgba(236, 235, 230, 0.97);
	}
}

.br-header .elementor-widget-theme-site-logo img,
.br-header .elementor-widget-image img {
	transition: max-height 0.5s var(--br-ease-out), transform 0.5s var(--br-ease-out);
}

.br-header.is-scrolled .elementor-widget-theme-site-logo img,
.br-header.is-scrolled .br-logo img {
	transform: scale(0.86);
	transform-origin: left center;
}

/* Reading progress line (created by components.js) */
.br-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--br-accent);
	transform: scaleX(0);
	transform-origin: 0 50%;
	pointer-events: none;
	will-change: transform;
}

html.br-has-hero .br-header:not(.is-scrolled) .br-progress {
	background: var(--br-on-dark);
	opacity: 0.6;
}

/* Nav menu polish (Elementor Pro Nav Menu widget) */
.br-header .elementor-nav-menu--main .elementor-item {
	position: relative;
}

.br-header .elementor-nav-menu--main .elementor-item::after {
	content: "";
	position: absolute;
	left: var(--nav-menu-padding-horizontal, 15px);
	right: var(--nav-menu-padding-horizontal, 15px);
	bottom: 6px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform 0.6s var(--br-ease-out);
}

.br-header .elementor-nav-menu--main .elementor-item:hover::after,
.br-header .elementor-nav-menu--main .elementor-item:focus-visible::after,
.br-header .elementor-nav-menu--main .elementor-item-active::after {
	transform: scaleX(1);
	transform-origin: 0 50%;
}

/* Mobile dropdown: full-width editorial panel instead of a boxed list */
.br-header .elementor-nav-menu--dropdown.elementor-nav-menu__container {
	background-color: var(--br-dark);
	border-top: 1px solid var(--br-border-on-dark);
}

.br-header .elementor-nav-menu--dropdown .elementor-item {
	color: var(--br-on-dark) !important;
	font-family: var(--br-font-display);
	font-size: clamp(1.5rem, 5vw, 2.25rem);
	padding-block: 14px;
	justify-content: flex-start;
}

@media (prefers-reduced-motion: no-preference) {
	.br-header .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown .elementor-item {
		animation: br-menu-in 0.6s var(--br-ease-out) both;
	}

	.br-header .elementor-nav-menu--dropdown li:nth-child(2) .elementor-item { animation-delay: 0.04s; }
	.br-header .elementor-nav-menu--dropdown li:nth-child(3) .elementor-item { animation-delay: 0.08s; }
	.br-header .elementor-nav-menu--dropdown li:nth-child(4) .elementor-item { animation-delay: 0.12s; }
	.br-header .elementor-nav-menu--dropdown li:nth-child(5) .elementor-item { animation-delay: 0.16s; }
	.br-header .elementor-nav-menu--dropdown li:nth-child(n+6) .elementor-item { animation-delay: 0.2s; }
}

@keyframes br-menu-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   Footer (Theme Builder → Footer, outer container class: br-footer)
   ========================================================================== */
:where(.br-footer) {
	background-color: var(--br-dark);
	color: var(--br-on-dark);
}

:where(.br-footer) :where(a) {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.6s var(--br-ease-out), color 0.3s;
}

:where(.br-footer) :where(a:hover, a:focus-visible) {
	background-size: 100% 1px;
}

:where(.br-footer) :where(.br-muted, .br-footer-legal) {
	color: var(--br-on-dark-muted);
}

:where(.br-footer-wordmark) .elementor-heading-title {
	font-family: var(--br-font-display);
	font-size: clamp(3rem, 12vw, 12rem);
	line-height: 0.9;
	letter-spacing: -0.03em;
	color: var(--br-on-dark);
}

/* --------------------------------------------------------------------------
   Small utilities used by the homepage templates (all overridable in Elementor)
   -------------------------------------------------------------------------- */
/* Eyebrow / kicker label above headings */
:where(.br-eyebrow) .elementor-heading-title,
:where(.br-eyebrow) p {
	font-family: var(--br-font-body);
	font-size: var(--br-fs-small);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--br-muted);
}

:where(.br-hero, .br-dark, .br-testimonial, .br-final-cta, .br-footer, .br-expand) :where(.br-eyebrow) .elementor-heading-title {
	color: var(--br-on-dark-muted);
}

/* Outline button (secondary action) */
:where(.br-button-ghost) .elementor-button {
	background-color: transparent;
	color: currentColor;
	border: 1px solid currentColor;
}

/* Light button for dark/photographic backgrounds */
:where(.br-button-light) .elementor-button {
	background-color: var(--br-on-dark);
	color: var(--br-text);
}

/* Hero content column: keeps copy readable over the photograph */
.br-hero-content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: calc(var(--br-max) + 2 * var(--br-gutter));
	margin-inline: auto;
}

:where(.br-hero-copy) p {
	margin: 0;
}