/**
 * Mobiel menu (Kadence-lade #mobile-drawer; Figma: SECTIONS → Navigation
 * → "Navigatie - Mobile").
 *
 * Lichte achtergrond (AC grijs) met bovenin een witte kaart, 16px van de
 * rand, afronding 16 en 24px binnenruimte. In de kaart: het logo (met
 * donkere tekst), rechts de knopjes zoeken (js/search-bar.js) en sluiten,
 * daaronder het hoofdmenu (16px, medium, donkerblauw, 24px boven en onder,
 * dun lijntje ertussen) en de Contact-knop over de volle breedte.
 * Onder de kaart het menu "Mobiel - onder" (plek Mobile Secondary:
 * Actueel, Infohub, Werken bij) in dezelfde stijl.
 *
 * De kaart bestaat uit drie losse delen van Kadence (de kop van de lade,
 * het hoofdmenu en de knop); elk deel krijgt dezelfde witte achtergrond,
 * de bovenste de ronde hoeken boven en de onderste de ronde hoeken onder.
 */

#mobile-drawer {
    --alma-lade-rand: 16px;     /* kaart tot de schermrand */
    --alma-lade-binnen: 24px;   /* binnenruimte van de kaart */
    --alma-lade-lijn: rgba(0, 0, 0, 0.1);

    .drawer-inner {
        background: var(--alma-ac-grijs) !important;
    }

    /* Kop van de kaart: logo links, knopjes rechts */
    .drawer-header {
        display: flex;
        align-items: center;
        width: auto !important;
        min-height: 0;
        margin: var(--alma-lade-rand) var(--alma-lade-rand) 0 !important;
        padding: 16px var(--alma-lade-binnen) 8px !important;
        background: var(--alma-neutral-0);
        border-radius: var(--carmel-radius-md) var(--carmel-radius-md) 0 0;
    }

    /* Logo met donkere tekst (images/logo-alma-donker.svg; het gewone logo
       heeft witte tekst voor op het verloop) */
    .drawer-header > a:has(.carmel-drawer-logo) {
        display: block;
        width: 70px;
        height: 35px;
        background: url("../../images/logo-alma-donker.svg") left center / contain no-repeat;

        .carmel-drawer-logo {
            visibility: hidden;
        }
    }

    /* Zoek- en sluitknopje: 36px zoals in de header, dunne rand (op de
       witte kaart), donkerblauw icoon */
    .drawer-header :is(.carmel-drawer-search, .menu-toggle-close) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px !important;
        height: 36px !important;
        box-sizing: border-box;
        padding: 0;
        border: 1px solid var(--alma-lade-lijn);
        border-radius: var(--carmel-radius-sm);
        background: transparent;
        color: var(--alma-donker-blauw);
    }

    .drawer-header .carmel-drawer-search {
        margin: 0 8px 0 auto;
        cursor: pointer;
        flex-shrink: 0;

        .search-toggle-icon {
            display: flex;
            font-size: 16px;
        }

        svg {
            width: 16px;
            height: 16px;
        }
    }

    /* Sluitknopje: Kadence's streepjes krijgen hier geen goede maat, dus
       een eigen kruisje (zoals de zoekknop in de header, search.css) */
    .drawer-header .menu-toggle-close {
        position: relative;
        margin-left: 0;

        .toggle-close-bar {
            display: none !important;
        }

        &::before,
        &::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 12px;
            height: 1.5px;
            background: var(--alma-donker-blauw);
            border-radius: 1px;
        }

        &::before { transform: translate(-50%, -50%) rotate(45deg); }
        &::after  { transform: translate(-50%, -50%) rotate(-45deg); }
    }

    .drawer-content {
        padding: 0 0 var(--alma-lade-rand) !important;
    }

    /* Hoofdmenu en Contact-knop: de rest van de witte kaart */
    .drawer-content > .site-header-item:first-child,
    .drawer-content > .site-header-item:has(.mobile-header-button-wrap) {
        margin: 0 var(--alma-lade-rand) !important;
        padding: 0 var(--alma-lade-binnen);
        background: var(--alma-neutral-0);
    }

    .drawer-content > .site-header-item:has(.mobile-header-button-wrap) {
        padding-top: 24px;
        padding-bottom: var(--alma-lade-binnen);
        border-radius: 0 0 var(--carmel-radius-md) var(--carmel-radius-md);
    }

    /* Menu-items (hoofdmenu en het menu onder de kaart) */
    .mobile-navigation ul.menu {
        margin: 0;
        padding: 0;
        border: 0;
    }

    .mobile-navigation li.menu-item {
        border: 0 !important;

        > a,
        > .drawer-nav-drop-wrap {
            border-bottom: 1px solid var(--alma-lade-lijn) !important;
        }

        > a,
        > .drawer-nav-drop-wrap > a {
            padding: 24px 0 !important;
            background: transparent !important;
            color: var(--alma-donker-blauw) !important;
            font-family: var(--carmel-font-body);
            font-size: 16px !important;
            font-weight: var(--carmel-font-weight-medium) !important;
            line-height: 100% !important;
        }

        > .drawer-nav-drop-wrap > a {
            border-bottom: 0 !important;
        }

        /* uitklappijltje rechts */
        .drawer-sub-toggle {
            border: 0 !important;
            background: transparent !important;
            color: var(--alma-donker-blauw) !important;
        }
    }

    /* Contact-knop over de volle breedte, 64px hoog */
    .mobile-header-button-wrap,
    .mobile-header-button-inner-wrap {
        width: 100%;
    }

    .mobile-header-button-wrap .mobile-header-button {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 64px;
        margin: 0 !important; /* Customizer: 16px */
        padding: 0 24px !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: var(--alma-donker-blauw) !important;
        color: var(--alma-neutral-0) !important;
        font-family: var(--carmel-font-body);
        font-size: 18px !important;
        font-weight: var(--carmel-font-weight-medium) !important;
        line-height: 100%;
    }

    /* Menu onder de kaart: zelfde stijl, 16px verder ingesprongen dan de
       kaartrand */
    .drawer-content > .site-header-item:has(.mobile-secondary-navigation) {
        margin: 8px var(--alma-lade-rand) 0 !important;
        padding: 0 16px;
    }
}

/* ---------------------------------------------------------------
   Mobiele header (Figma: Navigation → Hero - Mobile): het verloopvlak
   van de hero begint 8px onder de bovenkant van het scherm (de hero's
   schuiven 86px omhoog, de header is daarom 94px hoog), logo (48px hoog)
   en icoontjes staan ±20px binnen het vlak. De icoontjes (zoeken, menu)
   zijn witte vierkantjes (36px, afronding 8) met een donkerblauw icoon.
   --------------------------------------------------------------- */
@media (max-width: 1024px) {
    #mobile-header .site-main-header-inner-wrap {
        min-height: 94px !important;
        padding-top: 8px;
    }

    /* geen lijn onder de header (plugin: kadence-fixes.css) */
    #mobile-header .site-header-row-container-inner > .site-container {
        border-bottom: 0 !important;
    }

    #mobile-header .site-branding img {
        max-height: 48px !important;
        width: auto !important;
    }

    #mobile-header :is(.search-toggle-open, #mobile-toggle) {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: var(--carmel-radius-sm) !important;
        background: var(--alma-neutral-0) !important;
        color: var(--alma-donker-blauw) !important;

        svg {
            width: 18px;
            height: 18px;
        }
    }

    /* De lade begint op dezelfde hoogte als het verloopvlak, het logo
       staat op dezelfde plek als in de header */
    #mobile-drawer {
        .drawer-header {
            margin-top: 8px !important;
            padding-top: 19px !important;
            padding-bottom: 8px !important;
        }

        .drawer-header > a:has(.carmel-drawer-logo) {
            width: 96px;
            height: 48px;
        }
    }
}