/* =====================================================================
   THEME DESIGN — fonts, icons & scroll state (US-005)
   Small presentational layer that complements the JS enhancements and the
   Customizer-driven accent overrides (injected as inline custom properties).
   All colors reference design tokens so the sections stay theme-aware.
   ===================================================================== */

/* Apply the enqueued webfonts across headings and body. The named families
   already sit first in --font-heading / --font-body (defined in style.css);
   this simply guarantees the scale is applied even where a component forgot
   to inherit. */
body {
	font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
}

/* Font Awesome sizing helper for our icon usage (service/social/UI icons). */
.ar-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	color: var(--color-accent, #e87a2f);
}

/* -------------------------------------------------------------------
   Header scroll state — theme.js adds `site-header--scrolled` once the
   visitor scrolls past the hero. Give the header a touch more presence
   (stronger background + shadow) without moving or resizing it, so the
   navigation never shifts under the pointer.
   ------------------------------------------------------------------- */
.site-header {
	transition: background-color var(--duration-normal, 240ms) var(--ease-default, ease),
		box-shadow var(--duration-normal, 240ms) var(--ease-default, ease);
}

.site-header--scrolled {
	background-color: var(--color-navy-deep, #141824);
	box-shadow: var(--shadow-md, 0 6px 18px rgba(0, 0, 0, 0.35));
}

/* Smooth-scroll fallback for browsers without JS anchor handling. */
html {
	scroll-behavior: smooth;
}

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

	.site-header {
		transition: none;
	}
}