/* ==========================================================================
   Ballistic Uniforms — main.css
   Tokens, base elements, layout, shared components.
   Loaded on every front-end view and in the block editor canvas.

   Token source: wp-content/design-reference/*.dc.html (values extracted
   verbatim). Provisional values are marked PROVISIONAL and listed in
   docs/DESIGN_TEMPLATE_MAP.md §2.

   Breakpoints (CSS custom properties cannot be used in @media):
     desktop  >= 1000px   (design: isDesktop = innerWidth >= 1000)
     mobile   <= 999.98px
     narrow   <= 639.98px (design: < 640)
     single   <= 419.98px (design: < 420, single-column grids)
   ========================================================================== */

:root {
	/* Brand */
	--bu-color-accent: #C4161C;          /* PROVISIONAL: logo colour not yet confirmed */
	--bu-color-accent-hover: #A5111A;
	--bu-color-accent-tint: #F2B8BB;     /* accent text/hover on dark surfaces */

	/* Text */
	--bu-color-ink: #1F2124;             /* body text, dark buttons */
	--bu-color-heading: #141516;
	--bu-color-text: #3A3D43;            /* long-form copy */
	--bu-color-text-2: #4B4E55;
	--bu-color-text-3: #5A5D64;
	--bu-color-muted: #6B6E75;           /* meta, labels, icons */

	/* Surfaces & lines */
	--bu-color-white: #FFFFFF;
	--bu-color-surface: #F7F6F3;
	--bu-color-surface-2: #FAF9F7;
	--bu-color-border: #E3DFD8;
	--bu-color-border-strong: #DDD9D2;
	--bu-color-border-input: #CFCAC2;
	--bu-color-hairline: #EEEBE5;
	--bu-color-hairline-2: #F1EEE8;

	/* Dark surfaces (footer) */
	--bu-color-footer: #0F1011;
	--bu-color-panel-dark: #2B2D31;
	--bu-color-on-dark: #E8E5DF;
	--bu-color-on-dark-2: #CFCAC2;
	--bu-color-on-dark-muted: #9A9DA4;
	--bu-color-on-dark-soft: #B5B8BE;    /* notes on dark bands (homepage) */
	--bu-color-border-on-dark: #3A3D43;  /* rules inside dark panels */
	--bu-color-border-on-dark-2: #4B4E55; /* controls on dark panels */

	/* Notices (design "awaiting/demo" badge colours) */
	--bu-color-notice-bg: #FFF4E5;
	--bu-color-notice-border: #F1C98A;
	--bu-color-notice-text: #6B4A0E;

	/* Font families (files self-hosted via theme.json fontFace) */
	--bu-font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--bu-font-heading: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;

	/* Font weights (only these are loaded) */
	--bu-weight-regular: 400;
	--bu-weight-medium: 500;
	--bu-weight-semibold: 600;
	--bu-weight-bold: 700;

	/* Type scale */
	--bu-text-xs: 12px;                  /* eyebrow / column labels */
	--bu-text-sm: 13px;
	--bu-text-meta: 14px;                /* captions, breadcrumbs */
	--bu-text-ui: 15px;                  /* navigation, controls */
	--bu-text-base: 16px;
	--bu-text-body: 17px;                /* long-form content */
	--bu-text-lead: clamp(17px, 1.3vw, 20px);
	--bu-text-h4: 18px;
	--bu-text-h3: 24px;
	--bu-text-h2: clamp(30px, 3vw, 40px);
	--bu-text-h1: clamp(40px, 4.5vw, 64px);
	--bu-text-display: clamp(50px, 5.6vw, 84px);
	--bu-text-display-mobile: clamp(40px, 11vw, 56px);
	/* Composed pages (Phase 5: homepage, About, Contact, Garment Branding) */
	--bu-text-display-page: clamp(44px, 5.6vw, 84px);   /* page H1 */
	--bu-text-display-band: clamp(40px, 5vw, 72px);     /* dark band H2 */
	--bu-text-section: clamp(38px, 4.2vw, 58px);        /* homepage section H2 */
	--bu-text-section-sm: clamp(34px, 3.8vw, 52px);     /* inner-page section H2 */

	/* Line heights & tracking */
	--bu-leading-display: .92;
	--bu-leading-title: .95;
	--bu-leading-heading: 1;
	--bu-leading-snug: 1.2;
	--bu-leading-ui: 1.5;
	--bu-leading-body: 1.55;
	--bu-leading-prose: 1.7;
	--bu-tracking-eyebrow: .1em;
	--bu-tracking-label: .08em;

	/* Spacing */
	--bu-space-1: 4px;
	--bu-space-2: 8px;
	--bu-space-3: 12px;
	--bu-space-4: 16px;
	--bu-space-5: 20px;
	--bu-space-6: 24px;
	--bu-space-7: 28px;
	--bu-space-8: 36px;
	--bu-space-9: 48px;
	--bu-section-pad: clamp(44px, 5.5vw, 80px);

	/* Layout */
	--bu-container: 1360px;
	--bu-gutter: clamp(20px, 4vw, 48px);
	--bu-gutter-mobile: 16px;
	--bu-measure: 800px;

	/* Borders & radii (the design is fully square) */
	--bu-border: 1px solid var(--bu-color-border);
	--bu-radius: 0;

	/* Controls */
	--bu-control-height: 48px;
	--bu-button-height: 52px;
	--bu-button-height-lg: 54px;
	--bu-touch-target: 44px;

	/* Focus */
	--bu-focus-color: var(--bu-color-accent);
	--bu-focus-width: 2px;
	--bu-focus-offset: 3px;

	/* Elevation (overlays only) */
	--bu-overlay-background: rgba(15, 16, 17, .5);
	--bu-shadow-dropdown: 0 12px 32px rgba(20, 21, 22, .10);
	--bu-shadow-panel: 0 24px 48px rgba(20, 21, 22, .10);

	--bu-transition: .2s ease;

	/* Sticky header offset (admin bar aware) */
	--bu-admin-bar: var(--wp-admin--admin-bar--height, 0px);

	/* Same-page anchors and focused fields stop this far from the top: the
	   sticky header (desktop only) plus a small gap. The header heights are the
	   measured values for the real menu; main.js refines them from the
	   rendered header when the menu wraps differently. */
	--bu-scroll-gap: 16px;
	--bu-header-sticky-height: 0px;
	--bu-scroll-offset: calc(var(--bu-admin-bar) + var(--bu-header-sticky-height) + var(--bu-scroll-gap));
}

/* Desktop: the header is sticky. 1000–1279px: the menu wraps to a second row. */
@media (min-width: 1000px) {
	:root {
		--bu-header-sticky-height: 180px;
	}
}

@media (min-width: 1280px) {
	:root {
		--bu-header-sticky-height: 140px;
	}
}

/* Base ---------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: var(--bu-scroll-offset);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	background: var(--bu-color-white);
	color: var(--bu-color-ink);
	font-family: var(--bu-font-body);
	font-size: var(--bu-text-base);
	line-height: var(--bu-leading-ui);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	color: var(--bu-color-heading);
}

h1,
h2 {
	font-family: var(--bu-font-heading);
	font-weight: var(--bu-weight-bold);
	text-transform: uppercase;
	line-height: var(--bu-leading-heading);
}

/* Design: page titles are balanced; section headings wrap naturally except the
   few the design balances (builder, branding teaser, branding form band). */
h1,
#bu-home-builder-title,
#bu-home-branding-title,
#bu-branding-form-title {
	text-wrap: balance;
}

h3,
h4,
h5,
h6 {
	font-weight: var(--bu-weight-semibold);
	line-height: var(--bu-leading-snug);
}

p {
	margin: 0;
}

a {
	color: var(--bu-color-ink);
	text-decoration: none;
}

a:hover {
	color: var(--bu-color-accent);
}

img,
video {
	max-width: 100%;
	height: auto;
}

svg {
	flex: none;
}

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

button {
	cursor: pointer;
}

select option {
	color: var(--bu-color-ink);
	background: var(--bu-color-white);
}

:focus-visible {
	outline: var(--bu-focus-width) solid var(--bu-focus-color);
	outline-offset: var(--bu-focus-offset);
}

[hidden] {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

/* Accessibility utilities --------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	top: calc(var(--bu-admin-bar) + 8px);
	left: 8px;
	z-index: 100;
	padding: 12px 18px;
	background: var(--bu-color-ink);
	color: var(--bu-color-white);
	font-weight: var(--bu-weight-semibold);
	transform: translateY(-200%);
}

.skip-link:focus {
	transform: none;
	color: var(--bu-color-white);
}

main:focus {
	outline: none;
}

/* Layout -------------------------------------------------------------- */

.site {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.site-main {
	flex: 1;
}

.container {
	width: 100%;
	max-width: var(--bu-container);
	margin-inline: auto;
	padding-inline: var(--bu-gutter);
}

/* Type utilities ------------------------------------------------------ */

.eyebrow {
	font-size: var(--bu-text-sm);
	letter-spacing: var(--bu-tracking-label);
	text-transform: uppercase;
	font-weight: var(--bu-weight-semibold);
	color: var(--bu-color-muted);
}

/* Buttons ------------------------------------------------------------- */

.bu-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bu-space-2);
	min-height: var(--bu-button-height);
	padding: 0 26px;
	border: 1px solid transparent;
	border-radius: var(--bu-radius);
	font-size: var(--bu-text-base);
	font-weight: var(--bu-weight-semibold);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--bu-transition), border-color var(--bu-transition), color var(--bu-transition);
}

.bu-button--primary {
	background: var(--bu-color-accent);
	border-color: var(--bu-color-accent);
	color: var(--bu-color-white);
}

.bu-button--primary:hover {
	background: var(--bu-color-accent-hover);
	border-color: var(--bu-color-accent-hover);
	color: var(--bu-color-white);
}

.bu-button--secondary {
	background: var(--bu-color-white);
	border-color: var(--bu-color-ink);
	color: var(--bu-color-ink);
}

.bu-button--secondary:hover {
	background: var(--bu-color-ink);
	color: var(--bu-color-white);
}

.bu-button--dark {
	background: var(--bu-color-ink);
	border-color: var(--bu-color-ink);
	color: var(--bu-color-white);
}

.bu-button--dark:hover {
	background: var(--bu-color-accent);
	border-color: var(--bu-color-accent);
	color: var(--bu-color-white);
}

/* Hero/section buttons (design: 54px high, 28px side padding). */
.bu-button--lg {
	min-height: var(--bu-button-height-lg);
	padding: 0 28px;
}

.bu-button--transparent {
	background: transparent;
}

/* Secondary action on dark bands. */
.bu-button--outline-light {
	background: transparent;
	border-color: var(--bu-color-white);
	color: var(--bu-color-white);
}

.bu-button--outline-light:hover {
	background: var(--bu-color-white);
	color: var(--bu-color-heading);
}

.button-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bu-space-3);
}

/* Form controls ------------------------------------------------------- */

.bu-input,
.bu-select,
.bu-textarea {
	width: 100%;
	min-height: var(--bu-control-height);
	padding: 0 14px;
	border: 1px solid var(--bu-color-border-input);
	border-radius: var(--bu-radius);
	background: var(--bu-color-white);
	font-size: var(--bu-text-base);
}

.bu-textarea {
	padding-block: 12px;
	min-height: 120px;
}

/* Search field (shared component) ------------------------------------ */

.search-field {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	height: var(--bu-control-height);
	padding: 0 16px;
	border: 1px solid var(--bu-color-border-input);
	background: var(--bu-color-white);
}

.search-field:focus-within {
	outline: var(--bu-focus-width) solid var(--bu-focus-color);
	outline-offset: 1px;
}

.search-field__icon {
	color: var(--bu-color-muted);
}

.search-field input[type="search"] {
	flex: 1;
	min-width: 0;
	height: calc(var(--bu-control-height) - 2px);
	border: 0;
	background: transparent;
	font-size: var(--bu-text-ui);
	outline: none;
}

.search-field input[type="search"]::-webkit-search-cancel-button {
	cursor: pointer;
}

/* Visually hidden until focused (Enter also submits). */
.search-field__submit {
	position: absolute;
	top: 4px;
	right: 4px;
	bottom: 4px;
	padding: 0 14px;
	border: 0;
	background: var(--bu-color-ink);
	color: var(--bu-color-white);
	font-size: var(--bu-text-sm);
	font-weight: var(--bu-weight-semibold);
	clip-path: inset(50%);
	opacity: 0;
}

.search-field__submit:focus {
	clip-path: none;
	opacity: 1;
}