/**
 * Alp Lift — megamenu
 * Wordt geladen vanuit alplift-megamenu.php, alleen op een pagina waar de
 * shortcode [alplift_megamenu] ook echt rendert.
 *
 * Alles staat onder .alp-mm, zodat er niets van deze opmaak buiten het menu
 * terechtkomt. Het lettertype komt van het thema; er wordt geen eigen font
 * geladen.
 *
 * Twee standen, te kiezen met de constante ALPLIFT_MEGAMENU_STIJL of met het
 * attribuut stijl="..." op de shortcode:
 *
 *   sober (nu de standaard)  zwart-wit, geen iconen, geen kleurvlakken. Om te
 *                            zien of het menu doet wat het moet doen.
 *   huisstijl                het rood en het warme grijs van de site, met de
 *                            lijntekeningen erbij.
 *
 * Het verschil zit alleen in de zes kleurwaarden onderaan dit bestand; de
 * indeling en het gedrag zijn in beide standen gelijk.
 *
 * Vlakken hebben geen omrandingslijn: het onderscheid komt van de vulling en
 * een lichte schaduw.
 *
 * Twee stroomdiagrammen die het gedrag bepalen:
 *
 *   Zonder JavaScript   hover op een balkitem opent het paneel (:hover en
 *                       :focus-within), hover op een tab wisselt de inhoud.
 *                       Op een smal scherm staat alles uitgeklapt.
 *   Met JavaScript      het script zet de klasse alp-mm--js op de <nav> en
 *                       werkt daarna met is-open en is-actief. De hamburger
 *                       en de uitklapknoppen doen dan het werk.
 */

.alp-mm {
    /* De sobere stand: geen iconen, niets vet, één lijntje, en verder alleen
       de kleuren die de site zelf al gebruikt. Opgemeten op de testpagina met
       alle onderdelen (landingspagina):

         streep  rgba(24,4,3,.09)  de scheiding die de site tussen twee witte
                          containers zet. Grijs, 1 pixel. (De tabellen gebruiken
                          #E8D5D6, een lichtrode lijn; die is hier bewust niet
                          genomen.)
         licht   #F7F7F7  het vlak: de zijbalk en het item waar je met de
                          muis op staat. Half zo donker als het grijs van de
                          site (#EFEFEF), want als vulling achter tekst was dat
                          te zwaar.
         roze    #FBF3F3  de achtergrond van een quote. Alleen voor de
                          merkpillen.
         rood    #CD171A  alleen als reactie: een link of tab waar je met de
                          muis of het toetsenbord op staat, plus het label
                          "Nieuw". Wat aanstaat of waar je bent krijgt geen
                          kleur, dat blijkt uit het witte vlak.
         donker  #180403  de tekstkleur van koppen en tabelcellen.
         body    #54595F  lopende tekst.

       Let op: de FAQ op die pagina gebruikt een ándere lijn, rgba(24,4,3,.12),
       en dus niet de kleur hierboven. Dat is een verschil in de landingspagina's
       zelf, geen keuze van dit menu.

       De huisstijl-stand onderaan dit bestand zet hier het rood voor in de plaats. */
    --alp-mm-accent:      #CD171A;
    --alp-mm-accent-op:   #A81216;
    --alp-mm-accent-vlak: #F3E7E7;
    --alp-mm-donker:      #180403;
    --alp-mm-licht:       #F7F7F7;
    --alp-mm-roze:        #FBF3F3;
    --alp-mm-rood:        #CD171A;
    --alp-mm-body:        #54595F;
    --alp-mm-streep:      rgba(24, 4, 3, .09);
    --alp-mm-wit:         #FFFFFF;

    --alp-mm-paneel:    1240px;
    --alp-mm-zijbalk:   208px;
    --alp-mm-hoogte:    46px;
    --alp-mm-schaduw:   0 20px 34px -14px rgba(24, 4, 3, .22);

    position: relative;
    z-index: 900;
    color: var(--alp-mm-donker);
    font-size: 14px;
    line-height: 1.4;
}

.alp-mm *,
.alp-mm *::before,
.alp-mm *::after {
    box-sizing: border-box;
}

.alp-mm ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.alp-mm a {
    text-decoration: none;
    color: inherit;
}

/* Knoppen kaal maken, maar zónder padding: die staat per onderdeel hieronder,
   en een reset op "button" zou daar overheen gaan (een elementnaam erbij weegt
   in CSS zwaarder dan een losse klasse). Een tab of balkitem zonder eigen
   pagina is namelijk een <button>, geen <a>. */
.alp-mm button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;

    /* Een knop centreert zijn tekst vanzelf; hier moet hij links staan, net
       als bij de links ernaast. */
    text-align: left;
}

.alp-mm :focus-visible {
    outline: 2px solid var(--alp-mm-accent);
    outline-offset: 2px;
}

/* "u bent hier" hoort bij het smalle scherm; in het brede paneel wijst de
   opmaak de plek al aan met het witte vlak achter de actieve tab. */
.alp-mm__hier {
    display: none;
}

.alp-mm__verborgen {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.alp-mm__icoon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}


/* --- Het logo -------------------------------------------------------------
   Staat alleen in de balk als de shortcode logo="ja" meekrijgt. Dan wordt de
   <nav> zelf een rij: logo links, menu ernaast. De hoogte is met één variabele
   te wijzigen, ook vanuit Elementor: zet op de container
   --alp-mm-logo: 44px.
   -------------------------------------------------------------------- */

.alp-mm--met-logo {
    display: flex;
    align-items: center;
    gap: 28px;
}

/* Niet ">" maar een gewone afstammeling: de balk zit sinds de mobiele lade in
   twee omhulsels die op een breed scherm display:contents hebben. Voor de
   opmaak is de balk dan nog steeds een flex-item van de nav, maar voor een
   selector met ">" is hij dat niet meer. */
.alp-mm--met-logo .alp-mm__balk {
    flex: 1 1 auto;
}

/* De lade en de lagen zijn er alleen voor een smal scherm. Hier laten ze hun
   kinderen door alsof ze er niet zijn. */
.alp-mm__lade,
.alp-mm__lagen {
    display: contents;
}

/* Alles wat alleen op een smal scherm bestaat. */
.alp-mm__groep,
.alp-mm__regel,
.alp-mm__paneelkop,
.alp-mm__voet {
    display: none;
}

.alp-mm__logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.alp-mm__logo img,
.alp-mm__logo svg {
    display: block;
    width: auto;
    height: var(--alp-mm-logo, 38px);
    max-width: none;
}

.alp-mm__logo-tekst {
    font-size: 20px;
    letter-spacing: -.01em;
    color: var(--alp-mm-donker);
}


/* --- De balk --------------------------------------------------------------
   Eén rij met de hoofditems. Het onderstreepje van het actieve item is het
   rode streepje dat de site overal gebruikt.
   -------------------------------------------------------------------- */

.alp-mm__balk {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.alp-mm__item {
    display: flex;
    align-items: stretch;
}

.alp-mm__balklink {
    display: flex;
    align-items: center;
    gap: 7px;
    height: var(--alp-mm-hoogte);
    padding: 0 14px;
    font-weight: 400;
    white-space: nowrap;
    transition: color .15s;
}

.alp-mm__item:hover > .alp-mm__balklink {
    color: var(--alp-mm-accent);
}

/* De uitklapknop naast een hoofditem. De link ernaast blijft gewoon een link
   naar de categoriepagina; deze knop opent en sluit het paneel, ook met het
   toetsenbord en op een aanraakscherm.

   Heeft het hoofditem geen eigen pagina, dan is de naam zélf de knop; die
   krijgt dan beide klassen en dus de opmaak van een balklink. */
.alp-mm__schakel:not(.alp-mm__balklink) {
    display: flex;
    align-items: center;
    padding: 0 8px 0 0;
    margin-left: -8px;
    color: var(--alp-mm-body);
}

.alp-mm__schakel .alp-mm__icoon {
    width: 16px;
    height: 16px;
    transition: transform .2s;
}

.alp-mm__item:hover > .alp-mm__schakel {
    color: var(--alp-mm-accent);
}

.alp-mm__item.is-open > .alp-mm__schakel .alp-mm__icoon {
    transform: rotate(180deg);
}

.alp-mm__label {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 10px;
    border-radius: 12px;
    background: var(--alp-mm-rood);
    color: var(--alp-mm-wit);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .03em;
    vertical-align: middle;
}


/* --- Het paneel -----------------------------------------------------------
   Een breed paneel hangt onder de hele balk, een smal paneel onder zijn eigen
   item. Beide zweven over de pagina heen.
   -------------------------------------------------------------------- */

.alp-mm__paneel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    background: var(--alp-mm-wit);
    box-shadow: var(--alp-mm-schaduw);

    /* De lijn hoort bij het uitgeklapte menu, dus hij zit op het paneel: zo is
       hij er alleen als er iets openstaat. De lijn die de header zelf op zijn
       onderrand tekent wordt daarvoor verborgen, zie hieronder. Boven het
       paneel valt geen schaduw, die gaat alleen naar beneden. */
    border-top: 1px solid var(--alp-mm-streep);
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

/* Elk breed paneel is even breed, ook als er weinig in staat. Dat geeft de
   kolommen lucht en houdt de balk rustig: de panelen springen niet in breedte
   als je van Hoogwerkers naar Materiaalliften gaat. */
/* De breedte hangt bewust níét van de balk af. Het menu staat op de site in een
   kolom van de header, en die is smaller dan de pagina; met 100% zou het paneel
   dan meekrimpen tot een paar honderd pixels en passen de kolommen er niet meer
   in. Het script schuift het paneel naar links als het rechts uitsteekt. */
.alp-mm__item--breed > .alp-mm__paneel {
    width: max-content;
    max-width: min(var(--alp-mm-paneel), calc(100vw - 32px));
}

/* Een smal paneel ankert op zijn eigen item; daarvoor is dat item het
   positiepunt. Een breed paneel doet dat juist niet, dat lijnt uit op de hele
   balk en kan zo nooit buiten de pagina vallen. */
.alp-mm__item--smal {
    position: relative;
}

.alp-mm__item--smal > .alp-mm__paneel {
    min-width: 268px;
    max-width: min(360px, calc(100vw - 24px));
    border-radius: 0 0 8px 8px;
}

/* Rechts uitlijnen als het paneel anders rechts buiten beeld zou vallen; het
   script zet deze klasse bij het openen. */
.alp-mm__item--smal.is-rechts > .alp-mm__paneel {
    left: auto;
    right: 0;
}

.alp-mm__item.is-open > .alp-mm__paneel {
    display: block;
}

/* Zonder JavaScript openen hover en focus het paneel. Met JavaScript doet de
   klasse is-open dat, zodat een paneel niet ongevraagd blijft hangen. */
.alp-mm:not(.alp-mm--js) .alp-mm__item:hover > .alp-mm__paneel,
.alp-mm:not(.alp-mm--js) .alp-mm__item:focus-within > .alp-mm__paneel {
    display: block;
}

/* Met JavaScript hoort hover er hier niet bij te staan. Het script zet is-open
   én zet het paneel op zijn plek; een paneel dat alleen door hover zichtbaar is,
   staat er ongepositioneerd bij. Dat gebeurde na een klik op "Stel uw vraag":
   het paneel sloot omdat de focus naar de chat ging, maar de muis stond er nog
   op, dus het bleef staan, viel terug op de plek van het menu-item en werd
   smaller. Het stak dan ook rechts buiten beeld, waardoor de pagina zijwaarts
   kon schuiven. */


/* --- Zijbalk met tabs -----------------------------------------------------
   De volgorde in de HTML is tab, knop, inhoud, tab, knop, inhoud, zodat het
   toetsenbord van een tab meteen door de links van díe tab loopt. De indeling
   hieronder zet de tabs alsnog onder elkaar in de linkerkolom en alle inhoud
   in de rechter.
   -------------------------------------------------------------------- */

.alp-mm__paneel-body {
    display: grid;
    grid-template-columns: var(--alp-mm-zijbalk) 1fr;

    /* Eén rij per tab, en daaronder een rij die de rest van de hoogte opvangt.
       Zonder die laatste rij zouden de tabs uitgerekt worden zodra de inhoud
       ernaast hoger is dan de zijbalk. */
    grid-template-rows: repeat(var(--alp-mm-tabs, 3), min-content) 1fr;

    /* De zijbalk is een vulling, geen kader met een lijn eromheen. */
    background:
        linear-gradient(to right,
            var(--alp-mm-licht) 0 var(--alp-mm-zijbalk),
            var(--alp-mm-wit) var(--alp-mm-zijbalk));
}

.alp-mm__tab {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 14px;
    font-weight: 400;
    color: var(--alp-mm-donker);
    transition: color .15s, background .15s;
}

.alp-mm__tab-icoon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 7px;
    background: var(--alp-mm-licht);
    color: var(--alp-mm-body);
    transition: background .15s, color .15s;
}

.alp-mm__tab .alp-mm__naam {
    flex: 1 1 auto;
}

.alp-mm__tab-pijl {
    display: flex;
    color: var(--alp-mm-streep);
}

.alp-mm__tab-pijl .alp-mm__icoon {
    width: 14px;
    height: 14px;
}

/* De tab waar je op staat kleurt; de tab die aanstaat niet. Die is te zien aan
   het witte vlak, dat doorloopt in het paneel ernaast. */
.alp-mm__tab.is-actief {
    background: var(--alp-mm-wit);
}

.alp-mm__tab:hover,
.alp-mm__tab:focus {
    color: var(--alp-mm-accent);
    background: var(--alp-mm-wit);
}

.alp-mm__tab:hover .alp-mm__tab-icoon,
.alp-mm__tab:focus .alp-mm__tab-icoon {
    background: var(--alp-mm-accent-vlak);
    color: var(--alp-mm-accent);
}

.alp-mm__tab:hover .alp-mm__tab-pijl,
.alp-mm__tab:focus .alp-mm__tab-pijl {
    color: var(--alp-mm-accent);
}

/* De regel per tab hoort bij het smalle scherm; daar neemt hij de plaats van de
   tab in. Zie het blok "Smal scherm" verderop. */
.alp-mm__regel {
    display: none;
}

.alp-mm__pane {
    grid-column: 2;
    grid-row: 1 / -1;
    display: none;
    padding: 22px clamp(16px, 1.8vw, 26px);
}

.alp-mm__pane.is-actief {
    display: block;
}

/* Zonder JavaScript wisselt hover of focus op een tab de inhoud: de eerste
   verdwijnt zodra er een andere wordt aangewezen. */
.alp-mm:not(.alp-mm--js) .alp-mm__paneel-body:has(.alp-mm__tab:hover) > .alp-mm__pane.is-actief,
.alp-mm:not(.alp-mm--js) .alp-mm__paneel-body:has(.alp-mm__tab:focus) > .alp-mm__pane.is-actief {
    display: none;
}

/* De regel voor het smalle scherm staat in de HTML tussen de tab en zijn
   inhoud, dus die staat hier als tussenstap in de selector. */
.alp-mm:not(.alp-mm--js) .alp-mm__tab:hover + .alp-mm__regel + .alp-mm__pane,
.alp-mm:not(.alp-mm--js) .alp-mm__tab:focus + .alp-mm__regel + .alp-mm__pane {
    display: block;
}


/* --- De inhoud van een tab ------------------------------------------------ */

/* De tussenruimte schaalt mee met het scherm: ruim op een breed scherm, krap
   op een laptop, zodat de kolommen daar niet in de verdrukking komen. */
.alp-mm__kolommen {
    display: flex;
    gap: clamp(16px, 2vw, 30px);
    align-items: flex-start;
}

/* Kolommen hebben een vaste maat en staan links, zodat een paneel met één
   kolom er net zo bij staat als een paneel met drie. Ze mogen wél krimpen als
   de ruimte krap wordt: zonder dat viel de laatste kolom op een smaller scherm
   buiten het paneel en werd zijn lijntje afgesneden. */
.alp-mm__kolom {
    flex: 0 1 262px;
    min-width: 168px;
}

/* De lijst met producten is breder dan de kolommen ernaast: daar staan de
   langste namen in, en het label "Nieuw" moet er nog achter passen zonder dat
   de regel breekt. Het paneel is zo breed als zijn inhoud, dus dit kost geen
   lege ruimte. */
.alp-mm__kolom--hoofd {
    flex: 0 1 312px;
    min-width: 196px;
}

/* Het blok met de oproep heeft een vaste breedte: dan blijft de knop op één
   regel en houdt het paneel zijn ritme, hoeveel kolommen er ook naast staan. */
.alp-mm__kolom--cta {
    flex: 0 0 268px;
}

/* De kop boven een kolom: de naam van de tab of van de kolom, met het lijntje
   dat de site in zijn tabellen gebruikt. Dit is de enige lijn in het menu, en
   de enige plek waar de letters iets zwaarder staan dan de rest. */
.alp-mm__kop {
    margin: 0 0 12px;
    padding-bottom: 8px;
    font-weight: 500;
    color: var(--alp-mm-donker);
    border-bottom: 1px solid var(--alp-mm-streep);
}

.alp-mm__links > li + li {
    margin-top: 1px;
}

.alp-mm__link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-weight: 400;
    transition: color .15s;
}

.alp-mm__link:hover,
.alp-mm__link:focus {
    color: var(--alp-mm-accent);
}

.alp-mm__link--scheiding {
    margin-top: 8px;
    padding-top: 12px;
}

/* Merkpillen: knopjes zonder omrandingslijn, het onderscheid zit in de vulling. */
.alp-mm__pillen {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.alp-mm__pil {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 20px;
    background: var(--alp-mm-roze);
    font-size: 13px;
    font-weight: 400;
    transition: color .15s, background .15s;
}

.alp-mm__pil:hover,
.alp-mm__pil:focus {
    background: var(--alp-mm-accent-vlak);
    color: var(--alp-mm-accent);
}

/* Merkblok: de naam van het merk met een letterteken ervoor. */
/* Een merkblok: de merknaam wat zwaarder, daaronder een korte zin, en dan pas
   de streep. De zin heeft een vaste hoogte zodat de streep bij alle merken op
   dezelfde lijn ligt, ook als de ene zin een regel langer is dan de andere. */
.alp-mm__merk {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--alp-mm-donker);
}

/* De zin en de verwijzing samen, met de streep eronder. Het blok heeft een
   minimumhoogte zodat de streep bij alle merken op één lijn ligt, ook als de
   ene zin een regel langer is dan de andere. */
.alp-mm__merk-kop {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    margin: 0 0 12px;
    padding-bottom: 12px;
    min-height: 120px;
    border-bottom: 1px solid var(--alp-mm-streep);
}

.alp-mm__merk-tekst {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--alp-mm-body);
}

/* De verwijzing naar het merk zelf: een dun pijltje dat een stukje meeschuift
   als je erop staat. */
.alp-mm a.alp-mm__merk-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--alp-mm-accent);
    transition: gap .15s;
}

.alp-mm__merk-link:hover,
.alp-mm__merk-link:focus {
    gap: 11px;
}

.alp-mm__merk-link .alp-mm__icoon {
    width: 16px;
    height: 16px;
    stroke-width: 1.3;
}

/* De types onder een merk: dezelfde letter als de zin boven in het merkblok,
   dus een punt kleiner dan de gewone links, en met een klein rood bolletje
   ervoor. */
.alp-mm__kolom--merk .alp-mm__link {
    padding: 3px 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--alp-mm-body);
}

.alp-mm__kolom--merk .alp-mm__link::before {
    content: "";
    width: 4px;
    height: 4px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--alp-mm-accent);
}

.alp-mm__kolom--merk .alp-mm__link:hover,
.alp-mm__kolom--merk .alp-mm__link:focus {
    color: var(--alp-mm-accent);
}

/* Het blok met de oproep is gewoon een kolom als alle andere: dezelfde kop met
   hetzelfde lijntje, daaronder een zin en een knop. Geen eigen vlak eromheen. */

.alp-mm__cta-tekst {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--alp-mm-body);
}

.alp-mm__cta-knop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;

    /* Strakke hoeken, geen ronding. */
    border-radius: 0;
    background: var(--alp-mm-accent);
    color: var(--alp-mm-wit);
    font-size: 13px;
    font-weight: 400;
    transition: background .15s;
}

.alp-mm__cta-knop:hover,
.alp-mm__cta-knop:focus {
    background: var(--alp-mm-accent-op);
    color: var(--alp-mm-wit);
}


/* --- Eenvoudig paneel ----------------------------------------------------- */

.alp-mm__lijstlink {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    font-weight: 400;
    transition: color .15s, background .15s;
}

.alp-mm__lijstlink:hover,
.alp-mm__lijstlink:focus {
    color: var(--alp-mm-accent);
    background: var(--alp-mm-licht);
}

.alp-mm__lijst .alp-mm__link--scheiding {
    margin-top: 6px;
    padding-top: 14px;
}


/* --- Hamburger ------------------------------------------------------------
   Alleen zichtbaar op een smal scherm, en alleen als het script draait: zonder
   script zou een knop die niets doet het menu onbereikbaar maken.
   -------------------------------------------------------------------- */

/* De naam staat er met opzet naast het icoon: drie streepjes alleen zeggen
   minder dan drie streepjes met "Menu" ernaast. Iets zwaarder dan de rest, want
   dit is de ingang tot de hele catalogus. */
.alp-mm__hamburger {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 4px;
    font-weight: 500;
}

.alp-mm__hamburger .alp-mm__icoon {
    width: 22px;
    height: 22px;
}

.alp-mm__hamburger .alp-mm__icoon:last-of-type,
.alp-mm__hamburger[aria-expanded="true"] .alp-mm__icoon:first-of-type {
    display: none;
}

.alp-mm__hamburger[aria-expanded="true"] .alp-mm__icoon:last-of-type {
    display: block;
}


/* --- Smal scherm ----------------------------------------------------------
   Tot en met 1024px is het menu een lade die over de pagina komt, met twee
   lagen: eerst het hele aanbod als regels, en daarover schuift het paneel dat
   bij een regel hoort. Twee lagen, geen vier uitklapniveaus.

   Waarom doorklikken en niet uitklappen: met alles open werd de lijst 1723
   pixels lang op een telefoon van 390, ruim vier schermen. Een accordeon werkt
   tot ongeveer zes items per categorie; hier zitten er onder één tab vijftien
   links, vijf merkpillen en twee tussenkoppen.

   De HTML is dezelfde als op een breed scherm. Wat hier gebeurt:

     .alp-mm__lade      wordt de laag over de pagina, met de knop onderin
     .alp-mm__lagen     wordt het venster waarin de panelen schuiven
     .alp-mm__balk      wordt de eerste laag, met eigen scroll
     .alp-mm__paneel    laat zijn tabs en panes door (display: contents), zodat
                        die directe onderdelen van de lijst worden
     .alp-mm__laag      elk paneel dat inschuift, absoluut over de eerste laag
     .alp-mm__tab       verdwijnt; .alp-mm__regel ernaast neemt het over
     .alp-mm__groep     de naam van het balkitem wordt een kop boven zijn tabs

   Zonder JavaScript blijft alles staan zoals het stond: uitgeklapt onder
   elkaar. Lang, maar elke link werkt en staat in de HTML.
   -------------------------------------------------------------------- */

@media (max-width: 1024px) {

    .alp-mm--js .alp-mm__hamburger {
        display: flex;
    }

    /* Met een logo: dat links, de hamburger rechts, het menu eronder. */
    .alp-mm--met-logo {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 12px;
    }

    .alp-mm__logo img,
    .alp-mm__logo svg {
        height: var(--alp-mm-logo-smal, 32px);
    }

    /* De onderdelen die alleen op een smal scherm bestaan. */
    .alp-mm--js .alp-mm__groep,
    .alp-mm--js .alp-mm__regel,
    .alp-mm--js .alp-mm__paneelkop,
    .alp-mm--js .alp-mm__voet {
        display: flex;
    }

    /* De knop hoort links, bij de rand. De header is een rij die zijn inhoud
       naar rechts duwt; dit trekt het menu daar weer uit. Wil Tim het anders,
       dan kan de uitlijning ook in Elementor op die kolom. */
    .elementor-widget-shortcode:has(.alp-mm--js) {
        margin-right: auto;
    }

    /* En de onderdelen die hier juist niets meer doen: de tab is vervangen door
       de regel ernaast, de caret-knoppen door de regel zelf, en het blok met de
       oproep staat nu één keer onderin de lade in plaats van in elke tab. */
    .alp-mm--js .alp-mm__tab,
    .alp-mm--js .alp-mm__item--breed > .alp-mm__balklink,
    .alp-mm--js .alp-mm__item--smal > .alp-mm__balklink,
    .alp-mm--js .alp-mm__schakel,
    .alp-mm--js .alp-mm__kolom--cta {
        display: none;
    }


    /* --- De lade ---------------------------------------------------------- */

    /* De lade hangt onder de header en vult de rest van het scherm. Het script
       zet --alp-mm-lade-top op de onderrand van de header; zonder die waarde
       begint hij onder de balk zelf. */
    .alp-mm--js .alp-mm__lade {
        display: none;
        position: fixed;
        top: var(--alp-mm-lade-top, 0px);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 950;
        background: var(--alp-mm-wit);
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .alp-mm--js.is-open .alp-mm__lade {
        display: grid;
    }

    /* Zolang de lade openstaat: de pagina eronder scrollt niet mee, en de
       zwevende knop van de chatbot gaat weg. Die knop hangt rechts halverwege
       het scherm met een hoge z-index en lag precies over een regel van het
       menu; gemeten op de staging op 390 pixels. In de lade staat zijn eigen
       knop onderin, dus de assistent blijft één tik ver. Het script zet deze
       klasse op de body en haalt hem er weer af. */
    body.alp-mm-lade-open {
        overflow: hidden;
    }

    body.alp-mm-lade-open #aichatbot-knop {
        display: none !important;
    }

    /* Het venster waarin de lagen schuiven. Dit is het ankerpunt: elk paneel
       hangt hieraan en niet aan de lijst, zodat het paneel blijft staan waar
       het staat terwijl de lijst eronder gescrold is. */
    .alp-mm--js .alp-mm__lagen {
        display: block;
        position: relative;
        overflow: hidden;
    }

    /* De eerste laag: het hele aanbod. Bewust position: static, want een
       positioned lijst zou zelf het ankerpunt van de panelen worden en die
       staan dan mee te scrollen met de lijst eronder. */
    .alp-mm--js .alp-mm__balk {
        display: block;
        position: static;
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 2px 0 10px;
    }

    /* De panelen van een balkitem met tabs laten hun inhoud door: de tabs, de
       regels en de panes worden dan zelf onderdelen van de lijst. De positie
       gaat mee terug naar static: een element met display: contents hoort geen
       ankerpunt te zijn, maar met position: absolute blijven staan trokken de
       panelen zich er in Chrome wél iets van aan en stonden ze 235 pixels naar
       links. */
    .alp-mm--js .alp-mm__item--breed > .alp-mm__paneel,
    .alp-mm--js .alp-mm__paneel-body {
        display: contents;
        position: static;
    }

    .alp-mm--js .alp-mm__item {
        display: block;
        position: static;
    }

    /* Elk paneel dat inschuift. Buiten beeld tot het aan de beurt is; het
       schuift van rechts in en houdt zijn eigen scrollpositie. */
    .alp-mm--js .alp-mm__laag {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 2;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        width: auto;
        min-width: 0;
        max-width: none;
        padding: 0 0 20px;
        border: 0;
        border-radius: 0;
        background: var(--alp-mm-wit);
        box-shadow: -14px 0 32px -20px rgba(24, 4, 3, .3);
        transform: translateX(100%);
        transition: transform .22s ease;
        visibility: hidden;
    }

    .alp-mm--js .alp-mm__laag.is-in {
        transform: none;
        visibility: visible;
    }

    /* Hover opent hier niets. Op een aanraakscherm blijft die stand hangen na
       een tik, en dan staat er een paneel open dat niemand geopend heeft. Wat
       een paneel toont is de klasse is-in, en niets anders. */


    /* --- De regels in de eerste laag -------------------------------------- */

    /* De naam van een balkitem met tabs wordt een kop boven zijn eigen regels;
       hij is geen knop meer, want de keuze zit een niveau lager. */
    /* De naam van een productgroep boven zijn regels. Zelfde vorm als de kop
       boven een kolom in het brede paneel: gewone letters, iets zwaarder, met
       het lijntje eronder. De maten zijn krap gehouden, want het hele aanbod
       hoort in één blik te staan en de header van deze site is op een telefoon
       al 217 pixels hoog. Elke regel blijft wel boven de 44 pixels die voor een
       vinger nodig is. */
    .alp-mm__groep {
        align-items: center;
        margin: 14px 16px 4px;
        padding: 0 0 7px;
        font-size: 14px;
        font-weight: 500;
        color: var(--alp-mm-donker);
        border-bottom: 1px solid var(--alp-mm-streep);
    }

    .alp-mm__item:first-child .alp-mm__groep {
        margin-top: 6px;
    }

    a.alp-mm__groep {
        min-height: 44px;
    }

    /* Elke regel die een paneel opent: de hele breedte, naam links, pijl
       rechts. Minstens 52 pixels hoog, ruim boven de 24 die WCAG 2.2 vraagt en
       boven de 44 van de strengere eis. */
    .alp-mm__regel {
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        min-height: 48px;
        padding: 0 16px;
        font-size: 16px;
        font-weight: 400;
        color: var(--alp-mm-donker);
    }

    .alp-mm__regel .alp-mm__naam {
        flex: 1 1 auto;
    }

    /* Waar de bezoeker nu is. Bij 79 items is dat de eerste vraag die het menu
       moet beantwoorden, en het is precies wat de meeste sites overslaan. */
    .alp-mm__hier {
        display: inline-block;
        flex: 0 0 auto;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--alp-mm-accent);
        white-space: nowrap;
    }

    .alp-mm__link[aria-current="page"],
    .alp-mm__lijstlink[aria-current="page"] {
        background: var(--alp-mm-licht);
        font-weight: 500;
    }

    .alp-mm__regel .alp-mm__icoon {
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
        color: var(--alp-mm-body);
    }

    .alp-mm__regel:hover,
    .alp-mm__regel:focus {
        color: var(--alp-mm-accent);
    }

    /* Alles wat geen productgroep is staat onder een lijntje en een maat
       kleiner: service, kennis, over ons, contact. De productcategorieën horen
       bovenaan, dat is waar bezoekers voor komen. */
    .alp-mm__item--breed + .alp-mm__item:not(.alp-mm__item--breed) {
        margin-top: 6px;
        padding-top: 4px;
        border-top: 1px solid var(--alp-mm-streep);
    }

    .alp-mm__item:not(.alp-mm__item--breed) .alp-mm__regel,
    .alp-mm__item:not(.alp-mm__item--breed) > .alp-mm__balklink {
        font-size: 15px;
        min-height: 46px;
    }

    /* Contact heeft geen paneel; dat blijft een gewone regel. */
    .alp-mm--js .alp-mm__item > .alp-mm__balklink {
        height: auto;
        min-height: 46px;
        padding: 0 16px;
    }


    /* --- De kop van een paneel -------------------------------------------- */

    /* Terug, en waar je bent: op één regel naast elkaar. De naam is meteen de
       link naar de pagina van dit paneel, dus er staat geen aparte regel meer
       onder met bijna dezelfde tekst. Er staat ook geen pijltje achter: dat een
       naam in een menu een link is, hoeft niet uitgelegd te worden. */
    .alp-mm__paneelkop {
        display: flex;
        align-items: center;
        gap: 6px;
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 4px 16px 8px 4px;
        background: var(--alp-mm-wit);
        border-bottom: 1px solid var(--alp-mm-streep);
    }

    .alp-mm__terug {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        flex: 0 0 auto;
        min-width: 44px;
        min-height: 44px;
        padding: 0 6px;
        font-size: 14px;
        color: var(--alp-mm-body);
    }

    .alp-mm__terug:hover,
    .alp-mm__terug:focus {
        color: var(--alp-mm-accent);
    }

    .alp-mm__plek {
        display: flex;
        align-items: center;
        min-width: 0;
        min-height: 44px;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.2;
        color: var(--alp-mm-donker);
    }

    a.alp-mm__plek:hover,
    a.alp-mm__plek:focus {
        color: var(--alp-mm-accent);
    }


    /* --- De inhoud van een paneel ----------------------------------------- */

    .alp-mm__pane {
        grid-column: auto;
        grid-row: auto;
        padding: 0 0 20px;
    }

    .alp-mm__kolommen {
        flex-direction: column;
        gap: 0;

        /* Naast elkaar zijn de kolommen zo breed als hun inhoud; onder elkaar
           moeten ze de volle breedte pakken, anders houdt het lijntje onder een
           kop op halverwege het scherm. */
        align-items: stretch;
    }

    /* Onder elkaar telt de flex-basis van een kolom niet meer als breedte maar
       als hoogte. Zonder dit stond er onder een korte kolom een leeg vlak van
       ruim 150 pixels. */
    .alp-mm__kolom {
        flex: 0 0 auto;
        min-width: 0;
        padding: 0 16px;
    }

    /* De kop boven een kolom is hier een tussenkopje, geen knop: Toepassingen,
       Huurinformatie, Merken. Er klapt niets meer uit, alles staat er al. De
       vorm is dezelfde als in het brede paneel: gewone letters, iets zwaarder,
       met het lijntje eronder. */
    .alp-mm__kolom--hoofd > .alp-mm__kop {
        display: none;
    }

    .alp-mm__kop {
        margin: 18px 0 4px;
        padding-bottom: 7px;
        font-size: 14px;
        font-weight: 500;
        color: var(--alp-mm-donker);
    }

    .alp-mm__links > li + li {
        margin-top: 0;
    }

    /* De merken staan hier onder elkaar als gewone regels, niet als knopjes.
       Naast elkaar werken die knopjes: op een breed scherm vullen ze compact
       een kolom. Op een telefoon passen er vijf niet op één regel, breken ze
       rafelig af, en zijn ze met 40 pixels het kleinste tikdoel van het menu.
       Als regel lezen ze mee met de rest van het paneel. */
    .alp-mm--js .alp-mm__pillen {
        display: block;
        padding: 0;
    }

    .alp-mm--js .alp-mm__pil {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 8px 0;
        border-radius: 0;
        background: none;
        font-size: 16px;
        color: var(--alp-mm-donker);
    }

    .alp-mm--js .alp-mm__pil:hover,
    .alp-mm--js .alp-mm__pil:focus {
        background: none;
        color: var(--alp-mm-accent);
    }

    .alp-mm__lijst {
        padding: 4px 0;
    }

    .alp-mm__lijstlink {
        min-height: 48px;
        padding: 0 16px;
    }

    .alp-mm__lijstlink:hover,
    .alp-mm__lijstlink:focus {
        background: none;
    }

    /* Een merk is hier een regel met een pijl naar de merkpagina, met zijn
       types eronder. Naast elkaar werkt een merkblok met een zin erbij; onder
       elkaar op een telefoon wordt dat een lap tekst. */
    .alp-mm__merk-tekst {
        display: none;
    }

    .alp-mm__merk-kop {
        display: block;
        min-height: 0;
        margin: 0 0 4px;
        padding: 0;
        border: 0;
    }

    /* De merknaam krijgt dezelfde kop als de andere kolommen, met wat lucht
       eromheen: twee merken achter elkaar met hun types ertussen lopen anders
       in elkaar over. De naam is meteen de link naar de merkpagina, dus de
       losse regel "naar Zoomlion" eronder kan hier weg. */
    .alp-mm__kolom--merk .alp-mm__merk {
        margin: 22px 0 2px;
        padding-bottom: 7px;
        font-size: 15px;
        font-weight: 500;
        border-bottom: 1px solid var(--alp-mm-streep);
    }

    .alp-mm__kolom--merk .alp-mm__merk a {
        display: flex;
        align-items: center;
        min-height: 40px;
    }

    .alp-mm__kolom--merk:first-child .alp-mm__merk {
        margin-top: 6px;
    }

    /* De elementnaam staat er met opzet bij: de regel die deze link opmaakt
       heeft er ook een, en zonder zou die zwaarder wegen dan deze. */
    .alp-mm--js a.alp-mm__merk-link {
        display: none;
    }

    /* Met een vinger tik je op een vlak, niet op een regel: elke link in het
       menu is minstens 44 pixels hoog. */
    .alp-mm__link,
    .alp-mm__kolom--merk .alp-mm__link {
        min-height: 44px;
        padding: 8px 0;
    }


    /* --- De knop onderin de lade ------------------------------------------ */

    /* Eén keer, en hij blijft staan in elk paneel. In de brede weergave is dit
       een kolom naast de links; onder elkaar zou dezelfde zin en dezelfde knop
       drie keer in één sectie langskomen. */
    .alp-mm__voet {
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
        background: var(--alp-mm-licht);
        border-top: 1px solid var(--alp-mm-streep);
    }

    .alp-mm__voetknop {
        justify-content: center;
        width: 100%;
        min-height: 52px;
    }

    /* Zonder script staat alles uitgeklapt onder elkaar, zoals het was. */
    .alp-mm:not(.alp-mm--js) .alp-mm__balk {
        flex-direction: column;
    }

    .alp-mm:not(.alp-mm--js) .alp-mm__paneel,
    .alp-mm:not(.alp-mm--js) .alp-mm__pane {
        display: block;
        position: static;
        width: auto;
        min-width: 0;
        max-width: none;
        box-shadow: none;
        border-radius: 0;
        background: transparent;
    }

    .alp-mm:not(.alp-mm--js) .alp-mm__tab-pijl {
        display: none;
    }
}


/* --- Beweging beperken ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .alp-mm * {
        transition: none !important;
    }
}


/* De lijn die de header op zijn onderrand tekent. Het script zet deze klasse
   erop; de lijn zelf verhuist naar het paneel, zodat hij alleen te zien is als
   er een menu openstaat. Weghalen van deze regel zet de lijn terug zoals hij
   in de header stond. */
.alp-mm-headerlijn {
    border-bottom-color: transparent !important;
}


/* --- Voorrang op de sitebrede stijlen -------------------------------------
   De Elementor-kit van deze site zet met !important een kleur op elke link en
   een complete knopstijl (rode vulling, ronding, eigen padding) op elke
   <button>. In dit menu zijn een paar dingen knoppen: een balkitem of tab
   zonder eigen pagina, de uitklapknoppen en de hamburger. Zonder dit blok
   wordt "Hoogwerkers" een rood blok en verdwijnt de tekst van de knop in het
   blok met de oproep in zijn eigen achtergrond.

   Wat er nodig is, gemeten op de staging: een elementnaam vóór de klasse
   (button.alp-mm__tab) is genoeg voor achtergrond, rand, ronding en padding.
   Voor tekstkleur is dat niet genoeg, want daar gebruikt de kit zelf
   !important; vandaar dat het bij die ene regel ook hier staat. Tekst die in
   een eigen span binnen de link staat is wel veilig, want de regel van de kit
   geldt voor de <a> en niet voor de spans erbinnen.
   -------------------------------------------------------------------- */

button.alp-mm__balklink,
button.alp-mm__balklink:hover,
button.alp-mm__balklink:focus,
button.alp-mm__balklink:active,
button.alp-mm__tab,
button.alp-mm__schakel,
button.alp-mm__schakel:hover,
button.alp-mm__schakel:focus,
button.alp-mm__regel,
button.alp-mm__regel:hover,
button.alp-mm__regel:focus,
button.alp-mm__regel:active,
button.alp-mm__terug,
button.alp-mm__terug:hover,
button.alp-mm__terug:focus,
button.alp-mm__hamburger,
button.alp-mm__hamburger:hover,
button.alp-mm__hamburger:focus {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-shadow: none;
    min-height: 0;
    min-width: 0;
    width: auto;
    letter-spacing: normal;
    text-transform: none;
}

button.alp-mm__balklink {
    padding: 0 14px;
    height: var(--alp-mm-hoogte);
}

button.alp-mm__tab {
    padding: 13px 14px;
}

button.alp-mm__tab:hover,
button.alp-mm__tab:focus,
button.alp-mm__tab.is-actief {
    background-color: var(--alp-mm-wit);
}

button.alp-mm__schakel:not(.alp-mm__balklink) {
    padding: 0 8px 0 0;
}

button.alp-mm__hamburger {
    padding: 10px 4px;

    /* De kit zet een eigen gewicht op elke knop; hier moet het zwaardere
       gewicht van de klasse hierboven weer terug. */
    font-weight: 500;
}

/* De tekstkleur van de knoppen. De kit zet die bij hover en focus op wit, en
   omdat een tab of balkitem zonder eigen pagina een <button> is, verdween daar
   de naam in het witte vlak. Dat was te zien bij de tab "Merken".

   Hetzelfde gebeurde bij de hamburger, en daar was het erger: na een tik houdt
   die knop de focus, dus zodra het menu openging werden het kruisje en het
   woord "Menu" wit op wit. Het menu stond open zonder dat er nog iets stond om
   het mee te sluiten. */
button.alp-mm__tab,
button.alp-mm__balklink,
button.alp-mm__hamburger,
button.alp-mm__hamburger:hover,
button.alp-mm__hamburger:focus,
button.alp-mm__hamburger:active,
button.alp-mm__hamburger[aria-expanded="true"] {
    color: var(--alp-mm-donker) !important;
}

button.alp-mm__tab:hover,
button.alp-mm__tab:focus,
button.alp-mm__balklink:hover,
button.alp-mm__balklink:focus,
.alp-mm__item:hover > button.alp-mm__balklink {
    color: var(--alp-mm-accent) !important;
}

/* De knop in het blok met de oproep: gevulde knop, dus de tekst moet licht
   blijven. Alleen hier is !important nodig. */
a.alp-mm__cta-knop,
a.alp-mm__cta-knop:hover,
a.alp-mm__cta-knop:focus {
    color: var(--alp-mm-wit) !important;
}

.alp-mm__cta-knop .alp-mm__icoon {
    width: 17px;
    height: 17px;
}

@media (max-width: 1024px) {

    /* Contact is het enige balkitem dat op een smal scherm zijn eigen regel
       blijft; de andere zijn hier een kop of een regel-knop. */
    .alp-mm--js .alp-mm__item > button.alp-mm__balklink,
    .alp-mm--js .alp-mm__item > a.alp-mm__balklink {
        height: auto;
        min-height: 48px;
        padding: 0 16px;
    }

    /* De regel en de terugknop zijn <button>, dus ook zij hebben de vulling en
       de padding van de kit van zich af te houden. De volle breedte en de
       hoogte moeten hier juist wél terug.

       De hover-, focus- en active-varianten staan er met opzet bij. De reset
       hierboven noemt ze ook, en die weegt met zijn pseudo-klasse zwaarder dan
       een kale klasse: zonder deze regels kreeg de knop `min-height: 0` zodra
       de muis erop kwam en kromp hij van 52 naar 19 pixels. De muisknop ging
       dan naar beneden op de knop en weer omhoog naast de knop, dus de klik
       kwam nooit aan en er gebeurde niets. */
    button.alp-mm__regel,
    button.alp-mm__regel:hover,
    button.alp-mm__regel:focus,
    button.alp-mm__regel:active {
        width: 100%;
        min-height: 48px;
        padding: 0 16px;
    }

    .alp-mm__item:not(.alp-mm__item--breed) button.alp-mm__regel,
    .alp-mm__item:not(.alp-mm__item--breed) button.alp-mm__regel:hover,
    .alp-mm__item:not(.alp-mm__item--breed) button.alp-mm__regel:focus {
        min-height: 46px;
    }

    button.alp-mm__terug,
    button.alp-mm__terug:hover,
    button.alp-mm__terug:focus,
    button.alp-mm__terug:active {
        min-width: 44px;
        min-height: 44px;
        padding: 0 8px;
    }

    button.alp-mm__regel,
    .alp-mm__regel .alp-mm__naam {
        color: var(--alp-mm-donker) !important;
    }

    button.alp-mm__regel:hover,
    button.alp-mm__regel:focus,
    button.alp-mm__terug:hover,
    button.alp-mm__terug:focus {
        color: var(--alp-mm-accent) !important;
    }
}


/* --- De huisstijl-stand ---------------------------------------------------
   Zet stijl="huisstijl" op de shortcode, of ALPLIFT_MEGAMENU_STIJL bovenin
   alplift-megamenu.php op 'huisstijl'. Dan komen de kleuren van de site erin en
   verschijnen de lijntekeningen bij de namen in de zijbalk en in de eenvoudige
   panelen. Verder verandert er niets: dezelfde indeling, hetzelfde gedrag.

   De kleuren zijn dezelfde als in de landingspagina's:
     rood    = #CD171A   actieve tab, knop, hover, het streepje
     donker  = #180403   tekst van de items
     licht   = #EFE9E9   de zijbalk en het blok met de oproep
     body    = #54595F   koppen boven een kolom
     streep  = #E8D5D6   de scheidingslijntjes
   -------------------------------------------------------------------- */

.alp-mm--huisstijl {
    --alp-mm-accent:      #CD171A;
    --alp-mm-accent-op:   #A81216;
    --alp-mm-accent-vlak: rgba(205, 23, 26, .1);
    --alp-mm-donker:      #180403;
    --alp-mm-licht:       #EFE9E9;
    --alp-mm-body:        #54595F;
    --alp-mm-streep:      rgba(24, 4, 3, .09);
    --alp-mm-schaduw:     0 16px 44px rgba(24, 4, 3, .16), 0 2px 6px rgba(24, 4, 3, .07);
}