/* =========================
   LEVEND NAK — STABIELE BASIS CSS (RESET)
   Datum: 2025-10-25
   Doel: rustig, scriptloos, midden-midden.
   ========================= */

/* 0) Basis */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }

html {
  overflow-y: scroll;   /* reserveer altijd ruimte voor de scrollbar */
}

:root{
  --maxw: 1080px;
  --radius: 18px;
  ...
  --shadow: 0 8px 30px rgba(0,0,0,.08);
  --veil: rgba(255,255,245,.22);       /* zachte sluier */
  --card-bg: rgba(255,255,245,.78);    /* glas/kaart */
  --ink: #1a1a1a;
  --ring: rgba(0,0,0,.08);
}
body{
  font-family: "Cormorant Garamond", Georgia, serif;
  color: var(--ink);
  position: relative;
}
img {
  image-rendering: auto;
  loading: lazy;
}

/* 1) Achtergrond (eik) + sluier */
body::after{
  content:"";
  position:fixed; inset:0; z-index:-2;
  background-image: image-set(
  url('../assets/oude-eik-mobiel.jpg') 1x,
  url('../assets/oude-eik.jpg') 2x
);
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
}

/* Sluier over de eik – zacht en leesbaar */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(255,255,245,.33);  /* iets sterker sluier */
  backdrop-filter: blur(3px);         /* zachtere mist over beeld */
  pointer-events: none;
}

/* 2) Header */
.site-header{ text-align:center; padding: 2.25rem 1rem 1rem; }
.site-title{ margin:0; letter-spacing:.02em; font-weight:700; font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.3rem); }
.site-sub{ margin:.35rem 0 0; opacity:.85; font-size: clamp(1rem, .9rem + .35vw, 1.1rem); }

/* 3) Chips-menu */
.chips{ display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center; padding:.75rem 1rem 1.25rem; }
.chips a{
  display:inline-block; text-decoration:none;
  color:#222; padding:.5rem .85rem; border-radius:999px;
  background: rgba(255,255,255,.68); border:1px solid rgba(0,0,0,.06);
  backdrop-filter: blur(6px);
  transition: transform .08s ease, box-shadow .12s ease;
}
.chips a[aria-current="page"]{ color:#fff; background: rgba(0,0,0,.72); border-color: transparent; }
.chips a:hover{ transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.chips a:focus-visible{ outline:none; box-shadow: 0 0 0 4px var(--ring); }

/* 4) Midden-midden lay-out (één verantwoordelijk blok) */
main.container,
main#inhoud{
  /* groep centraal in beeld */
  display: grid;
  grid-auto-rows: max-content;
  justify-items: center;        /* X-as */
  align-content: center;        /* Y-as */
  min-height: 78vh;

  /* breedte en adem */
  max-width: var(--maxw);
  margin-inline: auto;
  gap: 1.8rem;
  padding: 0 1rem;
}

/* 5) Kaarten & tegels */
.card, .tile{
  background: var(--card-bg);
  border:1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow);
}
.card{ padding: 1.1rem 1rem; }
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  width: 100%;
}
.tile{ padding: 1rem; }

/* 6) Typografie & knoppen */
h2{ margin:.2rem 0 .6rem; font-weight:700; }
h3{ margin:.2rem 0 .4rem; font-style: italic; }
p{ color:#2a2a2a; }
a{ color:#5a3dc7; }
a:hover{ text-decoration: underline; }
.btn{
  display:inline-block; margin-top:.35rem; padding:.55rem .9rem;
  border-radius:12px; border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.82); text-decoration:none; color:#222;
  transition: transform .08s ease, box-shadow .12s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.btn:focus-visible{ outline:none; box-shadow: 0 0 0 4px var(--ring); }

/* 7) Footer */
.site-footer{ text-align:center; padding: 1.25rem 0 2rem; opacity:.85; }

/* 8) Media: mobiel rust */
@media (max-width: 900px){
  .chips{ padding-bottom: .75rem; }
  main.container, main#inhoud{ min-height: 76vh; gap: 1.4rem; }
}
img,svg,video{ max-width:100%; height:auto; display:block; }


/* Interne ankerlinks in inhoudsblok */
.card a {
  color: #222;              /* zachte tekstkleur */
  text-decoration: none;    /* geen standaard onderstreping */
  font-weight: 500;
  transition: color 0.2s ease;
}

.card a:hover {
  color: #4c713d;           /* subtiele groene tint bij hover */
  text-decoration: underline;
}
/* --- NAV-CLICK FIX (alleen index had last) --- */
.site-header { position: relative; z-index: 1000; }
.chips { position: relative; z-index: 1001; }

/* Zorg dat eventuele overlays (hero/sluiers) geen klikken blokkeren */
.hero, .cover, .eik-sluier, .backdrop { position: relative; z-index: 1; }
.hero::before, .cover::before, .eik-sluier::before, .backdrop::before { pointer-events: none; }

/* Voor de zekerheid: nav-knoppen zelf altijd klikbaar */
.chips .chip { pointer-events: auto; }

/* --- NAV POLISH (Levend Nak) --- */
.chips { display:flex; gap:.5rem; flex-wrap:wrap; }
.chip {
  display:inline-block; padding:.5rem .9rem; border-radius:9999px;
  background:rgba(255,255,255,.45); text-decoration:none; font-weight:600;
  border:1px solid rgba(0,0,0,.08); transition:transform .08s ease, background .2s ease;
}
.chip:hover { background:rgba(255,255,255,.6); transform:translateY(-1px); }
.chip.active, .chip[aria-current="page"] {
  background:rgba(76,113,61,.15); border-color:rgba(76,113,61,.35);
}
/* Toetsenbordtoegankelijkheid */
.chip:focus-visible {
  outline:2px solid rgba(76,113,61,.6); outline-offset:2px;
}
.chip:hover { background:rgba(255,255,255,.6); transform:translateY(-1px); }
.chip.active, .chip[aria-current="page"] {
  background:rgba(76,113,61,.15); border-color:rgba(76,113,61,.35);
}
.chip:focus-visible {
  outline:2px solid rgba(76,113,61,.6); outline-offset:2px;
}
/* --- TYPO & CARD POLISH (Levend Nak) --- */

/* Rustigere leesmaat */
.page p { line-height: 1.65; }
.page li { line-height: 1.6; }

/* Koppen iets duidelijker, maar zacht */
.page h2 { font-size: 1.35rem; line-height: 1.25; margin: 0 0 .6rem; }
.page h3 { font-size: 1.05rem; line-height: 1.35; margin: .4rem 0 .4rem; }

/* Kaarten: lucht & balans */
.page .card { 
  margin: 1rem auto;           /* adem tussen kaarten */
  padding: 1rem 1.25rem;       /* iets ruimer binnenkader */
  border-radius: 14px;
}

/* Lijsten iets netter en zachter */
.page ul, .page ol { margin: .5rem 0 .75rem 1.25rem; }
.page li + li { margin-top: .25rem; }

/* Citaten zachter */
.page blockquote {
  margin: .6rem 0;
  padding: .6rem .9rem;
  border-left: 3px solid rgba(76,113,61,.35);
  background: rgba(255,255,255,.42);
  border-radius: 10px;
  font-style: italic;
}

/* Anker-klik: spring niet onder de header */
[id] { scroll-margin-top: 6rem; }

/* Volgende-stap kaart iets lichter */
.next-link { background: rgba(255,255,255,.38); }
.next-link a { font-weight: 600; }

/* ---- TOC navigatie en soepel scrollen ---- */
html {
  scroll-behavior: smooth;
}
section[id] {
  scroll-margin-top: 6rem; /* voorkomt dat koppen onder de header vallen */
}
.card.glass.toc a {
  color: inherit;           /* neem de gewone tekstkleur over */
  text-decoration: none;
}
.card.glass.toc a:visited {
  color: inherit;           /* voorkom paars/anders bij bezochte links */
}
.card.glass.toc a:hover {
  text-decoration: underline;
}

/* voeg deze er direct onder toe */
.card.glass.toc {
  margin-bottom: 2rem; /* extra ademruimte onder de inhoudskaart */
}
.card.glass.toc a:hover {
  text-decoration: underline;
}

/* — Kaarten “luchtiger”: niet meer schermbreed, mooi gecentreerd — */
.page .card {
  /* maximaal 980px breed, met 1rem marge links/rechts op kleine schermen */
  width: min(100% - 2rem, 980px);
  margin-left: auto;
  margin-right: auto;
}

/* Inhoudsopgave net iets compacter */
.page .card.toc {
  width: min(100% - 2rem, 900px);
}

/* Optioneel: één kaart extra breed laten gaan -> voeg class="card glass wide" in HTML */
.page .card.wide {
  width: min(100% - 2rem, 1120px);
}

/* Subtiel speels effect: kaarten liften 2px bij hover (geen gekkigheid) */
.card.glass {
  transition: transform .18s ease, box-shadow .18s ease;
}
.card.glass:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0,0,0,.08);
}

.subtitle.center-text p {
  font-size: 1rem;
  opacity: 0.8;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* Anti-flash fallback-kleur op HTML (BODY blijft transparant) */
html { background-color: #0f1a12; }

/* --- ZERO FLICKER: geen page-fade, alles direct zichtbaar --- */
main.page {
  animation: none !important;
  opacity: 1 !important;
}

/* -- Knoppenstijl voor "Ga naar Moestuin" en "Ga naar Boomgaard" -- */
a.chip {
  display: inline-block;
  background: rgba(255,255,255,0.8);
  color: #000;
  font-weight: 500;
  text-decoration: none;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  transition: all 0.2s ease;
}

a.chip:hover {
  background: rgba(76,113,61,0.25); /* zelfde zachte hover als andere knoppen */
  text-decoration: none;
  color: #000;
}

.card img {
  box-shadow: 0 0 12px rgba(0,0,0,0.3);
  background-color: #fdfcf9;
}

/* ===== Universele header en navigatiehoogte ===== */
header.site-header {
  margin: 0 auto 0.5rem;
  text-align: center;
  padding: 1.2rem 0 0.6rem;
}

.site-title { margin: 0; line-height: 1.1; }
.site-sub { margin: 0.25rem 0 0; opacity: 0.8; }

/* Navigatie altijd met vaste marge onder de header */
nav.chips {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin: 0 auto 12px;  /* geen vh of negatieve offset meer */
}

/* ===== Universele header en navigatiehoogte ===== */
header.site-header {
  margin: 0 auto 0.5rem;
  text-align: center;
  padding: 1.2rem 0 0.6rem;
}

/* === Header + navigatie overal identiek (home = subpagina) === */
header.site-header{
  text-align: center;
  padding: 24px 16px 12px;   /* vaste ruimte boven/onder */
  margin: 0 auto;
}
.site-title{ margin:0; line-height:1.05; }

/* subtitel: of het nu .site-subtitle (moestuin) of .site-sub (home) is */
.site-subtitle,
.site-sub{
  display:block;
  margin:10px 0 0;           /* vaste afstand tot titel */
  line-height:1.25;
  opacity:.85;
  font-size: clamp(1rem, .9rem + .35vw, 1.1rem);
}

/* main binnen normale flow; geen top/translate hacks */
main#inhoud.container{
  position: static;
  min-height: initial;
  max-width: var(--maxw);
  margin: 0 auto 2rem;
  gap: 1.6rem;
  padding: 0 1rem;
  display: grid;
  grid-auto-rows: max-content;
  justify-items: center;
}

/* === Zelfde hoofdbreedte & uitlijning voor alle pagina's === */
main#inhoud.container,
main#content.page,
main.page,
#inhoud.container,
#content.page {
  max-width: var(--maxw);
  margin: 0 auto 2rem;
  padding: 0 1rem;
  display: grid;
  grid-auto-rows: max-content;
  justify-items: center;
  gap: 1.6rem;
  width: 100%;
  box-sizing: border-box;
}

/* zekerheidje: .page mag nooit een vaste breedte forceren */
.page { width: auto; }

/* tegels/grids volgen de main-breedte */
section.grid { width: 100%; }

.card img {
  box-shadow: 0 0 12px rgba(0,0,0,0.3);
  background-color: #fdfcf9;
}

/* 🌿 Universele stijl voor afbeeldingen in kaarten */
.card figure {
  background-color: #fdfcf9;            /* zacht crème binnenkader */
  padding: 12px;
  border-radius: 18px;
  box-shadow: 0 0 10px rgba(0,0,0,0.25);
  margin-bottom: 2rem;
}

.card img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

/* 📱 Zorgt dat ze op mobiel goed schalen */
@media (max-width: 768px) {
  .card figure {
    padding: 8px;
  }
  .card img {
    border-radius: 10px;
  }
}

/* --- FOTO-KADERS: altijd responsief en volle breedte --- */
.card figure {
  width: 100%;
  display: block;         /* niet inline-block */
  margin: 0 0 2rem 0;     /* ritme tussen kaarten */
}

.card figure > img {
  width: 100%;
  height: auto;
  display: block;
}

/* optioneel: op heel smalle schermen iets minder padding in het kader */
@media (max-width: 640px) {
  .card figure { padding: 10px; }  /* laat je huidige kleur/box-shadow gewoon staan */
}

/* --- Harmoniseer fotokaders over alle pagina's --- */
.card figure,
section.card figure {
  width: 100%;
  display: block;
  margin: 1.5rem 0;
}

.card figure img,
section.card figure img {
  width: 100%;
  height: auto;
  border-radius: 1rem;     /* zelfde afronding overal */
  display: block;
}

/* Zorg dat figcaptions visueel consistent blijven */
.card figure figcaption,
section.card figure figcaption {
  text-align: center;
  font-style: italic;
  margin-top: 0.5rem;
  color: #2b2b2b;
}

/* Uniforme figure-styling binnen kaarten */
.card.glass figure {
  display: block;
  margin: 1.5rem 0;
}
.card.glass figure > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}
.card.glass figure > figcaption {
  text-align: center;
  font-style: italic;
  margin-top: .5rem;
  opacity: .85;
}