/**
 * BP Sticky Navigation — styles
 *
 * Classes you add in Bricks Builder:
 *   .bp-sticky-nav         — the desktop nav element
 *   .bp-sticky-nav-mobile  — the mobile nav element (logo / hamburger bar)
 *
 * Classes added/removed by JS:
 *   .bp-sticky-nav--stuck  — element is position:fixed at the top
 *   .bp-sticky-nav--hidden — element is translated up out of the viewport
 *
 * Class added by JS to <html> after initial paint:
 *   .bp-nav-ready          — gates child-element transitions so they don't
 *                            fire during the first render pass
 */

/* ── Nav element transitions ─────────────────────────────────────────────────
 *
 * Applied to both base selectors so animations are always ready.
 * top:0 pre-empts any external CSS (Bricks, WordPress admin-bar compensation)
 * that might set top:32px before the --stuck class lands.
 *
 * box-shadow starts fully transparent so it can animate smoothly into the
 * visible shadow in the stuck state — CSS cannot interpolate between `none`
 * and a real shadow value, so the structure must match on both ends.
 */
.bp-sticky-nav,
.bp-sticky-nav-mobile {
	top:        0                              !important;
	box-shadow: 0 4px 12px 0 rgba( 0, 0, 0, 0 ); /* transparent — ready to animate */
	transition:
		transform      0.3s  ease,
		padding-top    0.35s ease,
		padding-bottom 0.35s ease,
		box-shadow     0.35s ease              !important;
}

/* ── Stuck state ─────────────────────────────────────────────────────────────
 *
 * Compound selectors (.base + .modifier) give specificity (0,2,0) so this
 * block outranks single-class rules from any external stylesheet.
 * JS additionally sets `top:0` via style.setProperty('top','0','important')
 * which is an inline !important — the absolute highest author-origin weight —
 * as a final guarantee against Bricks/WordPress admin-bar CSS.
 *
 * margin:0   — neutralises any Bricks margin-top that would shift a fixed
 *              element down inside the viewport.
 * padding:0  — both top and bottom zeroed so the box-shadow sits flush
 *              against the bottom edge of the nav content.
 */
.bp-sticky-nav.bp-sticky-nav--stuck,
.bp-sticky-nav-mobile.bp-sticky-nav--stuck {
	position: fixed !important;
	top:       0    !important;
	left:      0    !important;
	right:     0    !important;
	width:     100% !important;
	z-index:   9999 !important;
	margin:    0    !important;

	padding-top:    0 !important;
	padding-bottom: 0 !important;
}

/* ── Mobile stuck: drop shadow ───────────────────────────────────────────────
 *
 * Subtle shadow along the bottom edge only. Matches the transparent
 * box-shadow structure on the base selector above so the browser can
 * interpolate the alpha smoothly — nothing else changes.
 */
.bp-sticky-nav-mobile.bp-sticky-nav--stuck {
	box-shadow: 0 4px 12px 0 rgba( 0, 0, 0, 0.08 ) !important;
}

/* ── Mobile stuck: compact inner padding ────────────────────────────────────
 *
 * .fr-header-foxtrot__top-inner carries its own padding (normally
 * var(--space-xs) top and bottom, set by Bricks). When the parent is stuck
 * this compresses it to --space-3xs so the bar takes up less screen space.
 *
 * The transition rule below is gated on .bp-nav-ready (added by JS to <html>
 * after the initial paint) so this animation cannot fire during page load —
 * only when the user is actively scrolling.
 */
.bp-sticky-nav-mobile.bp-sticky-nav--stuck .fr-header-foxtrot__top-inner {
	padding-top:    var( --space-3xs, 0.25rem ) !important;
	padding-bottom: var( --space-3xs, 0.25rem ) !important;
}

.bp-nav-ready .fr-header-foxtrot__top-inner {
	transition:
		padding-top    0.35s ease,
		padding-bottom 0.35s ease !important;
}

/* ── Hidden state ────────────────────────────────────────────────────────────
 *
 * Slides the element up above the viewport. The CSS transition on `transform`
 * (declared above) animates the movement. JS removes this class after 100 px
 * of upward scroll.
 */
.bp-sticky-nav--hidden,
.bp-sticky-nav-mobile--hidden {
	transform: translateY( -100% ) !important;
}

/* ── Nav hover: fade utility ─────────────────────────────────────────────────
 *
 * JS adds .bp-nav-hovered to .fr-nav-alpha on mouseenter and removes it on
 * mouseleave. The transition block below gives background-color, color, and
 * border-color a 0.2 s fade on the nav and all its descendants so that any
 * CSS you write against .fr-nav-alpha.bp-nav-hovered animates smoothly.
 *
 * Gated on .bp-nav-ready (added to <html> after the initial paint) so the
 * transition cannot fire during page load.
 */
.bp-nav-ready .fr-nav-alpha,
.bp-nav-ready .fr-nav-alpha * {
	transition:
		background-color 0.2s ease,
		color            0.2s ease,
		border-color     0.2s ease !important;
}

.bp-nav-ready .main-header-section {
	transition: backdrop-filter 0.2s ease !important;
}

/* ── Optional: background colour only while stuck ───────────────────────────
 *
 * Uncomment if you need a background behind the nav when it is fixed.
 *
 * .bp-sticky-nav.bp-sticky-nav--stuck,
 * .bp-sticky-nav-mobile.bp-sticky-nav--stuck {
 *     background: #fff;
 * }
 */