/* =================================================================
   DYNAMIC SIDEBAR MENU
   Styles for the vf_sidebar_menu shortcode (Porto-compatible category nav).
   Loaded via wp_enqueue_style in functions.php.
   ================================================================= */

/* Hide heading + hamburger on desktop — keep for mobile toggle */
@media screen and (min-width: 992px) {
    #main-sidebar-menu .widget-title {
        display: none !important;
    }
}

/* Remove gap above first menu item left by hidden title */
#main-sidebar-menu .sidebar-menu-wrap {
    margin-top: 0 !important;
}

/* -----------------------------------------------------------------
   FLEX COLUMN LAYOUT
   Only targets the DIRECT first-level sub-menu inside .inner.
   Must NOT use a general .sub-menu selector or grandchild sub-menus
   will inherit flex display and break Porto dropdown positioning.
   ----------------------------------------------------------------- */

#main-sidebar-menu .popup > .inner > .sub-menu {
    display: flex !important;
    flex-wrap: wrap !important;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Column widths — desktop */
#main-sidebar-menu .popup > .inner > .sub-menu.vf-cols-4 > li { width: 25% !important; }
#main-sidebar-menu .popup > .inner > .sub-menu.vf-cols-3 > li { width: 33.333% !important; }
#main-sidebar-menu .popup > .inner > .sub-menu.vf-cols-2 > li { width: 50% !important; }
#main-sidebar-menu .popup > .inner > .sub-menu.vf-cols-1 > li { width: 100% !important; }

#main-sidebar-menu .popup > .inner > .sub-menu > li {
    box-sizing: border-box;
    padding: 2px 6px;
}

/* -----------------------------------------------------------------
   TEXT: allow wrapping on first-level popup links only
   ----------------------------------------------------------------- */
#main-sidebar-menu .popup > .inner > .sub-menu > li > a {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    display: block !important;
    padding: 2px 0 !important;
}

/* -----------------------------------------------------------------
   UNIFIED TYPOGRAPHY — all three levels
   Level 1 (top nav): Porto sets 14px / line-height:17px / weight:400 / uppercase
   Level 2 (popup items): Porto wide-sub-menu sets weight:600, WooCommerce sets
     letter-spacing:-0.03em — override to match level 1.
   Level 3 (grandchildren): reset size and line-height to match levels 1 and 2.
   Goal: 14px / 17px line-height / weight:400 / uppercase / no letter-spacing.
   The long selector list is required to beat old cached rules by specificity.
   ----------------------------------------------------------------- */

#main-sidebar-menu .sidebar-menu a,
#main-sidebar-menu .popup a,
#main-sidebar-menu .popup > .inner > .sub-menu > li > a,
#main-sidebar-menu .popup li.sub > .sub-menu > li > a {
    font-size: 14px !important;
    line-height: 17px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
}

/* -----------------------------------------------------------------
   HOVER COLOR FIX
   WooCommerce adds .woocommerce-page .sidebar-content ul li a:hover
   { color: var(--porto-heading-color) } at specificity (0,3,3)
   which beats Porto white rule (0,3,2).
   Fix: ID selector gives specificity (1,2,2) which wins.
   ----------------------------------------------------------------- */
#main-sidebar-menu .sidebar-menu > li.menu-item:hover > a {
    color: #fff !important;
}

/* -----------------------------------------------------------------
   GRANDCHILD SUB-MENUS — dropdown on hover
   All rules use #main-sidebar-menu ID to ensure specificity (1,x,x)
   which beats the old cached broad rule (1,1,0) even if old CSS loads.
   ----------------------------------------------------------------- */

/* Hide grandchildren by default — positioned for flyout to the right */
#main-sidebar-menu .sidebar-menu .narrow .popup li.sub > .sub-menu,
#main-sidebar-menu .sidebar-menu .wide .popup li.sub > .sub-menu {
    display: none !important;
    position: absolute !important;
    left: 100% !important;
    top: -5px !important;
    background: #fff !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15) !important;
    min-width: 160px;
    padding: 4px 0 !important;
    z-index: 9999 !important;
    flex-wrap: nowrap !important;
    border-radius: 2px;
    width: auto !important;
}

/* Show on hover — ID keeps specificity above the hide rule */
#main-sidebar-menu .sidebar-menu .narrow .popup li.sub:hover > .sub-menu,
#main-sidebar-menu .sidebar-menu .wide .popup li.sub:hover > .sub-menu {
    display: block !important;
    opacity: 1 !important;
}

/* Grandchild links — padding and wrapping */
#main-sidebar-menu .popup li.sub > .sub-menu > li > a {
    padding: 5px 14px !important;
    white-space: nowrap !important;
    display: block !important;
}

/* -----------------------------------------------------------------
   RESPONSIVE BREAKPOINTS
   ----------------------------------------------------------------- */

@media screen and (max-width: 1280px) {
    #main-sidebar-menu .popup > .inner > .sub-menu.vf-cols-4 > li { width: 33.333% !important; }
}

@media screen and (max-width: 1100px) {
    #main-sidebar-menu .popup > .inner > .sub-menu.vf-cols-4 > li,
    #main-sidebar-menu .popup > .inner > .sub-menu.vf-cols-3 > li { width: 50% !important; }
}

@media screen and (max-width: 991px) {
    #main-sidebar-menu .popup > .inner > .sub-menu > li { width: 100% !important; }
}

/* -----------------------------------------------------------------
   MOBILE TOGGLE — show/hide sidebar menu on small screens
   Porto hides #main-sidebar-menu at 991px via its own stylesheet.
   We override that and use the .widget-title .toggle button to
   control visibility instead.
   ----------------------------------------------------------------- */

/* Override Porto hiding the whole menu on mobile */
@media screen and (max-width: 991px) {
    #main-sidebar-menu {
        display: block !important;
    }

    /* Show the toggle button and title on mobile */
    #main-sidebar-menu .widget-title {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 10px 15px;
        background: var(--porto-primary-color, #231f20);
        color: #fff;
        cursor: pointer;
        margin-bottom: 0;
    }

    #main-sidebar-menu .widget-title h5 {
        display: none !important;
    }

    #main-sidebar-menu .widget-title .toggle {
        color: #fff;
        font-size: 16px;
        cursor: pointer;
    }

    /* Hide menu by default on mobile — toggle opens it */
    #main-sidebar-menu .sidebar-menu-wrap {
        display: none;
    }

    /* Show when open class is added by Porto JS */
    #main-sidebar-menu.open .sidebar-menu-wrap,
    #main-sidebar-menu .sidebar-menu-wrap.open {
        display: block !important;
    }

    /* Mobile popup menus stack vertically */
    #main-sidebar-menu .popup {
        position: static !important;
        display: none;
        box-shadow: none !important;
        border: none !important;
    }

    #main-sidebar-menu .sidebar-menu li.menu-item.open > .popup {
        display: block !important;
    }
}

/* -----------------------------------------------------------------
   MOBILE SLIDE-OUT PANEL (#side-nav-panel)
   Polish the sidebar menu when rendered inside the hamburger nav.
   ----------------------------------------------------------------- */

/* Remove gap from empty .menu-wrap above sidebar menu */
#side-nav-panel > .menu-wrap:empty {
    display: none;
}

#side-nav-panel #main-sidebar-menu {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

#side-nav-panel #main-sidebar-menu .widget-title {
    border-top: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.05) !important;
    padding: 14px 20px !important;
    position: relative;
}

#side-nav-panel #main-sidebar-menu .widget-title h5 {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

#side-nav-panel #main-sidebar-menu .widget-title .toggle {
    display: none !important;
}

#side-nav-panel #main-sidebar-menu .sidebar-menu-wrap {
    display: block !important;
    background: transparent;
}

#side-nav-panel #main-sidebar-menu .sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

#side-nav-panel #main-sidebar-menu .sidebar-menu > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
}

#side-nav-panel #main-sidebar-menu .sidebar-menu > li:last-child {
    border-bottom: none;
}

#side-nav-panel #main-sidebar-menu .sidebar-menu > li > a {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 13px 44px 13px 20px !important;
    display: block !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
}

#side-nav-panel #main-sidebar-menu .sidebar-menu > li > a:hover,
#side-nav-panel #main-sidebar-menu .sidebar-menu > li.open > a {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.06) !important;
    text-decoration: none !important;
}

#side-nav-panel #main-sidebar-menu .sidebar-menu .arrow {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 44px !important;
    height: 46px !important;
    line-height: 46px !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.35) !important;
    cursor: pointer !important;
    font-size: 13px !important;
    z-index: 2;
}

#side-nav-panel #main-sidebar-menu .sidebar-menu > li.open > .arrow {
    color: rgba(255, 255, 255, 0.8) !important;
}

#side-nav-panel #main-sidebar-menu .popup {
    position: static !important;
    left: auto !important;
    right: auto !important;
    background: rgba(0, 0, 0, 0.2) !important;
    box-shadow: none !important;
    border: none !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

#side-nav-panel #main-sidebar-menu .popup > .inner,
#side-nav-panel .sidebar-menu .wide .popup > .inner,
#side-nav-panel .sidebar-menu .narrow .popup > .inner,
#side-nav-panel .sidebar-menu .narrow ul.sub-menu {
    background: transparent !important;
}

#side-nav-panel #main-sidebar-menu .popup .inner {
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
}

#side-nav-panel #main-sidebar-menu .popup .sub-menu {
    display: block !important;
    flex-wrap: nowrap !important;
    background: transparent !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

#side-nav-panel #main-sidebar-menu .popup .sub-menu > li {
    width: 100% !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

#side-nav-panel #main-sidebar-menu .popup .sub-menu > li:last-child {
    border-bottom: none;
}

#side-nav-panel #main-sidebar-menu .popup .sub-menu > li > a {
    color: rgba(255, 255, 255, 0.65) !important;
    background: transparent !important;
    padding: 10px 20px 10px 36px !important;
    display: block !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
    white-space: normal !important;
}

#side-nav-panel #main-sidebar-menu .popup .sub-menu > li > a:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.04) !important;
    text-decoration: none !important;
}

/* Grandchild sub-menus inside mobile panel */
#side-nav-panel #main-sidebar-menu .popup li.sub > .sub-menu {
    position: static !important;
    background: rgba(0, 0, 0, 0.12) !important;
    box-shadow: none !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 4px 0 !important;
}

#side-nav-panel #main-sidebar-menu .popup li.sub > .sub-menu > li > a {
    padding-left: 52px !important;
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    background: transparent !important;
}

#side-nav-panel #main-sidebar-menu .popup li.sub > .sub-menu > li > a:hover {
    color: rgba(255, 255, 255, 0.85) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

/* -----------------------------------------------------------------
   PRODUCT GALLERY: lower z-index on zoom button
   so it does not float above sidebar popups
   ----------------------------------------------------------------- */
.woocommerce-product-gallery__trigger {
    z-index: 1 !important;
}