/*
Theme Name: YOOtheme Child (Van Speyck)
Template: yootheme
Version: 1.1.0
Description: Child theme voor Van Speyck. Bevat alleen correcties die de theme-stijl
             niet kan dragen; alles wat wel via de stijlvariabelen kan, staat daar.
*/

/* --------------------------------------------------------------------------
   Contentbreedte
   YOOtheme's container rekent met content-box: max-width is de inhoud en de
   24px padding komt daar bovenop. Het ontwerp rekent met border-box, waar die
   padding van de 1080 afgaat. Gemeten verschil: 1080 tegen 1032 inhoud, wat
   elke kolom en elke foto 24px te breed maakte.
   -------------------------------------------------------------------------- */
.uk-container {
    box-sizing: border-box;
    max-width: 1080px;
}

.uk-container-small {
    box-sizing: border-box;
    max-width: 820px;
}

/* --------------------------------------------------------------------------
   Header
   YOOtheme's navbar zet menu-items op 68px hoogte in kapitalen en heeft geen
   knop-item. Het ontwerp gebruikt kleine linkjes met een afgeronde hover en één
   echte knop. WordPress kan een CSS-klasse alleen op de <li> zetten, niet op de
   <a>, dus de knopopmaak hangt hier aan het item.
   Bron: .kop, .kop nav a en .knop uit stijl.css van het origineel.
   -------------------------------------------------------------------------- */
.tm-header .uk-navbar-container,
.tm-header-mobile .uk-navbar-container {
    background: rgba(250, 248, 244, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(30, 24, 16, .09);
}

/* De balk houdt zijn hoogte; de link zelf is in het ontwerp maar 39px hoog en
 * staat gecentreerd. min-height op de link zou hem over de hele balk uitrekken. */
.tm-header .uk-navbar-container > .uk-container > .uk-navbar,
.tm-header-mobile .uk-navbar-container > .uk-container > .uk-navbar,
/* Het logo is een navbar-item en heeft in UIkit zijn eigen min-height; zonder deze
 * regel bepaalt dát de balkhoogte en blijft hij 68px, wat 1px te veel is. */
.tm-header .uk-navbar-item, .tm-header .uk-logo,
.tm-header-mobile .uk-navbar-item, .tm-header-mobile .uk-logo { min-height: 67px; }
/* De li's van de navigatie zijn in UIkit list-items in een flexrij die op stretch
 * staat, dus ze zijn zo hoog als de balk (67px). De link erin is 39px en zonder deze
 * regel plakt hij tegen de bovenkant: "Menukaart" en "Contact" stonden 14px te hoog.
 * align-self op de link zelf hielp niet, want die werkt alleen binnen een flexouder. */
.tm-header .uk-navbar-nav > li,
.tm-header-mobile .uk-navbar-nav > li { display: flex; align-items: center; }

.tm-header .uk-navbar-nav > li > a,
.tm-header-mobile .uk-navbar-nav > li > a {
    min-height: 0;
    align-self: center;
    height: auto;
    padding: 8px 13px;
    font-size: 14.5px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: #797061;
}

.tm-header .uk-navbar-nav > li > a:hover,
.tm-header-mobile .uk-navbar-nav > li > a:hover,
.tm-header .uk-navbar-nav > li.uk-active > a,
.tm-header-mobile .uk-navbar-nav > li.uk-active > a {
    color: #211b12;
}

.tm-header .uk-navbar-nav > li.uk-active > a,
.tm-header-mobile .uk-navbar-nav > li.uk-active > a {
    font-weight: 600;
}

/* Het knop-item in de navigatie: compact, donker, witte tekst. */
.tm-header .uk-navbar-nav > li.vsp-navknop {
    display: flex;
    align-items: center;
    margin-left: 7px;
}

.tm-header .uk-navbar-nav > li.vsp-navknop > a,
.tm-header-mobile .uk-navbar-nav > li.vsp-navknop > a {
    min-height: 0;
    padding: 8px 15px;
    border-radius: 6px;
    background: #211b12;
    border: 1px solid #211b12;
    color: #fff;
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1.6;
    transition: background .2s;
    /* UIkit maakt navbar-links display:flex; binnen de flex-li rekken ze mee tot de
       volle balkhoogte (gemeten 68px waar 41px hoort). align-self haalt dat weg. */
    align-self: center;
    height: auto;
    min-height: 0;
}

/* .knop:active{transform:scale(.98)}. De Reserveren-knop in de kop is een menu-item
 * en geen .uk-button, dus de regel uit de themastijl raakt hem niet. */
.tm-header .uk-navbar-nav > li.vsp-navknop > a:active,
.tm-header-mobile .uk-navbar-nav > li.vsp-navknop > a:active { transform: scale(.98); }

.tm-header .uk-navbar-nav > li.vsp-navknop > a:hover {
    background: #3a3126;
    color: #fff;
}

/* .kop nav a{border-radius:6px}. Zichtbaar zodra er een achtergrond of een
 * focusring omheen staat; zonder deze regel zijn de hoeken daar scherp. */
.tm-header .uk-navbar-nav > li > a,
.tm-header-mobile .uk-navbar-nav > li > a { border-radius: 6px; }

/* .info-cel a, .voet a en .tekstlink zetten de onderstreping 3px onder de tekst.
 * UIkit laat hem op "auto" staan en dan raakt hij de staarten van de letters. Het
 * geldt in de bron alleen voor de links die ook echt onderstreept zijn; de
 * icoonknoppen staan er bewust niet bij. */
.vsp-inforegel a, .vsp-infoklein a, .vsp-voet a, .vsp-slotregel a,
.vsp-tijdennote a, .vsp-blokuitleg a { text-underline-offset: 3px; }

/* Het logo staat in het ontwerp op 38px hoog, zonder extra ruimte eromheen. */
.tm-header .uk-logo img,
.tm-header-mobile .uk-logo img {
    height: 38px;
    width: auto;
}

/* ------------------------------------------------------------------ menukaart
 * De prijsregels zijn native description_list-items: titel, meta en content zijn
 * gewone velden in de bouwer, de stippellijn is UIkit's uk-leader. Wat hier staat
 * zijn alleen de onderdelen waar YOOtheme geen veld voor heeft: het flesje bij een
 * bier, het Tap-label, het alcoholpercentage en de glas/fles-prijzen bij wijn.
 * Die markup zit in de titel- en meta-velden en wordt hier opgemaakt.
 */
/* De regelkop is in het ontwerp een flexrij: naam, label en percentage op de
 * basislijn, het flesje gecentreerd, daarna de stippellijn tot aan de prijs. Inline
 * gaf 25px extra hoogte per bierregel (de foto rekt de regelbox op) - over de hele
 * kaart liep dat op tot ruim 1700 pixels.
 *
 * uk-leader wikkelt de inhoud in .uk-leader-fill en tekent de punten met een ::after
 * van breedte 0 die overloopt. Die wrapper is dus de flexcontainer, en de ::after
 * wordt een flexitem dat de rest opvult. */
.vsp-kaart .el-title .uk-leader-fill {
    display: flex; align-items: baseline; gap: 9px;
}
.vsp-kaart .el-title .uk-leader-fill::after {
    /* .stippel in het ontwerp heeft min-width:14px; zonder die ondergrens krijgt een
     * lange naam op een smal scherm 13px extra ruimte en breekt hij anders af. */
    flex: 1 1 0; min-width: 14px; margin-left: 0; overflow: hidden;
}
.vsp-kaart .el-title .rij-naam { font-weight: inherit; }

/* Naam en prijs staan in twee rasterkolommen. UIkit lijnt die onderaan uit, en bij een
 * regel met een flesje (58px hoog) zakt de prijs daardoor onder de stippellijn. Het
 * ontwerp zet ze op dezelfde basislijn. */
/* YOOtheme zet uk-flex-bottom op deze rij zodra de stippellijn aanstaat, en dat is een
 * utility-klasse met !important. Zonder !important komt hier niets overheen, en dan zakt
 * de prijs naar de onderkant van de regel in plaats van naast de naam. */
/* Let op: een regel met een eigen klasse (de wijnprijzen) krijgt van YOOtheme een
 * extra wrapper-div, dus de rij is dan een kleinkind van .el-item. */
.vsp-kaart .el-item .uk-grid {
    align-items: baseline !important;
    /* De ruimte tussen de stippellijn en de prijs is in het ontwerp 9px; UIkit's
       "small" is 15px, en dat scheelde net genoeg om een lange naam te laten afbreken. */
    margin-left: -9px;
}
.vsp-kaart .el-item .uk-grid > * { padding-left: 9px; }

/* Bij een wijnregel staat de prijs in twee regels (bedrag plus "glas" of "fles").
 * Op de basislijn uitlijnen zakt de naam dan 17px; in het ontwerp beginnen naam en
 * prijs op dezelfde hoogte. */
.vsp-kaart .vsp-wijnprijs .uk-grid { align-items: flex-start !important; }

.vsp-kaart .fles {
    width: 46px; height: 58px; object-fit: contain;
    flex: 0 0 auto; align-self: center;
}
.vsp-kaart img.fles[src$=".jpg"] {
    width: 48px; height: 48px; border-radius: 8px;
    border: 1px solid rgba(30, 24, 16, .06); background: #fff; padding: 3px;
}

.vsp-kaart .badge, .vsp-legenda .badge {
    display: inline-block; border-radius: 9999px; padding: 3px 10px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .07em;
    text-transform: uppercase; white-space: nowrap;
}

.badge--tap { background: #f4ebda; color: #8f6000; }
.badge--nul { background: #edf3ec; color: #346538; }
.badge--wijn { background: #f5e7e8; color: #8c3a42; }

/* Het alcoholpercentage staat niet alleen in een prijsregel maar ook in een
 * categoriekop ("Zware jongens (om te delen)"), dus deze regel is niet gescopet. */
.abv {
    /* Binnen een kop erft dit het gewicht van de kop (500); in een prijsregel juist
       niet, want daar staat de naam op 600. Vandaar font-weight: inherit hier en 400
       op de prijsregel zelf. */
    font-size: 12.5px; font-weight: inherit; color: #797061;
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
/* In een prijsregel staat de naam op 600; het percentage ernaast hoort niet mee te
 * verzwaren. De ruimte ernaast komt van de gap op .uk-leader-fill, niet van marges:
 * met allebei werd de naam 18px in plaats van 9px van het label geduwd en brak een
 * lange naam op een smal scherm twee regels eerder af. */
.vsp-kaart .el-title .abv { font-weight: 400; }

/* Wijnprijzen staan per glas en per fles naast elkaar, elk met een klein label. */
.vsp-kaart .glasfles { display: flex; gap: 16px; white-space: nowrap; }
.vsp-kaart .glasfles > span {
    font-weight: 600; font-variant-numeric: tabular-nums; color: #8c3a42; font-size: 15px;
}
.vsp-kaart .glasfles small {
    display: block; font-weight: 500; font-size: 11.5px; letter-spacing: .1em;
    text-transform: uppercase; color: #797061; text-align: right;
}
.vsp-kaart .herkomst { font-style: italic; }

/* De legenda onder de paginakop: badge plus een paar losse woorden, met 8px ertussen
 * en afbreken naar een tweede regel als het niet past. De klasse uit het bouwer-veld
 * komt op het element zelf terecht, niet op een .el-element eronder. */
.vsp-legenda { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* De categoriebalk: pillen die horizontaal scrollen in plaats van afbreken.
 * De klasse uit het bouwer-veld komt op de wrapper terecht, niet op de <ul>. */
.vsp-chips .uk-subnav { margin-left: 0; }
.vsp-chips .uk-subnav > * { padding-left: 8px; }
.vsp-chips .uk-subnav > * > a {
    background: #fff; border: 1px solid rgba(30, 24, 16, .09); color: #797061;
    font-size: 13px; font-weight: 600; border-radius: 9999px; padding: 7px 14px;
    text-transform: none; letter-spacing: normal; min-height: 0;
    font-family: inherit; line-height: normal;
}
.vsp-chips .uk-subnav > * > a:hover { color: #211b12; }
.vsp-chips .uk-subnav > .uk-active > a,
.vsp-chips .uk-subnav-pill > .uk-active > a,
/* Zolang UIkit's scrollspy nog niets gemarkeerd heeft - bovenaan de pagina dus -
 * staat in het ontwerp de eerste chip aan. Dit doet dat zonder script, en zodra
 * scrollspy wel iets markeert vervalt deze regel vanzelf. */
.vsp-chips .uk-subnav:not(:has(.uk-active)) > li:first-child > a {
    background: #211b12; border-color: #211b12; color: #fff;
}

/* De stippellijn van uk-leader: in het ontwerp een dunne, lichte stippellijn.
 * UIkit vult hem met punten; kleur en dichtheid komen van deze twee regels. */
.vsp-kaart .uk-leader-fill::after { color: rgba(30, 24, 16, .28); letter-spacing: 2px; }

@media (max-width: 480px) {
    .vsp-kaart .fles { width: 38px; height: 50px; }
    .vsp-kaart img.fles[src$=".jpg"] { width: 40px; height: 40px; }
}

/* De contactknoppen in de voet: lichter en compacter dan de knoppen in de pagina.
 * De @button-* themavariabelen horen bij die laatste, dus dit staat los. */
.vsp-iknoppen .uk-button {
    /* .iknop{background:var(--surface)} - wit dus, ook op de contactpagina. Alleen in
     * de voet is hij canvaskleurig (.iconknoppen--voet). Andersom stond hij eerst,
     * en dan verdween de knop op de contactpagina bijna in de achtergrond. */
    background: #ffffff; border: 1px solid rgba(30, 24, 16, .09); border-radius: 8px;
    padding: 9px 14px; font-size: 14px; font-weight: 600; color: #211b12;
    line-height: 1.6; min-height: 0; text-transform: none; letter-spacing: normal;
    transition: box-shadow .2s, border-color .2s;
}
.vsp-iknoppen .uk-button:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04); border-color: #797061;
}
/* In de voet staan ze op het canvas (.iconknoppen--voet .iknop). */
.vsp-voet .vsp-iknoppen .uk-button { background: #faf8f4; }

/* .knop:active veert in; .iknop doet dat niet. De regel staat in de themastijl op
 * .uk-button, dus hier de uitzondering voor de icoonknoppen. */
.vsp-iknoppen .uk-button:active,
.uk-button-text:active { transform: none; }
/* UIkit zet uk-margin-xsmall-right op het icoon en dat is een utility-klasse: 5px
 * met !important. Zonder !important komt het ontwerp (8px) er niet overheen. */
.vsp-iknoppen .uk-button [uk-icon] { color: #9c651c; }
.vsp-iknoppen .uk-button .uk-margin-xsmall-right { margin-right: 8px !important; }
.vsp-iknoppen .uk-button [uk-icon] svg { width: 18px; height: 18px; }
/* De knop zonder tekst (Instagram, Facebook) is in het ontwerp een vierkantje. */
.vsp-iknoppen .uk-button:not(.uk-flex-inline) {
    width: 38px; height: 38px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.vsp-iknoppen .uk-button:not(.uk-flex-inline) [uk-icon] svg { width: 16px; height: 16px; }

/* Een enkele wijnprijs in een verder amberkleurige lijst. */
.vsp-kaart .vsp-wijnprijs .el-meta { color: #8c3a42; }

/* Een tekstknop hoort mee te lopen met de alinea eromheen; UIkit geeft hem de
 * vaste regelhoogte van een gewone knop. */
.uk-button-text {
    font-size: inherit; line-height: inherit; min-height: 0;
    /* UIkit maakt er een inline-block met vertical-align:middle van; die duwt de
     * regelbox 1,6px op. Met "top" is de regel weer even hoog als in het ontwerp,
     * waar de link gewoon inline in de alinea staat. */
    vertical-align: top;
    /* .tekstlink in het ontwerp: altijd onderstreept, niet pas bij hover zoals UIkit doet. */
    font-weight: 600; color: #9c651c;
    text-decoration: underline; text-underline-offset: 3px;
}
.uk-button-text::before { display: none; }
/* .tekstlink heeft in de bron geen hover-regel: hij blijft amber. Eerder werd hij
 * hier donker, en dat is een verandering die niet in het ontwerp staat. */
.uk-button-text:hover { color: #9c651c; text-decoration: underline; }

/* Openingstijden. UIkit's tabelstijl is ruimer dan het ontwerp; dit zet hem terug
 * naar twee kolommen met een dunne scheiding en de tijden rechts uitgelijnd. */
.vsp-tijden .uk-table { font-size: 15px; margin: 0; }
.vsp-tijden .uk-table td { padding: 9px 0; border-bottom: 1px solid rgba(30, 24, 16, .06); }
.vsp-tijden .uk-table td:last-child { text-align: right; color: #797061; font-variant-numeric: tabular-nums; }
.vsp-tijden .uk-table tr.vandaag td { font-weight: 600; color: #211b12; }
.vsp-tijden .el-title, .vsp-tijden .el-content { display: inline; }

/* De contactknoppen op de contactpagina zijn een maat groter dan in de voet. */
.vsp-iknoppen--groot .uk-button { padding: 12px 18px; font-size: 15px; }
.vsp-iknoppen--groot .uk-button [uk-icon] svg { width: 20px; height: 20px; }

/* De prijsregels zelf: 14px lucht boven en onder met een dunne lijn eronder, net als
 * in het ontwerp. UIkit's list-divider zet de lijn juist bovenaan en telt daar eigen
 * marges bij op; dat maakte elke regel 10px te hoog. */
.vsp-kaart.uk-list > li { padding: 14px 0; margin: 0; border-top: 0; }
.vsp-kaart.uk-list > li:not(:last-child) { border-bottom: 1px solid rgba(30, 24, 16, .06); }
.vsp-kaart.uk-list > li:last-child { border-bottom: 1px solid rgba(30, 24, 16, .06); }
/* De gedeelde opmaak van alle vijftien prijslijsten. Stond eerder als hetzelfde
 * blok van 310 tekens in het css-veld van elk los element; hier staat het een keer,
 * en in de bouwer zie je nog maar een klassenaam. */
.vsp-kaart { margin-top: 10px; }                 /* .rijen{margin-top:10px} */
.vsp-kaart .el-title { font-weight: 600; font-size: 15.5px; line-height: 1.6; }
.vsp-kaart .el-meta {
    font-weight: 600; font-size: 15px;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.vsp-kaart .el-content {
    font-size: 13.5px; color: #797061; margin-top: 3px; max-width: 60ch;
}

/* Het enige verschil tussen de lijsten is de kleur van de prijs. Drie varianten:
 * bier en dranken amber, wijn wijnrood, eten inktkleurig. Een losse wijnprijs in
 * een amberkleurige lijst wint hiervan met .vsp-wijnprijs (drie klassen tegen twee). */
.vsp-kaart--amber .el-meta { color: #9c651c; }
.vsp-kaart--wijn .el-meta { color: #8c3a42; }
.vsp-kaart--eten .el-meta { color: #211b12; }

/* De categoriekop boven een prijslijst. scroll-margin houdt hem vrij van de
 * plakkende categoriebalk als je er met de chipbalk naartoe springt. */
.vsp-catkop { text-wrap: balance; scroll-margin-top: 118px; margin-top: 0; }

/* ------------------------------------------------------------------ voet
 * Eén builder-layout voor de hele site: drie kolommen en een slotregel eronder. */
.vsp-voet {
    border-top: 1px solid rgba(30, 24, 16, .09); background: #fff;
    padding-top: 44px; padding-bottom: 52px;
}
.vsp-voetslot { margin-top: 34px; }          /* .voet-slot{margin-top:34px} */
/* De lopende tekst in de voet: adres, tijden en de link eronder. */
.vsp-voettekst {
    font-size: 14.5px; color: #797061; line-height: 1.7;
    margin-top: 0; margin-bottom: 0;
}
.vsp-voettekst a, .vsp-slotregel a {
    color: #211b12; text-decoration: underline; text-underline-offset: 3px;
}
.vsp-voettekst--nalink { margin-top: 10px; }   /* 10px onder de knoppenrij */

/* De knoppenrij in de voet: .iconknoppen{gap:10px}. UIkit's "small" is 15px en
 * dat maakte de kolom 10px korter dan in het ontwerp. */
.vsp-voetknoppen { margin-top: 0; margin-bottom: 0; margin-left: -10px; }
.vsp-voetknoppen > * { padding-left: 10px; }
.vsp-voetknoppen > .uk-grid-margin { margin-top: 10px; }

.vsp-slotregel {
    font-size: 13px; color: #797061; margin: 0;
    padding-top: 20px; border-top: 1px solid rgba(30, 24, 16, .06);
}

/* De opmerking onder de openingstijden op de contactpagina. */
.vsp-tijdennote { font-size: 12.5px; color: #797061; }

/* ------------------------------------------------------------ aanraakscherm
 * Op een telefoon of tablet maakt het ontwerp de raakvlakken groter en de regels
 * wat compacter. Dat is geen breedte- maar een invoerkwestie, dus het hangt aan
 * (pointer: coarse) en niet aan een breakpoint. Een browser op een desktop krijgt
 * dit dus nooit te zien - ook de meetbrowser niet, en daarom stond het er nog niet.
 */
@media (pointer: coarse) {
    .vsp-inforegel a,
    .vsp-infoklein a,
    .vsp-voet a,
    .uk-button-text,
    .vsp-tijdennote a,
    .vsp-rij-contact a { display: inline-block; padding-block: 7px; }
    .vsp-inforegel, .vsp-infoklein { line-height: 1.35; }
    .vsp-voet p { line-height: 1.5; }
    .tm-header .uk-logo, .tm-header-mobile .uk-logo { padding-block: 6px; }
    .tm-header .uk-navbar-nav > li > a { padding-block: 11px; }
}

/* ---------------------------------------------------------------- mobiel
 * Het ontwerp schaalt de kop mee met het scherm: kleiner logo, kleinere
 * menuletters, en de knop "Reserveren" verdwijnt omdat hij niet meer past.
 * YOOtheme's mobiele kop heeft daar geen instellingen voor.
 */
@media (max-width: 680px) {
    /* Gemeten in de bron: 65px hoog met een logo van 32px, 58px met 27px. */
    .tm-header-mobile .uk-navbar-container > .uk-container > .uk-navbar,
    .tm-header-mobile .uk-navbar-item,
    .tm-header-mobile .uk-logo { min-height: 64px; }
    .tm-header-mobile .uk-logo img { height: 32px; width: auto; }
    .tm-header-mobile .uk-navbar-nav > li > a { padding: 8px; font-size: 13.5px; }
    .tm-header-mobile .uk-navbar-nav > li.vsp-navknop { display: none; }
}

@media (max-width: 480px) {
    .tm-header-mobile .uk-navbar-container > .uk-container > .uk-navbar,
    .tm-header-mobile .uk-navbar-item,
    .tm-header-mobile .uk-logo { min-height: 57px; }
    .tm-header-mobile .uk-navbar-container > .uk-container { padding-left: 16px; padding-right: 16px; }
    .tm-header-mobile .uk-logo img { height: 27px; }
    .tm-header-mobile .uk-navbar-nav > li > a { padding: 7px 6px; font-size: 13px; }
}

/* Het invaren volgt Josh' ijkpunt: kort, alleen opacity en transform, en een zachte
 * uitloop. UIkit's eigen easing is ease-out; de bron gebruikt cubic-bezier(.16,1,.3,1).
 * Bij prefers-reduced-motion toont het scherm meteen de eindtoestand. */
[uk-scrollspy-class] { animation-timing-function: cubic-bezier(.16, 1, .3, 1); }

@media (prefers-reduced-motion: reduce) {
    [uk-scrollspy-class] { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ------------------------------------------------------- herbruikbare blokken
 * Deze klassen staan in het veld "Classes" van een element (Geavanceerd). Zo staat
 * er geen blok css achter elk element en is in de bouwer te zien wat een blok doet.
 * Weghalen mag: het element valt dan terug op de standaardopmaak van het thema.
 */

/* Fotokader: dunne rand met afronding om een foto, zoals overal in het ontwerp. */
.vsp-fotokader {
    border: 1px solid rgba(30, 24, 16, .09);
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
}
.vsp-fotokader img { width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------------- rijrasters
 * De rijen van YOOtheme zijn UIkit-flexgrids met vaste breuken (1-2, 1-3) en drie
 * gaten: 15, 20 en 70px. Het ontwerp werkt met verhoudingen als 1.05fr .95fr en een
 * gat van 48px. Vanaf de breakpoint wordt de rij daarom een echt CSS-grid.
 *
 * Elke rij heeft hier zijn eigen klasse met de naam van het blok. Die staat in het
 * veld "Classes" van de rij, zodat in de bouwer te zien is waar de indeling vandaan
 * komt. Haal je de klasse weg, dan valt de rij terug op de kolombreedtes van YOOtheme
 * zelf (1-2, 1-3) - dan klopt de verhouding niet meer precies, maar breekt er niets.
 */
/* UIkit hangt aan een kolom die omvalt een marge die bij het gat van de rij hoort:
 * 10px bij "small", 70px bij "large". Binnen een CSS-grid telt die marge bovenop de
 * gap, en dan staat de tweede rij te laag - gemeten 10px bij het fotoraster op 768px.
 * Deze regel zet hem uit; de rijen die op een smal scherm wel ruimte willen, zetten
 * hun eigen maat verderop terug. Twee klassen zwaar, want .uk-grid-small > * is dat ook. */
.vsp-rij > .uk-grid-margin { margin-top: 0; }

@media (min-width: 821px) {
    .vsp-rij-hero, .vsp-rij-welkom { display: grid; gap: 48px; margin-left: 0; align-items: center; }
    .vsp-rij-hero { grid-template-columns: 1.05fr .95fr; }
    .vsp-rij-welkom { grid-template-columns: .9fr 1.1fr; gap: 64px; }
    .vsp-rij-hero > *, .vsp-rij-welkom > * { padding-left: 0; width: auto; max-width: none; }
}
@media (max-width: 820px) {
    .vsp-rij-hero > .uk-grid-margin, .vsp-rij-welkom > .uk-grid-margin { margin-top: 28px; }
}

@media (min-width: 801px) {
    .vsp-rij-proeverijen, .vsp-rij-vieren { display: grid; gap: 48px; margin-left: 0; align-items: center; }
    .vsp-rij-proeverijen { grid-template-columns: .9fr 1.1fr; }
    .vsp-rij-vieren { grid-template-columns: 1.05fr .95fr; }
    .vsp-rij-proeverijen > *, .vsp-rij-vieren > * { padding-left: 0; width: auto; max-width: none; }
}
@media (max-width: 800px) {
    .vsp-rij-proeverijen > .uk-grid-margin { margin-top: 24px; }
    .vsp-rij-vieren > .uk-grid-margin { margin-top: 26px; }
}

/* Informatiestrook: drie cellen zonder tussenruimte, met scheidingslijnen. */
@media (min-width: 681px) {
    .vsp-rij-infostrook { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
        margin-left: 0; align-items: stretch; }
    .vsp-rij-infostrook > * { padding-left: 0; width: auto; max-width: none; }
}
@media (max-width: 680px) { .vsp-rij-infostrook > .uk-grid-margin { margin-top: 0; } }

/* Drie foto's in twee kolommen; boven 820px spant de eerste twee rijen. */
.vsp-rij-fotos { display: grid; grid-template-columns: 1.15fr .85fr; gap: 26px;
    margin-left: 0; align-items: stretch; }
.vsp-rij-fotos > * { padding-left: 0; width: auto; max-width: none; }
@media (min-width: 821px) {
    .vsp-rij-fotos > *:first-child { grid-row: span 2; }
    .vsp-rij-fotos > *:nth-child(2) { margin-top: 34px; }
}
/* Onder 820px weer een net rastertje van twee gelijke kolommen. */
@media (max-width: 820px) {
    .vsp-rij-fotos { grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* De kaart met de menukaart-teaser: één kolom over de volle breedte. */
.vsp-rij-kaart { display: grid; grid-template-columns: 1fr; gap: 0; margin-left: 0;
    align-items: stretch; }
.vsp-rij-kaart > * { padding-left: 0; width: auto; max-width: none; }

/* Bannerrij op de menukaart: tekst en foto tegen elkaar, foto boven op mobiel. */
.vsp-rij-banner {
    border: 1px solid rgba(30, 24, 16, .09); border-radius: 14px;
    overflow: hidden; background: #fff;
}
@media (min-width: 681px) {
    .vsp-rij-banner { display: grid; grid-template-columns: 1fr 1fr; gap: 0;
        margin-left: 0; align-items: stretch; }
    .vsp-rij-banner > * { padding-left: 0; width: auto; max-width: none; }
}
@media (max-width: 680px) { .vsp-rij-banner > *:last-child { order: -1; } }

/* De tekstkolom van een banner. Gescopet onder de rij omdat .vsp-rij-banner > *
 * de padding van de kolom anders op nul zet: even zwaar, maar wel later. */
.vsp-rij-banner > .vsp-bannerkolom {
    padding: 34px 32px; display: flex; flex-direction: column; justify-content: center;
}
.vsp-bannerkop { margin-bottom: 8px; }                    /* gap:8px in het ontwerp */
.vsp-banneruitleg { color: #797061; font-size: 15px; max-width: 40ch; margin-top: 0; }

/* De fotokolom. .groep-banner figure is 240px hoog, en onder 680px 190px. */
.vsp-rij-banner > .vsp-bannerbeeld { display: flex; min-height: 240px; }
.vsp-rij-banner > .vsp-bannerbeeld > * { width: 100%; height: 100%; }
.vsp-bannerbeeld .el-image {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (max-width: 680px) {
    .vsp-rij-banner > .vsp-bannerbeeld { min-height: 190px; }
}

/* ------------------------------------------------------------------ homepagina
 * De opmaak die op de homepagina meer dan een keer voorkomt. Alles wat hier staat
 * stond eerder als css-veld achter elk los element; in de bouwer zie je nu een
 * klassenaam en is meteen duidelijk dat twee blokken hetzelfde zijn.
 */

/* De kop boven een blok. Vier keer dezelfde twee regels. */
.vsp-blokkop { text-wrap: balance; margin-bottom: 14px; }

/* De lopende tekst onder zo'n kop. Alinea's krijgen 18px tussenruimte, de laatste
 * niet, en een link erin is amber en vet - zo staat het in het ontwerp. */
/* margin-bottom op nul: in het ontwerp brengt het element eronder zijn eigen
 * ruimte mee (18px bij een tekstlink, 24px bij een knop). Laat je UIkit's
 * uk-margin staan, dan wordt het 20px en klopt de knop 2px niet. */
.vsp-blokuitleg { max-width: 56ch; color: #797061; margin-top: 0; margin-bottom: 0; }
/* margin-top ook op nul: UIkit zet met "* + p" 20px boven elke volgende alinea,
 * en die klapt samen met de 18px hieronder tot 20. Over drie alinea's scheelde
 * dat 4px, en dan staat alles daaronder scheef. */
.vsp-blokuitleg p { margin-top: 0; margin-bottom: 18px; }
.vsp-blokuitleg p:last-child { margin-bottom: 0; }
.vsp-blokuitleg a {
    color: #9c651c; font-weight: 600;
    text-decoration: underline; text-underline-offset: 3px;
}

/* De informatiestrook. Gescopet onder de rij omdat .vsp-rij-infostrook > * de
 * padding-left van elke cel op nul zet: even zwaar, maar wel eerder. */
.vsp-rij-infostrook > .vsp-infocel {
    padding: 20px 24px; border-left: 1px solid rgba(30, 24, 16, .06);
}
.vsp-rij-infostrook > .vsp-infocel--eerste { padding: 20px 24px 20px 0; border-left: 0; }
@media (max-width: 680px) {
    /* Onder 680px staan de cellen onder elkaar, met een lijn erboven in plaats
     * van ernaast en met minder lucht. */
    .vsp-rij-infostrook > .vsp-infocel {
        padding: 14px 0; border-left: 0; border-top: 1px solid rgba(30, 24, 16, .06);
    }
    .vsp-rij-infostrook > .vsp-infocel--eerste { padding: 14px 0; border-top: 0; }
}

/* Het kleine kapitaaltjes-label. Het komt twee keer voor: boven elke cel van de
 * informatiestrook en boven elke kolom in de voet. Alleen de kleur en de ruimte
 * eronder verschillen, dus die staan in de twee varianten. */
.vsp-label {
    font-size: 11.5px; font-weight: 600; letter-spacing: .15em;
    text-transform: uppercase; font-family: inherit;
}
/* In de informatiestrook. In de bron zijn het label en het regeltje eronder inline
 * elementen in een anonieme blokregel, en die erven de regelhoogte van de cel
 * (16,5 x 1,6 = 26,4px). Als blok zouden ze 18 en 21 hoog zijn en werd de hele
 * strook 9px te kort; vandaar de expliciete regelhoogte. */
.vsp-label--info {
    display: block; line-height: 26.4px; color: #9c651c; margin-bottom: 0;
}
/* In de voet: inktkleurig, met 8px lucht eronder (.voet-kop). */
.vsp-label--voet { color: #211b12; margin-bottom: 8px; }
.vsp-inforegel { font-size: 14.5px; margin-top: 3px; margin-bottom: 0; }
.vsp-infoklein {
    color: #797061; font-size: 13px; line-height: 26.4px;
    margin-top: 0; margin-bottom: 0;
}
.vsp-inforegel a, .vsp-infoklein a {
    color: inherit; text-decoration: underline; text-underline-offset: 3px;
}

/* De drie foto's naast het welkomstverhaal. Boven 820px is de eerste hoog en spant
 * hij twee rasterrijen; daaronder worden het drie vierkanten. */
.vsp-zaakfoto .el-image { aspect-ratio: 4/5; object-fit: cover; }
@media (min-width: 821px) {
    .vsp-zaakfoto--hoog { height: 100%; }
    .vsp-zaakfoto--hoog .el-image { width: 100%; height: 100%; aspect-ratio: auto; }
}
@media (max-width: 820px) {
    .vsp-zaakfoto .el-image { aspect-ratio: 1/1; }
    .vsp-zaakfoto--hoog { height: auto; }
    .vsp-zaakfoto--hoog .el-image { aspect-ratio: 1/1; height: auto; }
}

/* De kaart met de menukaart-teaser: een omlijnd vlak over de volle breedte. */
.vsp-rij-kaart > .vsp-teaserkaart {
    border: 1px solid rgba(30, 24, 16, .09); border-radius: 12px;
    background: #fff; padding: 44px 36px;
}

/* De drie blokken die in het ontwerp tegen elkaar aan staan: geen ruimte boven,
 * 88px eronder en 56px op een smal scherm. YOOtheme kent alleen 40/64/88. */
.vsp-sectie-blok { padding-bottom: 88px; }
@media (max-width: 680px) { .vsp-sectie-blok { padding-bottom: 56px; } }

/* De twee vaste sectiematen van de menukaart. YOOtheme kent alleen de stappen
 * 40/64/88, dus deze twee staan hier in plaats van in een css-veld per sectie. */
.vsp-sectie-categorie { padding-top: 44px; padding-bottom: 0; }
.vsp-sectie-banner { padding-top: 56px; padding-bottom: 0; }

/* Contactpagina (variant B1, Josh 24-09-2026): links adres en openingstijden, rechts
 * het formulier in een kaart. Smallere linkerkolom, want daar staat weinig tekst. */
@media (min-width: 960px) {
    .vsp-rij-contact { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px;
        margin-left: 0; align-items: start; }
    .vsp-rij-contact > * { padding-left: 0; width: auto; max-width: none; margin-top: 0; }
}
@media (max-width: 959px) {
    /* Onder elkaar is er geen kolomgoot nodig. Zonder deze regel schuift de witte
     * formulierkaart 20px naar links: zijn eigen padding vervangt die van UIkit. */
    .vsp-rij-contact { margin-left: 0; }
    .vsp-rij-contact > * { padding-left: 0; }
    .vsp-rij-contact > .uk-grid-margin { margin-top: 44px; }
}

/* Voet: drie kolommen met 32px ertussen. */
@media (min-width: 721px) {
    .vsp-rij-voet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
        margin-left: 0; align-items: start; }
    .vsp-rij-voet > * { padding-left: 0; width: auto; max-width: none; }
}
@media (max-width: 720px) { .vsp-rij-voet > .uk-grid-margin { margin-top: 26px; } }

/* ==========================================================================
   Contactformulier (Contact Form 7)
   ==========================================================================
   Contact Form 7 brengt zelf geen opmaak mee voor de velden: wat in het
   veldsjabloon staat komt letterlijk in de pagina. Daarom staan hier alleen
   klassen van deze site en hoeft er niets van een plugin overschreven te
   worden. De verzendknop krijgt in het sjabloon uk-button uk-button-primary
   mee en ziet er daarmee vanzelf uit als elke andere knop; voor de knop staat
   hieronder dus niets.

   De maten volgen de rest van de site: 6px radius, amber als accent (dezelfde
   kleur als de focusring elders), en inkt op wit in de velden. */

.vsp-formulier { display: flex; flex-direction: column; gap: 22px; }

.vsp-veldrij { display: grid; gap: 22px; }

/* Twee kolommen vanaf 761px: hetzelfde breekpunt als de contactpagina, zodat
 * het formulier op dezelfde breedte omklapt als de kolommen ernaast. */
@media (min-width: 761px) {
    .vsp-veldrij { grid-template-columns: 1fr 1fr; }
}

.vsp-veld { display: flex; flex-direction: column; gap: 7px; }

.vsp-veldlabel {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: #211b12;
}

/* De optionele velden worden gemarkeerd, niet de verplichte: "(optioneel)"
 * achter drie labels leest prettiger dan een sterretje achter vier. */
.vsp-optioneel { font-weight: 400; color: #797061; }

/* Eén regel voor input, select en textarea: ze horen er hetzelfde uit te zien.
 *
 * `font: inherit` is niet optioneel. Zonder die regel pakt een formulierveld
 * de letter van het besturingssysteem in plaats van Instrument Sans, en dan
 * staat er ineens een ander lettertype midden op de pagina.
 *
 * 16px is een ondergrens, geen smaak: onder 16px zoomt Safari op de iPhone in
 * zodra iemand een veld aantikt, en dan is de rest van de pagina weg. */
.vsp-invoer {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    font-size: 16px;
    line-height: 1.5;
    color: #211b12;
    background-color: #fff;
    border: 1px solid rgba(30, 24, 16, .16);
    border-radius: 6px;
    transition: border-color .2s, box-shadow .2s;
}

textarea.vsp-invoer { min-height: 150px; resize: vertical; }

/* Een select heeft een eigen pijltje nodig zodra `appearance` uit staat. Als
 * achtergrondbeeld en niet als extra element: dan blijft de hele opmaak binnen
 * deze ene regel en hoeft er niets aan de HTML te veranderen. De kleur in de
 * SVG (%23211b12) is de inktkleur. */
select.vsp-invoer {
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath fill='none' stroke='%23211b12' stroke-width='1.5' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

/* Het draaiwieltje van een getalveld weghalen: het aantal personen is een
 * getal dat je intikt, niet een dat je omhoog klikt. De numerieke toetsenbord
 * op mobiel blijft wel, want dat hangt aan het type. */
input[type="number"].vsp-invoer { -moz-appearance: textfield; }
input[type="number"].vsp-invoer::-webkit-outer-spin-button,
input[type="number"].vsp-invoer::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}

.vsp-invoer:hover { border-color: rgba(30, 24, 16, .3); }

.vsp-invoer:focus {
    outline: none;
    border-color: #9c651c;
    box-shadow: 0 0 0 3px rgba(156, 101, 28, .16);
}

/* Dezelfde ring als elders op de site, zodat wie met Tab werkt niets nieuws
 * hoeft te leren. */
.vsp-invoer:focus-visible {
    outline: 2px solid #9c651c;
    outline-offset: 3px;
}

/* De verzendknop.
 *
 * `.vsp-verzenden` is een flexkolom, en een flexkind rekt standaard over de volle
 * breedte. Dat viel niet op zolang Contact Form 7 de knop nog in een <p> zette; zodra
 * die automatische opmaak uit ging, stond er een knop van 600px. Elders op de site
 * (Reserveren, de contactknoppen) is een knop zo breed als zijn tekst, dus hier ook.
 *
 * Op mobiel juist wel over de volle breedte: dat is daar een groter raakvlak, en het
 * is wat iemand met een duim verwacht. */
.vsp-verzenden { margin-top: 4px; align-items: flex-start; }

@media (max-width: 760px) {
    .vsp-verzenden { align-items: stretch; }
}

/* ------------------------------------------------------------ Turnstile
   De tag [turnstile] staat al in het formulier, maar Contact Form 7 rendert hem
   pas zodra de sleutels van Cloudflare zijn ingevuld; tot die tijd blijft er
   een wikkel met alleen witruimte over. Die is 0px hoog, maar hij is wel een
   flexitem en telt dus mee voor de gap van 22px - een gat tussen het bericht en
   de knop dat er niet hoort. `:not(:has(*))` haalt hem weg zolang er niets in
   staat, en laat hem vanzelf terugkomen zodra de widget er wel is. */
.vsp-turnstile:not(:has(*)) { display: none; }

/* Sinds 12-10-2026 laadt Turnstile op een telefoon pas als het formulier in de buurt komt
   (VSP_TURNSTILE_UITGESTELD in functions.php). Zonder deze regel sprong de verzendknop dan
   72px omlaag op het moment dat de widget verscheen. Gemeten: de widget is 72px hoog, op
   mobiel en op desktop. Zo staat de ruimte er al, net als toen de widget meteen laadde. */
.vsp-turnstile .wpcf7-turnstile { min-height: 72px; }

/* ------------------------------------------------------------------ lokaas
   Het veld dat een mens niet ziet en niet kan bereiken. Bewust GEEN
   display:none en geen hidden: de eenvoudigste bots slaan die over, en dan
   vangt het niets. Zo staat het er wel, maar buiten beeld, buiten de
   tabvolgorde en met aria-hidden op de wikkel. */
.vsp-lokaas {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------------------------------------------------------------- meldingen
   Contact Form 7 zet zijn meldingen in eigen elementen met vaste klassen. Ze
   krijgen hier de vorm van de site in plaats van de rode standaardkaders. */

.wpcf7 form .wpcf7-response-output {
    margin: 22px 0 0;
    padding: 13px 18px;
    font-size: 15px;
    line-height: 1.5;
    border: 1px solid rgba(30, 24, 16, .09);
    border-radius: 6px;
}

.wpcf7 form.sent .wpcf7-response-output {
    border-color: rgba(52, 101, 56, .38);
    background-color: #edf3ec;
    color: #346538;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
    border-color: rgba(140, 58, 66, .38);
    background-color: #f5e7e8;
    color: #8c3a42;
}

.wpcf7-not-valid-tip {
    margin-top: 6px;
    font-size: 14px;
    color: #8c3a42;
}

.vsp-invoer.wpcf7-not-valid { border-color: rgba(140, 58, 66, .55); }

.wpcf7 .wpcf7-spinner { margin: 0 0 0 12px; }

/* --------------------------------------------------------------------------
   Terugvalletters: het verspringen bij het laden
   Newsreader en Instrument Sans komen van Google en arriveren pas na de eerste
   tekening. Tot dat moment tekent de browser met Georgia en Arial, en die zijn
   net iets smaller. Op een telefoon wisselt daardoor het afbreekpunt van de
   inleiding en de legenda, springt de hele kaart een regel omlaag en scrolt de
   bezoeker mis. Camiel en Josh zagen dit tijdens de meeting van 11-09 ("hij
   verspringt steeds"); nagemeten op 18-09 gaf een sprong van 0,20 op 390 px.

   Deze twee regels schalen de terugvalletters zo op dat ze exact evenveel
   ruimte innemen als het echte font. Gemeten met een proeftekst op 100 px:
     Instrument Sans 3400 px tegen Arial 3361 px    -> 101,1%
     Newsreader      3373 px tegen Georgia 3324 px  -> 101,5%
   size-adjust raakt alleen de lettervormen, niet de regelhoogte, dus er
   verandert verder niets aan de opmaak.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Instrument Sans terugval";
    src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
    size-adjust: 101.1%;
    font-weight: 400 700;
}

@font-face {
    font-family: "Newsreader terugval";
    src: local("Georgia"), local("Times New Roman"), local("Liberation Serif");
    size-adjust: 101.5%;
    font-weight: 400 600;
}

/* YOOtheme zet de families zelf in theme.1.css, zonder terugval ertussen. Deze
   twee regels zetten hem er alsnog in, op dezelfde plek in de rij. */
body,
.uk-navbar-nav > li > a,
.vsp-invoer,
.uk-button {
    font-family: "Instrument Sans", "Instrument Sans terugval", "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3, h4,
.uk-h1, .uk-h2, .uk-h3, .uk-h4,
.uk-heading-small, .uk-heading-medium, .uk-heading-large,
.uk-logo {
    font-family: "Newsreader", "Newsreader terugval", Georgia, serif;
}

/* --------------------------------------------------------------------------
   Sfeermapje op Over ons
   Camiel vroeg er in de meeting van 11-09 om: "Misschien wel leuk om nog wat
   extra foto's gewoon even los, een klein beetje toe te voegen. Een soort
   fotomapje, dingetje eronder of zo."

   Tien vierkanten in een raster. Ze staan in een gewone kolom en niet in tien
   YOOtheme-kolommen: een UIkit-rij kent alleen vaste breuken en vijf naast
   elkaar bestaat daar niet. De elementen krijgen van YOOtheme een .uk-margin
   mee; die marge moet eraf, anders staat het raster scheef.
   -------------------------------------------------------------------------- */
.vsp-sfeerraster {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

/* De 22px onder de inleiding. Op .vsp-sfeerraster alleen wint UIkit's regel voor
   rijafstand het, dus staat hij hier een niveau dieper: gemeten stond het raster
   anders 22px hoger dan in de bron. */
.vsp-rij-sfeer > .vsp-sfeerraster { margin-top: 22px; }

.vsp-sfeerraster > * { margin: 0 !important; }

.vsp-sfeerraster .el-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

@media (max-width: 1000px) {
    .vsp-sfeerraster { grid-template-columns: repeat(4, 1fr); }
}

/* 15-10-2026: de kurkenwand is eruit (Camiel: "een foto van de achterkant van onze kaart").
   Negen foto's passen niet in rijen van vijf. Daarom vier kolommen met de eerste foto groot
   (2x2): dat sluit op elke breedte, 3 rijen van 4 en op mobiel 6 rijen van 2. */
.vsp-sfeerraster { grid-template-columns: repeat(4, 1fr); }
.vsp-sfeerraster > :first-child { grid-column: span 2; grid-row: span 2; }
.vsp-sfeerraster > :first-child .el-image { height: 100%; }

@media (max-width: 680px) {
    .vsp-sfeerraster { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}


/* ==========================================================================
   Contactpagina, variant B1 (Josh 24-09-2026)
   ========================================================================== */

/* De vier contactknoppen twee bij twee, even breed. UIkit maakt er een flexgrid met
 * negatieve marge van; als CSS-grid staan ze strak in twee kolommen. */
.vsp-knoppen-2x2 > div {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
    max-width: 460px; margin-left: 0;
}
/* UIkit zet marges op de items zodra ze "omvallen" (.uk-grid-margin, 0,2,0); binnen een
 * CSS-grid tellen die op bij de gap, dus die gaan hier hard weg. */
.vsp-knoppen-2x2 > div > * { padding-left: 0 !important; margin-top: 0 !important; width: auto; }
.vsp-knoppen-2x2 .uk-button { width: 100%; justify-content: flex-start !important;
    white-space: nowrap; }
@media (max-width: 480px) {
    .vsp-knoppen-2x2 > div { gap: 8px; }
    .vsp-knoppen-2x2 .uk-button { font-size: 14px; padding: 12px; }
}

/* De foto naast de kop loopt even hoog als de tekst: de kolom rekt mee met de rij, het
 * kader vult de kolom, en de foto zelf telt niet mee voor de hoogte (absoluut). */
.vsp-kolom-foto { display: flex; flex-direction: column; }
.vsp-foto-rek {
    position: relative; flex: 1 1 auto; min-height: 320px; margin: 0 !important;
    border-radius: 12px; overflow: hidden; border: 1px solid rgba(30, 24, 16, .09);
}
.vsp-foto-rek img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center 45%;
}
@media (max-width: 959px) {
    .vsp-foto-rek { flex: none; min-height: 0; aspect-ratio: 4 / 3; }
}

/* Het formulier in een witte kaart, zoals de andere kaarten op de site. */
.vsp-formulierkaart {
    background: #fff; border: 1px solid rgba(30, 24, 16, .09); border-radius: 12px;
    padding: 32px !important;
}
.vsp-formulierkaart .vsp-blokkop { margin-top: 0; }
@media (max-width: 559px) {
    .vsp-formulierkaart { padding: 22px 18px !important; }
}

/* Openingstijden in de voet: de regel van vandaag vet en inktkleurig, net als de rij
 * in de tabel op de contactpagina. De markering zet gedrag.js. */
.vsp-voettekst [data-dagen].vandaag { font-weight: 600; color: #211b12; }

/* ------------------------------------------------------------ QA 14-10-2026
   Drie kleine reparaties uit context/qa-2026-10-14/rapport.md. Terugdraaien: dit blok weg
   (de vorige versie staat in logs/style.voor-qa-20261014.css). */

/* M1: op 320px brak "Over ons" in de mobiele kop over twee regels en raakte het logo het
   menu. Onder 360px iets minder ruimte per item en nooit afbreken. */
@media (max-width: 359px) {
    .tm-header-mobile .uk-navbar-nav > li > a { padding: 7px 4px; font-size: 12.5px; white-space: nowrap; }
    .tm-header-mobile .uk-navbar-container > .uk-container { padding-left: 12px; padding-right: 12px; }
    .tm-header-mobile .uk-logo img { height: 24px; }
}

/* A1: de rand van de formuliervelden had ~1,4:1 contrast op wit; WCAG 1.4.11 vraagt 3:1
   voor de rand waaraan je een veld herkent. rgba(30,24,16,.5) op wit is ~3,3:1. */
.vsp-invoer { border-color: rgba(30, 24, 16, .5); }
.vsp-invoer:hover { border-color: rgba(30, 24, 16, .7); }

/* A2: de verzendknop had als enige een zwarte stippellijn als focusring. Nu dezelfde ring
   als de rest van de site. */
.vsp-verzenden .uk-button:focus-visible,
.vsp-verzenden .wpcf7-submit:focus-visible {
    outline: 2px solid #9c651c;
    outline-offset: 2px;
}

/* Vaste kop en categoriebalk met CSS in plaats van UIkit's JavaScript (15-10-2026).
   Camiel stuurde een video: bij knijpzoomen op een iPhone flitste de menukaart heen en weer.
   UIkit's uk-sticky zet een element op position:fixed en schuift er een opvulblok voor; bij
   elke zoomstap rekent het opnieuw en springt de pagina een regel op en neer. position:sticky
   doet hetzelfde zonder JavaScript en zonder opvulblok, dus daar valt niets te verspringen.
   De thema-instelling "sticky" staat daarom weer uit, en de balk heeft in de layout klasse
   vsp-chipbalk gekregen in plaats van het uk-sticky-attribuut. */
.tm-header-mobile, .tm-header { position: sticky; top: 0; z-index: 980; }
.vsp-chipbalk { position: sticky; top: 68px; z-index: 979; }
@media (max-width: 680px) { .vsp-chipbalk { top: 64px; } }
@media (max-width: 480px) { .vsp-chipbalk { top: 57px; } }