/*
 * Desktop mega menu — full-width panel under header.
 * Must override Iori header.scss rules on .main-menu li ul (otherwise inner lists use flyout positioning).
 * Closed state uses display:none so panels never sit in the float layout when CSS loads late or 404s.
 */

@media (min-width: 1200px) {
    /* Dropdowns must not be clipped by the nav row */
    header.header.sticky-bar .header-nav,
    header.header.sticky-bar .header-nav .nav-main-menu {
        overflow: visible !important;
    }

    header.header.sticky-bar {
        position: relative;
    }

    /* Anchor panels to the bar, not each narrow <li> */
    header.header.sticky-bar ul.main-menu > li.has-mega-menu {
        position: static !important;
    }

    header.header.sticky-bar ul.main-menu > li.has-mega-menu > .mega-menu-dropdown {
        display: none !important;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        width: 100%;
        max-width: none;
        padding: 0;
        margin: 0;
        background: #fff;
        border: none;
        border-top: 1px solid #e5e7eb;
        border-radius: 0;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
        z-index: 10050;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
    }

    header.header.sticky-bar ul.main-menu > li.has-mega-menu > .mega-menu-dropdown::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 0;
        right: 0;
        height: 14px;
    }

    header.header.sticky-bar ul.main-menu > li.has-mega-menu:hover > .mega-menu-dropdown {
        display: block !important;
        pointer-events: auto;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0);
    }

    .mega-menu-container {
        max-width: 1320px;
        margin: 0 auto;
        padding: 36px 24px 40px;
    }

    .mega-menu-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 32px 40px;
        align-items: start;
    }

    .mega-menu-col-label,
    .mega-menu-aside-label {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #111827;
        margin-bottom: 16px;
        line-height: 1.3;
    }

    /* Kill theme flyout styles inside mega panel (higher specificity than .header .main-menu li ul) */
    header.header.sticky-bar ul.main-menu li.has-mega-menu .mega-menu-dropdown ul {
        position: static !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        z-index: auto !important;
        transition: none !important;
    }

    header.header.sticky-bar ul.main-menu li.has-mega-menu .mega-menu-dropdown li {
        float: none !important;
        width: auto !important;
        padding: 0 !important;
        text-align: left;
    }

    /* Nested column lists: no theme “flyout” on hover */
    header.header.sticky-bar ul.main-menu li.has-mega-menu .mega-menu-dropdown li:hover > ul {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        position: static !important;
    }

    .mega-menu-link-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mega-menu-link-list > li {
        margin: 0 0 4px;
    }

    .mega-menu-link-list > li > a {
        display: inline-block;
        padding: 6px 0;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.4;
        color: #4b5563;
        text-decoration: none;
        transition: color 0.15s ease;
    }

    .mega-menu-link-list > li > a:hover {
        color: #111827;
    }

    .mega-menu-link-list--nested {
        margin: 2px 0 12px 0;
        padding-left: 14px;
        border-left: 2px solid #e5e7eb;
    }

    .mega-menu-link-list--nested li {
        margin: 0 0 2px;
    }

    .mega-menu-link-list--nested a {
        display: block;
        padding: 4px 0;
        font-size: 14px;
        font-weight: 400;
        color: #6b7280;
        text-decoration: none;
    }

    .mega-menu-link-list--nested a:hover {
        color: #111827;
    }

    .mega-menu-col-solo-link {
        display: inline-block;
        font-size: 15px;
        font-weight: 600;
        color: #111827;
        text-decoration: none;
        padding: 4px 0;
    }

    .mega-menu-col-solo-link:hover {
        color: #024430;
    }

    .mega-menu-card {
        display: flex;
        gap: 14px;
        align-items: flex-start;
        padding: 12px 10px;
        margin: 0 -10px;
        border-radius: 10px;
        text-decoration: none;
        color: inherit;
        transition: background 0.15s ease;
    }

    .mega-menu-card:hover {
        background: #f9fafb;
    }

    .mega-menu-card-icon {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #024430;
        background: #f3f4f6;
        border-radius: 10px;
    }

    .mega-menu-card-icon img {
        width: 22px;
        height: 22px;
        object-fit: contain;
    }

    .mega-menu-card-icon i {
        font-size: 18px;
        line-height: 1;
    }

    .mega-menu-card-title {
        display: block;
        font-weight: 600;
        font-size: 15px;
        line-height: 1.35;
        color: #111827;
    }

    .mega-menu-card-desc {
        display: block;
        margin-top: 4px;
        font-size: 13px;
        line-height: 1.45;
        color: #6b7280;
    }

    .mega-menu-card--solo .mega-menu-card-title {
        padding: 8px 0;
    }

    .mega-menu-aside {
        background: #f9fafb;
        border-radius: 12px;
        padding: 22px 24px;
        border: 1px solid #e5e7eb;
    }

    .mega-menu-aside-list {
        list-style: none;
        margin: 0 0 20px;
        padding: 0;
    }

    .mega-menu-aside-list:last-child {
        margin-bottom: 0;
    }

    .mega-menu-aside-list li {
        margin: 0;
        padding: 0;
    }

    .mega-menu-aside-list a {
        display: block;
        padding: 8px 0;
        font-size: 14px;
        font-weight: 600;
        color: #111827;
        text-decoration: none;
    }

    .mega-menu-aside-list a:hover {
        color: #024430;
    }

    .mega-menu-aside-single {
        font-weight: 600;
        font-size: 14px;
        color: #111827;
        text-decoration: none;
    }
}

@media (max-width: 1199.98px) {
    .mega-menu-dropdown {
        display: none !important;
    }
}