/**
 * Snap Header — frontend block styles.
 *
 * Sticky positioning, scroll effects, transparent top, and WordPress
 * admin bar offset.
 *
 * @package Beplus\VisualMegaNav
 */
.wp-block-beplus-visual-mega-nav-beplus-header {
	position: relative;
	transition: background-color 0.3s ease, background 0.3s ease;
}

.wp-block-beplus-visual-mega-nav-beplus-header .wp-block-group {
	position: initial;
}


/* ---------- Sticky positioning (only when JS activates it) ---------- */
.wp-block-beplus-visual-mega-nav-beplus-header.is-sticky.is-fixed-active {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}

/* ---------- WordPress admin bar offset ---------- */
body.admin-bar .wp-block-beplus-visual-mega-nav-beplus-header.is-sticky.is-fixed-active {
	top: 32px;
}

@media (max-width: 782px) {

	body.admin-bar .wp-block-beplus-visual-mega-nav-beplus-header.is-sticky.is-fixed-active {
		top: 46px;
	}
}

@media (max-width: 600px) {

	body.admin-bar .wp-block-beplus-visual-mega-nav-beplus-header.is-sticky.is-fixed-active {
		top: 0;
	}
}

/* ---------- Spacer ---------- */
.beplus-hdr-spacer {
	display: block;
}

/* ---------- Stuck state — scroll effects ---------- */

/* Shrink: reduce padding when stuck */
@media (prefers-reduced-motion: no-preference) {

	.wp-block-beplus-visual-mega-nav-beplus-header.scroll-shrink.is-stuck {
		transition: padding 0.3s ease;
		padding-top: 4px;
		padding-bottom: 4px;
	}
}

/* Hide-on-scroll: slide out when scrolling down */
@media (prefers-reduced-motion: no-preference) {

	.wp-block-beplus-visual-mega-nav-beplus-header.scroll-hide-on-scroll {
		transition: transform 0.3s ease;
	}
}

.wp-block-beplus-visual-mega-nav-beplus-header.scroll-hide-on-scroll.is-hidden {
	transform: translateY(-100%);
}

/* Background-on-scroll: apply background only when stuck */
.wp-block-beplus-visual-mega-nav-beplus-header.scroll-bg-on-scroll.is-stuck {
	background-color: var(--beplus-hdr-scroll-bg);
}

/* ---------- Transparent at top ---------- */
.wp-block-beplus-visual-mega-nav-beplus-header.is-transparent-top {
	background-color: transparent;
}

.wp-block-beplus-visual-mega-nav-beplus-header.is-transparent-top.is-stuck {

	/* background reverts to the block's configured background color */

	/* The stuck state removes transparency automatically */
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {

	.wp-block-beplus-visual-mega-nav-beplus-header.scroll-hide-on-scroll,
	.wp-block-beplus-visual-mega-nav-beplus-header.scroll-shrink {
		transition: none !important;
	}
}

.wp-block-beplus-visual-mega-nav-beplus-header .wp-block-site-logo,
.wp-block-beplus-visual-mega-nav-beplus-header .wp-block-site-title {
	display: flex;
	align-items: center;
}