/**
 * Roots Astra Child — custom styles.
 * Sticky header transition + smooth-scroll anchor offset.
 * Brand color: #6fa382
 */

/* ---------- Smooth scrolling ---------- */
html {
	scroll-behavior: smooth;
}

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

/* ---------- Anchor offset (prevents sticky header from covering section titles) ----------
   --roots-header-height is measured from the real .roots-header element by
   smooth-scroll.js (on load + resize), so this stays correct at any viewport
   size instead of guessing a fixed pixel value. */
section[id],
.elementor-section[id],
.elementor-container[id] {
	scroll-margin-top: var( --roots-header-height, 100px );
}

/* ---------- Sticky header (built in Elementor) ----------
   Add CSS class "roots-header" to the header Container in Elementor.
   The .header-scrolled class is toggled by smooth-scroll.js when scrollY > 80. */
.roots-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 99;
	background-color: transparent;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.roots-header.header-scrolled {
	background-color: #ffffff;
	box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.08 );
}

/* Optional: swap link color when header is solid (override in Elementor if needed) */
.roots-header.header-scrolled a {
	color: #2b2b2b;
}

/* ---------- Anchor link outlines (accessibility) ---------- */
a:focus-visible,
button:focus-visible {
	outline: 2px solid #6fa382;
	outline-offset: 3px;
}