/* ===========================================================================
   Glas. Toe te voegen aan site/pagina.css, of als los bestand na pagina.css.

   Regel: de ruit draagt vorm, niet inhoud. Tekst en bedieningselementen staan
   op een dekkend vlak bovenop het glas — zie bekijken/chatknop-glas.html voor
   de meting waarom (boven het bogenmotief haalt inkt op een lichte ruit 4,45:1
   boven een felle boog en 1,86:1 boven een donkere).

   In de secties onder de hero is de ondergrond rustig (effen papier of het
   draadvlak op 0,10), dus daar mag leestekst wel op de ruit staan.
   =========================================================================== */

:root {
  --glas-blur:        18px;
  --glas-rgb:         240, 246, 232;   /* Washi 45% naar wit, zoals surface-tint */
  --glas-licht:       rgba(var(--glas-rgb), 0.58);
  --glas-donker:      rgba(var(--hero-veil-rgb), 0.50);
  --glas-rand-licht:  rgba(255, 255, 255, 0.60);
  --glas-rand-donker: rgba(232, 238, 225, 0.20);
  --glas-glans:       inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --glas-glans-donker: inset 0 1px 0 rgba(255, 255, 255, 0.20);
  --glas-schaduw:     0 18px 40px rgba(20, 26, 21, 0.10);
  --glas-schaduw-donker: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.glas {
  background: var(--glas-licht);
  border: 1px solid var(--glas-rand-licht);
  box-shadow: var(--glas-glans), var(--glas-schaduw);
  backdrop-filter: blur(var(--glas-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glas-blur)) saturate(140%);
  border-radius: 22px;
}

.glas--donker {
  background: var(--glas-donker);
  border: 1px solid var(--glas-rand-donker);
  box-shadow: var(--glas-glans-donker), var(--glas-schaduw-donker);
}

/* De navigatiebalk. Vervangt de dekking 0,72 in de bestaande regel voor
   html[data-hero="donker"] .navbar[data-over-hero="true"]; de randen van de
   taal- en loginknop blijven op 0,65 staan (3:1, zie .navbar__login). */
html[data-hero="donker"] .navbar[data-over-hero="true"] {
  background: rgba(var(--hero-veil-rgb), 0.46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16),
              0 10px 30px rgba(20, 26, 21, 0.18);
  border-bottom-color: rgba(232, 238, 225, 0.14);
}

/* Kaarten: de vier kanalen en de twee blokken bij "Na het afsluiten". */
.channel {
  padding: 24px;
  background: var(--glas-licht);
  border: 1px solid var(--glas-rand-licht);
  border-radius: 22px;
  box-shadow: var(--glas-glans), var(--glas-schaduw);
  backdrop-filter: blur(var(--glas-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glas-blur)) saturate(140%);
}

/* FAQ. De bestaande regel zet background: var(--washi) en border: none;
   dit vervangt die twee. */
#veelgesteld .disclose {
  background: var(--glas-licht);
  border: 1px solid var(--glas-rand-licht);
  border-radius: 18px;
  box-shadow: var(--glas-glans), 0 14px 34px rgba(20, 26, 21, 0.09);
  backdrop-filter: blur(var(--glas-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glas-blur)) saturate(140%);
}

/* Het paneel in de slotsectie staat bovenop het motief, dus daar mag de blur
   zwaarder: 1,3 keer. */
.closing__paneel {
  display: inline-block;
  max-width: 720px;
  padding: 40px 44px;
  border-radius: 28px;
  background: rgba(var(--glas-rgb), 0.52);
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.60),
              0 24px 56px rgba(20, 26, 21, 0.14);
  backdrop-filter: blur(calc(var(--glas-blur) * 1.3)) saturate(150%);
  -webkit-backdrop-filter: blur(calc(var(--glas-blur) * 1.3)) saturate(150%);
}

/* De knop rechtsonder als ruit. De pil zelf blijft dekkend: hij is het
   bedieningselement en hoort niet op glas te staan. */
.dock .pill.glas--donker {
  background: rgba(var(--hero-veil-rgb), 0.52);
  backdrop-filter: blur(var(--glas-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glas-blur)) saturate(140%);
}

/* Zonder backdrop-filter is een halfdoorschijnend vlak onrustig; dan dekking
   omhoog in plaats van de blur missen. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glas, .channel, #veelgesteld .disclose { background: rgba(var(--glas-rgb), 0.93); }
  .closing__paneel { background: rgba(var(--glas-rgb), 0.95); }
  .glas--donker,
  html[data-hero="donker"] .navbar[data-over-hero="true"] {
    background: rgba(var(--hero-veil-rgb), 0.88);
  }
}