/* Boschalet Nutter · componenten */

/* knoppen */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  min-height: 48px; padding: 12px 22px; border: 0; border-radius: var(--r);
  font: inherit; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none;
  cursor: pointer; transition: background-color .2s, transform .2s var(--ease), box-shadow .2s;
}
.knop--zon { background: var(--zon); color: var(--bos-diep); box-shadow: 0 2px 0 var(--zon-diep); }
.knop--zon:hover { background: #e9c26c; transform: translateY(-1px); box-shadow: 0 3px 0 var(--zon-diep); }
.knop--zon:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--zon-diep); }
.knop--klein { min-height: 44px; padding: 10px 16px; font-size: var(--step--1); }

.tekstlink {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-weight: 600; text-decoration: underline; text-decoration-color: var(--zon-diep);
  text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.tekstlink svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.tekstlink:hover svg { transform: translateX(3px); }
.tekstlink--licht { color: var(--wit); text-decoration-color: var(--zon); }

/* header */
.kop { position: sticky; top: 0; z-index: var(--z-kop); background: rgba(212, 217, 203, .97); border-bottom: 1px solid transparent; transition: border-color .2s; }
.kop.gescrold { border-bottom-color: var(--lijn); }
.kop__in {
  display: flex; align-items: center; gap: var(--s3);
  max-width: calc(var(--max) + 2 * var(--rand)); margin: 0 auto;
  padding: 10px var(--rand); padding-top: max(10px, env(safe-area-inset-top));
}
.merk { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 650; font-size: var(--step-1); letter-spacing: -0.01em; margin-right: auto; min-height: 44px; }
.merk { margin-right: auto; align-self: flex-start; }
.merk img { width: 128px; height: auto; background: var(--wit); padding: 8px 12px; margin-top: -10px; margin-bottom: -30px; border-radius: 0 0 18px 18px; box-shadow: 0 6px 16px rgba(43, 54, 39, .18); transition: width .25s var(--ease), margin .25s var(--ease); }
.kop.gescrold .merk img { width: 96px; margin-bottom: -14px; }
.nav ul { display: flex; gap: var(--s3); }
.nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 500; }
.nav a:hover, .nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--zon-diep); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.menu-knop { display: none; }

@media (max-width: 959px) {
  .nav, .kop__boek { display: none; }
  .merk img { width: 104px; margin-bottom: -24px; }
  .kop.gescrold .merk img { width: 80px; margin-bottom: -8px; }
  .merk { font-size: 1.0625rem; }
  .menu-knop {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px;
    padding: 8px 14px; border: 1.5px solid var(--bos); border-radius: var(--r);
    background: var(--wit); color: var(--bos); font: inherit; font-weight: 600; cursor: pointer;
  }
  .menu-knop__lijnen, .menu-knop__lijnen::before { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s var(--ease); }
  .menu-knop__lijnen { position: relative; transform: translateY(-3px); }
  .menu-knop__lijnen::before { content: ""; position: absolute; top: 6px; }
  .menu-open .menu-knop__lijnen { transform: translateY(0) rotate(45deg); }
  .menu-open .menu-knop__lijnen::before { transform: translateY(-6px) rotate(-90deg); }
}

/* mobiel menu: paneel onder de header, scrolt zelf */
.menu {
  position: fixed; inset: 0; z-index: var(--z-menu); top: var(--kop-h, 66px);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s4);
  background: var(--lucht-licht); padding: var(--s3) var(--rand) max(var(--s3), env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
}
.menu[hidden] { display: none; }
.menu a:not(.knop) { display: flex; align-items: center; min-height: 56px; font-size: var(--step-2); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--lijn); }
.menu a[aria-current="page"] { color: var(--mos); }
.menu__onder { display: grid; gap: var(--s2); }
.menu__onder p { font-size: var(--step--1); }
.menu__onder p a:not(.knop) { display: inline; font-size: inherit; border: 0; min-height: 0; text-decoration: underline; }

@media (prefers-reduced-motion: no-preference) {
  .menu:not([hidden]) { animation: menuIn .28s var(--ease); }
  @keyframes menuIn { from { opacity: 0; transform: translateY(-8px); } }
}

/* footer: compact, lichtblauw als de lucht in het logo */
.voet { position: relative; background: var(--bos); color: var(--wit); padding: var(--s6) var(--rand) 0; margin-top: calc(var(--sectie) + 30px); }
.voet::before { content: ""; position: absolute; left: 0; right: 0; top: -28px; height: 30px; background: var(--bos); -webkit-mask: var(--scheur) top / 100% 100% no-repeat; mask: var(--scheur) top / 100% 100% no-repeat; }
.voet a { color: var(--wit); }
.voet a:hover { text-decoration-color: var(--zon); }
.voet__in { max-width: var(--max); margin: 0 auto; display: grid; gap: var(--s4); grid-template-columns: 1fr; }
.voet__merk { display: flex; gap: var(--s2); align-items: center; }
.voet__merk img { width: 112px; height: auto; border-radius: 14px; flex: none; }
.voet__merk p { font-size: var(--step--1); line-height: 1.5; }
.voet__nav ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s3); }
.voet__nav a, .voet__kanalen a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 500; }
.voet__nav a:hover, .voet__kanalen a:hover { text-decoration: underline; }
.voet__kanalen p { font-size: var(--step--1); color: #c9d0bd; margin: 0; }
.voet__kanalen a { margin-bottom: 4px; }
.voet__onder {
  max-width: var(--max); margin: var(--s4) auto 0; display: flex; justify-content: space-between; align-items: center; gap: var(--s2);
  border-top: 1px solid rgba(255, 255, 255, .2); padding: var(--s1) 0 max(var(--s2), env(safe-area-inset-bottom)); font-size: var(--step--1);
}
.voet__onder a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: flex-end; }
@media (min-width: 760px) {
  .voet__in { grid-template-columns: 1.3fr 1fr 1fr; align-items: start; }
}

/* boekbalk mobiel: één zwevend element, verschijnt na de hero */
.boekbalk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-balk);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: 10px var(--rand) max(10px, env(safe-area-inset-bottom));
  background: rgba(212, 217, 203, .97); border-top: 1px solid var(--lijn);
  font-size: var(--step--1); font-weight: 500;
  transform: translateY(110%); transition: transform .3s var(--ease); visibility: hidden;
}
.boekbalk.toon { transform: none; visibility: visible; }
@media (min-width: 960px) { .boekbalk { display: none; } }
@media (max-width: 359px) { .boekbalk span { display: none; } .boekbalk .knop { width: 100%; } }

/* lijsten met vinkje */
.vink li { position: relative; padding-left: 30px; }
.vink li::before {
  content: ""; position: absolute; left: 0; top: .3em; width: 18px; height: 18px; border-radius: 50%;
  background: var(--zon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23394032' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* lightbox */
.zoom { display: block; border-radius: var(--knip); overflow: hidden; cursor: zoom-in; }
.zoom img { transition: transform .5s var(--ease); }
.zoom:hover img { transform: scale(1.025); }
.lb { border: 0; padding: 0; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100dvh; background: rgba(28, 32, 25, .96); color: var(--wit); }
.lb::backdrop { background: rgba(28, 32, 25, .9); }
.lb[open] { display: grid; place-items: center; }
.lb figure { display: grid; gap: var(--s1); justify-items: center; padding: 64px 16px 72px; max-height: 100dvh; }
.lb img { max-width: min(92vw, 1400px); max-height: calc(100dvh - 160px); width: auto; height: auto; border-radius: 12px; }
.lb figcaption { font-size: var(--step--1); text-align: center; max-width: 60ch; }
.lb__knop { position: absolute; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: var(--wit); cursor: pointer; }
.lb__knop:hover { background: rgba(255, 255, 255, .26); }
.lb__knop svg, .teller button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb__dicht { top: max(12px, env(safe-area-inset-top)); right: 12px; }
.lb__vorig, .lb__volgend { top: 50%; transform: translateY(-50%); }
.lb__vorig { left: 12px; } .lb__volgend { right: 12px; }
.lb__teller { pointer-events: none; position: absolute; bottom: max(16px, env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; font-size: var(--step--1); margin: 0; max-width: none; }
.lb :focus-visible { outline-color: var(--zon); }
@media (max-width: 699px) { .lb__vorig, .lb__volgend { top: auto; bottom: max(8px, env(safe-area-inset-bottom)); transform: none; } }

/* tellers voor "Wie gaat er mee?" */
.teller, .schakel { display: flex; align-items: center; gap: var(--s2); padding: 14px 0; border-bottom: 1px solid rgba(57, 64, 50, .18); }
.teller__ico, .schakel__ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--wit); }
.teller__ico svg, .schakel__ico svg { width: 26px; height: 26px; fill: none; stroke: var(--bos); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.teller__tekst { display: grid; flex: 1; min-width: 0; font-weight: 600; line-height: 1.3; }
.teller__tekst small { font-weight: 400; color: var(--mos); font-size: var(--step--1); }
.teller__bed { display: flex; align-items: center; gap: 6px; }
.teller button {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  border: 1.5px solid var(--bos); background: var(--wit); color: var(--bos); cursor: pointer; transition: background-color .15s;
}
.teller button:hover:not(:disabled) { background: var(--zon); }
.teller button:disabled { opacity: .35; cursor: not-allowed; }
.teller output { min-width: 2ch; text-align: center; font-size: var(--step-1); font-weight: 650; font-variant-numeric: tabular-nums; }
.schakel { cursor: pointer; font-weight: 500; min-height: 44px; }
.schakel input { width: 24px; height: 24px; margin: 0; accent-color: var(--bos); flex: none; order: 3; margin-left: auto; }
.schakel.uit { opacity: .45; cursor: not-allowed; }

/* formulier */
.veld { display: grid; gap: 6px; margin-bottom: var(--s2); min-width: 0; }
.veld label { font-weight: 600; }
.veld label span { font-weight: 400; color: var(--mos); }
.veld input, .veld select, .veld textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid #9aa596; border-radius: 10px;
  background: var(--wit); color: var(--bos); font: inherit; font-size: max(16px, 1rem);
}
.veld textarea { resize: vertical; min-height: 140px; }
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: 3px solid var(--zon); outline-offset: 0; border-color: var(--bos); }
.veld [aria-invalid="true"] { border-color: var(--roest); }
.fout { color: var(--roest); font-size: var(--step--1); font-weight: 500; margin: 0; min-height: 0; }
.fout:empty { display: none; }
.veld-rij { display: grid; gap: 0 var(--s2); grid-template-columns: 1fr 1fr; }
.honing { position: absolute; left: -9999px; }

/* WhatsApp: in de boekbalk (mobiel) en als zwevende knop (laptop) */
.boekbalk__wa { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--bos); color: var(--bos); flex: none; }
.boekbalk .knop { flex: 1; }
.boekbalk__wa svg, .wa-zweef svg, .kanalen__snel svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wa-zweef { display: none; }
@media (min-width: 960px) {
  .wa-zweef {
    position: fixed; right: 16px; bottom: 16px; z-index: var(--z-balk); display: inline-flex; align-items: center; gap: 8px;
    justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--bos); color: var(--wit);
    font-weight: 600; text-decoration: none; box-shadow: 0 6px 20px rgba(47, 53, 42, .25); transition: transform .2s var(--ease);
  }
  .wa-zweef span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wa-zweef svg { width: 26px; height: 26px; }
  .wa-zweef:hover { transform: translateY(-2px); }
  .p-reserveren .wa-zweef, .p-contact .wa-zweef { display: none; }
}
.knop--rand { background: var(--wit); color: var(--bos); border: 1.5px solid var(--bos); }
.knop--rand:hover { background: var(--lucht-licht); }
.kanalen__snel { display: grid; gap: var(--s1); margin-bottom: var(--s3); }

/* formulier-extra's */
.formulier fieldset { border: 0; padding: 0; margin: 0 0 var(--s3); min-width: 0; }
.formulier legend { font-weight: 650; font-size: var(--step-1); margin-bottom: var(--s2); padding: 0; }
.veld-rij--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vinkje { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 8px 0; cursor: pointer; }
.vinkje input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--bos); }
html:not(.js) .res__form, html:not(.js) .som { display: none; }
.voet__nav a { min-width: 44px; }
.voet__juridisch { display: inline-flex; gap: var(--s3); }