/**
 * 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;

    /* De witte stand, voor als de balk op een foto ligt. Niet helemaal 255:
       volle witte tekst op een foto oogt harder dan nodig. Waar je met de muis
       op staat wordt hij wel vol wit.

       Het schaduwtje is twee lagen: een strakke voor de vorm van de letter en
       een zachte donkere gloed eromheen. Die gloed is er voor een lichte plek
       in de foto; op /service-en-onderhoud/ ligt de balk op een lichtgrijze
       band, en zonder die gloed valt wit daar weg.

       Ze staan hier en niet op .alp-mm--wit, want de hamburger gebruikt ze ook
       in de stand die alleen aan de body-klasse te zien is. */
    --alp-mm-op-foto:         rgba(255, 255, 255, .92);
    --alp-mm-op-foto-schaduw: 0 1px 2px rgba(24, 4, 3, .55), 0 0 10px rgba(24, 4, 3, .38);

    --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.
   -------------------------------------------------------------------- */

/* De header blijft bij het scrollen bovenaan staan, en ligt boven de pagina.
   - Sticky (Tim, 5 oktober 2026): alleen de balk met het menu blijft staan.
     Het script meet hoe hoog het bovenstuk is (zwarte balk, mededeling) en zet
     dat als --alp-mm-plak; zo ver schuift de header omhoog voordat hij plakt.
     Ingelogd schuift hij onder de WordPress-balk; op een telefoon scrollt die
     balk mee, dus daar niet.
   - z-index: de headercontainers hebben in Elementor z-index 3, en een
     pagina-container met een hogere z-index (de offertepagina heeft 13) schoof
     dan over het uitgeklapte paneel heen. */
.elementor-location-header:has(.alp-mm) {
    position: sticky;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--alp-mm-plak, 0px));
    z-index: 1000;
}

@media (max-width: 600px) {
    .elementor-location-header:has(.alp-mm) {
        top: var(--alp-mm-plak, 0px);
    }
}

/* De balk die blijft staan moet een eigen achtergrond hebben, anders schijnt
   de pagina erdoorheen zodra hij plakt. Op alplift.com had de container die al,
   op alplift.de niet. Niet bij een doorzichtige header. */
body:not(.alplift-header-transparant) .elementor-location-header .e-parent:has(.alp-mm) {
    /* Vaste waarde: de variabelen van het menu gelden pas binnen .alp-mm. */
    background-color: #ffffff;
}

/* Plakt de balk, dan wordt hij lager (100 naar 78 px) en het logo kleiner
   (Tim, 5 oktober 2026). Het script zet de klasse alp-mm-geplakt. De 22 px die
   de balk inlevert komen er als marge onder terug, anders schuift de pagina
   eronder op het moment van krimpen omhoog. Boven en onder evenveel ruimte:
   de container heeft in Elementor 10 px binnenruimte boven en 0 onder, dus
   onder komt er 10 px bij en alles staat in het midden (17 px boven en onder
   de knoppen). */
.elementor-location-header:has(.alp-mm) .e-parent:has(.alp-mm) {
    transition: min-height .2s ease;
}

.elementor-location-header:has(.alp-mm) .e-parent:has(.alp-mm) .elementor-widget-image img {
    transition: width .2s ease;
}

.elementor-location-header.alp-mm-geplakt {
    margin-bottom: 22px;
}

.elementor-location-header.alp-mm-geplakt .e-parent:has(.alp-mm) {
    --min-height: 78px;
    min-height: 78px;
}

.elementor-location-header.alp-mm-geplakt .e-parent:has(.alp-mm) > .e-con-inner {
    padding-bottom: 10px;
    align-items: center;
}

/* De rode knop in de header (Offerte / Angebot anfordern) ook precies in het
   midden; hij hing een paar pixel te hoog. */
.elementor-location-header.alp-mm-geplakt .e-parent:has(.alp-mm) .elementor-widget-button {
    align-self: center;
    margin-top: 0;
    margin-bottom: 0;
}

/* Op alplift.de zit er nog een container tussen met 12 px binnenruimte onder;
   die zou alles weer naar boven duwen. */
.elementor-location-header.alp-mm-geplakt .e-parent:has(.alp-mm) .e-child:has(.alp-mm) > .e-con-inner {
    padding-bottom: 0;
}

.elementor-location-header.alp-mm-geplakt .e-parent:has(.alp-mm) .elementor-widget-image img {
    width: 110px !important;
    height: auto;
}

@media (max-width: 1024px) {
    .elementor-location-header.alp-mm-geplakt .e-parent:has(.alp-mm) .elementor-widget-image img {
        width: 100px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .elementor-location-header:has(.alp-mm) .e-parent:has(.alp-mm),
    .elementor-location-header:has(.alp-mm) .e-parent:has(.alp-mm) .elementor-widget-image img {
        transition: none;
    }
}

.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);
}

/* Twee knoppen, overal dezelfde (Tim, 5 oktober 2026): de offerte is de
   belangrijkste en is rood, de knop naar de digitale assistent is zwart met
   een lijn. Geldt in het oproepblok op desktop én onderin de lade op mobiel.
   Strakke hoeken, geen ronding; beide 1px rand, zodat ze even hoog zijn. */
.alp-mm__cta-knop,
.alp-mm__cta-extra,
.alp-mm__offerteknop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    padding: 11px 18px;
    border: 1px solid var(--alp-mm-donker);
    border-radius: 0;
    background: transparent;
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}

.alp-mm__cta-knop:hover,
.alp-mm__cta-knop:focus {
    background: var(--alp-mm-donker);
}

.alp-mm__cta-extra,
.alp-mm__offerteknop,
.alp-mm__cta > .alp-mm__cta-knop {
    border-color: var(--alp-mm-accent);
    background: var(--alp-mm-accent);
}

/* Staat de knop naar de assistent alleen in het oproepblok (geen offerteknop
   erboven, zoals bij Huren), dan is hij de enige oproep en dus rood (Tim,
   5 oktober 2026). In het blok met twee knoppen zit hij in .alp-mm__cta-knoppen
   en blijft hij omlijnd. */
.alp-mm__cta > .alp-mm__cta-knop:hover,
.alp-mm__cta > .alp-mm__cta-knop:focus {
    border-color: var(--alp-mm-accent-op);
    background: var(--alp-mm-accent-op);
}

.alp-mm__cta-extra:hover,
.alp-mm__cta-extra:focus,
.alp-mm__offerteknop:hover,
.alp-mm__offerteknop:focus {
    border-color: var(--alp-mm-accent-op);
    background: var(--alp-mm-accent-op);
}

/* Een menu-item onder het oproepblok wordt de rode knop, boven de knop naar
   de assistent. Kim, 29 september 2026: "Offerte aanvragen" staat hier en
   niet tussen de categorieën. */
.alp-mm__cta-knoppen {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

/* Even breed als de breedste, tekst in het midden. */
.alp-mm__cta-knoppen > a {
    justify-content: center;
}


/* --- 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 balk op een smal scherm: logo links, hamburger rechts ----------

       Tim, 16 september 2026: de hamburger hoort rechts naast het logo, en de
       offerteknop verdwijnt uit de balk; die staat onderin de lade.

       De header is een Elementor-opbouw met twee lagen die hier meespelen:

         rij met logo en menublok        (container 05c2a28)
           logo
           menublok                      (container 614980bc)
             shortcode met dit menu
             offerteknop

       Op een telefoon maakt Elementor het menublok zo breed als de rij (350 px
       op 390). Dan past het niet meer naast het logo en schuift het eronder.
       Gemeten: logo op y=65, menublok op y=160. Door het menublok zijn eigen
       breedte te geven komt het naast het logo te staan.

       De selectors gaan uit van wat erin staat, niet van de element-id's: de
       Engelse header heeft dezelfde opbouw met dezelfde id's, maar dat is
       toeval dat bij een nieuwe header niet meer hoeft te kloppen. Ze hebben
       bewust meer dan één klasse; de per-template css van Elementor laadt later
       en zou het anders winnen. */

    /* de rij: alles op één regel, verticaal gecentreerd */
    .e-con-inner:has(> .e-con > .e-con-inner > .elementor-widget-shortcode .alp-mm--js) {
        flex-wrap: nowrap;
        align-items: center;
    }

    /* het menublok: niet de volle breedte, maar zo breed als de hamburger */
    .e-con:has(> .e-con-inner > .elementor-widget-shortcode .alp-mm--js) {
        --width: auto;
        width: auto;
        flex: 0 0 auto;
        margin-left: auto;
    }

    /* de offerteknop naast de hamburger: die staat nu onderin de lade */
    .e-con-inner:has(> .elementor-widget-shortcode .alp-mm--js) > .elementor-widget-button {
        display: none;
    }

    /* Hier stond eerder margin-right: auto, dat de hamburger naar links trok.
       Dat was de keuze van vóór 16 september; nu hoort hij rechts. */
    .elementor-widget-shortcode:has(.alp-mm--js) {
        margin-right: 0;
    }

    /* 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 knoppen onderin de lade --------------------------------------- */

    /* Eén keer, en ze blijven staan in elk paneel. In de brede weergave is de
       oproep een kolom naast de links; onder elkaar zou dezelfde zin en dezelfde
       knop drie keer in één sectie langskomen.

       Twee knoppen onder elkaar: bovenaan de offerteknop, rood, daaronder de
       omlijnde knop naar de digitale assistent (Tim, 5 oktober 2026). De vorm
       van beide staat bij het oproepblok, hier alleen de maat. */
    .alp-mm__voet {
        flex-direction: column;
        gap: 10px;
        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 tekstkleur van de twee knoppen. De kit zet met !important een kleur op
   elke link, dus zonder !important zou de tekst rood of wit worden.
   Knop naar de assistent: donkere tekst, bij hover en focus wit op donker. */
a.alp-mm__cta-knop {
    color: var(--alp-mm-donker) !important;
}

a.alp-mm__cta-knop:hover,
a.alp-mm__cta-knop:focus {
    color: var(--alp-mm-wit) !important;
}

/* De offerteknop, en de knop naar de assistent als hij alleen staat: gevuld
   rood, dus de tekst blijft altijd wit. */
.alp-mm__cta > a.alp-mm__cta-knop,
.alp-mm__cta > a.alp-mm__cta-knop:hover,
.alp-mm__cta > a.alp-mm__cta-knop:focus,
a.alp-mm__cta-extra,
a.alp-mm__cta-extra:hover,
a.alp-mm__cta-extra:focus,
a.alp-mm__offerteknop,
a.alp-mm__offerteknop:hover,
a.alp-mm__offerteknop: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);
}


/* --- De witte stand, voor een transparante header -------------------------
   Zet kleur="wit" op de shortcode. Bedoeld voor een header die over een foto
   of een donker vlak ligt, zoals op /over-ons/: daar staat de balk nu in
   zwart en grijs op een donkere foto en is hij nauwelijks te lezen.

   Wat er wit wordt is alleen de balk zelf: de namen, de pijltjes ernaast, de
   naam van de site als er geen logo is, en op een smal scherm de hamburger
   met het woord "Menu". Wat er níet mee verandert zijn de panelen die
   openklappen en de lade op een telefoon: die hebben hun eigen witte vlak en
   staan dus niet op de foto. Vandaar dat het balkdeel hieronder vanaf 1025
   pixels geldt — daaronder zit diezelfde balk ín de witte lade, en daar moeten
   de letters juist donker blijven.

   Het schaduwtje achter de letters is er voor een lichte plek in de foto. Een
   foto is geen effen kleur, dus alleen een witte letter is niet genoeg om
   overal leesbaar te zijn.

   Twee dingen om te weten:
   - Deze stand doet niets aan de achtergrond van de header. Of die
     transparant is bepaalt de header-template in Elementor.
   - De !important staat er omdat de knopstijlen van de Elementor-kit hem ook
     gebruiken; zie het blok "Voorrang op de sitebrede stijlen" hierboven. Een
     balkitem zonder eigen pagina is namelijk een <button>.
   -------------------------------------------------------------------- */

@media (min-width: 1025px) {

    .alp-mm--wit .alp-mm__balklink,
    .alp-mm--wit .alp-mm__schakel,
    .alp-mm--wit .alp-mm__logo-tekst,
    .alp-mm--wit button.alp-mm__balklink,
    .alp-mm--wit button.alp-mm__schakel {
        color: var(--alp-mm-op-foto) !important;
        text-shadow: var(--alp-mm-op-foto-schaduw);
    }

    /* Waar je met de muis of het toetsenbord op staat wordt rood, net als in
       de gewone stand: dat is de reactie die de site overal gebruikt, en die
       hoort niet te verdwijnen omdat de balk toevallig op een foto ligt. */
    .alp-mm--wit .alp-mm__balklink:hover,
    .alp-mm--wit .alp-mm__balklink:focus,
    .alp-mm--wit .alp-mm__item:hover > .alp-mm__balklink,
    .alp-mm--wit .alp-mm__item:hover > .alp-mm__schakel,
    .alp-mm--wit .alp-mm__item:hover > button.alp-mm__balklink,
    .alp-mm--wit button.alp-mm__balklink:hover,
    .alp-mm--wit button.alp-mm__balklink:focus,
    .alp-mm--wit .alp-mm__item.is-open > .alp-mm__schakel,
    .alp-mm--wit .alp-mm__item.is-open > .alp-mm__balklink,
    .alp-mm--wit .alp-mm__item.is-open > button.alp-mm__balklink {
        color: var(--alp-mm-accent) !important;
    }
}

/* De hamburger staat op de header zelf en niet in de lade, ook niet als het
   menu openstaat: de lade begint onder de header. Hij blijft dus altijd op de
   foto staan en hoort in deze stand op elke schermbreedte wit te zijn.

   Vandaar dat hier twee ingangen staan. De klasse alp-mm--wit zet het script
   erop nadat het gemeten heeft wat er achter de balk ligt, en dat meten lukt
   alleen op een breed scherm: onder 1025 pixels zit de balk in de lade en
   heeft hij geen afmetingen, dus die meting valt daar stil en de hamburger
   bleef donkergrijs op een donkere foto staan.

   De body-klasse alplift-header-transparant komt uit header/alplift-header.php
   en staat er server-side op elke pagina waar de header doorzichtig is. Die
   werkt dus wel op elke breedte, zonder meting en zonder flits bij het laden.
   Doorzichtig betekent op deze site altijd dat er een hero onder ligt.

   Alleen de knop en het woord "Menu" veranderen mee. De lade zelf houdt zijn
   witte vlak met donkere letters; die staat niet op de foto. */
.alp-mm--wit .alp-mm__hamburger,
.alp-mm--wit button.alp-mm__hamburger,
.alp-mm--wit button.alp-mm__hamburger:hover,
.alp-mm--wit button.alp-mm__hamburger:focus,
.alp-mm--wit button.alp-mm__hamburger:active,
.alp-mm--wit button.alp-mm__hamburger[aria-expanded="true"],
.alplift-header-transparant .alp-mm__hamburger,
.alplift-header-transparant button.alp-mm__hamburger,
.alplift-header-transparant button.alp-mm__hamburger:hover,
.alplift-header-transparant button.alp-mm__hamburger:focus,
.alplift-header-transparant button.alp-mm__hamburger:active,
.alplift-header-transparant button.alp-mm__hamburger[aria-expanded="true"] {
    color: var(--alp-mm-wit) !important;
    text-shadow: var(--alp-mm-op-foto-schaduw);
}

/* De focusring van het toetsenbord: het rood van de site verdwijnt op een
   donkere foto, dus die wordt hier wit. Alleen op de balk; binnen de panelen
   blijft het rood, want daar is de achtergrond wit. */
.alp-mm--wit .alp-mm__balklink:focus-visible,
.alp-mm--wit .alp-mm__schakel:focus-visible,
.alp-mm--wit .alp-mm__hamburger:focus-visible,
.alplift-header-transparant .alp-mm__hamburger:focus-visible {
    outline-color: var(--alp-mm-wit);
}