/*
 * BrikoScout Mega-Menu Pilot – Styling
 * Nur geladen, wenn der serverseitige Pilotmodus aktiv ist (siehe
 * brikoscout-megamenu-pilot.php). Beeinflusst ausschliesslich das per
 * JS angehaengte Pfeil-Element und Panel, keine bestehenden Header-Regeln.
 */

.bs-megapilot-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Rein visuelles Ausblenden datenlos gewordener Hauptpunkte im Pilot
   (aktuell "Sicherheit & Smart Home" bei 0 Produkten, siehe pilot.js).
   Das blosse hidden-Attribut allein wuerde hier NICHT greifen: das
   bestehende Theme-CSS setzt auf .bs-nav-preview-category bereits einen
   eigenen display-Wert mit derselben Spezifitaet wie [hidden] - daher
   !important, ausschliesslich auf dieser eigenen, ausschliesslich per JS
   im Pilot vergebenen Klasse (keine Aenderung an bestehenden
   Theme-/Header-Regeln). */
.bs-megapilot-hidden-main-point {
    display: none !important;
}

/*
 * Der Pfeil wird bewusst absolut positioniert statt zusaetzlich in den
 * Flex-Fluss der Pillenleiste eingereiht: dadurch vergroessert er weder
 * die Breite von .bs-nav-preview-categories noch die Gesamtbreite des
 * Headers - wichtig, damit der bereits bekannte 1024-/1200-px-Fehler
 * der bestehenden Navigation nicht zusaetzlich verschaerft wird. Er
 * ueberlagert das rechte Innenpolster der vorhandenen Pillen-Schaltflaeche.
 */
.bs-megapilot-arrow {
    position: absolute;
    top: 50%;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color .15s ease, transform .15s ease;
}

.bs-megapilot-wrap.is-open .bs-megapilot-arrow {
    transform: translateY(-50%) rotate(180deg);
}

.bs-megapilot-arrow:hover,
.bs-megapilot-arrow:focus-visible {
    background: rgba(255, 255, 255, .18);
    outline: none;
}

.bs-megapilot-wrap.is-open .bs-megapilot-arrow {
    background: rgba(255, 255, 255, .22);
}

/*
 * Das Panel steht IMMER (auf allen Breiten) per position:fixed ausserhalb
 * des normalen Dokumentenflusses. Dadurch kann es die bestehende
 * Pillenleiste (.bs-nav-preview-categories) unter keinen Umstaenden in
 * die Breite treiben oder umbrechen lassen - unabhaengig davon, ob das
 * Panel gerade als schwebendes Desktop-Feld oder als mobiles Akkordeon-
 * Blatt dargestellt wird. Nur die INNERE Darstellung (Spalten vs.
 * Akkordeon) unterscheidet sich responsiv.
 */
.bs-megapilot-panel {
    position: fixed;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(6, 21, 13, .18), 0 2px 8px rgba(6, 21, 13, .08);
    border: 1px solid rgba(23, 60, 40, .08);
    padding: 22px 26px 16px;
    z-index: 999999;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
}

.bs-megapilot-panel[hidden] {
    display: none !important;
}

/* Desktop / grosse Tablets (> 1024px): schwebendes, zentriertes Panel,
   Position wird zusaetzlich per JS geklemmt (bleibt im Viewport). */
@media (min-width: 1025px) {
    .bs-megapilot-panel {
        top: 0;
        left: 50%;
        width: min(920px, calc(100vw - 32px));
        max-width: min(920px, calc(100vw - 32px));
        transform: translate(-50%, 8px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .15s ease, transform .15s ease;
    }

    /* Etwas breiteres Panel fuer Hauptpunkte mit mehr Datenmenge (z. B.
       "Haus & Wohnen"). Bleibt ueber calc(100vw - 32px) garantiert im
       Viewport, auch bei 1024/1200px - keine zusaetzliche Ueberbreite. */
    .bs-megapilot-panel--wide {
        width: min(1100px, calc(100vw - 32px));
        max-width: min(1100px, calc(100vw - 32px));
    }

    /*
     * Adaptive Panelbreite: die tatsaechlich gerenderte Gruppenzahl (PHP-
     * seitig ermittelt, siehe wp_footer-Hook) bestimmt Breite UND
     * Spaltenzahl. Ohne diese Klassen (4 Gruppen, z. B. "Grill &
     * Outdoor"/"Haus & Wohnen"/"Werkzeuge") bleibt exakt das bisherige,
     * bereits geprüfte Verhalten (920px bzw. 1100px, 4 Spalten) erhalten.
     */
    .bs-megapilot-panel--cols-1 {
        width: min(360px, calc(100vw - 32px));
        max-width: min(360px, calc(100vw - 32px));
    }

    .bs-megapilot-panel--cols-2 {
        width: min(620px, calc(100vw - 32px));
        max-width: min(620px, calc(100vw - 32px));
    }

    .bs-megapilot-panel--cols-3 {
        width: min(830px, calc(100vw - 32px));
        max-width: min(830px, calc(100vw - 32px));
    }

    .bs-megapilot-panel--cols-1 .bs-megapilot-columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .bs-megapilot-panel--cols-2 .bs-megapilot-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bs-megapilot-panel--cols-3 .bs-megapilot-columns {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bs-megapilot-wrap.is-open .bs-megapilot-panel {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(-50%, 0);
    }

    .bs-megapilot-columns {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 22px;
        /* Kuerzere Spalten sollen nicht auf die Hoehe der laengsten
           Spalte gestreckt werden - vermeidet unnoetige Leerflaeche bei
           ungleich gefuellten Gruppen (z. B. "Grillen" mit 2 Eintraegen
           neben "Gartenmöbel" mit 8). */
        align-items: start;
    }
}

/* Wrapper um Ueberschrift + Akkordeon-Schaltflaeche. Auf Desktop rein
   strukturell (kein sichtbarer Unterschied zur vorherigen Ueberschrift),
   auf Mobil/Tablet siehe @media (max-width: 1024px) unten. */
.bs-megapilot-col-head {
    display: block;
}

.bs-megapilot-col-title {
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e7ede9;
    color: #173c28;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Eigene Auf-/Zuklapp-Schaltflaeche fuer das Akkordeon (siehe pilot.js) -
   getrennt von der Ueberschrift, damit eine anklickbare, verlinkte
   Ueberschrift auf Mobil navigieren kann, ohne gleichzeitig die Gruppe
   zuzuklappen. Auf Desktop gibt es kein Akkordeon, daher unsichtbar und
   nicht fokussierbar. */
.bs-megapilot-col-toggle {
    display: none;
}

/* Anklickbare Gruppenueberschrift (nur bei Gruppen mit genau einer
   Wurzel, siehe build_group()) - fuehrt zur fachlichen Wurzelkategorie,
   damit auch Produkte erreichbar bleiben, die direkt an der Wurzel
   haengen und keiner sichtbaren Unterkategorie zugeordnet sind. */
.bs-megapilot-col-title--linked a {
    color: inherit;
    text-decoration: none;
    border-radius: 3px;
}

.bs-megapilot-col-title--linked a:hover {
    text-decoration: underline;
}

.bs-megapilot-col-title--linked a:focus-visible {
    outline: 2px solid #173c28;
    outline-offset: 3px;
    text-decoration: underline;
}

/* Bei mehreren Wurzeln (root_slugs) bleibt die Ueberschrift bewusst
   reiner Text (kein willkuerliches Linkziel) - stattdessen je Wurzel ein
   kleiner Einzellink, damit auch dort direkt an einer Wurzel haengende
   Produkte erreichbar bleiben. */
.bs-megapilot-col-roots {
    margin: -6px 0 10px;
    font-size: 11px;
    font-weight: 600;
    color: #8a938c;
}

.bs-megapilot-col-roots a {
    color: #4d6e5a;
    text-decoration: none;
}

.bs-megapilot-col-roots a:hover {
    text-decoration: underline;
}

.bs-megapilot-col-roots a:focus-visible {
    outline: 2px solid #173c28;
    outline-offset: 2px;
    text-decoration: underline;
}

.bs-megapilot-col-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bs-megapilot-col-list li + li {
    margin-top: 2px;
}

.bs-megapilot-col-list a {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 6px;
    border-radius: 8px;
    color: #16211a;
    font-size: 13.5px;
    line-height: 1.35;
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}

.bs-megapilot-col-list a:hover,
.bs-megapilot-col-list a:focus-visible {
    background: #f0f6f1;
    color: #173c28;
    outline: none;
}

.bs-megapilot-item-name {
    /* Lange Kategorienamen sauber umbrechen statt die Spalte zu sprengen
       oder die Zahl rechts herauszudruecken. */
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.bs-megapilot-item-count {
    flex: 0 0 auto;
    padding-top: 1px;
    color: #8a938c;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.bs-megapilot-col-more {
    display: block;
    margin-top: 6px;
    padding: 6px;
    color: #4d6e5a;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color .12s ease, color .12s ease;
}

.bs-megapilot-col-more:hover,
.bs-megapilot-col-more:focus-visible {
    background: #f0f6f1;
    color: #173c28;
    outline: none;
}

.bs-megapilot-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e7ede9;
}

/* Zurückhaltende Zusatzlinks (z. B. "Küche entdecken"), damit Bereiche,
   die im sichtbaren Header bereits eigene Hauptpunkte sind, hier nicht
   als eigene, fast leere Spalte wiederholt werden muessen. */
.bs-megapilot-footer-extra {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.bs-megapilot-footer-extra a {
    color: #4d6e5a;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    padding: 4px 2px;
}

.bs-megapilot-footer-extra a:hover,
.bs-megapilot-footer-extra a:focus-visible {
    color: #173c28;
    text-decoration: underline;
    outline: none;
}

.bs-megapilot-all-link {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border: 1px solid #173c28;
    border-radius: 999px;
    background: transparent;
    color: #173c28;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.bs-megapilot-all-link:hover,
.bs-megapilot-all-link:focus-visible {
    background: #173c28;
    color: #f8fbf6;
    outline: none;
}

/* Mobil/Tablet (<= 1024px): kein Hover-Verhalten, Panel als Akkordeon.
   Der Wrapper bleibt bewusst ein normales Inline-Flex-Element OHNE
   width:100% - er darf die bestehende Pillenleiste (.bs-nav-preview-
   categories) unter keinen Umstaenden umbrechen oder verbreitern. Das
   Panel selbst liegt (siehe oben) immer per position:fixed ausserhalb
   des Flusses und wird hier nur als volle Bildschirmbreite unterhalb
   des Headers dargestellt statt als zentriertes Feld. */
@media (max-width: 1024px) {
    .bs-megapilot-panel {
        /* top wird per JS (positionPanelUnderHeader) inline gesetzt */
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        transform: none;
        margin-top: 0;
        border-radius: 12px;
        padding: 14px 14px 10px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .15s ease;
    }

    .bs-megapilot-wrap.is-open .bs-megapilot-panel {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .bs-megapilot-columns {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .bs-megapilot-col-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 10px 2px;
        border-bottom: 1px solid #e7ede9;
    }

    .bs-megapilot-col-title {
        margin: 0;
        padding-bottom: 0;
        border-bottom: none;
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Der Link innerhalb einer verlinkten Ueberschrift soll auf Mobil
       weiterhin ausreichend Tippflaeche haben, aber keinen eigenen
       Pfeil/Chevron mehr zeigen - das uebernimmt jetzt ausschliesslich
       die separate Schaltflaeche daneben. */
    .bs-megapilot-col-title--linked a {
        display: block;
        padding: 2px 0;
    }

    .bs-megapilot-col-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        padding: 0;
        border: none;
        background: transparent;
        cursor: pointer;
        color: #8a938c;
    }

    .bs-megapilot-col-toggle::after {
        content: "›";
        font-size: 18px;
        line-height: 1;
        transform: rotate(90deg);
        transition: transform .15s ease;
    }

    .bs-megapilot-col-toggle:focus-visible {
        outline: 2px solid #173c28;
        outline-offset: 2px;
        border-radius: 4px;
    }

    .bs-megapilot-col.is-collapsed .bs-megapilot-col-toggle::after {
        transform: rotate(0deg);
    }

    .bs-megapilot-col-list {
        padding: 4px 0 8px;
    }

    .bs-megapilot-col.is-collapsed .bs-megapilot-col-list {
        display: none;
    }

    .bs-megapilot-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .bs-megapilot-all-link {
        width: 100%;
        margin-left: 0;
        justify-content: center;
    }
}