/**
 * MN Desktop Menu Styles
 * Compatible with desktop, laptop, and tablet
 */

/* ── Nav Container ── */
.mn-dsmenu-nav {
    position: relative;
    width: 100%;
}

.mn-dsmenu-nav > ul,
.mn-dsmenu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.mn-dsmenu-list li {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

/* Vertical layout */
.mn-dsmenu-layout-vertical .mn-dsmenu-list {
    flex-direction: column;
    align-items: stretch;
}

/* ── Menu Item Links ── */
.mn-dsmenu-nav > ul > li > a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #333;
    padding: 10px 15px;
    position: relative;
    transition: color 0.3s ease;
    white-space: nowrap;
}

/* ── Submenu Indicator ── */
.mn-dsmenu-indicator {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    line-height: 1;
    transition: transform 0.3s ease;
}

.mn-dsmenu-indicator svg {
    width: 10px;
    height: 10px;
    display: block;
}

/* Rotate indicator on hover for top-level */
.mn-dsmenu-nav > ul > li:hover > a > .mn-dsmenu-indicator {
    transform: rotate(180deg);
}

/* Sub-menu indicator points right */
.mn-dsmenu-nav .sub-menu .mn-dsmenu-indicator {
    margin-left: auto;
    padding-left: 10px;
}

.mn-dsmenu-nav .sub-menu .mn-dsmenu-indicator svg {
    transform: rotate(-90deg);
}

.mn-dsmenu-nav .sub-menu li:hover > a > .mn-dsmenu-indicator svg {
    transform: rotate(-90deg) scale(1.1);
}

/* ═══════════════════════════════════════════
   POINTER STYLES
   ═══════════════════════════════════════════ */

/* Base pseudo-elements for pointers */
.mn-dsmenu-nav > ul > li > a::before,
.mn-dsmenu-nav > ul > li > a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #557df3;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
}

/* Hide by default */
.mn-dsmenu-pointer-none .mn-dsmenu-nav > ul > li > a::before,
.mn-dsmenu-pointer-none .mn-dsmenu-nav > ul > li > a::after {
    display: none;
}

/* ── Underline ── */
.mn-dsmenu-pointer-underline .mn-dsmenu-nav > ul > li > a::before {
    bottom: 0;
    transform: scaleX(0);
    transform-origin: center;
}

.mn-dsmenu-pointer-underline .mn-dsmenu-nav > ul > li > a::after {
    display: none;
}

.mn-dsmenu-pointer-underline .mn-dsmenu-nav > ul > li:hover > a::before,
.mn-dsmenu-pointer-underline .mn-dsmenu-nav > ul > li.current-menu-item > a::before,
.mn-dsmenu-pointer-underline .mn-dsmenu-nav > ul > li.current-menu-ancestor > a::before {
    transform: scaleX(1);
}

/* ── Overline ── */
.mn-dsmenu-pointer-overline .mn-dsmenu-nav > ul > li > a::before {
    top: 0;
    transform: scaleX(0);
    transform-origin: center;
}

.mn-dsmenu-pointer-overline .mn-dsmenu-nav > ul > li > a::after {
    display: none;
}

.mn-dsmenu-pointer-overline .mn-dsmenu-nav > ul > li:hover > a::before,
.mn-dsmenu-pointer-overline .mn-dsmenu-nav > ul > li.current-menu-item > a::before,
.mn-dsmenu-pointer-overline .mn-dsmenu-nav > ul > li.current-menu-ancestor > a::before {
    transform: scaleX(1);
}

/* ── Double Line ── */
.mn-dsmenu-pointer-double .mn-dsmenu-nav > ul > li > a::before {
    top: 0;
    transform: scaleX(0);
    transform-origin: center;
}

.mn-dsmenu-pointer-double .mn-dsmenu-nav > ul > li > a::after {
    bottom: 0;
    transform: scaleX(0);
    transform-origin: center;
}

.mn-dsmenu-pointer-double .mn-dsmenu-nav > ul > li:hover > a::before,
.mn-dsmenu-pointer-double .mn-dsmenu-nav > ul > li:hover > a::after,
.mn-dsmenu-pointer-double .mn-dsmenu-nav > ul > li.current-menu-item > a::before,
.mn-dsmenu-pointer-double .mn-dsmenu-nav > ul > li.current-menu-item > a::after,
.mn-dsmenu-pointer-double .mn-dsmenu-nav > ul > li.current-menu-ancestor > a::before,
.mn-dsmenu-pointer-double .mn-dsmenu-nav > ul > li.current-menu-ancestor > a::after {
    transform: scaleX(1);
}

/* ── Framed ── */
.mn-dsmenu-pointer-framed .mn-dsmenu-nav > ul > li > a::before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    background: transparent;
    border: 2px solid #557df3;
    opacity: 0;
    transform: scale(1);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.mn-dsmenu-pointer-framed .mn-dsmenu-nav > ul > li > a::after {
    display: none;
}

.mn-dsmenu-pointer-framed .mn-dsmenu-nav > ul > li:hover > a::before,
.mn-dsmenu-pointer-framed .mn-dsmenu-nav > ul > li.current-menu-item > a::before,
.mn-dsmenu-pointer-framed .mn-dsmenu-nav > ul > li.current-menu-ancestor > a::before {
    opacity: 1;
}

.mn-dsmenu-pointer-framed .mn-dsmenu-nav > ul > li:hover > a,
.mn-dsmenu-pointer-framed .mn-dsmenu-nav > ul > li.current-menu-item > a,
.mn-dsmenu-pointer-framed .mn-dsmenu-nav > ul > li.current-menu-ancestor > a {
    color: inherit;
}

/* ── Background ── */
.mn-dsmenu-pointer-background .mn-dsmenu-nav > ul > li > a::before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    background-color: #557df3;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.mn-dsmenu-pointer-background .mn-dsmenu-nav > ul > li > a::after {
    display: none;
}

.mn-dsmenu-pointer-background .mn-dsmenu-nav > ul > li:hover > a::before,
.mn-dsmenu-pointer-background .mn-dsmenu-nav > ul > li.current-menu-item > a::before,
.mn-dsmenu-pointer-background .mn-dsmenu-nav > ul > li.current-menu-ancestor > a::before {
    opacity: 1;
}

.mn-dsmenu-pointer-background .mn-dsmenu-nav > ul > li:hover > a,
.mn-dsmenu-pointer-background .mn-dsmenu-nav > ul > li.current-menu-item > a,
.mn-dsmenu-pointer-background .mn-dsmenu-nav > ul > li.current-menu-ancestor > a {
    color: inherit;
}

/* ═══════════════════════════════════════════
   POINTER ANIMATIONS
   ═══════════════════════════════════════════ */

/* Slide animation for line pointers */
.mn-dsmenu-animation-slide .mn-dsmenu-nav > ul > li > a::before {
    transform-origin: left center;
}

.mn-dsmenu-animation-slide .mn-dsmenu-nav > ul > li > a::after {
    transform-origin: left center;
}

/* Grow animation */
.mn-dsmenu-animation-grow .mn-dsmenu-nav > ul > li > a::before,
.mn-dsmenu-animation-grow .mn-dsmenu-nav > ul > li > a::after {
    transform-origin: center;
}

/* Drop-in animation */
.mn-dsmenu-animation-drop-in .mn-dsmenu-nav > ul > li > a::before {
    transform: scaleX(0) translateY(-10px);
    opacity: 0;
}

.mn-dsmenu-animation-drop-in .mn-dsmenu-nav > ul > li:hover > a::before,
.mn-dsmenu-animation-drop-in .mn-dsmenu-nav > ul > li.current-menu-item > a::before,
.mn-dsmenu-animation-drop-in .mn-dsmenu-nav > ul > li.current-menu-ancestor > a::before {
    transform: scaleX(1) translateY(0);
    opacity: 1;
}

/* Drop-out animation */
.mn-dsmenu-animation-drop-out .mn-dsmenu-nav > ul > li > a::before {
    transform: scaleX(0) translateY(10px);
    opacity: 0;
}

.mn-dsmenu-animation-drop-out .mn-dsmenu-nav > ul > li:hover > a::before,
.mn-dsmenu-animation-drop-out .mn-dsmenu-nav > ul > li.current-menu-item > a::before,
.mn-dsmenu-animation-drop-out .mn-dsmenu-nav > ul > li.current-menu-ancestor > a::before {
    transform: scaleX(1) translateY(0);
    opacity: 1;
}

/* Framed: Grow */
.mn-dsmenu-animation-grow.mn-dsmenu-pointer-framed .mn-dsmenu-nav > ul > li > a::before {
    transform: scale(0.85);
}

.mn-dsmenu-animation-grow.mn-dsmenu-pointer-framed .mn-dsmenu-nav > ul > li:hover > a::before,
.mn-dsmenu-animation-grow.mn-dsmenu-pointer-framed .mn-dsmenu-nav > ul > li.current-menu-item > a::before {
    transform: scale(1);
    opacity: 1;
}

/* Framed: Shrink */
.mn-dsmenu-animation-shrink.mn-dsmenu-pointer-framed .mn-dsmenu-nav > ul > li > a::before {
    transform: scale(1.15);
}

.mn-dsmenu-animation-shrink.mn-dsmenu-pointer-framed .mn-dsmenu-nav > ul > li:hover > a::before,
.mn-dsmenu-animation-shrink.mn-dsmenu-pointer-framed .mn-dsmenu-nav > ul > li.current-menu-item > a::before {
    transform: scale(1);
    opacity: 1;
}

/* Background: Grow */
.mn-dsmenu-animation-grow.mn-dsmenu-pointer-background .mn-dsmenu-nav > ul > li > a::before {
    transform: scale(0.85);
}

.mn-dsmenu-animation-grow.mn-dsmenu-pointer-background .mn-dsmenu-nav > ul > li:hover > a::before,
.mn-dsmenu-animation-grow.mn-dsmenu-pointer-background .mn-dsmenu-nav > ul > li.current-menu-item > a::before {
    transform: scale(1);
    opacity: 1;
}

/* Background: Sweep Left */
.mn-dsmenu-animation-sweep-left.mn-dsmenu-pointer-background .mn-dsmenu-nav > ul > li > a::before {
    transform: scaleX(0);
    transform-origin: right center;
}

.mn-dsmenu-animation-sweep-left.mn-dsmenu-pointer-background .mn-dsmenu-nav > ul > li:hover > a::before,
.mn-dsmenu-animation-sweep-left.mn-dsmenu-pointer-background .mn-dsmenu-nav > ul > li.current-menu-item > a::before {
    transform: scaleX(1);
    opacity: 1;
}

/* Background: Sweep Right */
.mn-dsmenu-animation-sweep-right.mn-dsmenu-pointer-background .mn-dsmenu-nav > ul > li > a::before {
    transform: scaleX(0);
    transform-origin: left center;
}

.mn-dsmenu-animation-sweep-right.mn-dsmenu-pointer-background .mn-dsmenu-nav > ul > li:hover > a::before,
.mn-dsmenu-animation-sweep-right.mn-dsmenu-pointer-background .mn-dsmenu-nav > ul > li.current-menu-item > a::before {
    transform: scaleX(1);
    opacity: 1;
}

/* ═══════════════════════════════════════════
   DROPDOWN / SUBMENU
   ═══════════════════════════════════════════ */

.mn-dsmenu-nav .sub-menu {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}

/* Nested sub-menus open to the right */
.mn-dsmenu-nav .sub-menu .sub-menu {
    top: -8px;
    left: 100%;
    margin-top: 0;
}

/* Show submenu on hover */
.mn-dsmenu-nav li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Submenu link styles */
.mn-dsmenu-nav .sub-menu a {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.mn-dsmenu-nav .sub-menu a:hover {
    background-color: #f5f5f5;
}

/* ── Dropdown Animations ── */

/* Fade Up */
[data-submenu-animation="fade-up"] .sub-menu {
    transform: translateY(10px);
}

[data-submenu-animation="fade-up"] li:hover > .sub-menu {
    transform: translateY(0);
}

[data-submenu-animation="fade-up"] .sub-menu .sub-menu {
    transform: translateX(10px);
}

[data-submenu-animation="fade-up"] .sub-menu li:hover > .sub-menu {
    transform: translateX(0);
}

/* Fade Down */
[data-submenu-animation="fade-down"] .sub-menu {
    transform: translateY(-10px);
}

[data-submenu-animation="fade-down"] li:hover > .sub-menu {
    transform: translateY(0);
}

/* Fade */
[data-submenu-animation="fade"] .sub-menu {
    transform: none;
}

/* Slide Down */
[data-submenu-animation="slide"] .sub-menu {
    transform: scaleY(0);
    transform-origin: top center;
}

[data-submenu-animation="slide"] li:hover > .sub-menu {
    transform: scaleY(1);
}

/* None */
[data-submenu-animation="none"] .sub-menu {
    transition: none;
    transform: none;
}

/* ═══════════════════════════════════════════
   VERTICAL LAYOUT
   ═══════════════════════════════════════════ */

.mn-dsmenu-layout-vertical .mn-dsmenu-nav > ul > li > a {
    width: 100%;
}

.mn-dsmenu-layout-vertical .mn-dsmenu-nav .sub-menu {
    top: 0;
    left: 100%;
}

/* ═══════════════════════════════════════════
   RESPONSIVE - Tablet
   ═══════════════════════════════════════════ */

@media (max-width: 1024px) {
    .mn-dsmenu-nav > ul {
        flex-wrap: wrap;
    }

    .mn-dsmenu-nav > ul > li > a {
        padding: 8px 12px;
        font-size: 14px;
    }

    /* Prevent sub-menus from going off-screen */
    .mn-dsmenu-nav .sub-menu .sub-menu {
        left: auto;
        right: 100%;
    }
}

/* ═══════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════ */

/* Keyboard focus styles */
.mn-dsmenu-nav a:focus-visible {
    outline: 2px solid #557df3;
    outline-offset: 2px;
}

/* Show submenu on keyboard focus within */
.mn-dsmenu-nav li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) translateX(0) scaleY(1);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mn-dsmenu-nav > ul > li > a::before,
    .mn-dsmenu-nav > ul > li > a::after,
    .mn-dsmenu-nav .sub-menu,
    .mn-dsmenu-indicator {
        transition: none !important;
    }
}

/* ========================================
   MEGA MENU
   ======================================== */

.mn-dsmenu-list .menu-item-has-mega {
    /* The <li> hosts the absolutely-positioned mega panel. */
    position: relative;
}

.mn-dsmenu-mega {
    --mn-mega-top-offset: 0px;
    position: absolute;
    top: calc(100% + var(--mn-mega-top-offset));
    z-index: 999;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    /* Hidden until the parent <li> is hovered/focused. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

/* Position modes */
.mn-dsmenu-mega[data-position="left"]   { left: 0; }
.mn-dsmenu-mega[data-position="right"]  { right: 0; }
.mn-dsmenu-mega[data-position="center"] {
    left: 50%;
    transform: translateX(-50%);
}

/* Width modes */
.mn-dsmenu-mega[data-width="container"] {
    width: max-content;
    max-width: 90vw;
}
.mn-dsmenu-mega[data-width="full"] {
    /* JS computes the actual offset / width based on viewport or selector. */
    width: 100vw;
    max-width: 100vw;
}
.mn-dsmenu-mega[data-width="custom"] {
    /* Inline width set by walker via style="width:Npx;". */
    max-width: 100vw;
}

/* Open state (hover, focus-within, or .is-open via JS for click trigger) */
.mn-dsmenu-list > li.menu-item-has-mega:hover > .mn-dsmenu-mega,
.mn-dsmenu-list > li.menu-item-has-mega:focus-within > .mn-dsmenu-mega,
.mn-dsmenu-list > li.menu-item-has-mega.is-mega-open > .mn-dsmenu-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Animations (toggle via data-mega-animation on .mn-dsmenu-nav) */
.mn-dsmenu-nav[data-mega-animation="fade-up"] .mn-dsmenu-mega {
    transform: translate(var(--mn-mega-tx, 0), 12px);
}
.mn-dsmenu-nav[data-mega-animation="fade-down"] .mn-dsmenu-mega {
    transform: translate(var(--mn-mega-tx, 0), -12px);
}
.mn-dsmenu-nav[data-mega-animation="fade-up"]   .mn-dsmenu-mega[data-position="center"] { --mn-mega-tx: -50%; }
.mn-dsmenu-nav[data-mega-animation="fade-down"] .mn-dsmenu-mega[data-position="center"] { --mn-mega-tx: -50%; }

.mn-dsmenu-nav[data-mega-animation]:not([data-mega-animation="none"]) .mn-dsmenu-list > li.menu-item-has-mega:hover > .mn-dsmenu-mega,
.mn-dsmenu-nav[data-mega-animation]:not([data-mega-animation="none"]) .mn-dsmenu-list > li.menu-item-has-mega:focus-within > .mn-dsmenu-mega,
.mn-dsmenu-nav[data-mega-animation]:not([data-mega-animation="none"]) .mn-dsmenu-list > li.menu-item-has-mega.is-mega-open > .mn-dsmenu-mega {
    transform: translate(var(--mn-mega-tx, 0), 0);
}

/* Inner wrapper — controlled by Style → Mega Menu Container → Padding */
.mn-dsmenu-mega-inner {
    padding: 24px;
}

/* Empty state fallback */
.mn-dsmenu-mega-empty {
    color: #999;
    font-style: italic;
    font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
    .mn-dsmenu-mega { transition: none !important; }
}

/* ── Phase 2: Item decoration (icon + badge) ── */
.mn-dsmenu-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
    line-height: 1;
}
.mn-dsmenu-label { display: inline-block; }
.mn-dsmenu-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* ── Phase 4: Click-trigger mode ── */
/* When trigger=click, neither hover nor focus-within should open the panel —
   only the explicit .is-mega-open class added by the JS click handler. */
.mn-dsmenu-nav[data-mega-trigger="click"] .mn-dsmenu-list > li.menu-item-has-mega:hover > .mn-dsmenu-mega,
.mn-dsmenu-nav[data-mega-trigger="click"] .mn-dsmenu-list > li.menu-item-has-mega:focus-within > .mn-dsmenu-mega {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.mn-dsmenu-nav[data-mega-trigger="click"] .mn-dsmenu-list > li.menu-item-has-mega.is-mega-open > .mn-dsmenu-mega {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* ── Phase 3: AJAX loading state ── */
.mn-dsmenu-mega.is-mega-pending {
    min-height: 120px;
}
.mn-dsmenu-mega-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    width: 100%;
}
.mn-dsmenu-mega-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: #555;
    border-radius: 50%;
    animation: mn-dsmenu-spin 0.7s linear infinite;
}
@keyframes mn-dsmenu-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .mn-dsmenu-mega-spinner { animation-duration: 2s; }
}