/* Mobiel menu De Marlequi, zie inc/mobiel-menu.php. Alleen tot en met 1024 px. */

.mq-menu { display: none; }

@media (max-width: 1024px) {

    /* ---------- header: Contact links, Menu-knop rechts (Contact alleen op tablet) ---------- */
    .elementor-element-14e5cc7 > .elementor-widget-wrap {
        justify-content: flex-end;
        align-items: center;
        flex-wrap: nowrap;
        gap: 10px;
    }
    .elementor-element-d713657 { order: 1; margin: 0 !important; }
    .elementor-element-4e5de84 { order: 2; margin: 0 !important; width: auto; }
    .elementor-element-4e5de84 .elementor-nav-menu--dropdown { display: none !important; }
    /* Op mobiel geen Contact-knop in de header (Martijn 18-09): past slecht, en Contact staat groot onderin het menu. Tablet houdt hem. */

    .elementor-element-4e5de84 .elementor-menu-toggle {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        width: auto;
        height: 39px;
        margin: 0;
        padding: 0 16px 0 14px;
        border: 1px solid rgba(31, 77, 63, .25);
        border-radius: 50px;
        background: transparent !important;
        color: #1F4D3F !important;
        font: 600 13px/1 "DM Sans", sans-serif;
        cursor: pointer;
    }
    .elementor-element-4e5de84 .elementor-menu-toggle:hover,
    .elementor-element-4e5de84 .elementor-menu-toggle:focus-visible { border-color: #1F4D3F; }
    .elementor-element-4e5de84 .elementor-menu-toggle > :not(.mq-toggle) { display: none !important; }
    .mq-toggle { display: inline-flex; align-items: center; gap: 9px; }
    .mq-toggle__streepjes { width: 18px; display: grid; gap: 5px; }
    .mq-toggle__streepjes i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
    .mq-toggle__streepjes i:last-child { width: 12px; }

    /* ---------- paneel ---------- */
    .mq-menu {
        --mq-lijn: rgba(244, 240, 234, .14);
        position: fixed;
        inset: 0;
        z-index: 100000;
        display: flex;
        flex-direction: column;
        background: #1F4D3F;
        color: #F4F0EA;
        font-family: "DM Sans", sans-serif;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity .22s ease, transform .22s ease;
    }
    .mq-menu[hidden] { display: none; }
    .mq-menu.is-open { opacity: 1; transform: none; }
    body.mq-menu-open { overflow: hidden; }

    .mq-menu__top {
        flex: none;
        height: 88px; /* gelijk aan de siteheader, zodat het logo niet verspringt */
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        border-bottom: 1px solid var(--mq-lijn);
    }
    .mq-menu__logo img { display: block; height: 48px; width: auto; }
    .mq-menu__sluit {
        display: inline-flex; align-items: center; gap: 9px;
        height: 39px; padding: 0 16px 0 14px;
        border: 1px solid rgba(244, 240, 234, .3); border-radius: 50px;
        background: transparent; color: #F4F0EA;
        font: 600 13px/1 "DM Sans", sans-serif; cursor: pointer;
    }
    .mq-menu__sluit:hover, .mq-menu__sluit:focus, .mq-menu__sluit:focus-visible, .mq-menu__sluit:active { border-color: #F4F0EA; background: transparent !important; color: #F4F0EA !important; }
    /* Hello kleurt elke button met :focus/:active roze (#c36); het menu zet bij openen de focus op Sluiten. */
    .mq-menu__kop:active, .mq-menu__kop:focus-visible { background: transparent !important; color: #F4F0EA !important; }
    .mq-menu__kruis { width: 16px; height: 16px; position: relative; }
    .mq-menu__kruis::before, .mq-menu__kruis::after {
        content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px;
        border-radius: 2px; background: currentColor; transform: rotate(45deg);
    }
    .mq-menu__kruis::after { transform: rotate(-45deg); }

    .mq-menu__nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 10px 20px 20px; }
    .mq-menu__nav ul { list-style: none; margin: 0; padding: 0; }
    .mq-menu__item { border-bottom: 1px solid var(--mq-lijn); }
    .mq-menu__item:last-child { border-bottom: 0; }
    .mq-menu.is-open .mq-menu__item { animation: mq-in .32s ease both; animation-delay: calc(var(--i, 0) * 35ms + 60ms); }
    @keyframes mq-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

    .mq-menu__link, .mq-menu__kop {
        position: relative;
        display: flex; align-items: center; justify-content: space-between;
        width: 100%; padding: 17px 0; margin: 0;
        border: 0; border-radius: 0; background: transparent;
        color: #F4F0EA !important; text-align: left; text-decoration: none;
        font: 400 27px/1.1 "Fraunces", serif; letter-spacing: 0; text-transform: none;
        cursor: pointer;
    }
    .mq-menu__kop:hover, .mq-menu__kop:focus { background: transparent !important; color: #F4F0EA !important; }
    .mq-menu__link.is-actief, .mq-menu__kop.is-actief { padding-left: 20px; }
    .mq-menu__link.is-actief::before, .mq-menu__kop.is-actief::before {
        content: ""; position: absolute; left: 0; top: 50%;
        width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #E8C93A;
    }
    .mq-menu__plus {
        position: relative; flex: none; width: 30px; height: 30px;
        border: 1px solid rgba(244, 240, 234, .3); border-radius: 50%;
    }
    .mq-menu__plus::before, .mq-menu__plus::after {
        content: ""; position: absolute; left: 8px; top: 13.5px; width: 12px; height: 1.5px; background: #F4F0EA;
        transition: transform .2s ease;
    }
    .mq-menu__plus::after { transform: rotate(90deg); }
    .mq-menu__kop[aria-expanded="true"] .mq-menu__plus::after { transform: rotate(0); }

    .mq-menu__sub { padding: 0 0 16px 2px !important; }
    .mq-menu__sub a {
        display: block; padding: 9px 0;
        color: #E2EDE7 !important; text-decoration: none;
        font: 500 16px/1.2 "DM Sans", sans-serif;
    }
    .mq-menu__sub a.mq-menu__alle { color: #F4F0EA !important; font-weight: 600; }
    .mq-menu__sub a.is-actief { color: #E8C93A !important; }

    .mq-menu__onder { flex: none; padding: 18px 20px calc(24px + env(safe-area-inset-bottom)); background: #2F5E4C; }
    .mq-menu__status { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 500 14px/1.3 "DM Sans", sans-serif; color: #E2EDE7; }
    .mq-menu__status b { color: #F4F0EA; font-weight: 600; }
    .mq-menu__stip { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #9C9590; }
    .mq-menu__status.is-open .mq-menu__stip { background: #7FC28F; box-shadow: 0 0 0 4px rgba(127, 194, 143, .18); }
    .mq-menu__status.is-later .mq-menu__stip { background: #E2A016; }

    .mq-menu__knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
    .mq-menu__knop {
        display: block; padding: 13px 10px; border-radius: 50px; text-align: center; text-decoration: none;
        font: 600 14px/1.2 "DM Sans", sans-serif;
    }
    .mq-menu__knop--vol { background: #AD5038; color: #FCFBF8 !important; }
    .mq-menu__knop--vol:hover { background: #7A3324; }
    .mq-menu__knop--lijn { border: 1px solid rgba(244, 240, 234, .35); color: #F4F0EA !important; }
    .mq-menu__knop--lijn:hover { border-color: #F4F0EA; }

    .mq-menu__voet { display: flex; justify-content: space-between; align-items: center; }
    .mq-menu__tel { color: rgba(244, 240, 234, .8) !important; text-decoration: none; font: 500 14px "DM Sans", sans-serif; }
    .mq-menu__social { display: flex; gap: 8px; }
    .mq-menu__social a {
        display: grid; place-items: center; width: 36px; height: 36px;
        border: 1px solid rgba(244, 240, 234, .25); border-radius: 50%; color: #F4F0EA !important;
    }
    .mq-menu__social svg { width: 15px; height: 15px; }

    .mq-menu a:focus-visible, .mq-menu button:focus-visible { outline: 2px solid #E8C93A; outline-offset: 3px; }
}

@media (max-width: 767px) {
    .elementor-element-d713657 { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .mq-menu, .mq-menu.is-open .mq-menu__item, .mq-menu__plus::after { transition: none; animation: none; }
}