/* ============================================================================
   vandenostende.net — site.css
   Page chrome on top of the Nacre design system. Loaded AFTER
   assets/nacre/styles.css, so the few overrides here (link colour, scrollbar)
   land last, exactly as they did in the design prototype.
   ============================================================================ */

body { margin: 0; background: var(--bg); }

a { color: var(--primary-text); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: none; }

/* Slim, transparent scrollbar — the hint that content continues stays. */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .26); }

/* ---------------------------------------------------------------------------
   ICONEN — Phosphor 2.1.1, als inline SVG in de pagina zelf.
   Maat komt van font-size (1em), kleur van currentColor: precies zoals het
   icoonlettertype zich gedroeg, maar zonder externe request.
   --------------------------------------------------------------------------- */
.i {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -.125em;
  flex: none;
  fill: currentColor;
}

/* ---------------------------------------------------------------------------
   TAAL — één markup, twee talen. Het inactieve blok verdwijnt, het actieve
   houdt zijn eigen display-waarde (block, inline, flex, …).
   --------------------------------------------------------------------------- */
html[data-lang="en"] [data-lang="nl"],
html[data-lang="nl"] [data-lang="en"] { display: none; }

/* ---------------------------------------------------------------------------
   PAGINA
   --------------------------------------------------------------------------- */
.page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg);
  font-family: var(--font-sans);
  color: var(--text);
}

/* Full-height variant for the map: header + map, no page scroll. */
.page--fixed {
  min-height: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Blurred colour orbs behind the glass — the signature background. */
.orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}

/* ---------------------------------------------------------------------------
   HEADER
   --------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: 56px;
  padding: 0 var(--space-6);
  background: var(--glass-fill-chrome);
  backdrop-filter: blur(var(--blur-chrome)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur-chrome)) saturate(180%);
  border-bottom: 1px solid var(--border);
}
.page--fixed .site-header { position: relative; flex: none; }

.brand { display: flex; align-items: center; gap: var(--space-3); color: var(--text); }
.brand:hover { color: var(--text); }

.site-nav { display: flex; gap: var(--space-5); margin-left: var(--space-6); }
.site-nav a { color: var(--text-muted); }
.site-nav a:hover { color: var(--text); }
.site-nav a.is-current { color: var(--text); }

.header-tools { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }

.lang {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.lang__btn {
  min-width: 36px;
  height: 26px;
  border: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: transparent;
  color: var(--text-subtle);
}
.lang__btn[aria-pressed="true"] { background: var(--surface-3); color: var(--text); }

.theme-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
}
.theme-btn .i { font-size: 16px; }

/* Zon in het donker, maan in het licht: de knop toont waar je naartoe gaat.
   Beide glyphs staan in de HTML, CSS kiest — geen JS, dus geen flits. */
html[data-theme="light"] .icon-sun,
html[data-theme="dark"] .icon-moon { display: none; }

/* De kaartknop deelt de vorm van de themaknop; alleen de glyphs verschillen.
   Zelfde afspraak: beide staan in de HTML, CSS kiest, dus geen flits. Staat
   alleen op de pagina's met een kaart erin. */
.kaart-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
}
.kaart-btn .i { font-size: 16px; }
/* Kaart in de foto-stand, foto in de kaart-stand: de knop toont waar je naartoe
   gaat. Zelfde afspraak als de dag/nachtknop hierboven. */
html[data-kaart="foto"] .icon-foto,
html[data-kaart="kaart"] .icon-kaart { display: none; }

/* ---------------------------------------------------------------------------
   MAIN + FOOTER
   --------------------------------------------------------------------------- */
.site-main {
  position: relative;
  max-width: 1120px;
  margin-inline: auto;
  padding: var(--space-16) var(--space-5) var(--space-20);
}
.site-main--narrow { max-width: 760px; }

.site-footer {
  position: relative;
  border-top: 1px solid var(--border);
  padding: var(--space-10) var(--space-5);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  max-width: 1120px;
  margin-inline: auto;
}
.site-footer__brand { display: flex; align-items: center; gap: var(--space-4); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.site-footer nav a { color: var(--text-muted); }
.site-footer nav a:hover { color: var(--text); }

/* ---------------------------------------------------------------------------
   SECTIE-RITME
   space-16 tussen secties — de afstand uit het systeem, niet uit het oog.
   --------------------------------------------------------------------------- */
.section { margin-top: var(--space-16); }

.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.grid--5 { grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
.grid--wide-left { grid-template-columns: 2fr 1fr; }

/* ---------------------------------------------------------------------------
   MODAL — scrim + glazen paneel, gedeeld door Projecten en Over.
   --------------------------------------------------------------------------- */
.modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: rgba(8, 10, 14, .62);
  backdrop-filter: blur(var(--blur-thin)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur-thin)) saturate(180%);
}
.modal-scrim[hidden] { display: none; }

/* `hidden` moet ook winnen van een inline display. Zonder deze regel blijft een
   element met style="display:flex" gewoon staan terwijl de JS denkt dat het weg
   is — dat gebeurde met het testlabel en de foutregel op contact.html. */
[hidden] { display: none !important; }

.modal-panel {
  position: relative;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--glass-shadow);
}

.modal-close {
  position: absolute;
  right: var(--space-5);
  top: var(--space-5);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   MOBIEL
   Het prototype is op desktop getekend; hieronder vouwen de rasters open zodat
   niets buiten het scherm valt. Boven 768px verandert er geen pixel.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .site-header {
    height: auto;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
  }
  .site-nav { margin-left: 0; gap: var(--space-4); order: 3; width: 100%; }
  .site-main { padding-top: var(--space-10); }
  .grid--2, .grid--3, .grid--4, .grid--wide-left { grid-template-columns: 1fr; }
  .grid--5 { grid-template-columns: repeat(2, 1fr); }
}