/* modern-menu.css */

:root {
	--mm-overlay-bg: #111111;
	--mm-ease-premium: cubic-bezier(0.77, 0, 0.175, 1);
	--mm-ease-linear: ease;
	--mm-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	--origin-x: 50%;
	--origin-y: 50%;
}

.mm-ease-premium { --mm-transition-easing: var(--mm-ease-premium); }
.mm-ease-linear  { --mm-transition-easing: var(--mm-ease-linear); }
.mm-ease-bounce  { --mm-transition-easing: var(--mm-ease-bounce); }

.modern-menu-widget-container {
	display: block; width: 100%; position: relative;
	/* Default fallbacks if sliders are missing */
	--mm-dur-entrance-base: 1000ms;
	--mm-dur-exit-base: 600ms;
	
	/* Entrance Math */
	--mm-dur-in-half: calc(var(--mm-dur-entrance-base) / 2);
	--mm-dur-in-text: calc(var(--mm-dur-entrance-base) * 0.7);

	/* Submenu Icon Size */
	--mm-submenu-icon-size: 1em;

	/* Exit Math */
	--mm-dur-out-half: calc(var(--mm-dur-exit-base) / 2);
	--mm-dur-out-text: calc(var(--mm-dur-exit-base) * 0.7);
}

/* ==========================================
   Desktop Menu Layout
========================================== */
.modern-menu-desktop {
	display: flex; list-style: none; margin: 0; padding: 0;
}
.modern-menu-desktop .mm-desktop-menu-list {
	display: flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: inherit; width: 100%; justify-content: inherit;
}
.modern-menu-desktop li.has-submenu { position: relative; }
.modern-menu-desktop li.has-submenu > a { display: inline-flex; align-items: center; gap: 8px; }

.modern-menu-desktop .submenu-indicator {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--mm-submenu-icon-size);
	height: var(--mm-submenu-icon-size);
	line-height: 1;
	flex-shrink: 0;
}
.modern-menu-desktop .submenu-indicator svg,
.modern-menu-desktop .submenu-indicator i {
	width: 100%;
	height: 100%;
	display: block;
	flex-shrink: 0;
}

/* Desktop Sub-Menu Dropdown */
.modern-menu-desktop .sub-menu {
    position: absolute; top: 100%; left: 0; min-width: 220px;
    opacity: 0; visibility: hidden; transform: translateY(15px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    list-style: none; z-index: 1000; margin: 0; padding: 15px; /* Default padding, will be overridden by PHP */
    background-color: #ffffff; box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.modern-menu-desktop li.has-submenu:hover > .sub-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.modern-menu-desktop .sub-menu li { margin: 0; list-style: none; }
.modern-menu-desktop .sub-menu li a { display: block; padding: 8px 15px; font-size: 0.9em; }

.modern-menu-desktop a { text-decoration: none; transition: color 0.3s ease; }

/* NOTE: Breakpoint visibility media queries are now dynamically injected by the PHP widget! */
.modern-menu-mobile { display: none; } /* Hidden by default until media query overrules it */

/* ==========================================
   Hamburger Toggle Button
========================================== */
.modern-menu-toggle-wrapper { position: relative; z-index: 99999; display: flex; }

.modern-menu-hamburger {
    position: relative;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: var(--mm-toggle-width, 40px);
    height: var(--mm-toggle-height, 30px);
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1000;
    margin: 0;
    padding: 0;
    transition: background-color 0.3s ease, border-radius 0.3s ease;
    box-sizing: content-box; /* Crucial so padding does not squish lines */
}
.modern-menu-hamburger:focus { outline: none; }

.modern-menu-hamburger .hamburger-line {
	display: block;
    width: 100%;
    height: var(--mm-line-height, 3px);
    background-color: #333;
    border-radius: calc(var(--mm-line-height, 3px) / 2);
    transform-origin: center right;
    transition: transform 0.4s ease, width 0.4s ease, opacity 0.4s ease, background-color 0.4s ease;
}

/* Base entrance animation speed for hamburger when it opens */
.modern-menu-hamburger.is-active .hamburger-line { transition: all var(--mm-dur-in-text) var(--mm-transition-easing); }

.modern-menu-hamburger.is-active .line-1 { transform: translateY(-2px) rotate(-45deg); width: 120%; }
.modern-menu-hamburger.is-active .line-2 { opacity: 0; transform: translateX(10px); }
.modern-menu-hamburger.is-active .line-3 { transform: translateY(2px) rotate(45deg); width: 120%; }


/* ==========================================
   Overlay Base
========================================== */
.modern-menu-overlay {
	position: fixed; z-index: 99998; visibility: hidden; pointer-events: none; overflow: hidden;
	display: flex; flex-direction: column;
	/* Independent Translation for Offsets */
	translate: var(--mm-offset-x, 0px) var(--mm-offset-y, 0px);
	/* Visibility lingers based on Exit Speed */
	transition: visibility 0s calc(var(--mm-dur-exit-base) + 100ms); 
}
.modern-menu-overlay.mm-fixed-no {
	position: absolute;
}

.modern-menu-overlay.mm-fullscreen-yes {
	width: 100% !important; height: 100% !important;
	top: 0 !important; left: 0 !important; bottom: 0 !important; right: 0 !important;
}

.modern-menu-overlay.is-open { 
	visibility: visible; pointer-events: auto; transition: visibility 0s 0s; 
	animation: mm-border-reveal var(--mm-dur-entrance-base) forwards;
}

.modern-menu-overlay.is-closing {
	border-color: transparent !important;
	box-shadow: none !important;
	background-color: transparent !important;
	transition: border-color 0s, box-shadow 0s, background-color 0s, visibility 0s calc(var(--mm-dur-exit-base) + 100ms) !important;
}

@keyframes mm-border-reveal {
	0%, 90% { border-color: transparent; box-shadow: none; background-color: transparent; }
}

.modern-menu-overlay-bg {
	position: absolute; top: var(--origin-y, 0px); left: var(--origin-x, 0px);
	width: 10px; height: 10px;
	margin-top: -5px; margin-left: -5px;
	background-color: var(--mm-overlay-bg); z-index: 1;
	transform-origin: center center;
}


/* ==========================================
   Overlay Inner Content Layout
========================================== */
.modern-menu-overlay-content { 
	position: relative; z-index: 2; flex: 1; width: 100%; height: 100%; 
	display: flex; flex-direction: column; padding: 0; box-sizing: border-box; 
	overflow-x: hidden; /* Prevent horizontal scroll leak */
}
.modern-menu-overlay-utilities { 
	display: flex; gap: 20px; justify-content: flex-end; 
}

.modern-menu-overlay-utilities a {
	font-size: 1rem; font-weight: 600; text-decoration: none; text-transform: uppercase;
	opacity: 0; transform: translateY(-20px);
	/* Exit Speed */
	transition: opacity var(--mm-dur-out-text) ease, transform var(--mm-dur-out-text) ease;
}

.modern-menu-overlay.is-open .modern-menu-overlay-utilities a {
	opacity: 1; transform: translateY(0);
	/* Entrance Speed */
	transition: opacity var(--mm-dur-entrance-base) ease, transform var(--mm-dur-entrance-base) var(--mm-transition-easing);
	transition-delay: calc(var(--mm-dur-in-half) + (var(--u-index) * 0.1s));
}

.modern-menu-overlay-grid { 
	display: grid; grid-template-columns: 1fr; gap: 40px; 
	margin-top: 0;
}

/* Keep this static media query for internal layout styling, fine at 768px */
@media (min-width: 768px) {
	.modern-menu-overlay-grid { grid-template-columns: 2fr 1fr; align-items: center; }
}

.modern-menu-overlay-nav ul { list-style: none; padding: 0; margin: 0; }
.modern-menu-overlay-nav li { margin: 15px 0; }

.modern-menu-overlay-nav .submenu-collapse {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

.nav-item-mask { 
	overflow: hidden; 
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.modern-menu-overlay-nav a {
	display: block; font-size: 3rem; font-weight: 700; text-decoration: none; line-height: 1.1;
	transform: translateY(110%); opacity: 0; transition-delay: 0s;
	/* Exit Speed */
	transition: transform var(--mm-dur-out-text) var(--mm-transition-easing), opacity var(--mm-dur-out-half) ease;
}

.modern-menu-overlay-nav .submenu-toggle {
	background: transparent;
	border: none;
	cursor: pointer;
	width: var(--mm-submenu-icon-size);
	height: var(--mm-submenu-icon-size);
	color: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateY(110%); opacity: 0;
	transition: transform var(--mm-dur-out-text) var(--mm-transition-easing), opacity var(--mm-dur-out-half) ease;
	padding: 0;
	flex-shrink: 0;
}

.modern-menu-overlay-nav .submenu-toggle svg,
.modern-menu-overlay-nav .submenu-toggle i {
	transition: transform 0.3s ease;
	width: 100%;
	height: 100%;
	display: block;
	flex-shrink: 0;
}
.modern-menu-overlay-nav .submenu-toggle.is-open svg,
.modern-menu-overlay-nav .submenu-toggle[aria-expanded="true"] svg,
.modern-menu-overlay-nav .submenu-toggle.is-open i,
.modern-menu-overlay-nav .submenu-toggle[aria-expanded="true"] i {
	transform: rotate(180deg);
}

.modern-menu-overlay.is-open .modern-menu-overlay-nav a,
.modern-menu-overlay.is-open .modern-menu-overlay-nav .submenu-toggle {
	transform: translateY(0); opacity: 1;
	/* Entrance Speed */
	transition: transform var(--mm-dur-entrance-base) var(--mm-transition-easing), opacity var(--mm-dur-in-text) ease;
	transition-delay: calc(var(--mm-dur-in-half) * 0.5 + (var(--item-index) * 0.1s));
}

.modern-menu-overlay-info {
	font-size: 1rem; line-height: 1.6; opacity: 0; transform: translateY(20px);
	/* Exit Speed */
	transition: opacity var(--mm-dur-out-half) ease, transform var(--mm-dur-out-half) ease;
}
.modern-menu-overlay.is-open .modern-menu-overlay-info {
	opacity: 1; transform: translateY(0);
	/* Entrance Speed */
	transition: opacity var(--mm-dur-entrance-base) ease, transform var(--mm-dur-entrance-base) var(--mm-transition-easing);
	transition-delay: var(--mm-dur-entrance-base);
}


/* ==========================================
   6 Reveal Animations (Using Dual Times)
========================================== */

/* 1. Slide Down Panel */
.reveal--slide-down .modern-menu-overlay-bg {
	top: 0; left: 0; width: 100%; height: 100%; margin: 0;
	transform: translateY(-100%);
	transition: transform var(--mm-dur-exit-base) var(--mm-transition-easing);
	transition-delay: var(--mm-dur-out-half); 
}
.reveal--slide-down.is-open .modern-menu-overlay-bg {
	transform: translateY(0); transition-delay: 0s;
	transition: transform var(--mm-dur-entrance-base) var(--mm-transition-easing);
}

/* 2. Slide Side Panel */
.reveal--slide-side .modern-menu-overlay-bg {
	top: 0; left: 0; width: 100%; height: 100%; margin: 0;
	transform: translateX(100%);
	transition: transform var(--mm-dur-exit-base) var(--mm-transition-easing);
	transition-delay: var(--mm-dur-out-half);
}
.reveal--slide-side.is-open .modern-menu-overlay-bg {
	transform: translateX(0); transition-delay: 0s;
	transition: transform var(--mm-dur-entrance-base) var(--mm-transition-easing);
}

/* 3. Circular Reveal (Dynamic) */
.reveal--circle .modern-menu-overlay-bg {
	border-radius: 50%; transform: scale(0);
	transition: transform var(--mm-dur-exit-base) var(--mm-transition-easing);
	transition-delay: var(--mm-dur-out-half);
}
.reveal--circle.is-open .modern-menu-overlay-bg {
	transform: scale(var(--mm-target-scale, 500)); transition-delay: 0s;
	transition: transform var(--mm-dur-entrance-base) var(--mm-transition-easing);
}

/* 4. Gooey Blob Reveal (Dynamic) */
.reveal--blob .modern-menu-overlay-bg {
	border-radius: 20% 80% 80% 20% / 20% 20% 80% 80%; transform: scale(0);
	transition: transform calc(var(--mm-dur-exit-base) * 1.5) cubic-bezier(0.19, 1, 0.22, 1);
	transition-delay: var(--mm-dur-out-half);
}
.reveal--blob.is-open .modern-menu-overlay-bg {
	transform: scale(var(--mm-target-scale, 500)); transition-delay: 0s;
	transition: transform calc(var(--mm-dur-entrance-base) * 1.5) cubic-bezier(0.19, 1, 0.22, 1);
}

/* 5. Fade & Scale In */
.reveal--fade-scale .modern-menu-overlay-bg {
	top: 0; left: 0; width: 100%; height: 100%; margin: 0;
	opacity: 0; transform: scale(1.1);
	transition: opacity var(--mm-dur-exit-base) ease, transform var(--mm-dur-exit-base) var(--mm-transition-easing);
	transition-delay: var(--mm-dur-out-half);
}
.reveal--fade-scale.is-open .modern-menu-overlay-bg {
	opacity: 1; transform: scale(1); transition-delay: 0s;
	transition: opacity var(--mm-dur-entrance-base) ease, transform var(--mm-dur-entrance-base) var(--mm-transition-easing);
}

/* 6. Diagonal Wipe */
.reveal--diagonal .modern-menu-overlay-bg {
	top: 0; left: 0; width: 100%; height: 100%; margin: 0;
	clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
	transition: clip-path var(--mm-dur-exit-base) var(--mm-transition-easing);
	transition-delay: var(--mm-dur-out-half);
}
.reveal--diagonal.is-open .modern-menu-overlay-bg {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition-delay: 0s;
	transition: clip-path var(--mm-dur-entrance-base) var(--mm-transition-easing);
}