/* ══════════════════════════════════════════════════════════
   GROEIKAMER THEMA — gedeeld aquarel-ontwerpkader
   Link dit bestand NA de paginaspecifieke <style>-blokken,
   vlak vóór </head>, zodat het thema wint van legacy-regels.
   Vereiste assets naast dit bestand:
   gk_papier_tegel.png · gk_bg_hero.png · gk_bg_mid.png
   gk_bg_golf.png · gk_qr_web.png · logo-mos-transparant.png
   ══════════════════════════════════════════════════════════ */

:root{
  --papier:#F5E8DB;--kaart:#FBF5EA;
  --mos:#6F7D6A;--mos-dk:#3F4A3C;--golf:#4F5B3A;
  --indigo:#3D405B;--terra:#E07A5F;--terra-lt:#F6E0D4;
  --bark:#3F4A3C;--inkt:#3F4A3C;
  --rand:rgba(63,74,60,.12);
  /* legacy-aliassen: oude paginastijlen kleuren warm mee */
  --moss:#6F7D6A;--moss-mid:#8A9D85;--moss-lt:#DCE3D5;--moss-xlt:#EDEFE4;--moss-dk:#3F4A3C;
  --ocher:#8A9D85;--ocher-lt:#EDEFE4;--ocher-dk:#6F7D6A;
  --cream:#FBF5EA;--cream-dk:#EDE3D2;--grijs:#DACFBE;
  --text:#4A5547;--tekst:#4A5547;--muted:#7A8880;
  --border:rgba(63,74,60,.16);
}

/* ── Papier + verf op de body (nooit clippen!) ── */
body{
  font-family:'Inter',sans-serif;color:var(--text);
  padding:0;position:relative;
  background:url('gk_bg_hero.png') top center/100% auto no-repeat,
             url('gk_papier_tegel.png') repeat var(--papier);
}
@media(max-width:720px){body{background-size:150% auto,auto}}

/* papierkorrel over alles */
body::after{content:'';position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.06;mix-blend-mode:multiply;
  background-image:radial-gradient(rgba(63,74,60,.9) .5px,transparent .5px);background-size:4px 4px}

/* ── Aquarel-middenlagen: volle breedte, als BODY-kinderen ── */
.art-mid{position:absolute;left:0;right:0;pointer-events:none;z-index:0;
  aspect-ratio:941/515;background:url('gk_bg_mid.png') center/100% 100% no-repeat}
.art-mid.flip{transform:scaleX(-1)}
.page-inner{position:relative;z-index:1}

/* ── NAV (gedeeld) ── */
nav{position:absolute;top:0;left:0;right:0;z-index:100;height:auto;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 4vw;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none;
  background:linear-gradient(to bottom,rgba(245,232,219,.92) 40%,rgba(245,232,219,0))}
.nav-logo{flex-shrink:0;display:flex;align-items:center;text-decoration:none}
.nav-logo img{height:64px !important;width:auto;object-fit:contain;display:block}
.nav-links{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav-links li{list-style:none}
.nav-links a{display:block;padding:8px 15px;border-radius:100px;font-size:14.5px;font-weight:600;
  color:var(--mos-dk);text-decoration:none;transition:background .2s,color .2s;background:transparent}
.nav-links a:hover{background:rgba(63,74,60,.08);color:var(--mos-dk)}
.nav-links a.active{background:rgba(63,74,60,.12);color:var(--mos-dk)}
.nav-links a[href="portaal-login.html"]{border:1.5px solid rgba(63,74,60,.35);margin-left:6px}
.nav-divider{display:none}
.nav-cta{display:none}
.burger{display:none;background:none;border:none;font-size:24px;cursor:pointer;color:var(--mos-dk);
  position:static;right:auto;padding:4px 10px}
.gk-afmeld{align-self:center}
@media(max-width:900px){
  .burger{display:block}
  .nav-links{display:none;position:absolute;top:100%;left:12px;right:12px;
    flex-direction:column;align-items:stretch;gap:2px;padding:14px;
    background:var(--kaart);border:1px solid var(--rand);border-radius:18px;
    box-shadow:0 24px 60px rgba(46,54,40,.18)}
  nav.open .nav-links{display:flex}
  .nav-links a{padding:11px 16px}
  .nav-links a[href="portaal-login.html"]{margin-left:0;margin-top:6px;text-align:center}
}

/* ── PAGE-HEADER: titel over de tuinkamerfoto ── */
.page-header{background:transparent !important;position:relative;overflow:visible;
  min-height:53vw;padding:26vw 5vw 3vw}
.page-header::before,.page-header::after{display:none}
.page-header-inner{max-width:1100px;margin:0 auto;display:block;position:relative;z-index:2}
.page-header .breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:16px;font-size:13px}
.page-header .breadcrumb,.page-header .breadcrumb a{color:rgba(251,245,234,.88) !important;
  text-decoration:none;text-shadow:0 1px 10px rgba(40,48,36,.5)}
.page-header .breadcrumb span{color:rgba(251,245,234,.55) !important}
.page-header h1{font-family:'Cormorant Garamond',serif !important;font-weight:600;
  font-size:clamp(38px,5.6vw,84px);letter-spacing:.5px;line-height:1.05;
  color:#FBF5EA !important;text-shadow:0 2px 26px rgba(40,48,36,.55),0 1px 3px rgba(40,48,36,.4);
  margin-bottom:14px}
.page-header h1 em{font-style:italic;color:#FBF5EA !important}
.page-header p,.page-header .page-header-sub{font-size:16.5px;line-height:1.55;max-width:540px;
  color:var(--mos-dk) !important;background:rgba(251,245,234,.66);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(251,245,234,.7);border-radius:16px;padding:12px 18px;display:inline-block}
.ph-acties{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px}
.gk-btn{display:inline-block;background:var(--mos);color:#fff;text-decoration:none;
  padding:13px 26px;border-radius:100px;font-weight:700;font-size:15px;
  box-shadow:0 10px 26px rgba(63,74,60,.28);transition:background .2s,transform .15s}
.gk-btn:hover{background:var(--mos-dk);transform:translateY(-1px)}
.gk-btn.terra{background:var(--terra);box-shadow:0 10px 26px rgba(224,122,95,.3)}
.gk-btn.terra:hover{background:#C4614A}
.gk-btn-licht{display:inline-block;background:rgba(251,245,234,.66);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:var(--mos-dk);text-decoration:none;padding:12px 22px;border-radius:100px;
  font-weight:700;font-size:14.5px;border:1.5px solid rgba(63,74,60,.25);transition:background .2s;cursor:pointer}
.gk-btn-licht:hover{background:rgba(251,245,234,.92)}
@media(max-width:720px){
  .page-header{min-height:0;padding:76vw 5vw 6vw}
  .page-header h1{color:var(--mos-dk) !important;text-shadow:none}
  .page-header .breadcrumb,.page-header .breadcrumb a{color:rgba(63,74,60,.6) !important;text-shadow:none}
  .page-header .breadcrumb span{color:rgba(63,74,60,.35) !important}
}

/* ── Sectietitels in serif, tags warm ── */
.section-title{font-family:'Cormorant Garamond',serif !important;font-weight:600;
  letter-spacing:.3px;color:var(--inkt)}
.section-tag{background:rgba(111,125,106,.16);color:var(--mos-dk)}

/* ── GOLF-FOOTER (gedeeld) ── */
footer.golf{position:relative;margin-top:-12vw;padding:43vw 5vw 34px;border:0;
  background:url('gk_bg_golf.png') top center/100% auto no-repeat,
             linear-gradient(var(--golf),var(--golf)) bottom center/100% calc(100% - 46vw) no-repeat;
  pointer-events:none}
.golf-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr auto;gap:36px;
  align-items:center;pointer-events:auto}
.golf-quote{font-family:'Caveat',cursive;font-size:clamp(26px,3vw,40px);line-height:1.15;
  color:#FBF5EA;transform:rotate(-3deg)}
.golf-info{display:flex;flex-direction:column;gap:10px;font-size:14.5px;color:rgba(251,245,234,.92)}
.golf-info a{color:rgba(251,245,234,.92);text-decoration:none}
.golf-info a:hover{text-decoration:underline;color:#FBF5EA}
.golf-rij{display:flex;align-items:center;gap:10px}
.golf-rij svg{width:16px;height:16px;flex-shrink:0;stroke:rgba(251,245,234,.85);fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.golf-qr-groep{display:flex;align-items:center;gap:16px}
.golf-qr-tekst{font-family:'Caveat',cursive;font-size:24px;color:#FBF5EA;line-height:1.1;text-align:right}
.golf-qr{background:#FBF5EA;border-radius:14px;padding:10px;box-shadow:0 10px 30px rgba(30,36,26,.35)}
.golf-qr img{display:block;width:86px;height:86px}
.golf-onder{max-width:1100px;margin:26px auto 0;padding-top:16px;border-top:1px solid rgba(251,245,234,.22);
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:12.5px;color:rgba(251,245,234,.65);pointer-events:auto}
.golf-onder a{color:rgba(251,245,234,.65);text-decoration:none}
.golf-onder a:hover{color:#FBF5EA}
.golf-links{display:flex;gap:16px;flex-wrap:wrap}
@media(max-width:860px){
  footer.golf{padding:50vw 5vw 28px}
  .golf-inner{grid-template-columns:1fr;gap:22px;justify-items:center;text-align:center}
  .golf-qr-tekst{text-align:center}
  .golf-onder{justify-content:center;text-align:center}
}