/* =========================================================================
   Megamenu "Behandeling" (desktop) + gegroepeerde behandelingen (mobiel zijmenu)
   Markup: src_web/includes/header.php   Gedrag: /js/megamenu.js
   ========================================================================= */
:root { --pth-mm-accent: var(--kleur-thema, #e91b23); --pth-mm-tekst: #333; --pth-mm-lijn: #e6e6e6; }

/* ── Gedeeld: zoekveld ─────────────────────────────────────────────────── */
.pth-mm-zoek { position: relative; display: block; margin: 0; }
.pth-mm-zoek .fa { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #888; pointer-events: none; }
.pth-mm-filter {
    width: 100%; border: 1px solid #ccc; border-radius: 22px;
    padding: 8px 14px 8px 36px; font-size: 15px; color: var(--pth-mm-tekst); background: #fff;
}
.pth-mm-filter:focus { outline: none; border-color: var(--pth-mm-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pth-mm-accent) 18%, transparent); }
.pth-mm-leeg { margin: 10px 0 0; color: #666; }
.pth-mm-leeg a { color: var(--pth-mm-accent); text-decoration: underline; }

/* ── Desktop megamenu ──────────────────────────────────────────────────── */
.pth-mm { display: none; }
.pth-mm-caret { font-size: .85em; margin-left: 2px; transition: transform .2s; }

@media (min-width: 992px) {
    /* Paneel over de volle containerbreedte (theme: .mega-nav .container{position:relative}) */
    .mega-nav .pth-mm-item { position: static; }
    .pth-mm {
        display: block; position: absolute; left: 12px; right: 12px; top: 100%; z-index: 1050;
        background: #fff; color: var(--pth-mm-tekst); text-align: left;
        border-top: 3px solid var(--pth-mm-accent); border-radius: 0 0 6px 6px;
        box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
        padding: 18px 28px 0;
        max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain;
        opacity: 0; visibility: hidden; transform: translateY(6px);
        /* Sluiten met korte vertraging, zodat schuin naar het paneel bewegen niet sluit */
        transition: opacity .15s ease, transform .15s ease, visibility 0s linear .25s;
    }
    .pth-mm-item.open > .pth-mm {
        opacity: 1; visibility: visible; transform: none;
        transition: opacity .18s ease, transform .18s ease, visibility 0s;
    }
    .pth-mm-item.open > .pth-mm-trigger { color: #fff !important; background-color: var(--pth-mm-accent); }
    .pth-mm-item.open .pth-mm-caret { transform: rotate(180deg); }

    .pth-mm-top { display: flex; align-items: center; gap: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--pth-mm-lijn); }
    .pth-mm-hoofd {
        flex: 1 1 auto; display: flex; align-items: center; gap: 12px;
        padding: 8px 14px; border-radius: 6px; background: color-mix(in srgb, var(--pth-mm-accent) 7%, #fff); color: var(--pth-mm-tekst) !important;
        text-decoration: none !important; transition: background .15s;
    }
    .pth-mm-hoofd:hover, .pth-mm-hoofd:focus { background: color-mix(in srgb, var(--pth-mm-accent) 14%, #fff); }
    .pth-mm-hoofd .fa { font-size: 26px; color: var(--pth-mm-accent); }
    .pth-mm-hoofd strong { display: block; font-size: 17px; }
    .pth-mm-hoofd small { display: block; font-size: 13.5px; color: #666; }
    .pth-mm-top .pth-mm-zoek { flex: 0 0 300px; }

    /* Kolommen: groepen lopen door als krantenkolommen, een groep breekt niet af */
    .pth-mm-groepen { column-count: 5; column-gap: 26px; padding: 14px 0 4px; }
    .pth-mm-groep { break-inside: avoid; padding-bottom: 12px; }
    .pth-mm-titel {
        font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
        color: var(--pth-mm-accent); margin: 0 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--pth-mm-lijn);
    }
    .pth-mm-groep ul { list-style: none; margin: 0; padding: 0; }
    .pth-mm-groep a {
        display: block; padding: 2px 0 2px 2px; font-size: 15px; line-height: 1.3;
        color: var(--pth-mm-tekst) !important; text-decoration: none !important; border-radius: 3px;
    }
    .pth-mm-groep a:hover, .pth-mm-groep a:focus { color: var(--pth-mm-accent) !important; background: #fafafa; padding-left: 6px; transition: padding .12s; }
    .pth-mm-groep a.actief { color: var(--pth-mm-accent) !important; font-weight: 700; }
    .pth-mm .pth-mm-leeg { padding: 4px 0 14px; }

    .pth-mm-voet {
        display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px;
        margin: 0 -28px; padding: 12px 28px; background: #f7f7f7; border-top: 1px solid var(--pth-mm-lijn);
        border-radius: 0 0 6px 6px; font-size: 14.5px; color: #555;
    }
    .pth-mm-voet a { color: var(--pth-mm-accent) !important; font-weight: 600; }
}
/* Kleinere schermen: minder kolommen */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .pth-mm-groepen { column-count: 4; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .pth-mm-groepen { column-count: 3; }
    .pth-mm-top .pth-mm-zoek { flex-basis: 240px; }
}

/* ── Mobiel zijmenu (offcanvas) ────────────────────────────────────────── */
.pth-om { padding-bottom: 6px; }
.pth-om-hoofd {
    display: block; margin: 4px 0 10px; padding: 8px 10px; border-radius: 6px;
    background: color-mix(in srgb, var(--pth-mm-accent) 7%, #fff); color: var(--pth-mm-tekst) !important; font-weight: 600; text-decoration: none !important;
}
.pth-om-hoofd .fa { color: var(--pth-mm-accent); margin-right: 4px; }
.pth-om-hoofd.active { outline: 2px solid var(--pth-mm-accent); }
.pth-om .pth-mm-zoek { margin-bottom: 8px; }
.pth-om .pth-mm-filter { font-size: 16px; } /* ≥16px: geen automatische zoom op iOS */
.pth-om-kop {
    display: flex; width: 100%; align-items: center; justify-content: space-between;
    border: 0; border-bottom: 1px solid #eee; background: none; padding: 10px 4px;
    font-size: 15px; font-weight: 600; color: var(--pth-mm-tekst); text-align: left;
}
.pth-om-kop small { font-weight: 400; color: #888; }
.pth-om-kop .fa { transition: transform .2s; color: #888; }
.pth-om-kop[aria-expanded="true"] .fa { transform: rotate(180deg); }
.pth-om-groep ul { list-style: none; margin: 0; padding: 4px 0 8px 10px; }
.pth-om-groep a {
    display: block; padding: 7px 4px; font-size: 15px;   /* ruim tikdoel */
    color: var(--pth-mm-tekst) !important; text-decoration: none !important;
}
.pth-om-groep a.active { color: var(--pth-mm-accent) !important; font-weight: 700; }

/* Tijdens zoeken: alle groepen open, alleen treffers zichtbaar */
.pth-om.zoekt .pth-om-groep .collapse { display: block !important; height: auto !important; }
.pth-om.zoekt .pth-om-kop .fa { visibility: hidden; }
.pth-mm-groep[hidden], .pth-om-groep[hidden], .pth-mm li[hidden], .pth-om li[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .pth-mm, .pth-mm-caret, .pth-om-kop .fa { transition: none !important; }
}