/* MH Dynamic Menu Styles */

/* 
 * Apply transparent styles when the 'mh-transparent' class is added to the header.
 * Adjust selectors as needed if the user changes the Header Selector in settings.
 */

/* 
 * Base state for the menu on enabled pages.
 * We apply the transition here so it works BOTH WAYS (adding and removing the class).
 */
body.mh-dm-enabled .mh-dm-target {
	transition: background 0.3s ease, background-color 0.3s ease, color 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease, transform 0.3s ease, top 0.3s ease;
	border-bottom: 1px solid transparent;
	/* Prevent jump when border appears */
}

body.mh-dm-enabled.has-scrolled .mh-dm-target {
	position: sticky;
}

/* 
 * Transition inner elements (links, SVGs, toggles)
 * We target them generically within our target header.
 */
body.mh-dm-enabled .mh-dm-target a,
body.mh-dm-enabled .mh-dm-target .site-title,
body.mh-dm-enabled .mh-dm-target .menu-toggle,
body.mh-dm-enabled .mh-dm-target svg {
	transition: color 0.3s ease, fill 0.3s ease;
}

.mh-transparent {
	z-index: 99999;
	backdrop-filter: blur(5px);
	background: rgba(21, 21, 21, 0.01) !important;
	/* Force override */
	color: #fff !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;

	/* Ensure it overlays content if not already absolute/fixed */
	position: fixed;
	top: 0;
	width: 100%;
}

.mh-transparent a {
	color: #fff !important;
}

.mh-transparent .site-title {
	color: #fff !important;
}

.mh-transparent .menu-toggle {
	color: #fff !important;
}

/* 
 * Adjust content margin PERMANENTLY on enabled pages to prevent layout jerk.
 * Using body class 'mh-dm-enabled' (added by PHP) instead of toggled class.
 */
body.mh-dm-enabled #content {
	/* 
	 * Attempt to pull content up to sit behind the header.
     * The snippet used 'calc(0px - var(--content_padding))'.
     * We'll assume the user might need to adjust this variable or value.
     * For now, we'll try to use a standard negative margin or padding approach
     * if the variable isn't defined, but we'll stick to their snippet primarily.
     */
	margin-top: calc(0px - var(--content_padding, 0px)) !important;
	padding-top: 100px;
	/* Fallback spacer to prevent content from being hidden being header? No, they want it behind. */
	padding-top: 0 !important;
	/* Reset padding if needed */
}

/* User specific override from prompt */
body.mh-dm-enabled #content {
	margin-top: -100px !important;
	/* Example fallback if variable fails, but let's try to match their intent */
	margin-top: calc(0px - var(--global--spacing-vertical, 0px)) !important;
	/* Common WP theme var? */
}

/* Strictly following user snippet for #content */
body.mh-dm-enabled #content {
	margin-top: calc(0px - var(--content_padding, 0px)) !important;
}

/* Mobile Menu Background Override - Only when Transparent */
@media (max-width: 1279px) {
	body.mh-header-transparent .toggled .main-navigation-container {
		backdrop-filter: blur(5px);
		background: rgba(21, 21, 21, 0.95) !important;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		height: 100vh;
		overflow-y: auto;
	}
}