/* ==========================================================
   site.css — publieke look grotgelicht.nl
   Concept "de afdaling" (designvoorstel goedgekeurd 2026-07-18):
   boven daglicht op mergel, onder de donkere gang met lamplicht.
   Elke textTile-class heeft hier zijn vaste weergavestijl (A8):
   content en vormgeving blijven strikt gescheiden.
   ========================================================== */

:root{
  /* kleuren */
  --mergel:         #E7D9B6;   /* licht mergelgeel — bovengrond */
  --mergel-diep:    #D8C594;
  --oker:           #C9B380;
  --gang:           #211B13;   /* warm bruinzwart — ondergronds */
  --gang-wand:      #2C2418;
  --lamplicht:      #F0A93C;   /* carbid-amber accent */
  --houtskool:      #3A3126;   /* tekst op licht */
  --houtskool-zacht:#6B5F4D;
  --licht-op-donker:#E9DFC8;

  /* typografie */
  --f-display:'Marcellus', serif;
  --f-body:'Spectral', serif;
  --f-mono:'IBM Plex Mono', monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--f-body);
  font-weight:300;
  color:var(--houtskool);
  background:var(--mergel);
  line-height:1.7;
  font-size:1.06rem;
}

/* ---------------- navBar ---------------- */
.navBar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:baseline;gap:1.8rem;flex-wrap:wrap;
  padding:.85rem 5vw;
  background:color-mix(in srgb, var(--mergel) 92%, white);
  border-bottom:1px solid var(--oker);
}
.navBar .merk{
  font-family:var(--f-display);
  font-size:1.15rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--houtskool);text-decoration:none;margin-right:auto;
}
.navBar a{
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.06em;
  color:var(--houtskool-zacht);text-decoration:none;
  padding:.2rem 0;border-bottom:2px solid transparent;
}
.navBar a:hover,.navBar a:focus-visible{
  color:var(--houtskool);border-bottom-color:var(--lamplicht);outline:none;
}

/* ---------------- logoVeld (hero) ---------------- */
.logoVeld{
  position:relative;
  padding:14vh 5vw 10vh;
  text-align:center;
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(255,248,225,.85), transparent 70%),
    var(--mergel);
}
.logoVeld .siteTitel{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(2.6rem, 8vw, 5.4rem);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--houtskool);
}
.logoVeld .siteTitel .licht{color:#8A7440}

/* ---------------- stratigrafie-divider ----------------
   Dunne laagjes: de overgang van bovengrond naar gang.  */
.lagen{
  height:38px;border:0;display:block;
  background:linear-gradient(to bottom,
    var(--mergel) 0 12%,
    var(--mergel-diep) 12% 30%,
    var(--oker) 30% 44%,
    #8F7B50 44% 58%,
    #5E4E36 58% 74%,
    #3B3122 74% 88%,
    var(--gang) 88% 100%);
}

/* ---------------- secties ---------------- */
section{padding:5.5rem 5vw}
.kolom{max-width:46rem;margin-inline:auto}

.ondergronds{background:var(--gang);color:var(--licht-op-donker)}
.ondergronds .chapterTitle{color:var(--lamplicht)}
.ondergronds .subTextUnderChapter{color:#A99878}
.ondergronds .tag{border-color:#57492F;color:#C8B78E}
.ondergronds a{color:var(--lamplicht)}
.ondergronds figcaption{color:#A99878}

/* leeg blok (bijv. groeveNieuws zonder tiles) */
.leegBlok{
  border:1px dashed #57492F;border-radius:3px;
  padding:1.6rem;margin-top:1rem;
  font-family:var(--f-mono);font-size:.82rem;color:#A99878;
}

/* ==========================================================
   textTile-klassen — één vaste stijl per class (schema §4)
   ========================================================== */
.mainTitle{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(2rem,5vw,3rem);
  letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:.4rem;
}
.subtextUnderMain{
  margin-top:1.2rem;
  font-size:clamp(1rem, 2.2vw, 1.25rem);
  font-style:italic;
  color:var(--houtskool-zacht);
  max-width:38rem;margin-inline:auto;
}
.chapterTitle{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.1rem);
  letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:.4rem;
}
.subTextUnderChapter{
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.08em;
  color:var(--houtskool-zacht);margin-bottom:1.6rem;
}
.mainText{margin-bottom:1.1rem}
.tag{
  display:inline-block;font-family:var(--f-mono);font-size:.72rem;
  letter-spacing:.08em;padding:.15rem .6rem;
  border:1px solid var(--oker);border-radius:2px;
  color:var(--houtskool-zacht);margin:.15rem .25rem .15rem 0;
}

/* media binnen een tile */
.tileMedia{margin:1.4rem 0}
.tileMedia img,.tileMedia video{max-width:100%;border-radius:3px;display:block}
.tileMedia audio{width:100%}
.tileMedia figcaption{
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.06em;
  color:var(--houtskool-zacht);margin-top:.5rem;
}

/* ---------------- footer ---------------- */
footer{
  background:var(--gang);color:#7E7057;
  border-top:1px solid #3B3122;
  padding:2rem 5vw;text-align:center;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;
}

/* ---------------- stub-pagina's ("in aanbouw") ---------------- */
.stubMelding{
  min-height:40vh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:4rem 5vw;
}

@media (max-width:640px){
  .navBar{gap:1rem}
  section{padding:3.5rem 6vw}
}

/* ==========================================================
   groeves.html — kaartpagina (Ronde 3, deel 2)
   Zelfde concept: de kaart is het bovengrondse gezicht,
   de cavesList woont ondergronds.
   ========================================================== */
.paginaKop{
  padding:7vh 5vw 0;
  text-align:center;
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(255,248,225,.85), transparent 70%),
    var(--mergel);
}
.paginaIntro{padding-top:2rem;padding-bottom:2.5rem;text-align:center}

.kaartSectie{padding-top:0}
.kaartRand{
  max-width:68rem;margin-inline:auto;
  border:1px solid var(--oker);border-radius:3px;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 10px 30px rgba(58,49,38,.12);
  overflow:hidden;
}
#cavesKaart{height:min(62vh, 560px);background:var(--mergel-diep)}
.kaartOnderschrift{
  max-width:68rem;margin:.6rem auto 0;
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.06em;
  color:var(--houtskool-zacht);
}

/* Leaflet-onderdelen in de huisstijl */
.leaflet-container{font-family:var(--f-body)}
.cavesPopup{font-family:var(--f-body);color:var(--houtskool)}
.cavesPopupNaam{
  font-family:var(--f-display);font-size:1rem;
  letter-spacing:.08em;text-transform:uppercase;
}
.cavesPopupType{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;
  color:var(--houtskool-zacht);margin:.15rem 0 .35rem;
}
.cavesPopupTekst{font-size:.9rem;line-height:1.5}

/* cavesList (ondergronds) */
.cavesList{list-style:none;margin-top:.5rem}
.cavesListItem + .cavesListItem{margin-top:.6rem}
.cavesListKnop{
  width:100%;text-align:left;cursor:pointer;
  background:var(--gang-wand);color:var(--licht-op-donker);
  border:1px solid #57492F;border-radius:3px;
  padding:1rem 1.2rem;
  font-family:var(--f-body);font-size:1rem;line-height:1.5;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .8rem;
  transition:border-color .15s;
}
.cavesListKnop:hover,.cavesListKnop:focus-visible{
  border-color:var(--lamplicht);outline:none;
}
.cavesListNaam{
  font-family:var(--f-display);letter-spacing:.08em;text-transform:uppercase;
}
.cavesListSyn{
  font-style:italic;color:#A99878;font-size:.9rem;
}
.cavesListSub{
  margin-left:auto;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;
  color:#C8B78E;
}

@media (max-width:640px){
  #cavesKaart{height:55vh}
  .cavesListSub{margin-left:0;width:100%}
}

/* ==========================================================
   groeve_detail.html — detailpagina per groeve (Ronde 3, deel 3)
   ========================================================== */
.terugLink{margin-bottom:1.2rem}
.terugLink a{
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.08em;
  color:var(--houtskool-zacht);text-decoration:none;
  border-bottom:2px solid transparent;
}
.terugLink a:hover,.terugLink a:focus-visible{
  color:var(--houtskool);border-bottom-color:var(--lamplicht);outline:none;
}
.paginaKop .subtextUnderMain{margin-top:.6rem}

/* feitenrij (gebruik/geologie: korte feiten boven de tekst) */
.feitenRij{
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;
  margin:.4rem 0 1.4rem;
}
.feit{display:flex;flex-direction:column;gap:.1rem}
.feitEtiket{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;
  color:#A99878;
}
.feitWaarde{font-family:var(--f-display);font-size:1.05rem;letter-spacing:.04em}

/* deelblokken (ingangen, archiefstukken) */
.deelBlok{
  border:1px solid var(--oker);border-radius:3px;
  padding:1.2rem 1.4rem;margin-top:1rem;
}
.ondergronds .deelBlok{border-color:#57492F;background:var(--gang-wand)}
.deelKop{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;
  margin-bottom:.5rem;
}
.deelEtiket{
  font-family:var(--f-display);letter-spacing:.08em;text-transform:uppercase;
  font-size:.95rem;
}
.deelSub{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;
  color:var(--houtskool-zacht);
}
.ondergronds .deelSub{color:#A99878}
.deelBlok .mainText:last-child{margin-bottom:0}

/* tijdlijn: jaartal links als lichtpunt, inhoud rechts */
.tijdlijn{margin-top:.5rem}
.tijdlijnRij{
  display:flex;gap:1.4rem;
  padding:1.1rem 0;border-top:1px solid #3B3122;
}
.tijdlijnRij:first-child{border-top:0}
.tijdlijnJaar{
  flex:0 0 5.2rem;
  font-family:var(--f-display);font-size:1.4rem;letter-spacing:.06em;
  color:var(--lamplicht);
}
.tijdlijnInhoud{flex:1}
.tijdlijnInhoud .tag{margin-bottom:.5rem}
.tijdlijnInhoud .mainText:last-child{margin-bottom:0}

/* doorlinks vanaf de kaartpagina (deel 3) */
.cavesPopupLink{
  display:inline-block;margin-top:.5rem;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;
  color:var(--houtskool);text-decoration:none;
  border-bottom:2px solid var(--lamplicht);
}
.cavesListKnop{text-decoration:none}
.cavesListZoom{
  margin-left:auto;cursor:pointer;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;
  color:#C8B78E;background:none;
  border:1px solid #57492F;border-radius:2px;
  padding:.25rem .6rem;
}
.cavesListZoom:hover,.cavesListZoom:focus-visible{
  border-color:var(--lamplicht);color:var(--licht-op-donker);outline:none;
}

@media (max-width:640px){
  .tijdlijnRij{flex-direction:column;gap:.3rem}
  .cavesListZoom{margin-left:0}
}

/* ==========================================================
   geologieMergel.html — literatuurlijst (Ronde 4)
   ========================================================== */
.litLijst{list-style:none;padding:0;margin:0}
.litRegel{border-top:1px solid #3A3126;padding:.9rem .1rem}
.litRegel:last-child{border-bottom:1px solid #3A3126}
.litKop{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.litNaam{font-size:.95rem;color:var(--licht-op-donker)}
.litBron{
  margin-top:.35rem;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.03em;
  color:#A99878;word-break:break-word;
}
.litBron a{color:var(--lamplicht)}

/* ==========================================================
   lagen.js — de lagenkolom "de boorkern" (Ronde 4, deel 2;
   designvoorstel-ronde-4 akkoord 2026-07-19)
   ========================================================== */
.lagenKolom{display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem;
  margin-top:1.4rem}
@media(min-width:52rem){.lagenKolom{grid-template-columns:minmax(0,1.15fr) minmax(15rem,.85fr)}}

.lagenSvgWrap svg{display:block;width:100%;height:auto}

/* svg-onderdelen */
.laagBand{cursor:pointer;stroke:var(--gang);stroke-width:1}
.laagBand:hover{filter:brightness(1.07)}
.laagBand.gekozen{stroke:var(--lamplicht);stroke-width:2.5}
.laagNaam{font-family:var(--f-body);font-weight:400;font-size:15px;
  fill:var(--houtskool);pointer-events:none}
.laagCode{font-family:var(--f-mono);font-size:10.5px;
  fill:#6B5F4D;pointer-events:none}
.horizontLijn{stroke:#8A7440;stroke-width:1.6;fill:none;cursor:pointer}
.horizontRaak{stroke:transparent;stroke-width:14;fill:none;cursor:pointer}
.horizontRaak:hover + .horizontLijn{stroke:var(--lamplicht)}
.horizontLijn.gekozen{stroke:var(--lamplicht);stroke-width:2.6}
.formatieVak{cursor:pointer;fill:transparent}
.formatieLijn{stroke:#57492F;stroke-width:1}
.formatieNaam{font-family:var(--f-display);font-size:13px;letter-spacing:.14em;
  fill:#C8B78E;text-transform:uppercase;pointer-events:none}
.formatieNaam.gekozen{fill:var(--lamplicht)}
.vuursteen{fill:#3A3126;opacity:.55;pointer-events:none}

/* het lamplicht-paneel */
.laagPaneel{background:var(--gang-wand);border:1px solid #3A3126;
  padding:1.4rem 1.5rem;align-self:start;position:sticky;top:4.5rem}
.laagPaneel .soort{font-family:var(--f-mono);font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:#A99878}
.laagPaneel h3{font-family:var(--f-display);font-weight:400;font-size:1.25rem;
  color:var(--lamplicht);margin:.25rem 0 .1rem}
.laagPaneel .codeRij{font-family:var(--f-mono);font-size:.72rem;
  color:#C8B78E;margin-bottom:.9rem}
.laagPaneel .positie{font-size:.85rem;color:#A99878;margin-bottom:.9rem}
.laagPaneel .leegBlok{padding:.9rem 1rem;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.04em}
.laagPaneel .mainText{font-size:.95rem}
.lagenOnderschrift{
  margin-top:.8rem;font-family:var(--f-mono);font-size:.72rem;
  letter-spacing:.05em;color:#A99878;
}