/* ============================================
   MEGA MENU FORCE DISPLAY - ULTIMATE FIX
   ============================================
   Add this to the BOTTOM of your theme's style.css
   or in Appearance → Customize → Additional CSS
   ============================================ */

/* Force show dropdown when open class is present */
li.infoera-megamenu.open > ul.dropdown-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: auto !important; /* Let it position naturally below navbar */
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    background: #ffffff !important;
    z-index: 9999 !important;
    margin: 0 !important;
    margin-top: 0 !important; /* No extra spacing */
    padding: 30px 0 !important;
    border: none !important;
    box-shadow: 0 6px 12px rgba(0,0,0,0.175) !important;
    transform: none !important;
    clip: auto !important;
    clip-path: none !important;
}

/* Alternative: If your navbar has fixed height, use this instead: */
/*
li.infoera-megamenu.open > ul.dropdown-menu {
    top: 60px !important; /* Change 60px to your navbar height */
}
*/

/* Center content inside mega menu */
li.infoera-megamenu.open > ul.dropdown-menu > li {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
}

/* Hide dropdown when NOT open */
li.infoera-megamenu:not(.open) > ul.dropdown-menu {
    display: none !important;
}

/* Ensure parent containers allow overflow */
.navbar.yamm,
nav.navbar.yamm {
    overflow: visible !important;
    position: relative !important;
}

.navbar .container,
.navbar .container-fluid,
.navbar-collapse {
    overflow: visible !important;
}

/* Fix positioning context */
.header,
.navbar-header {
    position: relative !important;
}

/* Mega menu columns layout */
.infoera-megamenu .col-sm-15 {
    width: 20% !important;
    float: left !important;
    padding: 0 15px !important;
}

.infoera-megamenu .col-sm-45 {
    width: 75% !important;
    float: left !important;
    padding: 0 15px !important;
}

/* Hide empty columns */
.infoera-megamenu .col-sm-15:empty,
.infoera-megamenu .col-sm-45:empty {
    display: none !important;
    width: 0 !important;
}

/* Hide columns with only empty content */
.infoera-megamenu .infoera-offer-list:has(.infoera-megamenu-column:empty) {
    display: none !important;
}

/* Hide columns where span is "-" and menu is empty */
.infoera-megamenu .infoera-offer-list > span:only-child {
    display: none !important;
}

.infoera-megamenu .infoera-offer-list:has(> span:contains("-")) .infoera-megamenu-column:empty {
    display: none !important;
}

/* Clear floats */
.infoera-megamenu .row:after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

/* Mega menu content styling */
.infoera-offer-title h3 {
    font-size: 18px !important;
    font-weight: bold !important;
    border-bottom: 2px solid #e0e0e0 !important;
    padding-bottom: 10px !important;
    margin-bottom: 15px !important;
}

.infoera-megamenu-column {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.infoera-megamenu-column li {
    padding: 5px 0 !important;
}

/* Hide empty menu items (no text, no link) */
.infoera-megamenu-column li > a:empty {
    display: none !important;
}

/* Hide parent li if it only has empty link and NO submenu */
.infoera-megamenu-column li:not(.has-children) > a:empty {
    display: none !important;
}

.infoera-megamenu-column li:not(.has-children):has(> a:empty) {
    display: none !important;
}

/* Specific fix for 4th column with dash title and empty items */
.infoera-megamenu .infoera-offer-list > span:contains("-") {
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide the entire column if it has dash title and no visible items */
.infoera-megamenu .col-sm-15.infoera-offer-list:has(> span:contains("-")) .infoera-megamenu-column li:not(.has-children) {
    display: none !important;
}

.infoera-megamenu-column a {
    color: #555 !important;
    text-decoration: none !important;
    display: block !important;
    padding: 5px 0 !important;
    outline: none !important;
    border: none !important;
}

.infoera-megamenu-column a:hover {
    color: #0a7db8 !important;
}

.infoera-megamenu-column a:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* ============================================
   HIDE SUBMENU BY DEFAULT
   ============================================ */

/* ============================================
   SUBMENU ACTIVE STATE - ULTRA SPECIFIC
   ============================================ */

/* Force show active submenu with maximum specificity */
.infoera-megamenu .infoera-offer-list > ul.submenu-active,
.col-sm-15.infoera-offer-list > ul.submenu-active,
ul.submenu-active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #fff !important;
    z-index: 999 !important;
    padding: 10px 15px !important;
    min-height: 300px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    overflow: visible !important;
    max-height: none !important;
}

/* Submenu links styling */
.submenu-active li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 5px 0 !important;
}

.submenu-active li a {
    color: #555 !important;
    text-decoration: none !important;
    display: block !important;
    padding: 5px 0 !important;
    outline: none !important;
    border: none !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

.submenu-active li a:hover {
    color: #0a7db8 !important;
}

/* Go back button special styling */
.submenu-active .go-back a {
    font-weight: bold !important;
    color: #0a7db8 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    margin-bottom: 10px !important;
}

.submenu-active .go-back a:hover {

}

/* Hide submenu items by default - ONLY when is-hidden */
.infoera-megamenu-column ul.is-hidden {
    display: none !important;
}

/* Initially hide all sub-menus */
.infoera-megamenu-column .sub-menu.is-hidden,
.infoera-megamenu-column .depth-0.is-hidden {
    display: none !important;
}

/* Show submenu when not hidden - ALL DEVICES */
.infoera-megamenu-column .sub-menu:not(.is-hidden),
.infoera-megamenu-column ul:not(.is-hidden) {
    display: block !important;
}

/* Hide parent list when moves-out class is present - HIGHER SPECIFICITY */
.infoera-megamenu .infoera-offer-list ul.infoera-megamenu-column.moves-out,
ul.infoera-megamenu-column.moves-out {
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    position: relative !important;
}

/* CRITICAL: Submenu overlays on top when visible */
/* Make column container positioned so absolute submenu works */
.infoera-megamenu .infoera-offer-list,
.infoera-offer-list {
    position: relative !important;
    min-height: 300px !important;
}

/* Submenu positioning - absolute overlay within the column container */
.infoera-megamenu .infoera-offer-list .infoera-megamenu-column .has-children > ul:not(.is-hidden),
.infoera-megamenu-column .has-children > ul:not(.is-hidden) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    background: #fff !important;
    padding: 10px 15px !important;
    margin: 0 !important;
    z-index: 999 !important;
    min-height: 300px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

/* Make sure submenu items are visible and styled */
.infoera-megamenu-column .has-children > ul:not(.is-hidden) li {
    display: block !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.infoera-megamenu-column .has-children > ul:not(.is-hidden) li:last-child {
    border-bottom: none !important;
}

.infoera-megamenu-column .has-children > ul:not(.is-hidden) a {
    display: block !important;
    color: #555 !important;
    text-decoration: none !important;
    padding: 5px 0 !important;
}

.infoera-megamenu-column .has-children > ul:not(.is-hidden) a:hover {
    color: #0a7db8 !important;
}

/* Items with children - styling */
@media (min-width: 769px) {
    .infoera-megamenu-column .has-children > a {
        position: relative !important;
    }

    /* Show arrow ONLY if submenu exists and is not empty */
    .infoera-megamenu-column .has-children:has(> ul.sub-menu) > a:after,
    .infoera-megamenu-column .has-children:has(> ul.is-hidden) > a:after {
        content: "›" !important;
        position: absolute !important;
        right: 5px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 16px !important;
        opacity: 0.3 !important;
        pointer-events: none !important;
    }

    /* Add padding for arrow space */
    .infoera-megamenu-column .has-children:has(> ul) > a {
        padding-right: 20px !important;
    }
}

/* On mobile, show arrow for all items with children */
@media (max-width: 768px) {
    .infoera-megamenu-column .has-children > a {
        position: relative !important;
        padding-right: 25px !important;
    }

    .infoera-megamenu-column .has-children > a:after {
        content: "›" !important;
        position: absolute !important;
        right: 5px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 20px !important;
        opacity: 0.5 !important;
    }
}

/* Go back button styling */
.infoera-megamenu-column .go-back {
    background: #f5f5f5 !important;
    font-weight: bold !important;
    border-bottom: 2px solid #ddd !important;
    margin-bottom: 10px !important;
}

.infoera-megamenu-column .go-back a:before {
    content: "← " !important;
}

/* Mobile mega menu navigation states */
.moves-out {
    position: relative !important;
    left: -100% !important;
    opacity: 0 !important;
    transition: all 0.3s ease !important;
    pointer-events: none !important;
}

.has-children.selected > a {
    font-weight: bold !important;
    color: #0a7db8 !important;
}

/* Button row */
.infoera-btn-row {
    margin-top: 30px !important;
    padding-top: 20px !important;
    border-top: 1px solid #e0e0e0 !important;
    clear: both !important;
}

/* Responsive */
@media (max-width: 768px) {
    li.infoera-megamenu.open > ul.dropdown-menu {
        position: static !important;
        width: 100% !important;
    }

    .infoera-megamenu .col-sm-15,
    .infoera-megamenu .col-sm-45 {
        width: 100% !important;
        float: none !important;
    }
}