/* ============================================================
   Mega menu: de panelen onder de hoofdnavigatie.
   Zie templates/partials/mega_menu.html en core/services/megamenu.py.

   Desktop (>= 721px): het paneel hangt over de volle breedte onder de kop
   en opent op :hover of :focus-within van het menu-item. Geen javascript.
   Mobiel (<= 720px): elk paneel is een scherm in de lade, geopend door een
   lege <details>; de <summary> is dan de terugknop.
   ============================================================ */

/* ---------- Bouwstenen, op elke breedte ---------- */
.mm-paneel { color: var(--navy, #0F2742); font-family: var(--font-sans); white-space: normal; }
.mm-paneel a { color: inherit; text-decoration: none; }

.mm-kop {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft, #5A6270);
}
.mm-kop-ruim { margin-top: 22px; }

.mm-aantal {
    font-size: 13px;
    font-weight: 400;
    color: var(--ink-soft, #5A6270);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.mm-uitleg { display: block; font-size: 13px; font-weight: 400; color: var(--ink-soft, #5A6270); }

.mm-rij {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-soft, #ECECE7);
    font-size: 14.5px;
    font-weight: 500;
}
.mm-rij-tekst { display: flex; flex-direction: column; }
.mm-paneel a.mm-rij:hover,
.mm-paneel a.mm-seizoen:hover .mm-seizoen-naam,
.mm-paneel a.mm-artikel:hover .mm-artikel-titel,
.mm-paneel a.mm-groot:hover .mm-groot-naam { color: var(--ocean, #1E5EFF); }

.mm-rij-balk { display: grid; grid-template-columns: 150px minmax(0, 1fr) 56px; }
.mm-rij-balk > span:first-child { white-space: nowrap; }
.mm-rij-balk .mm-aantal { text-align: right; }
.mm-balk { height: 6px; border-radius: 3px; background: var(--light, #F2F3F5); overflow: hidden; }
.mm-balk > span { display: block; height: 100%; border-radius: 3px; background: var(--navy, #0F2742); }

.mm-groot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 2px 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-soft, #ECECE7);
}
.mm-groot-naam { font-family: var(--font-display); font-size: 27px; line-height: 1.1; }

.mm-pillen { display: flex; flex-wrap: wrap; gap: 8px; }
.mm-pil {
    height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border-radius: var(--r-pill, 999px);
    border: 1px solid var(--border, #E5E7EB);
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
}
.mm-paneel a.mm-pil:hover { border-color: var(--navy, #0F2742); }

.mm-maanden { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.mm-maand {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--paper, #F5F3EE);
}
.mm-maand-naam { font-size: 14px; font-weight: 600; }
.mm-maand .mm-aantal { font-size: 12px; }
.mm-paneel a.mm-maand:hover { background: var(--gold-tint, #f5ecd9); }

.mm-meer { display: inline-block; margin-top: 12px; font-weight: 600; font-size: 14px; }
.mm-paneel .mm-meer { color: var(--ocean, #1E5EFF); }

.mm-seizoen {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-soft, #ECECE7);
}
.mm-seizoen-naam { font-family: var(--font-display); font-size: 20px; line-height: 1.2; }
.mm-noot { margin: 10px 0 0; font-size: 13px; color: var(--ink-soft, #5A6270); }

.mm-twee { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }

.mm-artikel {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-soft, #ECECE7);
}
.mm-artikel-kop {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold-text, #8A6A1E);
}
.mm-artikel-titel { font-family: var(--font-display); font-size: 20px; line-height: 1.2; text-wrap: pretty; }

.mm-nieuwsbrief {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: var(--r-md, 12px);
    background: var(--paper, #F5F3EE);
}
.mm-nieuwsbrief .mm-rij-tekst { flex: 1; }

/* Kaart met beeld: donker (standaard) of licht. */
.mm-kaart {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    background: var(--navy, #0F2742);
    color: #fff;
    align-self: start;
}
.mm-paneel a.mm-kaart { color: #fff; }
.mm-kaart picture,
.mm-kaart img { display: block; width: 100%; height: 150px; object-fit: cover; }
.mm-kaart-tekst { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; }
.mm-kaart-kop {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-soft, #e6c590);
}
.mm-kaart-titel { margin: 0; font-family: var(--font-display); font-size: 25px; line-height: 1.15; text-wrap: pretty; }
.mm-kaart-uitleg { font-size: 14px; color: #C9D2DC; text-wrap: pretty; }
.mm-knop {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    height: 38px;
    margin-top: 10px;
    padding: 0 16px;
    border-radius: var(--r-pill, 999px);
    background: var(--gold, #D4A95D);
    color: var(--navy, #0F2742);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}
.mm-paneel .mm-knop-donker { margin-top: 0; background: var(--navy, #0F2742); color: #fff; }
.mm-paneel a.mm-kaart-licht { background: var(--paper, #F5F3EE); color: var(--navy, #0F2742); }
.mm-kaart-licht .mm-kaart-uitleg { color: var(--ink-soft, #5A6270); }
.mm-kaart-licht .mm-meer { margin-top: 6px; }

/* Adviesblok met telefoonnummer. */
.mm-advies {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px;
    border-radius: 16px;
    background: var(--navy, #0F2742);
    color: #fff;
    align-self: start;
    min-height: 220px;
    box-sizing: border-box;
}
.mm-advies .mm-kaart-titel { font-size: 23px; line-height: 1.2; }
.mm-paneel .mm-advies-link { margin-top: auto; padding-top: 10px; font-weight: 700; color: var(--gold-soft, #e6c590); }
.mm-advies-licht { background: var(--paper, #F5F3EE); color: var(--navy, #0F2742); min-height: 0; }
.mm-advies-licht .mm-kaart-kop { color: var(--gold-text, #8A6A1E); }
.mm-paneel .mm-advies-licht .mm-advies-link { color: var(--ocean, #1E5EFF); }
.mm-advies-nummer { font-family: var(--font-display); font-size: 31px; line-height: 1.1; }

.mm-voet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 28px;
    font-size: 14px;
    color: var(--ink-soft, #5A6270);
}
.mm-voet-sterk { font-weight: 700; color: var(--navy, #0F2742); }
.mm-voet .mm-meer { margin: 0 0 0 auto; }

/* Het label "Last minute" naast Aanbiedingen: een eigen link. */
.site-kop .mm-tag {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--r-pill, 999px);
    background: var(--gold-tint, #f5ecd9);
    color: var(--gold-text, #8A6A1E);
    white-space: nowrap;
}
.site-kop .mm-tag:hover { background: var(--gold-soft, #e6c590); }

.mm-open summary { list-style: none; cursor: pointer; }
.mm-open summary::-webkit-details-marker { display: none; }
.mm-open summary::marker { content: ''; }

/* ---------- Desktop ---------- */
@media (min-width: 721px) {
    .site-kop .mm-item { display: flex; align-items: center; gap: 8px; }
    .site-kop .mm-open { display: none; }

    /* Pijltje achter de links met een paneel. */
    .site-kop .mm-heeft > .mm-top { padding-right: 14px; }
    .site-kop .mm-heeft > .mm-top::before {
        content: '';
        position: absolute;
        right: 1px;
        top: 50%;
        width: 5px;
        height: 5px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: translateY(-70%) rotate(45deg);
        transition: transform 0.2s;
    }
    .site-kop .mm-heeft:hover > .mm-top { color: var(--ocean, #1E5EFF); }
    .site-kop .mm-heeft:hover > .mm-top::before { transform: translateY(-20%) rotate(-135deg); }

    .site-kop .mm-paneel {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 2;
        max-height: calc(100vh - 90px);
        overflow-y: auto;
        background: #fff;
        border-top: 1px solid var(--hairline, rgba(15,39,66,0.08));
        box-shadow: 0 30px 60px -30px rgba(15, 39, 66, 0.4);
        visibility: hidden;
        opacity: 0;
        transform: translateY(-4px);
        transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
    }
    /* Kleine vertraging bij openen: wie met de muis over de balk naar
       rechts beweegt, krijgt niet elk paneel even te zien. */
    .site-kop .mm-heeft:hover > .mm-paneel,
    .site-kop .mm-heeft:focus-within > .mm-paneel {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: opacity 0.15s ease 0.07s, transform 0.15s ease 0.07s, visibility 0s linear 0.07s;
    }
    /* Brug over de witruimte tussen link en paneel, anders sluit het
       paneel zodra de muis de link verlaat. */
    .site-kop .mm-paneel::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: 18px;
    }

    /* De pagina eronder wordt donkerder zolang een paneel open is. */
    .site-kop::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 100vh;
        background: rgba(15, 39, 66, 0.35);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.15s ease, visibility 0s linear 0.15s;
    }
    .site-kop:has(.mm-heeft:hover)::after,
    .site-kop:has(.mm-heeft:focus-within)::after {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.15s ease 0.07s, visibility 0s linear 0.07s;
    }

    .mm-binnen {
        display: grid;
        gap: 36px;
        max-width: 1320px;
        margin: 0 auto;
        padding: 30px 40px;
        box-sizing: border-box;
    }
    .mm-cols-cruises { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 300px; }
    .mm-cols-bestemmingen { grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.8fr) minmax(0, 1fr) 280px; }
    .mm-cols-rederijen { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 280px; }
    .mm-cols-magazine { grid-template-columns: minmax(0, 1fr) 340px; }
    .mm-cols-help { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 320px; }

    .mm-voet {
        padding: 13px max(40px, calc((100% - 1320px) / 2 + 40px));
        background: var(--paper, #F5F3EE);
        border-top: 1px solid var(--hairline, rgba(15,39,66,0.08));
    }
}

/* Tablet: vier kolommen passen niet; twee per rij. */
@media (min-width: 721px) and (max-width: 1180px) {
    .mm-binnen[class*="mm-cols-"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding: 24px; }
    .mm-voet { padding: 12px 24px; }
}

/* Op 768 px breed was de navigatie met pijltjes en label 685 px, en er is
   zo'n 565 px. Zonder beide is hij 528 px en past hij weer, zoals voorheen.
   Last minute blijft bereikbaar via de pagina Aanbiedingen. */
@media (min-width: 721px) and (max-width: 1024px) {
    .site-kop .mm-tag { display: none; }
    .site-kop .mm-heeft > .mm-top { padding-right: 0; }
    .site-kop .mm-heeft > .mm-top::before { display: none; }
}

/* ---------- Mobiel: elk paneel een scherm in de lade ---------- */
@media (max-width: 720px) {
    .site-kop .mm-item { position: relative; }
    .site-kop .mm-heeft > .mm-top { display: none; }
    .site-kop .mm-tag { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); }

    /* Dicht: een rij in de lade, zoals de andere links. */
    .mm-open summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 0;
        border-bottom: 1px solid var(--border-soft, rgba(15,39,66,0.09));
    }
    .site-kop .dt-nav li:last-child .mm-open summary { border-bottom: none; }
    .mm-open summary::after {
        content: '\203A';
        color: var(--gold, #B99A5B);
        font-size: 22px;
    }
    .mm-rijlabel { display: flex; flex-direction: column; gap: 2px; }
    .mm-naam {
        font-family: var(--font-display, Georgia, serif);
        font-size: 21px;
        line-height: 1.2;
        color: var(--navy, #0F2742);
    }
    .mm-meta { font-size: 12.5px; color: var(--ink-soft, #5A6270); }
    .mm-terug, .mm-schermtitel { display: none; }

    /* Open: de summary wordt de balk met de terugknop. */
    .mm-open[open] summary {
        position: fixed;
        top: 52px;
        left: 0;
        right: 0;
        z-index: 61;
        height: 52px;
        box-sizing: border-box;
        padding: 0 16px;
        justify-content: flex-start;
        background: #fff;
        border-bottom: 1px solid var(--border-soft, rgba(15,39,66,0.09));
    }
    .mm-open[open] summary::after,
    .mm-open[open] .mm-rijlabel { display: none; }
    .mm-open[open] .mm-terug {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        font-size: 15px;
        font-weight: 600;
        color: var(--ocean, #1E5EFF);
    }
    .mm-open[open] .mm-terug::before {
        content: '';
        width: 8px;
        height: 8px;
        border-left: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
    }
    .mm-open[open] .mm-schermtitel {
        display: block;
        position: absolute;
        left: 90px;
        right: 90px;
        text-align: center;
        font-weight: 700;
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .site-kop .mm-paneel { display: none; }
    .site-kop .mm-open[open] ~ .mm-paneel {
        display: block;
        position: fixed;
        top: 104px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--paper, #FAF8F4);
        padding: 16px 16px calc(28px + env(safe-area-inset-bottom, 0px));
        animation: m-drawer-in 0.18s ease-out;
    }

    .mm-binnen { display: flex; flex-direction: column; gap: 14px; }
    .mm-binnen > div {
        padding: 14px 16px 10px;
        border-radius: 14px;
        background: #fff;
        border: 1px solid var(--border-soft, rgba(15,39,66,0.09));
    }
    .mm-binnen > .mm-advies { border: 0; min-height: 0; }
    .mm-binnen > .mm-advies-licht { background: #fff; border: 1px solid var(--border-soft, rgba(15,39,66,0.09)); }
    .mm-binnen > div > .mm-rij:last-of-type,
    .mm-twee > .mm-rij:last-child,
    .mm-twee > .mm-artikel:last-child { border-bottom: none; }

    /* Tikdoelen ruim boven de 44 pixels. */
    .mm-rij { min-height: 48px; padding: 10px 0; box-sizing: border-box; font-size: 16px; }
    .mm-rij-balk { grid-template-columns: minmax(0, 1fr) 70px 52px; }
    .mm-groot-naam { font-size: 23px; }
    .mm-pil { height: 40px; font-size: 14px; }
    .mm-twee { grid-template-columns: 1fr; }
    .mm-kaart img, .mm-kaart picture { height: 140px; }
    .mm-nieuwsbrief { flex-wrap: wrap; }

    .mm-voet { flex-direction: column; align-items: flex-start; padding: 16px 4px 0; }
    .mm-voet .mm-meer { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .site-kop .mm-paneel,
    .site-kop::after,
    .site-kop .mm-heeft > .mm-top::before { transition: none; }
    .site-kop .mm-open[open] ~ .mm-paneel { animation: none; }
}