/* =========================================================
   GesundeFakten – Mega-Menü
   Ergänzt/überschreibt .main-navigation aus style.min.css.
   Selektoren sind bewusst mit ".main-navigation .mega-panel"
   präfixiert, um die Theme-Regeln ".main-navigation ul ul"
   (klassische Dropdowns: position:absolute; visibility:hidden)
   in der Spezifität zu schlagen.
   ========================================================= */

/* Panels dürfen aus der Navi-Leiste herausragen und über dem Hero-Slider liegen */
.main-navigation { overflow: visible; position: relative; z-index: 100; }
.main-navigation li.mega { position: relative; overflow: visible; }

/* WICHTIG gegen Hover-Flackern: Das dekorative Shine-Overlay (.main-navigation li::before)
   ist mit left:-100% positioniert und ragte früher unter overflow:hidden verborgen in den
   Nachbar-Menüpunkt. Durch overflow:visible (für das Panel) wird es sichtbar UND hit-testbar
   und fängt den Mauszeiger über dem Nachbarn ab -> Hover pendelt -> Endlos-Flackern.
   Dekorative Pseudos dürfen den Zeiger nie abfangen. */
.main-navigation::before,
.main-navigation li::before {
    pointer-events: none;
}

/* Caret an den Gruppen-Labels */
.mega-caret {
    font-size: 10px;
    line-height: 1;
    margin-left: 3px;
    display: inline-block;
    transition: transform .25s ease;
}
.main-navigation li.mega:hover > a .mega-caret,
.main-navigation li.mega:focus-within > a .mega-caret {
    transform: rotate(180deg);
}

/* ---------- Desktop Mega-Panel ---------- */
.main-navigation li.mega > .mega-panel {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 540px;
    max-width: 680px;
    background: #ffffff;
    border-top: 3px solid #b4636f;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
    padding: 22px 26px;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 6px 34px;
    opacity: 0;
    visibility: hidden;
    /* KEIN vertikaler Slide: Panel klebt immer bündig an top:100% (keine Transition-Lücke,
       in die der Zeiger beim schnellen Reinfahren fallen könnte). Nur weiches Ein-/Ausblenden. */
    transition: opacity .2s ease, visibility .2s;
    z-index: 1000;
    /* Geschlossene Panels dürfen den Zeiger NICHT abfangen. Sonst überlappt z.B. das
       unsichtbare (opacity:0) Gesundheit-Panel (--right) den geöffneten Ernährung-Bereich,
       liegt DOM-später also oben und stiehlt den Hover -> Flackern auf den Unterpunkten. */
    pointer-events: none;
}
.main-navigation li.mega > .mega-panel.mega-panel--right {
    left: auto;
    right: 0;
}
/* Unsichtbare Hover-Brücke: überdeckt die 0-Pixel-Naht zwischen Menüpunkt und Panel, damit
   der Hover beim Übergang Item->Panel nie abreißt. Teil des li.mega -> hält li:hover. */
.main-navigation li.mega > .mega-panel::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}
.main-navigation li.mega:hover > .mega-panel,
.main-navigation li.mega:focus-within > .mega-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Theme-Dropdown-Reset für die inneren Listen des Panels */
.main-navigation .mega-panel ul {
    position: static;
    display: block;
    min-width: 0;
    width: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    top: auto;
    left: auto;
    right: auto;
    background: none;
    box-shadow: none;
    border-radius: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    list-style: none;
    margin: 0;
    padding: 0;
}
.main-navigation .mega-panel li {
    margin: 0;
    overflow: visible;
    display: list-item;
}

.main-navigation .mega-panel .mega-col-title {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #96505b;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f6e9e4;
}

/* Themen-Spalte */
.main-navigation .mega-panel .mega-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    color: #4a3b3f;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    border: none;
    border-radius: 8px;
    transition: background .2s ease, color .2s ease;
}
.main-navigation .mega-panel .mega-links a:hover {
    background: #fdf4f1;
    color: #96505b;
    transform: none;
    box-shadow: none;
    text-shadow: none;
}
.main-navigation .mega-panel a::after { display: none; }
.mega-count {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    color: #a8969a;
    background: #fbf1ee;
    border-radius: 20px;
    padding: 2px 9px;
    min-width: 26px;
    text-align: center;
}
.main-navigation .mega-panel .mega-links a:hover .mega-count {
    background: #f4ded8;
    color: #96505b;
}

/* Neueste-Artikel-Spalte */
.main-navigation .mega-panel .mega-recent { min-width: 0; }
.main-navigation .mega-panel .mega-recent-list li { margin: 0 0 4px; }
.main-navigation .mega-panel .mega-recent-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 8px;
    border-radius: 8px;
    color: #4a3b3f;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    text-transform: none;
    letter-spacing: 0;
    border: none;
    transition: background .2s ease;
}
.main-navigation .mega-panel .mega-recent-list a:hover {
    background: #fdf4f1;
    transform: none;
    box-shadow: none;
    text-shadow: none;
}
.mega-recent-thumb {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    background: #fbf1ee;
}
.mega-recent-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Mobil (bestehender Hamburger) ---------- */
@media (max-width: 768px) {
    .main-navigation { overflow: visible; }

    /* Ausklappmenü scrollbar halten, damit alle Links erreichbar bleiben */
    .main-navigation ul.is-open {
        max-height: calc(100vh - 130px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mega-caret { float: right; margin-top: 2px; }

    /* Panels stehen im Fluss, immer sichtbar wenn das Menü offen ist */
    .main-navigation li.mega > .mega-panel,
    .main-navigation li.mega > .mega-panel.mega-panel--right {
        position: static;
        left: auto;
        right: auto;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: block;
        min-width: 0;
        max-width: none;
        padding: 4px 0 10px;
        background: rgba(255, 255, 255, 0.06);
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .main-navigation .mega-panel .mega-col-title {
        color: #f2d9d3;
        border-bottom-color: rgba(255, 255, 255, 0.18);
        padding: 0 20px 6px;
        margin-bottom: 6px;
    }

    .main-navigation .mega-panel .mega-links a,
    .main-navigation .mega-panel .mega-recent-list a {
        color: #fdf4f1;
        padding: 11px 22px 11px 34px;
        font-size: 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0;
    }
    .main-navigation .mega-panel .mega-links a:hover,
    .main-navigation .mega-panel .mega-recent-list a:hover {
        background: rgba(255, 255, 255, 0.12);
        color: #ffffff;
    }
    .mega-count {
        color: #f8e8e3;
        background: rgba(255, 255, 255, 0.15);
    }

    /* Auf Mobil die Themen ausreichend – Neueste-Artikel-Block einklappen */
    .main-navigation .mega-panel .mega-recent { display: none; }
}