/**
 * MedMenuLight - Front-office styles (structural)
 *
 * Appearance (colors, fonts, shadows) is managed by dynamic CSS.
 * This file handles layout, positioning, transitions and responsiveness only.
 *
 * @author    Mediacom87
 * @copyright Mediacom87
 * @license   AFL-3.0
 */

/* ============================================
   Navigation container
   ============================================ */
.medmenu-nav {
    position: relative;
    z-index: 1000;
    font-family: inherit;
}

.medmenu-container {
    margin: 0 auto;
    position: relative;
}

/* ============================================
   Top-level menu
   ============================================ */
.medmenu-top {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.medmenu-item {
    position: relative;
}

.medmenu-item > .medmenu-link {
    display: block;
    text-decoration: none;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

.medmenu-item > .medmenu-link:hover,
.medmenu-item:hover > .medmenu-link {
    text-decoration: none;
}

/* Has children indicator */
.medmenu-item.medmenu-has-children > .medmenu-link::after {
    margin-left: 5px;
    vertical-align: middle;
}

/* ============================================
   Dropdown submenus
   ============================================ */
.medmenu-sub {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    margin: 0;
    z-index: 1001;
}

/* Show on hover (desktop) */
.medmenu-item:hover > .medmenu-sub {
    display: block;
}

/* Sub-submenus open to the right */
.medmenu-sub .medmenu-sub {
    position: absolute;
    top: 0;
    left: 100%;
}

/* Subitem styling */
.medmenu-subitem {
    position: relative;
}

.medmenu-subitem > a {
    display: block;
    text-decoration: none;
    transition: background-color 0.15s ease, padding-left 0.15s ease;
    white-space: nowrap;
}

.medmenu-subitem > a:hover {
    text-decoration: none;
}

/* Sub-submenu indicator */
.medmenu-sub .medmenu-has-children > a::after {
    float: right;
    margin-left: 10px;
    line-height: inherit;
}

/* Show sub-submenu on hover */
.medmenu-subitem:hover > .medmenu-sub {
    display: block;
}

/* ============================================
   Toggle buttons (mobile)
   ============================================ */
.medmenu-toggle {
    display: none;
}

/* ============================================
   Burger button
   ============================================ */
.medmenu-burger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 12px 15px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.medmenu-burger-line {
    display: block;
    width: 24px;
    height: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Burger animation when open */
.medmenu-burger.medmenu-burger-active .medmenu-burger-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.medmenu-burger.medmenu-burger-active .medmenu-burger-line:nth-child(2) {
    opacity: 0;
}

.medmenu-burger.medmenu-burger-active .medmenu-burger-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* ============================================
   Mobile responsive
   ============================================ */
@media (max-width: 767px) {

    .medmenu-container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .medmenu-burger {
        display: flex;
    }

    .medmenu-top {
        display: none;
        flex-direction: column;
        width: 100%;
        order: 2;
    }

    .medmenu-top.medmenu-open {
        display: flex;
    }

    .medmenu-item {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .medmenu-item > .medmenu-link {
        padding: 12px 15px;
    }

    /* Disable hover on mobile */
    .medmenu-item:hover > .medmenu-sub,
    .medmenu-subitem:hover > .medmenu-sub {
        display: none;
    }

    /* Show toggle buttons on mobile */
    .medmenu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 0;
        top: 0;
        width: 44px;
        height: 100%;
        background: none;
        border: none;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        cursor: pointer;
        color: inherit;
        font-size: 18px;
        padding: 0;
    }

    .medmenu-toggle-icon::before {
        content: '+';
    }

    .medmenu-toggle.medmenu-toggle-active .medmenu-toggle-icon::before {
        content: '\2013';
    }

    /* Submenus on mobile */
    .medmenu-sub {
        position: static;
        box-shadow: none;
        padding: 0;
        border-radius: 0;
        border: none;
    }

    .medmenu-sub.medmenu-open {
        display: block;
    }

    .medmenu-sub .medmenu-sub {
        position: static;
        border-radius: 0;
    }

    .medmenu-subitem > a {
        padding-left: 30px;
    }

    .medmenu-subitem > a:hover {
        padding-left: 34px;
    }

    /* Depth indentation on mobile */
    .medmenu-sub .medmenu-sub .medmenu-subitem > a {
        padding-left: 45px;
    }

    .medmenu-sub .medmenu-sub .medmenu-sub .medmenu-subitem > a {
        padding-left: 60px;
    }

    /* Hide desktop indicators */
    .medmenu-item.medmenu-has-children > .medmenu-link::after,
    .medmenu-sub .medmenu-has-children > a::after {
        content: none;
    }

    .medmenu-subitem {
        position: relative;
    }

    .medmenu-subitem .medmenu-toggle {
        border-left-color: rgba(255, 255, 255, 0.05);
    }

    /* ============================================
       Classic theme integration mode
       ============================================ */

    /* In classic_theme mode, the menu is always visible on desktop.
       On mobile, the theme handles visibility via #_mobile_medmenu.
       The .medmenu-top must remain visible (no toggle needed). */
    .medmenu-theme-mobile .medmenu-top {
        display: flex;
    }
}

/* ============================================
   Classic theme mobile drawer styles
   ============================================ */

/* When the theme clones menu items into #_mobile_medmenu,
   apply mobile-friendly styles to our elements */
#_mobile_medmenu .medmenu-top {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}

#_mobile_medmenu .medmenu-item,
#_mobile_medmenu .medmenu-subitem {
    position: relative;
}

#_mobile_medmenu .medmenu-item > .medmenu-link,
#_mobile_medmenu .medmenu-subitem > a {
    display: block;
    text-decoration: none;
    white-space: normal;
}

#_mobile_medmenu .medmenu-sub {
    display: none;
    position: static;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0;
}

#_mobile_medmenu .medmenu-sub.medmenu-open {
    display: block;
}

#_mobile_medmenu .medmenu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 0;
    width: 44px;
    height: 100%;
    background: none;
    border: none;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    color: inherit;
    font-size: 18px;
    padding: 0;
}

#_mobile_medmenu .medmenu-toggle-icon::before {
    content: '+';
}

#_mobile_medmenu .medmenu-toggle.medmenu-toggle-active .medmenu-toggle-icon::before {
    content: '\2013';
}

#_mobile_medmenu .medmenu-subitem > a {
    padding-left: 30px;
}

#_mobile_medmenu .medmenu-sub .medmenu-sub .medmenu-subitem > a {
    padding-left: 45px;
}

#_mobile_medmenu .medmenu-item.medmenu-has-children > .medmenu-link::after,
#_mobile_medmenu .medmenu-sub .medmenu-has-children > a::after {
    content: none;
}