/* Parent <li> that triggers the mega panel.
   Divi sets the menu li position: relative by default; we override to static
   so the panel can stretch to the full nav width. */
.amrod-has-mega { position: static !important; }

/* The mega panel itself */
.amrod-has-mega > .amrod-mega-panel {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    width: min(1300px, 96vw);
    max-height: 75vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-top: 3px solid #d60000;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    padding: 1.25em 1.5em;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform-origin: top center;
    transition: opacity 0.18s ease, visibility 0.18s ease;
    text-align: left;
}
/* Hide Divi's auto-generated submenu so it doesn't fight with our panel */
.amrod-has-mega > ul.sub-menu,
.amrod-has-mega > ul.children {
    display: none !important;
}
.amrod-has-mega:hover > .amrod-mega-panel,
.amrod-has-mega:focus-within > .amrod-mega-panel,
.amrod-has-mega.amrod-mega-open > .amrod-mega-panel {
    opacity: 1;
    visibility: visible;
}

/* Grid of category columns */
.amrod-mega-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1em 1.5em;
}
.amrod-mega-col { min-width: 0; }

.amrod-mega-heading {
    display: block;
    font-weight: 700;
    font-size: 0.95em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #d60000 !important;
    margin-bottom: 0.5em;
    padding-bottom: 0.35em;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
}
.amrod-mega-heading:hover { color: #a30000 !important; }

.amrod-mega-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.amrod-mega-col li { margin: 0; padding: 0; }
.amrod-mega-col a {
    display: block;
    padding: 0.25em 0;
    font-size: 0.88em;
    color: #333 !important;
    text-decoration: none;
    line-height: 1.3;
}
.amrod-mega-col a:hover {
    color: #d60000 !important;
    background: transparent;
}

/* Second-level (sub-category names) — bolder than L3 leaves */
.amrod-mega-l2 > .amrod-mega-l2-item { margin-bottom: 0.5em; }
.amrod-mega-subheading {
    font-weight: 600;
    font-size: 0.9em !important;
    color: #222 !important;
    padding: 0.2em 0 0.15em !important;
}
.amrod-mega-subheading:hover { color: #d60000 !important; }

/* Third-level (leaves) — indented, lighter */
.amrod-mega-l3 {
    margin-left: 0.5em !important;
    padding-left: 0.6em !important;
    border-left: 1px solid #f0f0f0;
}
.amrod-mega-l3 a {
    font-size: 0.82em !important;
    color: #555 !important;
    padding: 0.15em 0 !important;
}
.amrod-mega-l3 a:hover { color: #d60000 !important; }

.amrod-mega-more a {
    margin-top: 0.2em;
    font-style: italic;
    color: #d60000 !important;
    font-size: 0.8em !important;
}

/* Mobile / narrow viewports — collapse into a normal cascading list
   so it still works inside Divi's hamburger menu */
@media (max-width: 980px) {
    .amrod-has-mega > .amrod-mega-panel {
        position: static;
        transform: none;
        width: auto;
        max-width: 100%;
        opacity: 1;
        visibility: visible;
        border: 0;
        border-top: 1px solid #eee;
        box-shadow: none;
        padding: 0.5em 0 0;
        background: transparent;
    }
    .amrod-mega-grid {
        grid-template-columns: 1fr;
        gap: 0.5em;
    }
    .amrod-mega-heading {
        border-bottom: 0;
        padding-bottom: 0.2em;
        margin-bottom: 0.2em;
    }
    .amrod-mega-col a { padding: 0.4em 0.5em; }
}