/* ==========================================================================
   Brolly Transportation — main.css
   One stylesheet, fifteen numbered sections, in this order. Add styles inside
   the right section; never append fixes at the bottom. Tokens live in §2 only.
   Rules (docs/site-framework.md §4):
     - never a literal where a token exists
     - !important only in §15, each with a comment
     - fix the source rule; never override your own earlier CSS
   Sections: §1 notes · §2 tokens · §3 reset · §4 base · §5 layout · §6 typography ·
   §7 buttons · §8 forms · §9 cards · §10 navigation · §11 footer · §12 page sections ·
   §13 blocks · §14 utilities · §15 third-party overrides
   ========================================================================== */


/* ==========================================================================
   §1 IMPORTS / NOTES
   Fonts are enqueued from functions.php (Google Fonts, preconnect hints), not @import.
   Base font size is 18px (§4) — a deliberate decision; every rem follows it.
   8-pt spacing scale in rem: 1 = 8px = 0.444rem at 18px.
   ========================================================================== */


/* ==========================================================================
   §2 TOKENS — the only place a raw value is written
   ========================================================================== */
:root {
	/* Brand colours */
	--bt-dark: #111318;            /* near-black from the logo; headers, footer, dark sections */
	--bt-primary: #e8650a;         /* road orange; CTAs, accents */
	--bt-primary-mid: #f2823a;     /* hover on dark */
	--bt-primary-dark: #b84e05;    /* hover on light, text-on-light accent */
	--bt-primary-light: #fdebdd;   /* tints, eyebrow backgrounds */

	/* Neutrals */
	--bt-white: #ffffff;
	--bt-off-white: #f6f6f4;       /* page background */
	--bt-surface: #ffffff;         /* cards, panels */
	--bt-surface-alt: #ecece8;     /* alternate bands */
	--bt-text: #1b1d22;
	--bt-muted: #5b6068;
	--bt-border: #d9dad6;

	/* Semantic */
	--bt-emergency: #c62828;
	--bt-success: #2e7d32;

	/* On-dark alphas */
	--bt-on-dark-100: rgba(255, 255, 255, 1);
	--bt-on-dark-72: rgba(255, 255, 255, 0.72);
	--bt-on-dark-45: rgba(255, 255, 255, 0.45);
	--bt-on-dark-28: rgba(255, 255, 255, 0.28);
	--bt-on-dark-border: rgba(255, 255, 255, 0.08);
	--bt-on-dark-surface: rgba(255, 255, 255, 0.05);

	/* Fonts */
	--bt-font-heading: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
	--bt-font-body: Barlow, system-ui, "Segoe UI", Roboto, sans-serif;
	--bt-weight-regular: 400;
	--bt-weight-semibold: 600;
	--bt-weight-heading: 800;

	/* Type scale (rem of 18px) */
	--bt-text-xs: 0.778rem;                                    /* 14px */
	--bt-text-sm: 0.889rem;                                    /* 16px */
	--bt-text-base: 1rem;                                      /* 18px */
	--bt-text-md: 1.125rem;                                    /* 20px */
	--bt-text-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);      /* lead */
	--bt-text-xl: clamp(1.556rem, 1.3rem + 1vw, 2rem);         /* h3 */
	--bt-text-2xl: clamp(2rem, 1.6rem + 1.6vw, 2.8rem);        /* h2 */
	--bt-text-3xl: clamp(2.667rem, 2rem + 2.8vw, 4.2rem);      /* h1 / display */

	/* Line-heights and tracking */
	--bt-leading-tight: 1.02;
	--bt-leading-snug: 1.2;
	--bt-leading-normal: 1.55;
	--bt-leading-relaxed: 1.7;
	--bt-tracking-tight: -0.01em;
	--bt-tracking-wide: 0.04em;
	--bt-tracking-caps: 0.06em;

	/* Spacing: 8-pt scale */
	--bt-space-1: 0.444rem;   /* 8 */
	--bt-space-2: 0.889rem;   /* 16 */
	--bt-space-3: 1.333rem;   /* 24 */
	--bt-space-4: 1.778rem;   /* 32 */
	--bt-space-5: 2.222rem;   /* 40 */
	--bt-space-6: 2.667rem;   /* 48 */
	--bt-space-8: 3.556rem;   /* 64 */
	--bt-space-10: 4.444rem;  /* 80 */
	--bt-space-12: 5.333rem;  /* 96 */
	--bt-section-y: clamp(var(--bt-space-8), 7vw, var(--bt-space-12));
	--bt-section-y-sm: clamp(var(--bt-space-5), 4vw, var(--bt-space-8));

	/* Containers */
	--bt-container-narrow: 42rem;   /* 756px: prose */
	--bt-container: 66rem;          /* 1188px: default */
	--bt-container-wide: 80rem;     /* 1440px: full bands */
	--bt-gutter: clamp(1rem, 4vw, 2rem);

	/* Radii */
	--bt-radius-sm: 4px;
	--bt-radius-md: 8px;
	--bt-radius-lg: 16px;
	--bt-radius-pill: 999px;

	/* Shadows */
	--bt-shadow-sm: 0 1px 2px rgba(17, 19, 24, 0.08);
	--bt-shadow-md: 0 6px 18px rgba(17, 19, 24, 0.10);
	--bt-shadow-lg: 0 18px 44px rgba(17, 19, 24, 0.16);

	/* Motion */
	--bt-transition-fast: 150ms ease;
	--bt-transition: 250ms ease;

	/* Z-index */
	--bt-z-header: 100;
	--bt-z-drawer: 200;
	--bt-z-modal: 300;
	--bt-z-toast: 400;

	/* Component sizes */
	--bt-header-height: 4.5rem;
	--bt-nav-breakpoint: 60em;   /* 960px at 16px media query base; nav.js mirrors this */
}


/* ==========================================================================
   §3 RESET
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	min-height: 100dvh;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

ul[class],
ol[class] {
	list-style: none;
	padding: 0;
}

table {
	border-collapse: collapse;
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
		transition-duration: 0.01ms;
	}
}


/* ==========================================================================
   §4 BASE — element defaults
   ========================================================================== */
html {
	font-size: 18px; /* DELIBERATE. See CLAUDE.md "Non-negotiable build rules". */
}

body {
	font-family: var(--bt-font-body);
	font-weight: var(--bt-weight-regular);
	font-size: var(--bt-text-base);
	line-height: var(--bt-leading-normal);
	color: var(--bt-text);
	background: var(--bt-off-white);
	overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--bt-font-heading);
	font-weight: var(--bt-weight-heading);
	font-style: italic;
	text-transform: uppercase;
	line-height: var(--bt-leading-tight);
	letter-spacing: var(--bt-tracking-tight);
	color: var(--bt-dark);
	text-wrap: balance;
}

h1 { font-size: var(--bt-text-3xl); }
h2 { font-size: var(--bt-text-2xl); }
h3 { font-size: var(--bt-text-xl); }
h4 { font-size: var(--bt-text-md); font-family: var(--bt-font-body); font-style: normal; text-transform: none; letter-spacing: 0; font-weight: var(--bt-weight-semibold); }
h5,
h6 { font-size: var(--bt-text-base); font-family: var(--bt-font-body); font-style: normal; text-transform: none; letter-spacing: 0; font-weight: var(--bt-weight-semibold); }

p,
li {
	text-wrap: pretty;
}

a {
	color: var(--bt-primary-dark);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: color var(--bt-transition-fast);
}

a:hover {
	color: var(--bt-primary);
}

strong,
b {
	font-weight: var(--bt-weight-semibold);
}

small {
	font-size: var(--bt-text-sm);
}

hr {
	border: 0;
	border-top: 1px solid var(--bt-border);
	margin-block: var(--bt-space-4);
}

:focus-visible {
	outline: 3px solid var(--bt-primary);
	outline-offset: 2px;
}

::selection {
	background: var(--bt-primary-light);
	color: var(--bt-dark);
}

/* WordPress flow layout adds a block gap between <main>'s children; coloured sections
   would otherwise show a stripe of page background between them. */
#bt-main > * {
	margin-block: 0;
}


/* ==========================================================================
   §5 LAYOUT — containers, sections, grids, stacks
   ========================================================================== */
.bt-container {
	width: min(100% - 2 * var(--bt-gutter), var(--bt-container));
	margin-inline: auto;
}

.bt-container--narrow {
	max-width: var(--bt-container-narrow);
}

.bt-container--wide {
	width: min(100% - 2 * var(--bt-gutter), var(--bt-container-wide));
}

.bt-section {
	padding-block: var(--bt-section-y);
}

.bt-section--sm {
	padding-block: var(--bt-section-y-sm);
}

.bt-section--alt {
	background: var(--bt-surface-alt);
}

.bt-section--dark {
	background: var(--bt-dark);
	color: var(--bt-on-dark-72);
}

.bt-section--dark :is(h1, h2, h3) {
	color: var(--bt-on-dark-100);
}

.bt-section--dark a {
	color: var(--bt-on-dark-100);
}

.bt-section--dark a:hover {
	color: var(--bt-primary-mid);
}

.bt-section--primary {
	background: var(--bt-primary);
	color: var(--bt-dark);
}

.bt-grid {
	display: grid;
	gap: var(--bt-space-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.bt-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.bt-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.bt-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }

.bt-split {
	display: grid;
	gap: var(--bt-space-6);
	align-items: center;
}

@media (min-width: 48em) {
	.bt-split {
		grid-template-columns: 1fr 1fr;
	}

	.bt-split--sidebar {
		grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
		align-items: start;
	}
}

.bt-stack > * + * {
	margin-block-start: var(--bt-space-3);
}

.bt-stack--sm > * + * {
	margin-block-start: var(--bt-space-2);
}

.bt-stack--lg > * + * {
	margin-block-start: var(--bt-space-5);
}

.bt-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bt-space-2);
	align-items: center;
}

.bt-prose > * + * {
	margin-block-start: var(--bt-space-3);
}

.bt-prose :is(h2, h3) {
	margin-block-start: var(--bt-space-5);
}

.bt-prose :is(ul, ol) {
	padding-inline-start: 1.25em;
}

.bt-prose li + li {
	margin-block-start: var(--bt-space-1);
}


/* ==========================================================================
   §6 TYPOGRAPHY — text roles beyond element defaults
   ========================================================================== */
.bt-eyebrow {
	display: inline-block;
	font-family: var(--bt-font-body);
	font-weight: var(--bt-weight-semibold);
	font-size: var(--bt-text-xs);
	letter-spacing: var(--bt-tracking-caps);
	text-transform: uppercase;
	color: var(--bt-primary-dark);
}

.bt-section--dark .bt-eyebrow {
	color: var(--bt-primary-mid);
}

.bt-lead {
	font-size: var(--bt-text-lg);
	line-height: var(--bt-leading-snug);
	color: var(--bt-muted);
}

.bt-section--dark .bt-lead {
	color: var(--bt-on-dark-72);
}

.bt-display {
	font-size: var(--bt-text-3xl);
}

.bt-accent {
	color: var(--bt-primary);
}

.bt-muted {
	color: var(--bt-muted);
}


/* ==========================================================================
   §7 BUTTONS
   ========================================================================== */
.bt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bt-space-1);
	min-height: 3rem;
	padding: var(--bt-space-1) var(--bt-space-3);
	font-family: var(--bt-font-heading);
	font-weight: var(--bt-weight-heading);
	font-style: italic;
	font-size: var(--bt-text-md);
	letter-spacing: var(--bt-tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	border: 2px solid transparent;
	border-radius: var(--bt-radius-sm);
	transition: background-color var(--bt-transition-fast), color var(--bt-transition-fast), border-color var(--bt-transition-fast);
}

.bt-btn--primary {
	background: var(--bt-primary);
	color: var(--bt-dark);
}

.bt-btn--primary:hover {
	background: var(--bt-primary-dark);
	color: var(--bt-white);
}

.bt-btn--dark {
	background: var(--bt-dark);
	color: var(--bt-white);
}

.bt-btn--dark:hover {
	background: var(--bt-primary);
	color: var(--bt-dark);
}

.bt-btn--outline {
	border-color: currentColor;
	color: var(--bt-dark);
	background: transparent;
}

.bt-btn--outline:hover {
	background: var(--bt-dark);
	color: var(--bt-white);
}

.bt-section--dark .bt-btn--outline {
	color: var(--bt-white);
}

.bt-section--dark .bt-btn--outline:hover {
	background: var(--bt-white);
	color: var(--bt-dark);
}


/* ==========================================================================
   §8 FORMS — inputs, Gravity Forms base
   ========================================================================== */


/* ==========================================================================
   §9 CARDS
   ========================================================================== */


/* ==========================================================================
   §10 NAVIGATION — header, primary nav, mobile drawer
   Breakpoint 60em (960px) is mirrored by DRAWER_MAX in assets/js/nav.js.
   ========================================================================== */
.bt-header {
	position: sticky;
	top: 0;
	z-index: var(--bt-z-header);
	background: var(--bt-dark);
	color: var(--bt-white);
	border-bottom: 1px solid var(--bt-on-dark-border);
}

.bt-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bt-space-3);
	min-height: var(--bt-header-height);
}

.bt-header__brand {
	font-family: var(--bt-font-heading);
	font-weight: var(--bt-weight-heading);
	font-style: italic;
	font-size: var(--bt-text-xl);
	text-transform: uppercase;
	letter-spacing: var(--bt-tracking-tight);
	color: var(--bt-white);
	text-decoration: none;
	line-height: 1;
}

.bt-header__brand:hover {
	color: var(--bt-primary-mid);
}

.bt-header__brand img {
	height: 2.5rem;
	width: auto;
}

.bt-nav__list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.bt-nav__list a {
	display: block;
	padding: var(--bt-space-2) 0;
	font-weight: var(--bt-weight-semibold);
	color: var(--bt-white);
	text-decoration: none;
}

.bt-nav__list a:hover {
	color: var(--bt-primary-mid);
}

.bt-nav__sub a {
	padding-inline-start: var(--bt-space-3);
	font-weight: var(--bt-weight-regular);
	color: var(--bt-on-dark-72);
}

.bt-nav__cta {
	display: flex;
	flex-direction: column;
	gap: var(--bt-space-2);
	padding-block: var(--bt-space-3);
}

.bt-nav__phone {
	font-family: var(--bt-font-heading);
	font-weight: var(--bt-weight-heading);
	font-style: italic;
	font-size: var(--bt-text-md);
	color: var(--bt-white);
	text-decoration: none;
	white-space: nowrap;
}

/* Toggle (drawer only) */
.bt-nav-toggle {
	position: relative;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--bt-radius-sm);
	color: var(--bt-white);
}

.bt-nav-toggle__bar,
.bt-nav-toggle__bar::before,
.bt-nav-toggle__bar::after {
	position: absolute;
	left: 0.625rem;
	width: 1.5rem;
	height: 2px;
	background: currentColor;
	transition: transform var(--bt-transition-fast), opacity var(--bt-transition-fast);
}

.bt-nav-toggle__bar {
	top: calc(50% - 1px);
}

.bt-nav-toggle__bar::before,
.bt-nav-toggle__bar::after {
	content: "";
	left: 0;
}

.bt-nav-toggle__bar::before { top: -0.5rem; }
.bt-nav-toggle__bar::after { top: 0.5rem; }

[aria-expanded="true"] .bt-nav-toggle__bar { background: transparent; }
[aria-expanded="true"] .bt-nav-toggle__bar::before { transform: translateY(0.5rem) rotate(45deg); }
[aria-expanded="true"] .bt-nav-toggle__bar::after { transform: translateY(-0.5rem) rotate(-45deg); }

/* Drawer (below the breakpoint) */
@media (max-width: 59.99em) {
	.bt-nav {
		position: fixed;
		inset: var(--bt-header-height) 0 0 0;
		z-index: var(--bt-z-drawer);
		overflow-y: auto;
		padding: var(--bt-space-3) var(--bt-gutter) var(--bt-space-6);
		background: var(--bt-dark);
		transform: translateX(100%);
		transition: transform var(--bt-transition);
	}

	.bt-nav-open .bt-nav {
		transform: none;
	}

	.bt-nav-open {
		overflow: hidden;
	}

	.bt-nav__list > li + li {
		border-top: 1px solid var(--bt-on-dark-border);
	}
}

/* Desktop bar */
@media (min-width: 60em) {
	.bt-nav-toggle {
		display: none;
	}

	.bt-nav {
		display: flex;
		align-items: center;
		gap: var(--bt-space-4);
	}

	.bt-nav__list {
		flex-direction: row;
		gap: var(--bt-space-3);
	}

	.bt-nav__list > li {
		position: relative;
	}

	.bt-nav__list a {
		padding: var(--bt-space-1) 0;
	}

	.bt-nav__sub {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 14rem;
		padding: var(--bt-space-1) 0;
		background: var(--bt-dark);
		border: 1px solid var(--bt-on-dark-border);
		border-radius: var(--bt-radius-sm);
		box-shadow: var(--bt-shadow-md);
		opacity: 0;
		visibility: hidden;
		transform: translateY(0.5rem);
		transition: opacity var(--bt-transition-fast), transform var(--bt-transition-fast), visibility 0s linear var(--bt-transition-fast);
	}

	.bt-nav__item--has-children:is(:hover, :focus-within) .bt-nav__sub {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}

	.bt-nav__sub a {
		padding: var(--bt-space-1) var(--bt-space-2);
		white-space: nowrap;
	}

	.bt-nav__cta {
		flex-direction: row;
		align-items: center;
		padding-block: 0;
	}
}


/* ==========================================================================
   §11 FOOTER
   ========================================================================== */
.bt-footer {
	background: var(--bt-dark);
	color: var(--bt-on-dark-72);
	padding-block: var(--bt-section-y-sm);
	font-size: var(--bt-text-sm);
}

.bt-footer a {
	color: var(--bt-on-dark-100);
	text-decoration: none;
}

.bt-footer a:hover {
	color: var(--bt-primary-mid);
}

.bt-footer__grid {
	display: grid;
	gap: var(--bt-space-5);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.bt-footer__heading {
	font-size: var(--bt-text-md);
	color: var(--bt-on-dark-100);
	margin-block-end: var(--bt-space-2);
}

.bt-footer__list > li + li {
	margin-block-start: var(--bt-space-1);
}

.bt-footer__legal {
	margin-block-start: var(--bt-space-5);
	padding-block-start: var(--bt-space-3);
	border-top: 1px solid var(--bt-on-dark-border);
	color: var(--bt-on-dark-45);
	font-size: var(--bt-text-xs);
	display: flex;
	flex-wrap: wrap;
	gap: var(--bt-space-2) var(--bt-space-4);
	justify-content: space-between;
}


/* ==========================================================================
   §12 PAGE SECTIONS — hero, bands, CTA strips
   ========================================================================== */
.bt-hero {
	background: var(--bt-dark);
	color: var(--bt-on-dark-72);
	padding-block: var(--bt-section-y);
}

.bt-hero__title {
	color: var(--bt-on-dark-100);
	max-width: 22ch;
}

.bt-hero__lead {
	margin-block-start: var(--bt-space-3);
	max-width: 60ch;
	font-size: var(--bt-text-lg);
	line-height: var(--bt-leading-snug);
}

.bt-hero__actions {
	margin-block-start: var(--bt-space-5);
}


/* ==========================================================================
   §13 BLOCKS — per-block styles (one sub-heading per block)
   ========================================================================== */

/* bt/error-404 */
.bt-404 {
	text-align: center;
}

.bt-404 .bt-display {
	color: var(--bt-primary);
}


/* ==========================================================================
   §14 UTILITIES
   ========================================================================== */
.bt-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.bt-text-center { text-align: center; }
.bt-mt-0 { margin-block-start: 0; }


/* ==========================================================================
   §15 THIRD-PARTY OVERRIDES — the only section allowed !important, each with a comment
   ========================================================================== */