/* =========================================================
   Alliance Installations — Shared Design Tokens
   ---------------------------------------------------------
   Single source of truth for colors, fonts, and button/link base
   styles used across every custom page template and shortcode
   (products, leads/contact form, clients slider, about, contact).

   Colors ALIAS Blocksy's own Global Colors palette (Customizer ->
   Colors) instead of hardcoding hex values, so if the palette is
   ever changed in Blocksy, our pages follow automatically instead
   of drifting out of sync. The var() fallback (second argument)
   only fires if Blocksy's variable is somehow missing — it mirrors
   Blocksy's current actual value so nothing breaks if that happens.

   EXCLUDED on purpose: alliance-maintenance.css (the canvas page
   has its own already-live, deliberately separate design system —
   not retrofitted to this without being asked).

   Enqueued site-wide, loaded before every other custom stylesheet.
   ========================================================= */

:root {
	/* ---- Colors (aliased to Blocksy's palette) ---- */
	--au-charcoal:   var(--theme-palette-color-1, #363636); /* headings, primary text */
	--au-text-mid:   var(--theme-palette-color-4, #5E5A53); /* body copy */
	--au-cream:      var(--theme-palette-color-3, #EDEBE3); /* section backgrounds */
	--au-cream-light: var(--theme-palette-color-10, #F5EFE5);
	--au-border:     var(--theme-palette-color-5, #DDDDDD); /* hairlines, dividers */
	--au-gold:       var(--theme-palette-color-6, #C09C58); /* links, primary buttons, accents */
	--au-tan-light:  var(--theme-palette-color-11, #DBB77D);
	--au-navy:       var(--theme-palette-color-8, #263541); /* dark section backgrounds (alt to charcoal) */
	--au-white:      var(--theme-palette-color-9, #ffffff);
	--au-text-muted: var(--theme-palette-color-7, #A7A7A7); /* small caps labels, stat labels, etc. */

	/* Functional status colors, not part of Blocksy's brand palette —
	   used for stat numbers, form success/error messages. */
	--au-success-green: #3c7a46;
	--au-error-red:     #b3403a;

	/* ---- Extended brand neutrals (additive — being migrated to over time;
	   existing hardcoded hex values across products.css / pdp.css / home.css
	   match these). NEW page CSS should reference these instead of hex. ---- */
	--au-mesh-line:     #282828; /* faint wire-mesh hero grid lines */
	--au-cream-tint:    #F9F7F4; /* sidebar hover bg, empty-state bg */
	--au-border-soft:   #ECEAE5; /* card-internal hairlines */
	--au-border-strong: #C0BBB3; /* product card hover border */
	--au-drawing-bg:    #FDFCF9; /* technical-drawing card background */
	--au-drawing-line:  #F1EEE8; /* technical-drawing grid pattern */

	/* Blocksy's actual configured button hover (Customizer -> Buttons ->
	   Design): background brightens from wheat (#C09C58, --au-gold) to
	   this lighter tan on hover — confirmed from the live values, not
	   guessed. Despite the name (kept for backward compatibility with
	   files already referencing it), this is a LIGHTER shade, not darker. */
	--au-gold-dark:  var(--au-tan-light);

	/* Blocksy's button Font Color is white in both normal and hover
	   states (no text color change on hover) — explicitly pin this on
	   every button :hover rule, or Blocksy's global a:hover color
	   (a blue-grey, --theme-link-hover-color) leaks through instead. */
	--au-btn-text-color: var(--au-white);

	/* ---- Fonts ---- */
	--au-font-body:    var(--theme-font-family, 'Inter', sans-serif);
	--au-font-heading: 'Familjen Grotesk', var(--theme-font-family, sans-serif);
	--au-font-button:  var(--theme-button-font-family, 'Familjen Grotesk', sans-serif);

	/* ---- Button base (matches Blocksy's own button styling) ---- */
	--au-btn-font-weight:     var(--theme-button-font-weight, 500);
	--au-btn-text-transform:  var(--theme-button-text-transform, capitalize);
	--au-btn-font-size:       var(--theme-button-font-size, 16px);
	--au-btn-letter-spacing:  var(--theme-button-letter-spacing, 0.04em);
	--au-btn-min-height:      var(--theme-button-min-height, 40px);

	/* ---- Links ----
	   Deliberately NOT using Blocksy's default link color (a muted
	   teal, --theme-link-initial-color). Gold links are an established
	   brand choice already used everywhere — only the exact gold value
	   is standardized to Blocksy's palette, not the color choice itself. */
	--au-link-color: var(--au-gold);
	--au-link-hover: var(--au-gold-dark);
}

/* ---- Shared button classes ----
   One canonical .au-btn-primary / .au-btn-outline, usable by any
   future template. Existing templates' own .pdp-btn / .alf-submit /
   .btn classes are being migrated to reference these same tokens
   (not yet replaced with these exact class names, to avoid a
   simultaneous markup+CSS rename across every template at once). */
.au-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--au-font-button);
	font-weight: var(--au-btn-font-weight);
	font-size: var(--au-btn-font-size);
	letter-spacing: var(--au-btn-letter-spacing);
	text-transform: var(--au-btn-text-transform);
	min-height: var(--au-btn-min-height);
	padding: 5px 20px; /* matches Blocksy's configured button padding exactly */
	border-radius: 3px; /* matches Blocksy's configured button radius exactly */
	border: 1.5px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s, border-color .15s, color .15s;
}
.au-btn-primary { background: var(--au-gold); color: var(--au-btn-text-color); border-color: var(--au-gold); }
.au-btn-primary:hover {
	background: var(--au-tan-light);
	border-color: var(--au-tan-light);
	color: var(--au-btn-text-color); /* must be explicit — otherwise Blocksy's a:hover color wins */
}
.au-btn-outline { background: transparent; color: var(--au-navy); border-color: var(--au-navy); }
.au-btn-outline:hover {
	color: var(--au-tan-light);
	border-color: var(--au-tan-light);
}

/* ---- Shared page-hero ----
   Cream band + faded wire-mesh grid texture, ~275px tall, used at the
   top of every list/category page (Products listing, product-category
   archives, Resources). Lives here (not in any one feature's CSS) so
   it can be reused freely by any future template — the previous
   .pc-hero class name was a misleading hangover from when only the
   "product category" archive used it. */
.au-page-hero {
	background: var(--au-cream);
	position: relative;
	overflow: hidden;
	min-height: 275px;
	padding: 32px 0;
	display: flex;
	align-items: center;
}
.au-page-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.06;
	background-image:
		linear-gradient(#282828 1px, transparent 1px),
		linear-gradient(90deg, #282828 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse at 0% 0%, transparent 30%, black 70%);
	        mask-image: radial-gradient(ellipse at 0% 0%, transparent 30%, black 70%);
}
.au-page-hero > * {
	position: relative;
	z-index: 1;
	width: 100%;
}
.au-page-hero-title {
	font-family: var(--au-font-heading);
	font-size: clamp(28px, 3.4vw, 38px);
	font-weight: 700;
	color: var(--au-charcoal);
	letter-spacing: -.4px;
	margin: 0 0 12px;
	line-height: 1.15;
}
.au-page-hero-desc {
	max-width: 760px;
	color: var(--au-text-mid);
	line-height: 1.7;
	font-size: 16px;
}
.au-page-hero-desc p { margin: 0 0 8px; }
.au-page-hero-desc p:last-child { margin-bottom: 0; }
.au-page-hero-desc a { color: var(--au-link-color); }
.au-page-hero-desc a:hover { color: var(--au-link-hover); }

/* ---- Shared marquee (continuous-scroll checkmark ticker) ----
   Visually matches the dark checkmark ticker on the Alliance
   Maintenance canvas page (.marquee in alliance-maintenance.css) — but
   that file is its own deliberately separate design system, so this is
   a fresh, reusable equivalent for any future page that needs the same
   look, not a duplication of that file. Full-width by default (no
   max-width wrapper) — same as the clients logo carousel. */
.au-marquee {
	position: relative;
	overflow: hidden;
	background: #282828;
	height: 48px;
}
.au-marquee-track {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	display: flex;
	align-items: center;
	width: max-content;
	animation: au-marquee-scroll 40s linear infinite;
}
.au-marquee:hover .au-marquee-track {
	animation-play-state: paused;
}
.au-marquee-item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0 26px;
	font-family: var(--au-font-body);
	font-size: 14px;
	font-weight: 500;
	color: rgba(255, 255, 255, .9);
	white-space: nowrap;
}
.au-marquee-item::before {
	content: '\2713';
	color: var(--au-gold);
	font-weight: 700;
	font-size: 14px;
	flex-shrink: 0;
}
@keyframes au-marquee-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.au-marquee-track { animation: none; }
}