/**
 * Wood — megamenu
 * Wordt geladen vanuit wood-megamenu.php, alleen op een pagina waar de
 * shortcode [wood_megamenu] ook echt rendert.
 *
 * Alles staat onder .wood-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 WOOD_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 wood-mm--js op de <nav> en
 *                       werkt daarna met is-open en is-actief. De hamburger
 *                       en de uitklapknoppen doen dan het werk.
 */

.wood-mm {
    /* De kleuren van Wood, overgenomen uit style.css van het child theme en uit
       de opmaak van de collectiepagina:

         groen   #004339  de tekstkleur van koppen, en het donkere vlak in de
                          footer. Hier de kleur van de menu-items.
         diep    #004339  het groen van de knoppen op de site.
         goud    #D9B976  de knop en het accent. Alleen als reactie: een link of
                          tab waar je met de muis of het toetsenbord op staat.
         crème   #FAF7F1  de achtergrond van de site, en dus van de gevulde balk.
         zand    #EDE6DB  het vlak achter de zijbalk en het item waar je met de
                          muis op staat.
         body    #35332E  lopende tekst, warmer dan een neutraal grijs.

       De panelen blijven wit: ze liggen op de pagina en moeten er los van staan.
       Het accent is goud en niet groen, want groen op groen leest niet. */
    --wood-mm-accent:      #B8912F;
    --wood-mm-accent-op:   #96741F;
    --wood-mm-accent-vlak: rgba(217, 185, 118, .18);
    --wood-mm-donker:      #004339;
    --wood-mm-licht:       #FAF7F1;
    --wood-mm-roze:        #EDE6DB;
    --wood-mm-rood:        #B8912F;
    --wood-mm-body:        #35332E;
    --wood-mm-streep:      rgba(0, 67, 57, .12);
    /* De rand om een opengeklapt paneel: dezelfde lijn als onder de balk, dus
       subtiel. De crème van de pagina is dezelfde kleur als de zijbalk en als
       een regel waar je met de muis op staat, en zonder rand liep het paneel
       daar in de pagina over (Tim, 13 okt). De donkere rand van MD-act (.28)
       was Tim te dik. */
    --wood-mm-rand:        var(--wood-mm-balk-lijn);
    --wood-mm-wit:         #FFFFFF;

    /* De kleur van de balk zodra hij gevuld is, en het lijntje eronder. */
    --wood-mm-balk:        #FAF7F1;
    --wood-mm-balk-lijn:   rgba(0, 67, 57, .07);

    --wood-mm-paneel:    1240px;
    --wood-mm-zijbalk:   208px;
    --wood-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. */
    --wood-mm-schaduw:   0 14px 26px -22px rgba(0, 67, 57, .28);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.wood-mm__paneel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    background: var(--wood-mm-wit);
    box-shadow: var(--wood-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, ook bovenlangs onder de navigatie: de schaduw is
       zo licht dat het witte paneel op de crème pagina zijn contour verloor. */
    border: 1px solid var(--wood-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 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. */
.wood-mm__item--breed > .wood-mm__paneel {
    width: max-content;
    max-width: min(var(--wood-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. */
.wood-mm__item--smal {
    position: relative;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.wood-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. */
.wood-mm:not(.wood-mm--js) .wood-mm__paneel-body:has(.wood-mm__tab:hover) > .wood-mm__pane.is-actief,
.wood-mm:not(.wood-mm--js) .wood-mm__paneel-body:has(.wood-mm__tab:focus) > .wood-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. */
.wood-mm:not(.wood-mm--js) .wood-mm__tab:hover + .wood-mm__regel + .wood-mm__pane,
.wood-mm:not(.wood-mm--js) .wood-mm__tab:focus + .wood-mm__regel + .wood-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. */
.wood-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. */
.wood-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. */
.wood-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. */
.wood-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. */
.wood-mm__kop {
    margin: 0 0 12px;
    padding-bottom: 8px;
    font-weight: 500;
    color: var(--wood-mm-donker);
    border-bottom: 1px solid var(--wood-mm-streep);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    /* Ronde knop in de huisstijl: de knop uit de hero van /houten-vloeren/,
       goud met dunne, donkere letters (Tim, 2 okt). */
    border-radius: 999px;
    background: var(--wood-mm-knop, #D9B976);
    color: var(--wood-mm-knop-tekst, #35332E);
    font-size: 14px;
    font-weight: 300;
    letter-spacing: .12em;
    transition: background .15s;
}

.wood-mm__cta-knop:hover,
.wood-mm__cta-knop:focus {
    background: var(--wood-mm-knop-op, #DABF88);
    color: var(--wood-mm-knop-tekst, #35332E);
}


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

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

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

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

/* De drie streepjes, en hoe ze een kruisje worden (zoals bij MD-act, 5 okt 2026):
   de bovenste en onderste schuiven naar het midden en draaien tegen elkaar in, de
   middelste krimpt weg. Sluiten is dezelfde beweging terug. Kleur volgt de balk. */
.wood-mm__streepjes {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 22px;
    height: 16px;
}

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

.wood-mm__streepjes > span:nth-child(1) { top: 0; }
.wood-mm__streepjes > span:nth-child(2) { top: 7px; }
.wood-mm__streepjes > span:nth-child(3) { top: 14px; }

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

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

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

@media (prefers-reduced-motion: reduce) {
    .wood-mm__streepjes > span { transition: none; }
}


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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

    /* Twee knoppen naast elkaar en Evi eronder (Tim, 5 okt 2026). */
    .wood-mm__voet { flex-direction: column; gap: 12px; }
    .wood-mm__voetknoppen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .wood-mm__voetknoppen .wood-mm__voetknop { min-height: 48px; padding-left: 8px; padding-right: 8px; white-space: nowrap; }
    .wood-mm a.wood-mm__voetknop--lijn,
    .wood-mm a.wood-mm__voetknop--lijn:hover {
        background: transparent;
        box-shadow: inset 0 0 0 1px currentColor;
        color: var(--wood-mm-tekst, #004339);
    }
    .wood-mm button.wood-mm__evi,
    .wood-mm button.wood-mm__evi:hover,
    .wood-mm button.wood-mm__evi:focus {
        align-self: center;
        padding: 4px 8px;
        border: 0;
        background: none;
        color: var(--wood-mm-tekst, #004339);
        font: 300 14px/1.4 "Inter Tight", sans-serif;
        letter-spacing: 0;
        text-transform: none;
        cursor: pointer;
    }
    .wood-mm__evi span { font-weight: 500; text-decoration: underline; text-decoration-color: #D9B976; text-underline-offset: 4px; }
    .wood-mm__evi[hidden] { display: none !important; }

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

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

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


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

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

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

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

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

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

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

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

/* De knop in het blok met de oproep: de linkkleur van het menu mag er niet
   overheen, dus hier is !important nodig. Donkere letters op goud (Tim, 2 okt). */
a.wood-mm__cta-knop,
a.wood-mm__cta-knop:hover,
a.wood-mm__cta-knop:focus {
    color: var(--wood-mm-knop-tekst, #35332E) !important;
}

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

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

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

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

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


/* --- De huisstijl-stand ---------------------------------------------------
   Zet stijl="huisstijl" op de shortcode, of WOOD_MEGAMENU_STIJL bovenin
   wood-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:
     goud    = #B8912F   actieve tab, knop, hover, het streepje
     groen   = #004339   tekst van de items
     zand    = #EDE6DB   de zijbalk en het blok met de oproep
     body    = #35332E   koppen boven een kolom
     streep  = rgba(0, 67, 57, .12)   de scheidingslijntjes
   -------------------------------------------------------------------- */

.wood-mm--huisstijl {
    --wood-mm-accent:      #B8912F;
    --wood-mm-accent-op:   #96741F;
    --wood-mm-accent-vlak: rgba(217, 185, 118, .22);
    --wood-mm-donker:      #004339;
    --wood-mm-licht:       #EDE6DB;
    --wood-mm-body:        #35332E;
    --wood-mm-streep:      rgba(0, 67, 57, .12);
    --wood-mm-schaduw:     0 16px 44px rgba(0, 67, 57, .16), 0 2px 6px rgba(0, 67, 57, .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>.
   -------------------------------------------------------------------- */

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

@media (min-width: 1025px) {

    .wood-mm--wit .wood-mm__balklink,
    .wood-mm--wit .wood-mm__schakel,
    .wood-mm--wit .wood-mm__logo-tekst,
    .wood-mm--wit button.wood-mm__balklink,
    .wood-mm--wit button.wood-mm__schakel {
        color: var(--wood-mm-op-foto) !important;
        text-shadow: var(--wood-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. */
    .wood-mm--wit .wood-mm__balklink:hover,
    .wood-mm--wit .wood-mm__balklink:focus,
    .wood-mm--wit .wood-mm__item:hover > .wood-mm__balklink,
    .wood-mm--wit .wood-mm__item:hover > .wood-mm__schakel,
    .wood-mm--wit .wood-mm__item:hover > button.wood-mm__balklink,
    .wood-mm--wit button.wood-mm__balklink:hover,
    .wood-mm--wit button.wood-mm__balklink:focus,
    .wood-mm--wit .wood-mm__item.is-open > .wood-mm__schakel,
    .wood-mm--wit .wood-mm__item.is-open > .wood-mm__balklink,
    .wood-mm--wit .wood-mm__item.is-open > button.wood-mm__balklink {
        color: var(--wood-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. */
.wood-mm--wit .wood-mm__hamburger,
.wood-mm--wit button.wood-mm__hamburger,
.wood-mm--wit button.wood-mm__hamburger:hover,
.wood-mm--wit button.wood-mm__hamburger:focus,
.wood-mm--wit button.wood-mm__hamburger:active,
.wood-mm--wit button.wood-mm__hamburger[aria-expanded="true"] {
    color: var(--wood-mm-wit) !important;
    text-shadow: var(--wood-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. */
.wood-mm--wit .wood-mm__balklink:focus-visible,
.wood-mm--wit .wood-mm__schakel:focus-visible,
.wood-mm--wit .wood-mm__hamburger:focus-visible {
    outline-color: var(--wood-mm-wit);
}


/* --- De vaste balk die omslaat (kleur="omslag") ---------------------------
   De stand van Wood. 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
                       wood-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: wood-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 wood-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 --wood-mm-kop-hoogte op <html> te staan, zodat
   de pagina eronder er ruimte voor kan maken.
   -------------------------------------------------------------------- */

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

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

    /* Alleen een haarlijntje, geen schaduw. In de header van Wood stond de
       schaduw uitgezet; dat is hier overgenomen. */
    box-shadow: 0 1px 0 var(--wood-mm-balk-lijn, rgba(0, 67, 57, .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. */
.wood-mm-ruimte {
    padding-top: var(--wood-mm-kop-hoogte, 93px);
}

/* Het lijntje dat de header zelf onderaan heeft, hoort bij de gevulde stand.
   Op de foto valt het weg. */
.wood-mm-kop:not(.is-gevuld) .wood-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.
   -------------------------------------------------------------------- */

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

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

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

/* Op de hero: het lichte logo staat aan. */
.wood-mm--kleur-omslag .wood-mm__logo--duo .wood-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. */
.wood-mm--kleur-omslag.is-gevuld .wood-mm__logo--duo .wood-mm__logo-donker,
.wood-mm--kleur-omslag.is-open .wood-mm__logo--duo .wood-mm__logo-donker {
    opacity: 1;
}

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


/* --- De header laten krimpen als de balk gevuld raakt ---------------------
   Wood 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.wood-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.wood-mm-kop {
    --wood-mm-kop-lucht: 22px;

    height: auto !important;
    min-height: 0 !important;
    padding-top: var(--wood-mm-kop-lucht) !important;
    padding-bottom: var(--wood-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.wood-mm-kop.is-klein {
    padding-top: var(--wood-mm-kop-lucht-klein, 12px) !important;
    padding-bottom: var(--wood-mm-kop-lucht-klein, 12px) !important;
}

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

.wood-mm__logo img,
.wood-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 .wood-mm-kop {
    top: var(--wp-admin--admin-bar--height, 32px);
}

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

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


/* --- Logo links, menu in het midden, knop rechts --------------------------
   De indeling van Wood, 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) {

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

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


/* --- Dezelfde letters als het menu dat er stond ---------------------------
   Opgemeten in de header-css van de site (element 6c27d85) en in de kit:
   Inter Tight, 12 pixels, gewicht 500, hoofdletters, 0,13em spatiëring. Dat is
   dezelfde typografie als de opschriften op de rest van de site.

   De kleuren komen ook daarvandaan: crème #FAF7F1 op de foto, groen #004339 op
   de gevulde balk, en dezelfde doorzichtige varianten als je er met de muis op
   staat. Geen goud in de balk dus; dat blijft voor de knop in de panelen.

   Alleen de balk. In de panelen blijft de gewone leesbare tekst staan: die
   liggen op een wit vlak en horen geen rij hoofdletters te zijn.
   -------------------------------------------------------------------- */

/* button.wood-mm__balklink erbij: een balkitem zonder eigen pagina (Diensten,
   5 okt) is een knop, en het knoppenblok hierboven zet daar hoofdletters en
   letterafstand weer uit. */
.wood-mm__balklink,
.wood-mm__schakel,
button.wood-mm__balklink,
button.wood-mm__balklink:hover,
button.wood-mm__balklink:focus,
button.wood-mm__balklink:active,
.wood-mm__hamburger-tekst {
    font-family: "Inter Tight", var(--e-global-typography-primary-font-family, inherit), sans-serif;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .13em;
}

/* In de lade op een telefoon is een balkitem zonder paneel (Portfolio,
   Duurzaamheid, Contact) geen balkje meer maar gewoon een regel, net als
   "Houten vloeren" 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) {

    .wood-mm--js .wood-mm__item > .wood-mm__balklink,
    .wood-mm--js .wood-mm__item > button.wood-mm__balklink {
        /* Dezelfde opmaak als de kopjes Collecties en Diensten, want op dit
           niveau horen ze thuis: 14 pixels, gewicht 500, geen hoofdletters.
           Eerst stonden ze op 16 en sprongen ze eruit, daarna op gewicht 400 en
           waren ze juist te dun tussen die kopjes. */
        font-size: inherit;
        font-weight: 500;
        text-transform: none;
        letter-spacing: normal;
    }
}

@media (min-width: 1025px) {

    /* De afstand tussen twee items: 24 pixels per kant, net als in het oude
       menu. */
    .wood-mm__balklink,
    button.wood-mm__balklink {
        padding: 0 24px;
    }

    /* Als knop zit het pijltje ín het item: dezelfde ruimte eromheen als bij
       een link met een losse uitklapknop (16 ervoor, 8 erna). */
    button.wood-mm__balklink {
        gap: 16px;
        padding-right: 8px;
    }

    /* Geen handje: er valt niets aan te klikken, het paneel gaat al open als
       je erop staat (Tim, 5 okt). Met .wood-mm ervoor, want de reset van het
       thema (button:not(:disabled)) weegt anders even zwaar en komt later. */
    .wood-mm button.wood-mm__balklink {
        cursor: default;
    }

    /* Op de foto crème, en waar je met de muis op staat iets doorzichtiger.
       Geen schaduwtje achter de letters: dat had het oude menu ook niet. */
    .wood-mm--wit {
        --wood-mm-op-foto: #FAF7F1;
        --wood-mm-op-foto-schaduw: none;
    }

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

    /* Op de gevulde balk groen, en doorzichtiger bij hover. */
    .wood-mm.is-gevuld .wood-mm__item:hover > .wood-mm__balklink,
    .wood-mm.is-gevuld .wood-mm__item:hover > .wood-mm__schakel,
    .wood-mm.is-gevuld .wood-mm__balklink:hover,
    .wood-mm.is-gevuld .wood-mm__balklink:focus,
    .wood-mm.is-gevuld .wood-mm__item.is-open > .wood-mm__balklink,
    .wood-mm.is-gevuld .wood-mm__item.is-open > .wood-mm__schakel {
        color: #004339B3 !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, zoals "Offerte aanvragen" in de header van Wood. De
   opmaak is overgenomen van de knop die daar stond (element 461164e): goud
   #D9B976, groene letters, rond, 12 pixels, gewicht 500, hoofdletters,
   0,13em spatiëring, en bij hover #DABF88.

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

.wood-mm__knop {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    padding: 12px 26px;
    border-radius: 1000px;
    background: var(--wood-mm-knop, #D9B976);
    color: var(--wood-mm-knop-tekst, #35332E);
    font-family: "Inter Tight", var(--e-global-typography-primary-font-family, inherit), sans-serif;
    font-size: 14px;
    font-weight: 300;
    /* Geen hoofdletters (Tim, 26 sep); dunne letter en ruime spatiëring zoals
       de knop in de hero van /houten-vloeren/ (Tim, 2 okt). */
    text-transform: none;
    letter-spacing: .12em;
    white-space: nowrap;
    transition: background-color .2s ease;
}

.wood-mm__knop:hover,
.wood-mm__knop:focus {
    background: var(--wood-mm-knop-op, #DABF88);
    color: var(--wood-mm-knop-tekst, #35332E);
}

/* De linkkleur van de Elementor-kit (.elementor-kit-7 a) weegt zwaarder dan
   alleen de klasse en maakte de letters groen. */
.wood-mm a.wood-mm__knop,
.wood-mm a.wood-mm__knop:hover,
.wood-mm a.wood-mm__knop:focus {
    color: var(--wood-mm-knop-tekst, #35332E);
}

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

    .wood-mm__knop {
        padding: 10px 18px;
        font-size: 13px;
    }
}

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

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

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

/* "Plan een bezoek" als tekstlink voor de gouden knop, alleen op een breed scherm. */
.wood-mm a.wood-mm__bezoek,
.wood-mm a.wood-mm__bezoek:hover,
.wood-mm a.wood-mm__bezoek:focus {
    flex: 0 0 auto;
    margin-right: -10px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--wood-mm-tekst, #004339);
}
@media (max-width: 1200px) {
    .wood-mm a.wood-mm__bezoek { display: none; }
}


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


/* --- De knop op een telefoon ----------------------------------------------
   Logo, hamburger en knop passen op 390 pixels niet naast elkaar; de knop
   schuift dan over de rand. Onder de 600 pixels staat hij daarom niet in de
   balk maar onderin de lade, waar de oproep van het menu toch al staat.

   Tussen 600 en 1024 pixels past hij wel, alleen iets compacter, en vervalt het
   woord "Menu" naast de hamburger.
   -------------------------------------------------------------------- */

@media (max-width: 1024px) {

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

    .wood-mm--met-knop .wood-mm__hamburger-tekst {
        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;
    }

    .wood-mm__knop {
        padding: 9px 16px;
        font-size: 11px;
        letter-spacing: .1em;
    }
}

/* Gemeten: logo 153, hamburger 30, knop 164 en twee tussenruimtes is 371
   pixels, plus de marge van de header. Onder de 460 past dat niet meer naast
   elkaar, en verdwijnt de knop uit de balk. In het menu staat hij dan nog wel. */
@media (max-width: 460px) {

    .wood-mm--met-knop > .wood-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. */
.wood-mm--met-logo .wood-mm__balk,
.wood-mm--met-knop .wood-mm__balk {
    min-width: 0;
}

.wood-mm--met-logo,
.wood-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(.wood-mm) {
    min-width: 0;
}


/* --- 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) {

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

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

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

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


/* --- De header over de volle breedte --------------------------------------
   De header-container van Elementor staat op "boxed": zijn inhoud blijft binnen
   1140 pixels, waardoor het logo ver van de linkerrand bleef staan en de knop
   ver van de rechter. Hier wordt die begrenzing opgeheven, maar alleen voor de
   header waar dit menu in staat; de rest van de site houdt zijn leesbreedte.

   Wil je het toch boxed, haal dan dit blok weg of zet de container in Elementor
   op een eigen maximum.
   -------------------------------------------------------------------- */

.wood-mm-kop > .e-con > .e-con-inner,
.wood-mm-kop .e-con.e-con-boxed > .e-con-inner,
.wood-mm-kop .elementor-container {
    max-width: none;
}

/* Zonder leesbreedte plakt het logo tegen de linkerrand en de knop tegen de
   rechter. Deze zijruimte groeit mee met het scherm: 24 pixels op een telefoon,
   tot 64 op een breed scherm. Te wijzigen met --wood-mm-kantlijn. */
.wood-mm-kop > .e-con,
.wood-mm-kop > .elementor-section {
    padding-left: var(--wood-mm-kantlijn, clamp(24px, 3.4vw, 64px)) !important;
    padding-right: var(--wood-mm-kantlijn, clamp(24px, 3.4vw, 64px)) !important;
}


/* --- De vaste crème balk (kleur="gevuld") ---------------------------------
   De stand van Wood sinds 21 september 2026: de balk blijft staan bij het
   scrollen, is altijd crème met donkere letters en het donkere logo, en houdt
   één hoogte van 70 pixels (13px lucht boven en onder een logo van 44).

   Waarom niet meer doorzichtig: op een lichte of drukke hero vielen de crème
   letters en het lichte logo weg. Bij één vlak kan dat niet gebeuren.

   Het script zet is-gevuld en is-klein meteen bij het laden; de opmaak daarvan
   staat hierboven bij de omslag-stand en geldt dus ook hier.
   -------------------------------------------------------------------- */

.wood-mm--kleur-gevuld .wood-mm__logo--duo .wood-mm__logo-wit {
    opacity: 0;
}

.wood-mm--kleur-gevuld .wood-mm__logo--duo .wood-mm__logo-donker {
    opacity: 1;
}

/* Eén hoogte van 70 pixels, de maat die Tim aanhoudt: 12px lucht boven en onder
   een rij van 46 (het logo is 44, de knop ernaast maakt de rij twee pixels
   hoger). Nagemeten op de staging: 70. Dat is dezelfde regel als de gekrompen
   balk hierboven, die stand is hier dus de enige stand. */

/* Het paneel hangt onder de nav, en die staat binnen de lucht van de header.
   In deze stand is die lucht 12px, dus zonder deze regel begint het paneel 12
   pixels boven de onderkant van de balk en lijkt de crème balk afgesneden.
   Nagemeten op de staging: paneel op 58 terwijl de balk 70 hoog is. */
@media (min-width: 1025px) {

    .wood-mm--kleur-gevuld .wood-mm__paneel {
        top: calc(100% + var(--wood-mm-kop-lucht-klein, 12px));
    }
}


/* --- Geen invliegende balk (kleur="gevuld") -------------------------------
   Tim zag de header bij het laden bewegen: het script zet is-gevuld en is-klein
   pas als het draait, en de overgangen in deze module lieten de balk daarna van
   hoog naar 70 en van doorzichtig naar crème lopen. Dat leek een animatie,
   terwijl er niets te animeren is.

   Daarom staat de hele stand hier in de css, met :has() op de header: die geldt
   al bij de eerste beeldopbouw, dus vóór het script. Het script zet dezelfde
   klassen nog wel, maar die veranderen dan niets meer. De overgangen staan hier
   uit, zodat er ook later niets beweegt.
   -------------------------------------------------------------------- */

header:has(.wood-mm--kleur-gevuld) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;

    background: var(--wood-mm-balk, #FAF7F1);
    box-shadow: 0 1px 0 var(--wood-mm-balk-lijn, rgba(0, 67, 57, .07));

    padding-top: var(--wood-mm-kop-lucht-klein, 12px) !important;
    padding-bottom: var(--wood-mm-kop-lucht-klein, 12px) !important;

    transition: none !important;
}

header:has(.wood-mm--kleur-gevuld) .wood-mm__logo img,
header:has(.wood-mm--kleur-gevuld) .wood-mm__logo svg {
    height: var(--wood-mm-logo-klein, 44px);
    transition: none;
}

/* De ruimte onder de vaste balk: 70 pixels is de maat van deze stand, dus die
   staat er meteen goed, ook voordat het script de balk heeft opgemeten. Zonder
   deze terugval sprong de eerste sectie bij het laden nog een keer. */
body:has(.wood-mm--kleur-gevuld) .wood-mm-ruimte {
    padding-top: var(--wood-mm-kop-hoogte, 70px);
}

/* En dezelfde uitzondering als hierboven voor de zwarte beheerbalk: die geldt
   alleen voor wie ingelogd is, en moet er ook meteen staan. Anders schuift de
   balk bij het laden nog een keer, precies wat we hiermee wilden voorkomen. */
body.admin-bar header:has(.wood-mm--kleur-gevuld) {
    top: var(--wp-admin--admin-bar--height, 32px);
}

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

    body.admin-bar header:has(.wood-mm--kleur-gevuld) {
        top: 0;
    }
}

/* Tablet en telefoon: de Elementor-widget waar het menu in staat krimpt tot zijn
   inhoud (219px op een telefoon), waardoor de hamburger naast het logo bleef
   hangen in plaats van rechts. De widget pakt hier de volle breedte (Tim, 25 sep 2026). */
@media (max-width: 1024px) {
  .elementor-widget:has(.elementor-shortcode > .wood-mm),
  .elementor-shortcode:has(> .wood-mm),
  .wood-mm {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
  }
}