/**
 * MD-act — megamenu
 * Wordt geladen vanuit mdact-megamenu.php, alleen op een pagina waar de
 * shortcode [mdact_megamenu] ook echt rendert.
 *
 * Alles staat onder .mdact-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 MDACT_MEGAMENU_STIJL of met het
 * attribuut stijl="..." op de shortcode:
 *
 *   sober (nu de standaard)  rustig en typografisch: het groen en het goud van
 *                            de site, maar geen iconen en geen kleurvlakken.
 *   huisstijl                hetzelfde palet met meer nadruk, en met de
 *                            lijntekeningen bij de namen.
 *
 * 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 mdact-mm--js op de <nav> en
 *                       werkt daarna met is-open en is-actief. De hamburger
 *                       en de uitklapknoppen doen dan het werk.
 */

.mdact-mm {
    /* De lopende tekst van de site staat op gewicht 300 (Elementor-kit). De
       links in de panelen horen daarbij: op 400 lezen ze als vetgedrukt naast
       de rest van de site. Koppen boven een kolom blijven wél zwaarder. */
    --mdact-mm-tekst-gewicht: 300;

    /* De kleuren van MD-act, overgenomen uit assets/css/mdact-blocks.css,
       waar ze als --mdact-* op :root staan:

         donkergroen #2C4A3E  koppen en de tekst van de menu-items
         groen       #4A7C6B  de knoppen op de site. Hier het accent: een link
                              of tab waar je met de muis of het toetsenbord op
                              staat, en de knop rechts in het paneel.
         crème       #F5EFE6  de achtergrond van de site, en dus van de gevulde
                              balk
         zachtgroen  #D5E0D9  het vlak achter de zijbalk en het item waar je
                              met de muis op staat
         goud        #E8C89A  het accentvlak van de site. Te licht voor letters,
                              dus alleen als vlak achter een label
         body        #54595F  lopende tekst

       De panelen blijven wit: ze liggen op de pagina en moeten er los van staan.
       Het accent is het groen en niet het goud, want dat goud is te licht om
       op wit te lezen. */
    --mdact-mm-accent:      #4A7C6B;
    --mdact-mm-accent-op:   #2C4A3E;
    --mdact-mm-accent-vlak: rgba(74, 124, 107, .12);
    --mdact-mm-donker:      #2C4A3E;
    --mdact-mm-licht:       #F5EFE6;
    --mdact-mm-roze:        #D5E0D9;
    --mdact-mm-rood:        #4A7C6B;
    --mdact-mm-body:        #54595F;
    --mdact-mm-streep:      rgba(44, 74, 62, .12);
    /* De rand om een opengeklapt paneel. Iets sterker dan de scheidingslijntjes
       binnenin: die liggen op wit, maar de buitenrand moet het opnemen tegen
       de kleur van de pagina erachter. Een wit paneel op een crème of licht
       vlak verliest anders zijn contour (opgemerkt door Albert, 15 september).
       Nog steeds één pixel, dus het blijft een lijntje en geen kader. */
    --mdact-mm-rand:        rgba(44, 74, 62, .28);
    --mdact-mm-wit:         #FFFFFF;

    /* De kleur van de balk zodra hij gevuld is, en het lijntje eronder. */
    --mdact-mm-balk:        #F5EFE6;
    --mdact-mm-balk-lijn:   rgba(44, 74, 62, .07);

    --mdact-mm-paneel:    1000px;
    --mdact-mm-zijbalk:   208px;
    --mdact-mm-hoogte:    46px;
    /* Zo licht als het maar kan: het paneel moet los van de pagina staan,
       verder niets. De header zelf krijgt alleen een lijntje. */
    --mdact-mm-schaduw:   0 14px 26px -22px rgba(44, 74, 62, .28);

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

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

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

.mdact-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>. */
.mdact-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;
}

.mdact-mm :focus-visible {
    outline: 2px solid var(--mdact-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. */
.mdact-mm__hier {
    display: none;
}

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

.mdact-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
   --mdact-mm-logo: 44px.
   -------------------------------------------------------------------- */

.mdact-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. */
.mdact-mm--met-logo .mdact-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. */
.mdact-mm__lade,
.mdact-mm__lagen {
    display: contents;
}

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

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

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

.mdact-mm__logo-tekst {
    font-size: 20px;
    letter-spacing: -.01em;
    color: var(--mdact-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.
   -------------------------------------------------------------------- */

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

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

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

.mdact-mm__item:hover > .mdact-mm__balklink {
    color: var(--mdact-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. */
.mdact-mm__schakel:not(.mdact-mm__balklink) {
    display: flex;
    align-items: center;
    padding: 0 8px 0 0;
    margin-left: -8px;
    color: var(--mdact-mm-body);
}

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

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

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

.mdact-mm__label {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 10px;
    border-radius: 12px;
    background: var(--mdact-mm-rood);
    color: var(--mdact-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.
   -------------------------------------------------------------------- */

.mdact-mm__paneel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    background: var(--mdact-mm-wit);
    box-shadow: var(--mdact-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.

       De rand loopt rondom en niet alleen bovenlangs: de schaduw is zo licht
       dat het witte paneel op een licht of crème vlak zijn contour verloor. */
    border: 1px solid var(--mdact-mm-rand);
    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 Coaching naar Assessment 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. */
.mdact-mm__item--breed > .mdact-mm__paneel {
    width: max-content;
    max-width: min(var(--mdact-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. */
.mdact-mm__item--smal {
    position: relative;
}

.mdact-mm__item--smal > .mdact-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. */
.mdact-mm__item--smal.is-rechts > .mdact-mm__paneel {
    left: auto;
    right: 0;
}

.mdact-mm__item.is-open > .mdact-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. */
.mdact-mm:not(.mdact-mm--js) .mdact-mm__item:hover > .mdact-mm__paneel,
.mdact-mm:not(.mdact-mm--js) .mdact-mm__item:focus-within > .mdact-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.
   -------------------------------------------------------------------- */

.mdact-mm__paneel-body {
    display: grid;
    grid-template-columns: var(--mdact-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(--mdact-mm-tabs, 3), min-content) 1fr;

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

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

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

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

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

.mdact-mm__tab-pijl .mdact-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. */
.mdact-mm__tab.is-actief {
    background: var(--mdact-mm-wit);
}

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

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

.mdact-mm__tab:hover .mdact-mm__tab-pijl,
.mdact-mm__tab:focus .mdact-mm__tab-pijl {
    color: var(--mdact-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. */
.mdact-mm__regel {
    display: none;
}

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

.mdact-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. */
.mdact-mm:not(.mdact-mm--js) .mdact-mm__paneel-body:has(.mdact-mm__tab:hover) > .mdact-mm__pane.is-actief,
.mdact-mm:not(.mdact-mm--js) .mdact-mm__paneel-body:has(.mdact-mm__tab:focus) > .mdact-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. */
.mdact-mm:not(.mdact-mm--js) .mdact-mm__tab:hover + .mdact-mm__regel + .mdact-mm__pane,
.mdact-mm:not(.mdact-mm--js) .mdact-mm__tab:focus + .mdact-mm__regel + .mdact-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. */
.mdact-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. */
.mdact-mm__kolom {
    flex: 0 1 262px;

    /* Niet verder krimpen dan de langste naam die hier staat: onder ongeveer
       190 pixels valt "Zelfvertrouwen & zelfbeeld" over twee regels en staat
       de kolom vol met afgebroken namen. */
    min-width: 190px;
}

/* 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. */
.mdact-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. */
.mdact-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. */
.mdact-mm__kop {
    margin: 0 0 12px;
    padding-bottom: 8px;

    /* Een maat groter dan de links eronder: de kop is de groep, de links zijn
       de onderdelen daarvan. */
    font-size: 15px;
    font-weight: 500;
    color: var(--mdact-mm-donker);
    border-bottom: 1px solid var(--mdact-mm-streep);
}

/* De links staan onder elkaar met de regelafstand van de site, net als de
   kolommen in de voet: geen eigen tussenruimte, zodat een kolom als een blok
   tekst leest en niet als een lijst met gaten. Een naam die over twee regels
   loopt krijgt daarbinnen een strakkere regelafstand dan de afstand tussen twee
   namen, anders zijn de twee niet uit elkaar te houden. */
.mdact-mm__links > li + li {
    margin-top: 6px;
}

.mdact-mm__link {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 0;
    font-size: 13px;
    line-height: 1.35;
    font-weight: var(--mdact-mm-tekst-gewicht, 300);
    transition: color .15s;
}

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

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

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

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

.mdact-mm__pil:hover,
.mdact-mm__pil:focus {
    background: var(--mdact-mm-accent-vlak);
    color: var(--mdact-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. */
.mdact-mm__merk {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--mdact-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. */
.mdact-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(--mdact-mm-streep);
}

/* Het introblok onder Kennis > Artikelen staat er alleen, niet naast andere
   blokken met wie het zijn streep moet delen. Zonder die buren hoeft er ook
   geen lijn onder: de verticale lijn naast de artikelen doet het scheiden al.
   De verwijzing blijft wel onderaan uitlijnen met de onderste artikelen. */
.mdact-mm__kolom--intro .mdact-mm__merk-kop {
    padding-bottom: 0;
    min-height: 104px;
    border-bottom: 0;
}

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

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

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

.mdact-mm__merk-link .mdact-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. */
.mdact-mm__kolom--merk .mdact-mm__link {
    padding: 3px 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--mdact-mm-body);
}

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

.mdact-mm__kolom--merk .mdact-mm__link:hover,
.mdact-mm__kolom--merk .mdact-mm__link:focus {
    color: var(--mdact-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. */

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

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

    /* Dezelfde knop als op de rest van de site: goud met donkere letters en een
       hoekradius van 6, opgemeten in de Elementor-kit. */
    border-radius: 6px;
    background: var(--mdact-mm-knop, #E8C89A);
    color: var(--mdact-mm-knop-tekst, #1E1E1A);
    font-size: 14px;
    font-weight: 500;
    transition: background .15s;
}

.mdact-mm__cta-knop:hover,
.mdact-mm__cta-knop:focus {
    background: var(--mdact-mm-knop-op, #E0C198);
    color: var(--mdact-mm-knop-tekst, #1E1E1A);
}


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

.mdact-mm__lijstlink {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    font-weight: var(--mdact-mm-tekst-gewicht, 300);
    transition: color .15s, background .15s;
}

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

.mdact-mm__lijst .mdact-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. */
.mdact-mm__hamburger {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 4px;
    font-weight: 500;
}

/* De drie streepjes, en hoe ze een kruisje worden.

   De bovenste en de onderste schuiven naar het midden en draaien daar een
   kwartslag tegen elkaar in; de middelste krimpt weg. Andersom net zo, dus het
   sluiten is dezelfde beweging teruggedraaid. Ze zijn getekend met vlakjes en
   niet met een icoon, want twee iconen die elkaar afwisselen kunnen niet
   bewegen: dan staat het kruisje er ineens.

   De kleur is currentColor, dus de streepjes volgen de kleur van de balk. */
.mdact-mm__streepjes {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 22px;
    height: 16px;
}

.mdact-mm__streepjes > span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .18s ease;
}

.mdact-mm__streepjes > span:nth-child(1) {
    top: 0;
}

.mdact-mm__streepjes > span:nth-child(2) {
    top: 7px;
}

.mdact-mm__streepjes > span:nth-child(3) {
    top: 14px;
}

.mdact-mm__hamburger[aria-expanded="true"] .mdact-mm__streepjes > span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mdact-mm__hamburger[aria-expanded="true"] .mdact-mm__streepjes > span:nth-child(2) {
    opacity: 0;
    transform: scaleX(.2);
}

.mdact-mm__hamburger[aria-expanded="true"] .mdact-mm__streepjes > span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


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

     .mdact-mm__lade      wordt de laag over de pagina, met de knop onderin
     .mdact-mm__lagen     wordt het venster waarin de panelen schuiven
     .mdact-mm__balk      wordt de eerste laag, met eigen scroll
     .mdact-mm__paneel    laat zijn tabs en panes door (display: contents), zodat
                        die directe onderdelen van de lijst worden
     .mdact-mm__laag      elk paneel dat inschuift, absoluut over de eerste laag
     .mdact-mm__tab       verdwijnt; .mdact-mm__regel ernaast neemt het over
     .mdact-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) {

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

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

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

    /* De onderdelen die alleen op een smal scherm bestaan. */
    .mdact-mm--js .mdact-mm__groep,
    .mdact-mm--js .mdact-mm__regel,
    .mdact-mm--js .mdact-mm__paneelkop,
    .mdact-mm--js .mdact-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(.mdact-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. */
    .mdact-mm--js .mdact-mm__tab,
    .mdact-mm--js .mdact-mm__item--breed > .mdact-mm__balklink,
    .mdact-mm--js .mdact-mm__item--smal > .mdact-mm__balklink,
    .mdact-mm--js .mdact-mm__schakel,
    .mdact-mm--js .mdact-mm__kolom--cta {
        display: none;
    }


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

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

    .mdact-mm--js.is-open .mdact-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.mdact-mm-lade-open {
        overflow: hidden;
    }

    body.mdact-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. */
    .mdact-mm--js .mdact-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. */
    .mdact-mm--js .mdact-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. */
    .mdact-mm--js .mdact-mm__item--breed > .mdact-mm__paneel,
    .mdact-mm--js .mdact-mm__paneel-body {
        display: contents;
        position: static;
    }

    .mdact-mm--js .mdact-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. */
    .mdact-mm--js .mdact-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(--mdact-mm-wit);
        box-shadow: -14px 0 32px -20px rgba(24, 4, 3, .3);
        transform: translateX(100%);
        transition: transform .22s ease;
        visibility: hidden;
    }

    .mdact-mm--js .mdact-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. */
    .mdact-mm__groep {
        align-items: center;
        margin: 14px 16px 4px;
        padding: 0 0 7px;
        font-size: 14px;
        font-weight: 500;
        color: var(--mdact-mm-donker);
        border-bottom: 1px solid var(--mdact-mm-streep);
    }

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

    a.mdact-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. */
    .mdact-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(--mdact-mm-donker);
    }

    .mdact-mm__regel .mdact-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. */
    .mdact-mm__hier {
        display: inline-block;
        flex: 0 0 auto;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--mdact-mm-accent);
        white-space: nowrap;
    }

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

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

    .mdact-mm__regel:hover,
    .mdact-mm__regel:focus {
        color: var(--mdact-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. */
    .mdact-mm__item--breed + .mdact-mm__item:not(.mdact-mm__item--breed) {
        margin-top: 6px;
        padding-top: 4px;
        border-top: 1px solid var(--mdact-mm-streep);
    }

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

    /* Contact heeft geen paneel; dat blijft een gewone regel. */
    .mdact-mm--js .mdact-mm__item > .mdact-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. */
    .mdact-mm__paneelkop {
        display: flex;
        align-items: center;
        gap: 6px;
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 4px 16px 8px 4px;
        background: var(--mdact-mm-wit);
        border-bottom: 1px solid var(--mdact-mm-streep);
    }

    .mdact-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(--mdact-mm-body);
    }

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

    .mdact-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(--mdact-mm-donker);
    }

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


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

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

    .mdact-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. */
    .mdact-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. */
    .mdact-mm__kolom--hoofd > .mdact-mm__kop {
        display: none;
    }

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

    .mdact-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. */
    .mdact-mm--js .mdact-mm__pillen {
        display: block;
        padding: 0;
    }

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

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

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

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

    .mdact-mm__lijstlink:hover,
    .mdact-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. */
    .mdact-mm__merk-tekst {
        display: none;
    }

    .mdact-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. */
    .mdact-mm__kolom--merk .mdact-mm__merk {
        margin: 22px 0 2px;
        padding-bottom: 7px;
        font-size: 15px;
        font-weight: 500;
        border-bottom: 1px solid var(--mdact-mm-streep);
    }

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

    .mdact-mm__kolom--merk:first-child .mdact-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. */
    .mdact-mm--js a.mdact-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. */
    .mdact-mm__link,
    .mdact-mm__kolom--merk .mdact-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. */
    .mdact-mm__voet {
        flex-direction: column;
        gap: 14px;
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
        background: var(--mdact-mm-licht);
        border-top: 1px solid var(--mdact-mm-streep);
    }

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

    /* Bellen en mailen, boven de knop naar de assistent. Boven de balk staan
       ze ook, maar daar is op een telefoon geen ruimte voor: die balk zou twee
       regels hoog worden. Hier staan ze als twee volwaardige regels met een
       icoon ervoor, groot genoeg om met een duim te raken (44 px). */
    .mdact-mm__ladecontact {
        display: flex;
        flex-direction: column;
    }

    .mdact-mm__ladelink {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        color: var(--mdact-mm-donker);
        font-size: 15px;
        text-decoration: none;
    }

    /* Twee klassen, anders wint de linkkleur van de Elementor-kit: die zet
       .elementor-kit-7 a en laadt ná deze stylesheet. */
    .mdact-mm .mdact-mm__ladelink:hover,
    .mdact-mm .mdact-mm__ladelink:focus {
        color: var(--mdact-mm-accent);
    }

    .mdact-mm__ladelink svg {
        width: 18px;
        height: 18px;
        flex: none;
        color: var(--mdact-mm-accent);
    }

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

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

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


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

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

    .mdact-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. */
.mdact-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.mdact-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.mdact-mm__balklink,
button.mdact-mm__balklink:hover,
button.mdact-mm__balklink:focus,
button.mdact-mm__balklink:active,
button.mdact-mm__tab,
button.mdact-mm__schakel,
button.mdact-mm__schakel:hover,
button.mdact-mm__schakel:focus,
button.mdact-mm__regel,
button.mdact-mm__regel:hover,
button.mdact-mm__regel:focus,
button.mdact-mm__regel:active,
button.mdact-mm__terug,
button.mdact-mm__terug:hover,
button.mdact-mm__terug:focus,
button.mdact-mm__hamburger,
button.mdact-mm__hamburger:hover,
button.mdact-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.mdact-mm__balklink {
    padding: 0 14px;
    height: var(--mdact-mm-hoogte);
}

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

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

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

button.mdact-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.mdact-mm__tab,
button.mdact-mm__balklink,
button.mdact-mm__hamburger,
button.mdact-mm__hamburger:hover,
button.mdact-mm__hamburger:focus,
button.mdact-mm__hamburger:active,
button.mdact-mm__hamburger[aria-expanded="true"] {
    color: var(--mdact-mm-donker) !important;
}

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

/* De knop in het blok met de oproep: goud met donkere letters, net als de
   knoppen op de site. Alleen hier is !important nodig, want de linkkleur van de
   Elementor-kit wint anders. */
a.mdact-mm__cta-knop,
a.mdact-mm__cta-knop:hover,
a.mdact-mm__cta-knop:focus {
    color: var(--mdact-mm-knop-tekst, #1E1E1A) !important;
}

/* Dezelfde reden voor de knop rechts in de balk: die is een link, dus de
   linkkleur van de kit (een groen dat op de donkere balk wegvalt) wint anders
   van de goudkleur hieronder. Bij aanwijzen vult de knop zich en worden de
   letters donker. */
a.mdact-mm__knop {
    color: var(--mdact-mm-knop-lijn, #E8C89A) !important;
}

a.mdact-mm__knop:hover,
a.mdact-mm__knop:focus {
    color: var(--mdact-mm-knop-tekst, #1E1E1A) !important;
}

.mdact-mm__cta-knop .mdact-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. */
    .mdact-mm--js .mdact-mm__item > button.mdact-mm__balklink,
    .mdact-mm--js .mdact-mm__item > a.mdact-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.mdact-mm__regel,
    button.mdact-mm__regel:hover,
    button.mdact-mm__regel:focus,
    button.mdact-mm__regel:active {
        width: 100%;
        min-height: 48px;
        padding: 0 16px;
    }

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

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

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

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


/* --- De huisstijl-stand ---------------------------------------------------
   Zet stijl="huisstijl" op de shortcode, of MDACT_MEGAMENU_STIJL bovenin
   mdact-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 op de rest van de site:
     groen       = #4A7C6B   actieve tab, knop, hover, het streepje
     donkergroen = #2C4A3E   tekst van de items
     zachtgroen  = #D5E0D9   de zijbalk en het blok met de oproep
     body        = #54595F   koppen boven een kolom
     streep      = rgba(44, 74, 62, .12)   de scheidingslijntjes
   -------------------------------------------------------------------- */

.mdact-mm--huisstijl {
    --mdact-mm-accent:      #4A7C6B;
    --mdact-mm-accent-op:   #2C4A3E;
    --mdact-mm-accent-vlak: rgba(74, 124, 107, .16);
    --mdact-mm-donker:      #2C4A3E;
    --mdact-mm-licht:       #D5E0D9;
    --mdact-mm-body:        #54595F;
    --mdact-mm-streep:      rgba(44, 74, 62, .12);
    --mdact-mm-schaduw:     0 16px 44px rgba(44, 74, 62, .16), 0 2px 6px rgba(44, 74, 62, .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>.
   -------------------------------------------------------------------- */

.mdact-mm--wit {
    /* Niet helemaal 255: volle witte tekst op een foto oogt harder dan nodig.
       Waar je met de muis op staat wordt hij wél vol wit. */
    --mdact-mm-op-foto:      rgba(255, 255, 255, .92);

    /* Twee lagen: een strak schaduwtje 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. */
    --mdact-mm-op-foto-schaduw: 0 1px 2px rgba(24, 4, 3, .55), 0 0 10px rgba(24, 4, 3, .38);
}

@media (min-width: 1025px) {

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

    /* Ook het regeltje boven het logo: zonder deze regel erft het de donkere
       kleur van de nav en staat het donkergroen op de donkergroene header, dus
       onzichtbaar. Geen schaduw eromheen: die letters zijn klein, en een gloed
       maakt ze op dit vlak eerder viezig dan leesbaar. */
    .mdact-mm--wit .mdact-mm__kopcontact {
        color: var(--mdact-mm-op-foto);
    }

    /* Waar je met de muis of het toetsenbord op staat wordt wit, net als in het
       menu dat er nu staat: #C0C0C0 in rust, #FFFFFF bij aanwijzen. */
    .mdact-mm--wit .mdact-mm__balklink:hover,
    .mdact-mm--wit .mdact-mm__balklink:focus,
    .mdact-mm--wit .mdact-mm__item:hover > .mdact-mm__balklink,
    .mdact-mm--wit .mdact-mm__item:hover > .mdact-mm__schakel,
    .mdact-mm--wit .mdact-mm__item:hover > button.mdact-mm__balklink,
    .mdact-mm--wit button.mdact-mm__balklink:hover,
    .mdact-mm--wit button.mdact-mm__balklink:focus,
    .mdact-mm--wit .mdact-mm__item.is-open > .mdact-mm__schakel,
    .mdact-mm--wit .mdact-mm__item.is-open > .mdact-mm__balklink,
    .mdact-mm--wit .mdact-mm__item.is-open > button.mdact-mm__balklink {
        color: #FFFFFF !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. */
.mdact-mm--wit .mdact-mm__hamburger,
.mdact-mm--wit button.mdact-mm__hamburger,
.mdact-mm--wit button.mdact-mm__hamburger:hover,
.mdact-mm--wit button.mdact-mm__hamburger:focus,
.mdact-mm--wit button.mdact-mm__hamburger:active,
.mdact-mm--wit button.mdact-mm__hamburger[aria-expanded="true"] {
    color: var(--mdact-mm-wit) !important;
    text-shadow: var(--mdact-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. */
.mdact-mm--wit .mdact-mm__balklink:focus-visible,
.mdact-mm--wit .mdact-mm__schakel:focus-visible,
.mdact-mm--wit .mdact-mm__hamburger:focus-visible {
    outline-color: var(--mdact-mm-wit);
}


/* --- De vaste balk die omslaat (kleur="omslag") ---------------------------
   De stand van MD-act. De balk blijft bij het scrollen boven in beeld staan en
   verandert onderweg van kleur:

     op de hero        doorzichtig, wit logo, witte letters. De witte stand
                       hierboven doet dat werk; het script zet daarvoor
                       mdact-mm--wit aan en uit.
     hero voorbij      crème vlak, donkergroen logo, donkere letters, een dun
                       lijntje eronder en een zachte schaduw.
     geen hero         meteen crème, vanaf de eerste pixel.

   Het script zet twee klassen: mdact-mm-kop op de header eromheen (dat is de
   header-template van Elementor), en is-gevuld zodra de balk een vlak moet
   hebben. Zonder JavaScript gebeurt er niets: dan is er geen mdact-mm-kop, staat
   de header waar hij stond en zijn de letters donker. Onleesbaar kan het dus
   niet worden.

   De hoogte van de balk komt als --mdact-mm-kop-hoogte op <html> te staan, zodat
   de pagina eronder er ruimte voor kan maken.
   -------------------------------------------------------------------- */

.mdact-mm-kop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    transition: background-color .3s ease, box-shadow .3s ease;
}

.mdact-mm-kop.is-gevuld {
    background: var(--mdact-mm-balk, #F5EFE6);

    /* Alleen een haarlijntje, geen schaduw. In de header van MD-act stond de
       schaduw uitgezet; dat is hier overgenomen. */
    box-shadow: 0 1px 0 var(--mdact-mm-balk-lijn, rgba(0, 59, 67, .07));
}

/* De ruimte die de vaste balk inneemt, op een pagina die niet met een hero
   begint. Het script zet dit op het blok met de pagina-inhoud. */
.mdact-mm-ruimte {
    padding-top: var(--mdact-mm-kop-hoogte, 93px);
}

/* Het lijntje dat de header zelf onderaan heeft, hoort bij de gevulde stand.
   Op de foto valt het weg. */
.mdact-mm-kop:not(.is-gevuld) .mdact-mm-headerlijn {
    border-bottom-color: transparent;
}


/* --- Twee logo's over elkaar ----------------------------------------------
   In de omslag-stand hangt het lichte logo over het donkere. Ze wisselen met
   dezelfde overgang als de balk, zodat er geen moment is waarop er geen logo
   staat. Zonder logo_wit op de shortcode is er maar één logo en doet dit niets.
   -------------------------------------------------------------------- */

.mdact-mm__logo--duo {
    position: relative;
}

.mdact-mm__logo--duo .mdact-mm__logo-wit {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.mdact-mm__logo-donker,
.mdact-mm__logo-wit {
    transition: opacity .3s ease;
}

/* Op de hero: het lichte logo staat aan. */
.mdact-mm--kleur-omslag .mdact-mm__logo--duo .mdact-mm__logo-donker {
    opacity: 0;
}

/* Gevuld, en altijd zodra de lade op een telefoon openstaat (is-open op de nav
   zelf): het donkere logo staat aan, want dan ligt er een crème vlak achter. */
.mdact-mm--kleur-omslag.is-gevuld .mdact-mm__logo--duo .mdact-mm__logo-donker,
.mdact-mm--kleur-omslag.is-open .mdact-mm__logo--duo .mdact-mm__logo-donker {
    opacity: 1;
}

.mdact-mm--kleur-omslag.is-gevuld .mdact-mm__logo--duo .mdact-mm__logo-wit,
.mdact-mm--kleur-omslag.is-open .mdact-mm__logo--duo .mdact-mm__logo-wit {
    opacity: 0;
}


/* --- De header laten krimpen als de balk gevuld raakt ---------------------
   MD-act had dit al: de header is 93 pixels hoog en krimpt naar 70 zodra je
   scrollt, met een kleiner logo. Die maten stonden in style.css aan de klasse
   die Elementor bij zijn eigen sticky zet (elementor-sticky--effects). Nu de
   module de balk vastzet, staat Elementors sticky uit en komt die klasse nooit
   meer; daarom hangen dezelfde maten hier aan is-gevuld.

   De waarden komen uit de variabelen die het thema al zet, met een terugval
   voor een site die ze niet heeft. Het elementnaam-plus-twee-klassen in de
   selector is nodig om van de !important in style.css te winnen.
   -------------------------------------------------------------------- */

header.mdact-mm-kop {
    transition: background-color .3s ease, box-shadow .3s ease,
                padding .3s ease-in-out;
}

/* De hoogte van de header is het logo plus evenveel lucht boven als onder. Geen
   vaste hoogte dus: die liep niet gelijk met de inhoud, waardoor het logo lager
   in de balk hing dan erboven.

   Krimpen gebeurt door twee waarden tegelijk te veranderen, de lucht en de maat
   van het logo. Allebei zijn ze animeerbaar, dus de balk loopt netjes terug in
   plaats van te verspringen: van 102 naar 68 pixels.

   Let op het verschil met is-gevuld: dat gaat alleen over de achtergrond. Een
   paneel dat opengaat vult de balk wel, maar laat de hoogte met rust, anders
   springt hij onder je muis vandaan. */
header.mdact-mm-kop {
    --mdact-mm-kop-lucht: 22px;

    height: auto !important;
    min-height: 0 !important;
    padding-top: var(--mdact-mm-kop-lucht) !important;
    padding-bottom: var(--mdact-mm-kop-lucht) !important;
}

/* De maten staan hier met de waarde erbij en niet via de variabele. Dat is met
   opzet: een !important-declaratie die zijn waarde uit een custom property
   haalt, bleef in Chrome op de oude maat staan zodra de property veranderde.
   Gemeten op 11 september 2026: de variabele sprong wel naar 12px, de padding
   bleef 22px. Met de waarde ter plekke gebeurt het wel. */
header.mdact-mm-kop.is-klein {
    padding-top: var(--mdact-mm-kop-lucht-klein, 12px) !important;
    padding-bottom: var(--mdact-mm-kop-lucht-klein, 12px) !important;
}

header.mdact-mm-kop.is-klein .mdact-mm__logo img,
header.mdact-mm-kop.is-klein .mdact-mm__logo svg {
    height: var(--mdact-mm-logo-klein, 20px);
}

.mdact-mm__logo img,
.mdact-mm__logo svg {
    transition: height .3s ease;
}


/* --- De balk van WordPress zelf -------------------------------------------
   Voor wie ingelogd is staat bovenaan de zwarte beheerbalk. Die is ook vast,
   dus een balk op top: 0 verdwijnt daarachter. Alleen zichtbaar voor onszelf en
   voor de klant in het beheer, maar wel meteen verwarrend.

   WordPress geeft de hoogte door in een eigen variabele; 32 pixels is de
   terugval voor een oudere versie. Op een smal scherm scrollt die beheerbalk
   gewoon mee naar boven, dus daar hoeft er niets bij op.
   -------------------------------------------------------------------- */

body.admin-bar .mdact-mm-kop {
    top: var(--wp-admin--admin-bar--height, 32px);
}

@media screen and (max-width: 782px) {

    body.admin-bar .mdact-mm-kop {
        top: 0;
    }
}


/* --- Logo links, menu in het midden, knop rechts --------------------------
   De indeling van MD-act, precies zoals de header die er stond: het logo helemaal
   links, de items gecentreerd in de ruimte ertussen, en rechts de knop "Plan een
   bezoek" die in Elementor naast dit menu staat. Met uitlijning="links" op de
   shortcode staan de items weer direct naast het logo, zoals op alplift.com.

   Alleen op een breed scherm: in de lade op een telefoon is dezelfde balk een
   lijst onder elkaar, en die hoort links te blijven staan.
   -------------------------------------------------------------------- */

@media (min-width: 1025px) {

    .mdact-mm--met-logo .mdact-mm__balk {
        justify-content: center;
    }

    .mdact-mm--links.mdact-mm--met-logo .mdact-mm__balk {
        justify-content: flex-start;
    }
}


/* --- Dezelfde letters als het menu dat er stond ---------------------------
   Opgemeten in de header-css van de testsite (element 1365ae4) en in de kit:
   Inter, 14 pixels, geen hoofdletters, letters #C0C0C0 op de donkergroene balk
   en #FFFFFF waar je met de muis op staat. Het gewicht komt van de kit, net als
   bij het menu dat er nu staat; daarom staat er hier geen font-weight.

   Alleen de balk. In de panelen blijft de gewone leesbare tekst staan: die
   liggen op een wit vlak.
   -------------------------------------------------------------------- */

.mdact-mm__balklink,
.mdact-mm__schakel,
.mdact-mm__hamburger-tekst {
    font-family: "Inter", var(--e-global-typography-text-font-family, inherit), sans-serif;
    font-size: 14px;
}

/* In de lade op een telefoon is een balkitem zonder paneel (Artikelen, Over,
   Contact) geen balkje meer maar gewoon een regel, net als "Coaching" erboven. Dan hoort hij er ook zo uit te zien: dezelfde maat
   en geen hoofdletters, anders springen die drie er groot uit. */
@media (max-width: 1024px) {

    .mdact-mm--js .mdact-mm__item > .mdact-mm__balklink,
    .mdact-mm--js .mdact-mm__item > button.mdact-mm__balklink {
        /* Dezelfde opmaak als de kopjes Diensten en Kennis, want op dit niveau
           horen ze thuis. */
        font-size: inherit;
        font-weight: 500;
    }
}

@media (min-width: 1025px) {

    /* De afstand tussen twee items: 14 pixels per kant, net als in het menu
       dat er nu staat. */
    .mdact-mm__balklink {
        padding: 0 14px;
    }

    /* Op de donkergroene balk zilvergrijs, en wit waar je met de muis op staat.
       Geen schaduwtje achter de letters: de balk is een effen vlak en geen
       foto. */
    .mdact-mm--wit {
        --mdact-mm-op-foto: #C0C0C0;
        --mdact-mm-op-foto-schaduw: none;
    }

    .mdact-mm--wit .mdact-mm__balklink:hover,
    .mdact-mm--wit .mdact-mm__balklink:focus,
    .mdact-mm--wit .mdact-mm__item:hover > .mdact-mm__balklink,
    .mdact-mm--wit .mdact-mm__item:hover > .mdact-mm__schakel,
    .mdact-mm--wit .mdact-mm__item:hover > button.mdact-mm__balklink,
    .mdact-mm--wit button.mdact-mm__balklink:hover,
    .mdact-mm--wit button.mdact-mm__balklink:focus,
    .mdact-mm--wit .mdact-mm__item.is-open > .mdact-mm__schakel,
    .mdact-mm--wit .mdact-mm__item.is-open > .mdact-mm__balklink,
    .mdact-mm--wit .mdact-mm__item.is-open > button.mdact-mm__balklink {
        color: #FFFFFF !important;
    }

    /* Op een crème balk (kleur="donker") donkergroen. */
    .mdact-mm.is-gevuld .mdact-mm__item:hover > .mdact-mm__balklink,
    .mdact-mm.is-gevuld .mdact-mm__item:hover > .mdact-mm__schakel,
    .mdact-mm.is-gevuld .mdact-mm__balklink:hover,
    .mdact-mm.is-gevuld .mdact-mm__balklink:focus,
    .mdact-mm.is-gevuld .mdact-mm__item.is-open > .mdact-mm__balklink,
    .mdact-mm.is-gevuld .mdact-mm__item.is-open > .mdact-mm__schakel {
        color: #2C4A3EB3 !important;
    }
}


/* --- De knop rechts in de balk --------------------------------------------
   Een menu-item op het bovenste niveau met de CSS-klasse "knop" wordt dit: de
   knop rechts in de balk. De opmaak is die van de telefoonknop op de hero
   (element 4097a5d): geen vulling, een randje van 1 pixel in goud #E8C89A,
   letters in datzelfde goud, 14 pixels, gewicht 500, hoekradius 6. Waar je met
   de muis op staat vult hij zich wél, met donkere letters, zoals de gevulde
   knoppen van de kit.

   Hij staat buiten de lade, dus op een telefoon blijft hij naast de hamburger
   staan en verdwijnt hij niet in het menu.
   -------------------------------------------------------------------- */

.mdact-mm__knop {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid var(--mdact-mm-knop-lijn, #E8C89A);
    color: var(--mdact-mm-knop-lijn, #E8C89A);
    font-family: "Inter", var(--e-global-typography-text-font-family, inherit), sans-serif;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease;
}

.mdact-mm__knop:hover,
.mdact-mm__knop:focus {
    background: var(--mdact-mm-knop-lijn, #E8C89A);
    color: var(--mdact-mm-knop-tekst, #1E1E1A);
}

/* Op een smal scherm iets compacter, zodat hij naast de hamburger past. */
@media (max-width: 1024px) {

    .mdact-mm__knop {
        padding: 8px 16px;
        font-size: 13px;
    }
}

/* Met een knop in de balk is de <nav> de hele rij: logo links, daarna het menu
   en de knop tegen de rechterrand. Ook zonder logo, want dan is de nav nog geen
   flex-rij. */
.mdact-mm--met-knop {
    display: flex;
    align-items: center;
    gap: 28px;
}

.mdact-mm--met-knop .mdact-mm__balk {
    flex: 1 1 auto;

    /* De items schuiven naar rechts, tegen de knop aan. Het logo blijft links
       staan; de lege ruimte valt daartussen. */
    justify-content: flex-end;
}

.mdact-mm--met-logo .mdact-mm__knop {
    margin-left: 0;
}


/* De maat van het logo staat bij de logo-regels bovenin: 48 pixels, en 38 op
   een smal scherm. Met --mdact-mm-logo op de container in Elementor is dat per
   site te wijzigen. */


/* --- De knop op een telefoon ----------------------------------------------
   Zodra de balk een hamburger wordt, verdwijnt de knop uit de balk. Hij staat
   dan onderin de lade, waar de oproep van het menu toch al staat, en dat is de
   enige plek waar hij nog nodig is (Tim, 14 september). Daarmee is er ruimte
   voor het woord "Menu" naast het icoon, zodat duidelijk is wat die drie
   streepjes doen.
   -------------------------------------------------------------------- */

@media (max-width: 1024px) {

    .mdact-mm--met-knop {
        gap: 12px;
    }

    .mdact-mm--met-knop > .mdact-mm__knop {
        display: none;
    }
}


/* De balk mag nooit breder worden dan de ruimte die er is. Zonder min-width: 0
   krimpt een flex-item niet onder de breedte van zijn inhoud, en dan duwt het
   menu de knop op een telefoon buiten beeld. */
.mdact-mm--met-logo .mdact-mm__balk,
.mdact-mm--met-knop .mdact-mm__balk {
    min-width: 0;
}

.mdact-mm--met-logo,
.mdact-mm--met-knop {
    max-width: 100%;

    /* Ook de nav zelf is een flex-item, in de kolom van de header. Zonder deze
       regel krimpt hij niet en schuift de knop op een telefoon buiten beeld. */
    min-width: 0;
}

.elementor-widget-shortcode:has(.mdact-mm) {
    min-width: 0;

    /* De widget is in een flex-header een los item en groeit niet vanzelf mee.
       Zonder dit eindigt de balk halverwege en blijft er ruimte rechts van de
       knop over. */
    flex: 1 1 auto;
    width: 100%;
}

.elementor-widget-shortcode:has(.mdact-mm) .elementor-shortcode,
.mdact-mm--met-knop {
    width: 100%;
}


/* --- De balk past zich aan de ruimte aan ----------------------------------
   Op de staging brak de rij af: "Contact" stond op een tweede regel, half over
   het logo heen. Dat gebeurt zodra logo, items en knop samen breder zijn dan de
   kolom waarin ze staan, en de container mag smaller worden ook.

   Drie dingen houden het op één regel:
   - de rij breekt niet meer af (nowrap);
   - de ruimte tussen de items buigt mee met de schermbreedte, van 22 pixels bij
     een ruim scherm tot 8 bij een krappe kolom;
   - hetzelfde geldt voor de ruimte tussen logo, menu en knop.

   Past het dan nog niet, dan neemt de lade het over: dat gebeurt onder de 1025
   pixels, of eerder als de header smal is.
   -------------------------------------------------------------------- */

@media (min-width: 1025px) {

    .mdact-mm__balk {
        flex-wrap: nowrap;
    }

    .mdact-mm__balklink {
        padding: 0 clamp(8px, 1.1vw, 22px);
    }

    .mdact-mm--met-logo,
    .mdact-mm--met-knop {
        gap: clamp(10px, 1.6vw, 28px);
    }

    .mdact-mm__knop {
        padding: 12px clamp(14px, 1.6vw, 26px);
    }
}


/* --- De header blijft boxed ----------------------------------------------
   Bij Wood werd hier de leesbreedte van de header-container opgeheven, zodat
   het logo tegen de rand kwam. Bij MD-act niet: de header is een donkergroen
   vlak van 1000 pixels met afgeronde bovenhoeken, en dat blijft zo. Het menu
   voegt zich naar die container.

   Het paneel is daarom net zo breed als de kolom eronder: 1000 pixels, te
   wijzigen met --mdact-mm-paneel op de container in Elementor.
   -------------------------------------------------------------------- */


/* --- Telefoon en e-mail boven het logo ------------------------------------
   MD-act wil bellen en mailen meteen in beeld: een telefoontje is daar bijna
   altijd een opdracht. Geen balk en geen vlak, want de header is al een effen
   donkergroen blok; het is een klein regeltje dat boven het logo meeloopt.
   Logo en regel zitten samen in een blok, zodat dat blok de plek van het logo
   inneemt en er verder niets in de balk verschuift.
   -------------------------------------------------------------------- */

.mdact-mm__kopblok {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    /* Ruim boven het logo: op 6 px plakte de regel eraan vast en las het als
       één blok in plaats van twee dingen die los van elkaar staan. */
    gap: 12px;
    flex: 0 0 auto;
}

.mdact-mm__kopcontact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 0;
    font-size: 12px;
    line-height: 1.3;
    font-weight: var(--mdact-mm-tekst-gewicht, 300);

    /* Iets terug van het volle contrast: het hoort erbij te staan, niet boven
       het logo uit te komen. */
    opacity: .82;
}

.mdact-mm a.mdact-mm__kopcontact-link {
    color: inherit;
    transition: opacity .15s;
}

.mdact-mm__kopcontact-link:hover,
.mdact-mm__kopcontact-link:focus {
    opacity: .7;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Op een telefoon staat het nummer onder het logo in de weg: daar is de knop
   rechts in de balk de weg naar contact, en scheelt dit twee regels hoogte. */
@media (max-width: 600px) {

    .mdact-mm__kopcontact {
        display: none;
    }
}


/* --- Een zin onder een kolomkop ------------------------------------------
   De beschrijving van een kolomkop, voor de kolommen onder Kennis: één regel
   die vertelt wat er achter die links zit. MD-act vult hem in het menu in.
   -------------------------------------------------------------------- */

.mdact-mm__kolom-tekst {
    margin: -4px 0 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--mdact-mm-body);
}


/* --- Eén groep over twee lijsten ------------------------------------------
   Negen namen onder elkaar is te lang voor het paneel, dus lopen ze door over
   twee lijsten naast elkaar. Die twee horen bij dezelfde kop: er staat één
   naam boven en één streep, over de volle breedte van allebei.

   Eerst waren het twee losse kolommen met elk hun eigen streep. Die lagen op
   verschillende hoogte met het gat van de kolomruimte ertussen, en dan lezen ze
   als twee groepen die toevallig naast elkaar staan.
   -------------------------------------------------------------------- */

.mdact-mm__kolom--groep {
    /* Twee lijsten naast elkaar plus de ruimte ertussen. */
    flex: 0 1 430px;
    min-width: 300px;
}

.mdact-mm__kolomlijsten {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 30px);
    align-items: start;
}

@media (max-width: 1100px) {

    .mdact-mm__kolom--groep {
        flex-basis: 262px;
        min-width: 190px;
    }

    .mdact-mm__kolomlijsten {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }
}


/* --- De kolom met de nieuwste artikelen ----------------------------------
   Staat onder Kennis > Artikelen, naast het blok dat naar alle artikelen
   verwijst. Twee naast elkaar, twee onder elkaar, met een lijn tussen de twee
   kolommen. Hij vult zichzelf uit de berichten die er op dat moment staan.
   -------------------------------------------------------------------- */

/* De kop boven de artikelen is een bijschrift, geen groepskop: klein, zonder
   de streep die de andere koppen hebben. De enige lijn hier is de verticale
   tussen het blok links en de artikelen rechts. */
.mdact-mm__kolom--recent .mdact-mm__kop {
    margin-bottom: 14px;
    padding-bottom: 0;
    font-size: 13px;
    font-weight: 400;
    border-bottom: 0;
}

.mdact-mm__kolom--recent {
    flex: 0 1 430px;
    min-width: 300px;

    /* De lijn tussen het blok links en de artikelen rechts. Dit is de enige
       verticale lijn in het menu; hij scheidt twee soorten inhoud, geen twee
       lijsten van hetzelfde soort. */
    padding-left: clamp(16px, 2vw, 28px);
    border-left: 1px solid var(--mdact-mm-streep);
}

.mdact-mm__recent {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px clamp(12px, 1.6vw, 20px);
}

.mdact-mm a.mdact-mm__recent-link {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 15px;

    /* Alle drie op één hoogte gecentreerd: met de pijl onder de titel werd het
       per kaartje drie regels hoog en las het raster als een lijst met gaten. */
    align-items: center;
    gap: 10px;
    color: var(--mdact-mm-donker);
}

.mdact-mm__recent-beeld {
    overflow: hidden;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background: var(--mdact-mm-roze);
}

.mdact-mm__recent-beeld img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* Elementor zet `.elementor img { height: auto }` en dat weegt zwaarder dan
       één klasse; met de ouder erbij komen we op twee klassen en wint dit. */
    display: block;
}

.mdact-mm__kolom--recent .mdact-mm__recent-beeld img {
    height: 100%;
}

.mdact-mm__recent-titel {
    /* Kleiner dan de links in de andere kolommen: dit zijn vier titels naast
       elkaar in een smalle kolom, en op 13 px breekt bijna elke titel af. */
    font-size: 12px;
    line-height: 1.35;
    font-weight: var(--mdact-mm-tekst-gewicht, 300);

    /* Titels lopen hier uiteen van vier tot twaalf woorden. Twee regels houdt
       het raster recht; wat niet past eindigt op een beletselteken. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mdact-mm__recent-link .mdact-mm__icoon {
    width: 15px;
    height: 15px;
    stroke-width: 1.3;
    color: var(--mdact-mm-accent);
    transition: transform .15s;
}

.mdact-mm__recent-link:hover,
.mdact-mm__recent-link:focus {
    color: var(--mdact-mm-accent);
}

.mdact-mm__recent-link:hover .mdact-mm__icoon,
.mdact-mm__recent-link:focus .mdact-mm__icoon {
    transform: translateX(4px);
}

/* Onder de 1100 pixels is er naast de zijbalk en het introblok geen ruimte
   meer voor twee artikelen naast elkaar; dan onder elkaar, en zonder de lijn,
   want die staat daar tussen twee blokken die al onder elkaar staan. */
@media (max-width: 1100px) {

    .mdact-mm__kolom--recent {
        flex-basis: 260px;
        min-width: 220px;
        padding-left: 0;
        border-left: 0;
    }

    .mdact-mm__recent {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* De vastgeplakte header boven de vaste balk van de inhoudsopgave (z-index
   890, mdact-blog.css). Elementor geeft een plakkende container z-index 99
   (via --z-index), en dan schoof het uitklapmenu onder die balk (Tim, 1
   oktober). Op een telefoon plakt de header zelf al op 950. */
.elementor-location-header .e-con.elementor-sticky--active {
    --z-index: 950;
}