/**
 * BRO Electrical — Global Design System Foundations
 * CSS custom properties + minimal base layer.
 * Premium / architectural direction: deep charcoal, warm off-white,
 * white, BRO orange used selectively, burnt orange as secondary accent.
 */

:root {
	/* Colour */
	--bro-charcoal: #14171a;
	--bro-charcoal-soft: #1e2226;
	--bro-offwhite: #f5f2ec;
	--bro-white: #ffffff;
	--bro-orange: #ff5a1f;
	--bro-orange-burnt: #a8451f;

	--bro-text-on-dark: var(--bro-offwhite);
	--bro-text-muted-on-dark: rgba(245, 242, 236, 0.68);
	--bro-text-on-light: var(--bro-charcoal);
	--bro-text-muted-on-light: #585d63;
	--bro-border-on-dark: rgba(245, 242, 236, 0.18);
	--bro-border-on-light: rgba(20, 23, 26, 0.12);

	/* Layout */
	--bro-max-width: 1320px;
	--bro-gutter: clamp(1.25rem, 4vw, 3rem);
	--bro-section-spacing: clamp(4rem, 8vw, 8rem);
	--bro-header-height: 84px;

	/* Radius — restrained, near-sharp, architectural (never pill/rounded) */
	--bro-radius-sm: 2px;
	--bro-radius: 4px;

	/* Typography */
	--bro-font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--bro-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--bro-text-hero: clamp(2.75rem, 5.6vw, 5.15rem);
	--bro-text-h1: clamp(2.25rem, 4.5vw, 4rem);
	--bro-text-h2: clamp(1.75rem, 3vw, 2.75rem);
	--bro-text-h3: clamp(1.25rem, 2vw, 1.75rem);
	--bro-text-lg: 1.25rem;
	--bro-text-base: 1rem;
	--bro-text-sm: 0.875rem;
	--bro-text-xs: 0.75rem;
	--bro-tracking-label: 0.14em;

	/* Motion — premium, restrained */
	--bro-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--bro-transition-fast: 150ms var(--bro-ease);
	--bro-transition-base: 280ms var(--bro-ease);
	--bro-transition-slow: 520ms var(--bro-ease);

	/* Slow, deliberate "opening up" ease used only for the project-photography
	   zoom-reveal (see .bro-reveal-zoom in what-we-do.css) — smoother
	   deceleration than --bro-ease, suited to a 1.2s+ duration. */
	--bro-ease-photo-zoom: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Minimal base layer */
.bro-site *,
.bro-site *::before,
.bro-site *::after {
	box-sizing: border-box;
}

.bro-site {
	font-family: var(--bro-font-body);
}

.bro-site h1,
.bro-site h2,
.bro-site h3,
.bro-site .bro-label {
	font-family: var(--bro-font-display);
}

/* Shared section container — reused across homepage sections */
.bro-container {
	max-width: var(--bro-max-width);
	margin: 0 auto;
	padding: 0 var(--bro-gutter);
}

.bro-eyebrow {
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-xs);
	font-weight: 700;
	letter-spacing: var(--bro-tracking-label);
	text-transform: uppercase;
	color: var(--bro-orange);
	margin: 0 0 1rem;
}

.bro-skip-link.skip-link {
	position: absolute;
	top: -48px;
	left: 0;
	z-index: 100;
	background: var(--bro-orange);
	color: var(--bro-charcoal);
	padding: 0.75em 1.25em;
	font-size: var(--bro-text-sm);
	font-weight: 700;
	text-decoration: none;
	transition: top var(--bro-transition-fast);
}

.bro-skip-link.skip-link:focus {
	top: 0;
}

/* Shared button-arrow icon — a global base size, since the inline SVGs
   markup with no width/height attributes (sized entirely via CSS). Every
   individual usage across the site previously relied on a page-scoped
   rule (e.g. `.bro-cu-cta .bro-icon-arrow`) to size it down from the
   browser's unconstrained replaced-element default — anywhere that
   scoping was missing (every hero `__actions` row site-wide, found via
   the EV Charger Installation build) rendered the icon at ~150-200px
   instead of 14px. This base rule fixes every such spot at once; the
   existing per-section rules (mostly re-declaring the same 14px, plus a
   hover `transform: translateX()`) still apply on top and are unaffected. */
.bro-icon-arrow {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

/* Shared button */
.bro-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-sm);
	font-weight: 700;
	letter-spacing: var(--bro-tracking-label);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	padding: 0.95em 1.75em;
	border-radius: var(--bro-radius-sm);
	border: 1px solid transparent;
	transition: background-color var(--bro-transition-base), border-color var(--bro-transition-base), color var(--bro-transition-base), transform var(--bro-transition-fast);
}

.bro-btn--primary {
	background: var(--bro-orange);
	color: var(--bro-charcoal);
	border-color: var(--bro-orange);
}

.bro-btn--primary:hover,
.bro-btn--primary:focus-visible {
	background: var(--bro-orange-burnt);
	border-color: var(--bro-orange-burnt);
	color: var(--bro-white);
	transform: translateY(-1px);
}

.bro-btn--ghost {
	background: transparent;
	color: var(--bro-white);
	border-color: rgba(245, 242, 236, 0.5);
}

.bro-btn--ghost:hover,
.bro-btn--ghost:focus-visible {
	background: rgba(245, 242, 236, 0.1);
	border-color: var(--bro-white);
	transform: translateY(-1px);
}

.bro-btn--sm {
	padding: 0.7em 1.4em;
	font-size: var(--bro-text-xs);
}

.bro-site a.bro-btn:focus-visible,
.bro-site button:focus-visible,
.bro-site a:focus-visible {
	outline: 2px solid var(--bro-orange);
	outline-offset: 3px;
}