/**
 * PWD Elementor Theme Pro — Sticky Header CSS
 *
 * position:fixed is applied inline by JS. These rules handle state classes,
 * transitions, and the hide-on-scroll animation. Shrink-on-scroll (JS) only
 * ever touches padding and <img> width/height — never transform — so it can
 * never distort anything inside the element or narrow its width, and it
 * never conflicts with the translateY() this file uses for hide-on-scroll.
 *
 * @package PWD_Elementor_Theme_Pro
 */

/* ── Base ──────────────────────────────────────────────────────────────────── */

[data-pwd-sticky] {
	box-sizing: border-box;
}

/* ── Active (fixed) state ──────────────────────────────────────────────────── */

.pwd-sticky-active {
	margin-top: 0    !important;
	margin-bottom: 0 !important;
}

/* ── Fixed (engaged) state — force true full viewport width ─────────────────
 * Applied whenever JS has taken the element out of flow with position:fixed
 * (immediately for "Start Transparent" overlay elements, or once scrolled
 * past the offset for normal ones). Elementor's "Boxed" content-width
 * containers constrain max-width via a CSS custom property on a rule that
 * can beat a plain inline style, so these are forced with !important to
 * guarantee the fixed bar always spans the full viewport regardless of
 * whatever Boxed/Full-Width setting the element normally uses in flow.
 * This only targets the element JS has marked as fixed, so any deliberately
 * boxed content *inside* it (e.g. a centered nav-items group) is untouched.
 */
.pwd-sticky-fixed {
	left:         0    !important;
	right:        0    !important;
	width:        100% !important;
	max-width:    100% !important;
	margin-left:  0    !important;
	margin-right: 0    !important;
}

/* ── Hide on scroll down ────────────────────────────────────────────────────── */
/*
 * The only place this stylesheet or the JS uses `transform` — shrink-on-
 * scroll (JS) only ever changes padding and <img> width/height, so there's
 * nothing for this to conflict with. !important guarantees hide always wins.
 */
.pwd-sticky-hidden {
	transform:      translateY( -110% ) !important;
	pointer-events: none;
}

/* ── Change Logo Colour on Scroll ─────────────────────────────────────────────
 * Default effect: invert, for the common "light logo on a transparent hero,
 * needs to read on a solid header" case. Not every logo suits invert — this
 * class is the intended override point, e.g.:
 *   .pwd-sticky-logo-inverted { filter: brightness(0); }
 * to force solid black instead. */
.pwd-sticky-logo-inverted {
	filter: invert( 1 );
	transition: filter 0.2s ease;
}

/* ── Back to Top button ───────────────────────────────────────────────────────
 * Injected into <body> by sticky.js (initBackToTop), never into a sticky
 * element itself — see that function's doc comment for why. Size, side,
 * offset and colours are all set inline from the Elementor controls; this
 * file only owns the shape, motion and default hover behaviour. */
.pwd-sticky-totop-btn {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transform: translateY( 12px );
	transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}
.pwd-sticky-totop-btn svg {
	width: 55%;
	height: 55%;
	fill: currentColor;
}
/* Hover background — sticky.js sets --pwd-sticky-totop-hover from the Hover
   Background Colour control; if that control was left blank the custom
   property is never set, so this declaration is simply ignored and the
   button keeps its normal background on hover. */
.pwd-sticky-totop-btn:hover {
	background-color: var( --pwd-sticky-totop-hover );
}
.pwd-sticky-totop-btn.pwd-sticky-totop-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY( 0 );
}
@media ( prefers-reduced-motion: reduce ) {
	.pwd-sticky-totop-btn {
		transition: opacity 0.3s ease, background-color 0.3s ease;
		transform: none;
	}
	.pwd-sticky-totop-btn.pwd-sticky-totop-visible {
		transform: none;
	}
}