/* valescavanwaveren.com - nagebouwd 1-op-1 van de oude WordPress-site (okt 2026).
   Maten en kleuren zijn gemeten op de oude site bij 1440, 1024, 768 en 375 px breed. */

:root {
  --bg: #faf7f2;
  --groen-donker: #3a6240;
  --mint: #83bfa5;
  --mint-kop: #72b59a;
  --roze: #f1b3b6;
  --geel: #edd56b;
  --bruin: #bb8044;
  --bruin-knop: #be8246;
  --navy: #344360;
  --navy-knop: #334261;
  --petrol: #355a5b;
  --petrol-donker: #20494d;
  --bos: #3c5540;
  --zand: #f1e3d5;
  --perzik: #ffa298;
  --tekst: #666;
  --raster: 1300px;
  --serif: "Libre Baskerville", Helvetica, Arial, sans-serif;
  --sans: "Libre Franklin", Helvetica, Arial, sans-serif;
}
@media (max-width: 1399px) { :root { --raster: 1100px; } }
@media (max-width: 1199px) { :root { --raster: 950px; } }
@media (max-width: 1024px) { :root { --raster: 768px; } }
@media (max-width: 768px)  { :root { --raster: 600px; } }
@media (max-width: 680px)  { :root { --raster: 420px; } }
@media (max-width: 480px)  { :root { --raster: 300px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--tekst);
  font-family: var(--serif); font-size: 14px; font-weight: 300; line-height: 28px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h3, h4, h6 { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
.raster { width: var(--raster); max-width: 100%; margin: 0 auto; position: relative; }

/* ---------- laadscherm (zoals de oude site: wit met drie gele bolletjes) ---------- */
.loader { display: none; }
.js .loader {
  display: flex; position: fixed; inset: 0; z-index: 9999; background: #fff;
  align-items: center; justify-content: center; transition: opacity .6s ease, visibility 0s linear .6s;
}
.js.geladen .loader { opacity: 0; visibility: hidden; }
.js.vertrek .loader { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.loader-golf { display: flex; gap: 6px; }
.loader-golf span { width: 18px; height: 18px; border-radius: 50%; background: var(--geel); animation: golf 1.4s infinite ease-in-out both; }
.loader-golf span:nth-child(1) { animation-delay: -.32s; }
.loader-golf span:nth-child(2) { animation-delay: -.16s; }
@keyframes golf { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

/* ---------- kop desktop ---------- */
.kop { position: relative; height: 206px; }
.kop-logo { position: absolute; top: 89px; left: 50%; transform: translateX(-50%); width: 600px; height: 50px; }
.kop-logo img { display: block; width: 600px; height: auto; }
.kop-nav { position: absolute; top: 160px; left: 0; right: 0; text-align: center; }
.kop-nav ul { display: inline-flex; }
.kop-nav a { display: block; padding: 0 15px 0 16px; }
.kop-nav span {
  position: relative; display: block; padding-right: 2px;
  font-family: var(--serif); font-size: 16px; font-weight: 500; line-height: 32px; letter-spacing: .04em;
  color: var(--petrol); text-transform: lowercase;
}
.kop-nav span::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: transparent;
  transition: background-color .3s ease, width .25s ease;
}
.kop-nav a:hover span::after { width: 100%; background: var(--bruin); }
.kop-nav a.actief span::after { width: 100%; background: var(--mint); }

/* ---------- kop mobiel ---------- */
.mkop { display: none; position: relative; z-index: 50; }
.mkop-balk { height: 80px; }
.mkop::before { content: ""; position: absolute; inset: 0 0 auto; height: 80px; background: #fff; }
.mkop-knop {
  position: absolute; left: 0; top: 0; width: 48px; height: 79px; padding: 15px 0 0; margin: 0;
  border: 0; background: none; color: var(--bruin); cursor: pointer;
  display: flex; align-items: flex-start; justify-content: flex-start;
}
.mkop-knop svg { display: block; }
.mkop-logo { position: absolute; top: 25px; left: 50%; width: 140px; transform: translateX(calc(-50% + 10.5px)); }
.mkop-logo img { display: block; width: 140px; }
.mnav {
  position: absolute; left: 0; right: 0; top: 79px; background: #fff; overflow: hidden;
  max-height: 0; visibility: hidden; transition: max-height .4s ease, visibility 0s linear .4s;
}
.mnav.open { max-height: 400px; visibility: visible; border-bottom: 1px solid transparent; transition: max-height .4s ease; }
.mnav ul { padding-bottom: 50px; }
.mnav::after { content: ""; display: block; height: 27px; }
.mnav a {
  display: block; padding: 9px 0 9px 4px; border-bottom: 1px solid #e1e1e1;
  font-family: var(--serif); font-size: 14px; line-height: 24px; letter-spacing: .04em;
  color: var(--petrol); text-transform: lowercase; transition: color .2s ease-out;
}
.mnav li:last-child a { border-bottom: 0; }
.mnav a:hover, .mnav a.actief { color: var(--perzik); }
@media (max-width: 1024px) {
  .kop { display: none; }
  .mkop { display: block; }
}
@media (max-width: 450px) {
  .mkop-logo { top: 20px; width: 200px; transform: translateX(calc(-50% + 17.5px)); }
  .mkop-logo img { width: 200px; }
}

/* ---------- inhoud ---------- */
.inhoud-wrap { display: block; margin: 0 30px; }
.inhoud { max-width: 1000px; margin: 0 auto; padding-top: 40px; }
.pagina-about .inhoud { padding-top: 60px; }
.pagina-shop .inhoud { padding-top: 50px; }
.paginatitel { max-width: 1000px; height: 82px; margin: 0 auto; padding-top: 40px; }
.paginatitel h1 {
  font-family: var(--serif); font-size: 26.95px; font-weight: 600; line-height: 38px; letter-spacing: .005em;
  color: var(--mint-kop); text-transform: capitalize;
}
@media (max-width: 768px) {
  .pagina-about .inhoud { padding-top: 20px; }
}
@media (max-width: 450px) {
  .inhoud, .pagina-shop .inhoud { padding-top: 10px; }
}
.lopend a, .werk-tekst a { box-shadow: inset 0 -2px 0 0 var(--roze); }

/* ---------- metselwerk (Home en werkpagina's) ---------- */
.metselwerk { position: relative; }
.metselwerk::after { content: ""; display: block; clear: both; }
.metselwerk > * { float: left; }
.js .metselwerk { opacity: 0; transition: opacity .4s ease; }
.js .metselwerk.klaar { opacity: 1; }
.metselwerk.klaar > * { float: none; position: absolute; }

/* ---------- Home ---------- */
.werkraster { max-width: 1210px; margin: 0 auto; padding: 40px 60px 10px; }
.werkraster .metselwerk { margin: 0 -25px; }
.thumb { width: 33.33333%; padding: 2%; margin: 0 0 30px; }
.thumb-binnen { position: relative; overflow: hidden; }
.thumb img { display: block; width: 100%; }
.thumb-tekst {
  position: absolute; inset: 0; display: table; width: 100%; height: 100%; table-layout: fixed;
  padding: 20px 45px; opacity: 0; transition: opacity .3s ease-in-out;
}
.thumb-cel { display: table-cell; vertical-align: middle; }
.thumb h4 {
  font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: 38px; letter-spacing: .005em;
  text-transform: capitalize;
}
.thumb p { margin: 1px 0 10px; font-family: var(--sans); font-size: 12.6px; line-height: 23px; }
.thumb-pijl { display: block; margin: 3px 0 -5px; width: 25px; height: 40px; }
.thumb-link { position: absolute; inset: 0; z-index: 2; }
.thumb:hover .thumb-tekst, .thumb-binnen:focus-within .thumb-tekst { opacity: 1; }
.kleur-geel .thumb-tekst      { background: #edd56b; color: #3a6240; }
.kleur-steenrood .thumb-tekst { background: #df5f44; color: #edd56b; }
.kleur-zachtroze .thumb-tekst { background: #f1b3b6; color: #344360; }
.kleur-bruin .thumb-tekst     { background: #bb8044; color: #344360; }
.kleur-groen .thumb-tekst     { background: #3a6240; color: #f1b3b6; }
.kleur-navy .thumb-tekst      { background: #344360; color: #b3d08d; }
.kleur-grijs .thumb-tekst     { background: #eaede4; color: #df5838; }
.kleur-aqua .thumb-tekst      { background: #4baea9; color: #eaede4; }
.kleur-geen .thumb-tekst      { background: rgba(255, 255, 255, .85); color: #282828; }
@media (max-width: 1024px) and (min-width: 769px) {
  .pagina-home .inhoud-wrap { margin: 0; }
  .werkraster { padding: 40px 40px 10px; }
}
@media (max-width: 1024px) {
  .werkraster .metselwerk { margin: 0 -15px; }
  .thumb { width: 50%; }
}
@media (max-width: 768px) {
  .werkraster { max-width: none; padding: 60px 30px 0; }
  .inhoud-wrap { padding-bottom: 30px; }
}
@media (max-width: 680px) {
  .thumb { width: 100%; }
}
@media (max-width: 450px) {
  .werkraster { padding-top: 30px; }
}

/* ---------- werkpagina ---------- */
.werk { padding-bottom: 85px; }
.werk-info { display: flex; margin: 0 -30px; }
.werk-velden { width: 16.66667%; padding: 0 30px; }
.werk-tekst { width: 83.33333%; padding: 0 30px 12px; }
.werk-velden p { margin: 0; font-family: var(--serif); font-size: 16px; font-weight: 500; line-height: 22.4px; color: var(--bos); }
.werk-velden span { font-size: 15px; font-weight: 700; text-transform: uppercase; }
.werk-tekst p { margin: 0; font-family: var(--sans); font-size: 14px; line-height: 23px; color: var(--bos); }
.werk hr { height: 1px; margin: 30px 0; border: 0; background: var(--zand); }
.werk-beelden { margin: 0 -15px; }
.werk-beeld { width: 50%; padding: 0 15px; margin: 0 0 30px; }
.werk-beeld img { display: block; width: 100%; }
.werk-nav { position: relative; display: flex; justify-content: space-between; align-items: center; margin-top: 88px; min-height: 56px; }
.werk-nav a { display: flex; align-items: center; color: var(--tekst); transition: color .2s ease; }
.werk-nav a:hover { color: var(--bruin); }
.werk-volgende { text-align: right; margin-left: auto; }
.werk-pijl { flex: none; width: 44px; height: 70px; margin: -21px 19px -21px 0; }
.werk-volgende .werk-pijl { margin: -21px 0 -21px 19px; }
.werk-nav-tekst { display: block; }
.werk-nav-label { display: block; font-family: var(--serif); font-size: 25px; font-weight: 600; line-height: 28px; }
.werk-nav-titel { display: block; font-size: 16px; line-height: 28px; }
.werk-terug { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.werk-terug a { color: #c28546; }
.werk-terug svg { display: block; }
@media (max-width: 1024px) {
  .werk-info { display: block; margin: 0; }
  .werk-velden, .werk-tekst { width: auto; padding-left: 0; padding-right: 0; }
  .werk-tekst { padding-top: 30px; }
}
@media (max-width: 680px) {
  .werk-beeld { width: 100%; }
}
@media (max-width: 450px) {
  .werk-velden p { margin: 5px 0 0; }
  .werk-tekst { padding-top: 10px; }
  .werk-nav { align-items: flex-start; }
  .werk-nav a { display: block; }
  .werk-pijl, .werk-volgende .werk-pijl { display: block; width: 22px; height: 35px; margin: -6.5px 0; }
  .werk-volgende .werk-pijl { margin-left: auto; }
  .werk-volgende a { display: flex; flex-direction: column-reverse; align-items: flex-end; }
  .werk-nav-label { font-size: 18px; line-height: 22px; }
  .werk-nav-titel { line-height: 22px; }
}

/* ---------- About ---------- */
.about-rij, .about-lijsten { display: flex; margin: 0 -15px; }
.about-beeld { width: 66.66667%; padding: 0 15px; text-align: center; }
.about-portret img { display: block; width: 600px; margin: 0 auto; }
.about-galerij { display: flex; max-width: 600px; margin: 32px auto 0; }
.about-galerij > div { width: calc(50% + 15px); flex: none; padding: 0 15px; margin: 0 0 30px; }
.about-galerij > div:first-child { margin-left: -15px; }
.about-galerij > div:last-child { margin-right: -15px; }
.about-galerij img { display: block; width: 100%; }
.about-tekst { width: 33.33333%; padding: 0 15px; color: var(--petrol-donker); overflow-wrap: anywhere; }
.about-tekst h3 {
  margin: 0 0 26.95px; font-family: var(--serif); font-size: 26.95px; font-weight: 600; line-height: 38px;
  letter-spacing: .005em; text-transform: capitalize;
}
.about-tekst p { margin: 10px 0; font-family: var(--sans); font-size: 14px; line-height: 23px; }
.about-tekst h3 + p { margin-top: 0; }
.about-tekst p:last-child { margin-bottom: 0; }
.lijn-geel { height: 1px; border-top: 1px solid var(--geel); }
.about-lijsten > div { width: 25%; padding: 0 15px; overflow-wrap: anywhere; }
.about-lijsten h4 {
  margin: 40px 0 15px; font-family: var(--serif); font-size: 15px; font-weight: 600; line-height: 19.5px;
  letter-spacing: .01em; color: var(--petrol-donker);
}
.about-lijsten strong { font-weight: 900; }
.about-lijsten li { font-family: var(--sans); font-size: 14px; line-height: 30px; color: var(--petrol); }
.lijn-stip { height: 1px; margin-top: 15px; border-top: 1px dotted #fff; }
@media (max-width: 1024px) {
  .about-lijsten h4 { font-size: 25px; line-height: 32.5px; }
}
@media (max-width: 767px) {
  .about-rij, .about-lijsten { display: block; margin: 0; }
  .about-beeld, .about-tekst, .about-lijsten > div { width: auto; padding: 0; }
  .about-portret img { width: 100%; }
  .about-tekst { margin-top: 35px; }
}
@media (max-width: 450px) {
  .pagina-about .inhoud { padding-top: 20px; }
  .about-galerij { display: block; max-width: none; }
  .about-galerij > div, .about-galerij > div:first-child, .about-galerij > div:last-child { width: auto; padding: 0; margin: 0 0 30px; }
  .about-galerij img { width: 300px; }
  .about-tekst { margin-top: 0; }
  .lijn-geel { margin: 50px 0; }
  .lijn-stip { margin: 65px 0 50px; }
  .about-lijsten h4 { margin: 0 0 15px; font-size: 23px; line-height: 30px; }
}

/* ---------- shop ---------- */
.shop { padding-bottom: 50px; text-align: center; }
.shop-rij { display: flex; }
.shop-rij-2 .shop-item { width: 50%; }
.shop-rij-3 .shop-item { width: 33.33333%; }
.shop-gap-25 { margin: 0 -12.5px; }
.shop-gap-10 { margin: 0 -5px; }
.shop-gap-25 .shop-item { padding: 12.5px 27.5px; }
.shop-gap-10 .shop-item { padding: 5px 20px; }
.shop-beeld { display: block; border: 5px solid transparent; transition: border-color .2s ease; }
.shop-beeld:hover { border-color: #eaede4; }
.shop-beeld img { display: block; width: 100%; }
.shop-tekst { margin: 0 0 20px; }
.shop-tekst h4 { margin: 10px 0 0; font-family: var(--serif); font-size: 15px; font-weight: 600; line-height: 21px; letter-spacing: .005em; color: var(--bruin); }
.shop-tekst p { margin: 0; font-family: var(--sans); font-size: 14px; line-height: 23px; color: #586379; }
.shop-slot { padding: 0 15px; }
.lijn-zand { height: 1px; margin: 50px 0; border-top: 1px solid var(--zand); }
.cta { display: flex; align-items: center; }
.cta-tekst { width: 75%; font-family: var(--sans); font-size: 14px; line-height: 28px; }
.cta-knop { width: 25%; text-align: right; }
.knop {
  display: inline-block; padding: 14px 46px; font-family: var(--serif); font-size: 12px; font-weight: 600;
  line-height: 24px; letter-spacing: 1.2px; text-transform: uppercase; color: #fff; background: var(--petrol);
  transition: background-color .2s ease-out, color .2s ease-out;
}
.knop-geel { background: var(--geel); }
.knop-geel:hover { background: var(--bruin-knop); }
@media (max-width: 1024px) {
  .cta { display: block; }
  .cta-tekst, .cta-knop { width: auto; }
  .cta-knop { margin-top: 28px; text-align: left; }
}
@media (max-width: 768px) {
  .pagina-shop .inhoud { padding-top: 40px; }
}
@media (max-width: 767px) {
  .shop-rij { display: block; }
  .shop-rij .shop-item { width: auto; }
}
@media (max-width: 450px) {
  .lijn-zand { margin: 100px 0; }
  .pagina-shop .inhoud { padding-top: 10px; }
}

/* ---------- Say hello ---------- */
.formulier { padding: 40px; background: var(--mint); }
.formulier p { margin: 0; font-family: var(--sans); font-size: 14px; line-height: 23px; color: #fff; }
.formulier label { display: block; }
.formulier input, .formulier textarea {
  display: block; width: 100%; height: 54px; margin: 0 0 15px; padding: 12px 20px; border: 0; border-radius: 0;
  background: #fff; color: var(--tekst); font-family: var(--sans); font-size: 12px; font-weight: 300; line-height: 30px;
  outline: 0; -webkit-appearance: none; appearance: none;
}
.formulier textarea { height: 324px; resize: vertical; }
.formulier input:focus, .formulier textarea:focus { box-shadow: inset 0 0 0 2px var(--groen-donker); }
.verstuur {
  display: inline-block; height: 54px; padding: 14px 46px; border: 1px solid transparent; border-radius: 0; cursor: pointer;
  background: var(--navy-knop); color: #fff; font-family: var(--sans); font-size: 12px; font-weight: 600;
  line-height: 24px; letter-spacing: 1.2px; text-transform: uppercase; transition: background-color .2s ease-out;
}
.verstuur:hover { background: var(--bruin-knop); }
.verstuur:disabled { opacity: .6; cursor: default; }
.formulier-melding { margin: 20px 0 0; padding: 8px 16px; border: 2px solid #fff; color: #fff; font-family: var(--sans); line-height: 23px; }
.formulier-melding.fout { border-color: #ffb900; }
.formulier .ongeldig { box-shadow: inset 0 0 0 2px #df5f44; }
.bedankt { margin: 0 0 10px; font-family: var(--sans); color: var(--bos); }
.bedankt a { box-shadow: inset 0 -2px 0 0 var(--roze); }
@media (max-width: 450px) {
  .formulier { padding-bottom: 71px; } /* oude site: spinner van het formulier valt hier op een eigen regel */
}

/* ---------- 404 ---------- */
.pagina-404 .inhoud-wrap { margin: 0; padding: 0; }
.pagina-404 .voet { margin-top: 0; }
.niet-gevonden {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; padding: 0 20%; text-align: center; color: var(--petrol-donker);
}
.niet-gevonden h1 { font-family: var(--serif); font-size: 60px; font-weight: 700; line-height: 78px; letter-spacing: -.02em; color: var(--petrol); }
.niet-gevonden h3 { margin: 6px 0 0; font-size: 35px; font-weight: 600; line-height: 45.5px; letter-spacing: -.02em; }
.niet-gevonden p { margin: 29px 0 0; font-family: var(--sans); line-height: 23px; }
.knop-groot { margin-top: 41px; padding: 14px 66px; background: #282828; }
.knop-groot:hover { background: var(--bruin-knop); }
@media (max-width: 680px) { .niet-gevonden { padding: 0 30px; } .niet-gevonden h3 { font-size: 26px; line-height: 34px; } }

/* ---------- footer ---------- */
.voet { margin-top: 50px; }
.voet-top { background: var(--groen-donker); }
.voet-top .raster { padding: 38px 0; }
.voet-rij { display: flex; }
.voet-kol { width: 33.33333%; padding: 0 15px; }
.voet-rij { margin: 0 auto; }
.voet-top .raster { width: calc(var(--raster) + 30px); padding-left: 0; padding-right: 0; }
.voet .widget { margin-bottom: 30px; }
.voet .widget:last-child { margin-bottom: 0; }
.voet h6 {
  margin: 0 0 2px; font-family: var(--serif); font-size: 14px; font-weight: 500; line-height: 18.2px;
  letter-spacing: .005em; color: #fff; text-transform: capitalize;
}
.voet .widget p { margin: 0; font-family: var(--sans); font-size: 13px; line-height: 23px; color: #fff; }
.voet .widget a, .voet-social a { color: #fff; transition: color .2s ease; }
.voet .widget a:hover, .voet-social a:hover { color: var(--roze); }
.voet-social { padding-top: 15px; line-height: 0; }
.voet-social a { display: inline-block; vertical-align: top; }
.voet-social a + a { margin-left: 14px; }
.voet-social svg { display: block; }
.voet-onder { background: var(--roze); }
.voet-onder .raster { padding: 16px 0; }
.voet-onder p { margin: 0; font-family: var(--sans); font-size: 11px; line-height: 16.5px; color: var(--navy); text-align: center; }
@media (max-width: 680px) {
  .voet-rij { display: block; }
  .voet-kol { width: auto; }
  .voet-kol + .voet-kol { margin-top: 30px; }
}

/* ---------- naar boven ---------- */
.naar-boven {
  position: fixed; right: 20px; bottom: 20px; z-index: 40; display: flex; align-items: center; justify-content: center;
  width: 37px; height: 37px; border-radius: 50%; background: var(--bruin-knop); color: #fff;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s, background-color .2s ease;
}
.naar-boven.zichtbaar { opacity: 1; visibility: visible; transition: opacity .3s ease, background-color .2s ease; }
.naar-boven:hover { background: var(--geel); }
.naar-boven svg { display: block; }

/* ---------- beelden zacht infaden als ze geladen zijn ---------- */
.js img.fade { opacity: 0; transition: opacity .5s ease; }
.js img.fade.binnen { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}