/* Uganda Lubricants - base layer: resets, focus, utilities, shared tokens.
   Design tokens come from theme.json (--wp--preset--*, --wp--custom--*). */

:root {
	--ug-ease: var(--wp--custom--ease--out);
	--ug-t-fast: var(--wp--custom--duration--fast);
	--ug-t-base: var(--wp--custom--duration--base);
	--ug-t-slow: var(--wp--custom--duration--slow);
	--ug-focus: var(--wp--custom--focus--light);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, video { max-width: 100%; height: auto; }

/* Header and footer blocks render their own landmarks; the template-part
   wrapper must not create a box, or the sticky header would be confined to it. */
.wp-site-blocks > .wp-block-template-part { display: contents; }
.wp-site-blocks > * { margin-block-start: 0; }

/* Content pages carry the gutter on <main>; full-width bands (home) do not. */
main.wp-block-group:not(.ug-home):not(.ug-full) { padding-inline: var(--wp--custom--gutter); }

/* WordPress adds margin-block-start between siblings; our own flex/grid
   containers must not inherit it. */
.ug-flex > *,
.ug-grid > * { margin-block-start: 0; }
.ug-flex { display: flex; }
.ug-grid { display: grid; }

/* Full-width band: no side padding on the band; the inner container carries
   the gutter and matches page content width. */
.ug-band { width: 100%; }
.ug-container {
	width: 100%;
	max-width: calc(80rem + 2 * var(--wp--custom--gutter));
	margin-inline: auto;
	padding-inline: var(--wp--custom--gutter);
}

/* Keyboard focus: visible everywhere, amber on dark surfaces. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--ug-focus);
	outline-offset: 3px;
	border-radius: 2px;
}
:where(.has-ink-background-color, .has-navy-background-color, .ug-on-dark) { --ug-focus: var(--wp--custom--focus--dark); }

.skip-link,
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link:focus {
	position: fixed; top: 0.75rem; left: 0.75rem; z-index: 1000;
	width: auto; height: auto; margin: 0; padding: 0.75rem 1.25rem;
	clip-path: none; background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy); box-shadow: var(--wp--preset--shadow--lift);
	border-radius: var(--wp--custom--radius--sm); font-weight: 600;
}

/* Buttons: depth + motion on transform/opacity only. */
.wp-block-button__link {
	transition: transform var(--ug-t-base) var(--ug-ease), box-shadow var(--ug-t-base) var(--ug-ease), background-color var(--ug-t-fast) linear, color var(--ug-t-fast) linear;
	box-shadow: var(--wp--preset--shadow--soft);
	min-height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
}
.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: var(--wp--preset--shadow--lift); }
.wp-block-button__link:active { transform: translateY(0); box-shadow: var(--wp--preset--shadow--soft); }

.wp-block-button.is-style-accent .wp-block-button__link { background: var(--wp--preset--color--amber); color: var(--wp--preset--color--ink); }
.wp-block-button.is-style-accent .wp-block-button__link:hover { background: #f2b23a; color: var(--wp--preset--color--ink); }
.wp-block-button.is-style-on-dark .wp-block-button__link { background: var(--wp--preset--color--white); color: var(--wp--preset--color--navy); }
.wp-block-button.is-style-on-dark .wp-block-button__link:hover { background: var(--wp--preset--color--mist); color: var(--wp--preset--color--navy); }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--wp--preset--color--indigo); border: 2px solid currentColor; box-shadow: none; }

/* Brand logo block (uganda-core). */
.ug-logo { display: inline-flex; align-items: center; line-height: 0; text-decoration: none; }
.ug-logo img { display: block; width: auto; height: var(--ug-logo-h, 3.25rem); }

/* Reduced motion: every CSS animation/transition collapses. JS timers must use
   Web Animations (element.animate()), never animationend. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.wp-block-button__link:hover { transform: none; }
}

/* Product and finder pages are full-width bands (the blocks carry their own gutters). */
.ug-full > * { margin-block: 0; }

/* Appearance switches (Control Center → Animation & Appearance). Body classes are
   added only when a switch is off, so the defaults cost nothing. */
.ug-motion-off *, .ug-motion-off *::before, .ug-motion-off *::after {
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.01ms !important;
}
.ug-speed-slow { --ug-t-fast: 260ms; --ug-t-base: 460ms; --ug-t-slow: 840ms; }
.ug-speed-fast { --ug-t-fast: 100ms; --ug-t-base: 170ms; --ug-t-slow: 320ms; }

/* Metric-matched fallbacks: while the web fonts load, Arial is scaled to Barlow's width and line box,
   so swapping to the real font does not move the layout (CLS). Values measured from the shipped WOFF2 files. */
@font-face { font-family: "Barlow Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 98%; ascent-override: 102%; descent-override: 20%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Condensed Fallback"; src: local("Arial"), local("Helvetica"); font-weight: 600 700; size-adjust: 83%; ascent-override: 121%; descent-override: 24%; line-gap-override: 0%; }