/* Componenten uit DESIGN.md §4. Bewegingen bij scrollen komen in Taak 3. */

/* Knop */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 14px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-pil);
  font-family: var(--f-tekst);
  font-size: var(--t-tekst);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--d-snel) var(--ease-uit), background-color var(--d-snel) var(--ease-uit);
}
.knop:hover { transform: translateY(-1px); }
.knop .pijl { font-family: var(--f-mono); transition: transform var(--d-snel) var(--ease-uit); }
.knop:hover .pijl { transform: translateX(3px); }

.knop--zwart, .knop--zwart:hover { background: var(--ink); color: var(--papier); }
.knop--violet { background: var(--violet); color: var(--papier); box-shadow: var(--sch-violet); }
.knop--violet:hover { background: var(--violet-600); color: var(--papier); }
.knop--spook { background: transparent; border-color: var(--lijn); color: var(--ink); }
.knop--spook:hover { background: var(--violet-50); color: var(--ink); }
.donker .knop--spook { border-color: var(--op-donker-lijn); color: var(--op-donker); }
.donker .knop--spook:hover { background: var(--glas); }

.knoppen { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Pil */
.pil {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 14px;
  border: 0;
  border-radius: var(--r-pil);
  background: var(--chip);
  color: var(--ink);
  font-size: var(--t-klein);
  font-weight: 600;
  text-decoration: none;
}
a.pil:hover, button.pil:hover { background: var(--violet-50); color: var(--ink); }
.pil[aria-pressed="true"], .pil.is-gekozen { background: var(--ink); color: var(--papier); }

/* Kaart */
.kaart {
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--r-kaart);
  background: var(--papier);
  box-shadow: var(--sch-kaart);
}
a.kaart { display: block; color: inherit; text-decoration: none; transition: transform var(--d-snel) var(--ease-uit), box-shadow var(--d-snel) var(--ease-uit); }
a.kaart:hover { transform: translateY(-2px); box-shadow: 0 1px 0 var(--lijn), 0 26px 60px -30px rgba(20, 20, 40, .32); }

/* Glaskaart (alleen op donker) */
.glaskaart {
  position: relative;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-kaart);
  background: rgba(18, 12, 43, .72);
  color: var(--op-donker);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glaskaart {
    background: var(--glas);
    -webkit-backdrop-filter: blur(var(--glas-blur));
    backdrop-filter: blur(var(--glas-blur));
  }
}
.glaskaart::before {
  content: "";
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--verloop-donker);
}

/* Mono-label */
.label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-4);
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-zacht);
}
.label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.donker .label { color: var(--violet-200); }

/* Sectiekop */
.sectiekop { margin-bottom: var(--s-7); }
.sectiekop h2 { margin-bottom: var(--s-4); }
.sectiekop .lead { margin: 0; }

.kleurwoord {
  background: var(--verloop);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.donker .kleurwoord { background-image: var(--verloop-donker); }

/* Menubalk */
.kop {
  position: sticky;
  top: 0;
  z-index: var(--z-menu);
  padding: var(--s-3) var(--rand) 0;
}
/* Open uitklapmenu boven de cookiemelding (anders vallen onderste links eronder op lage schermen) */
.kop:has(details[open]), .kop:has([aria-expanded="true"]) { z-index: calc(var(--z-cookie) + 1); }
.menubalk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  max-width: var(--breed);
  margin-inline: auto;
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-5);
  border-radius: var(--r-pil);
  background: var(--papier);
  box-shadow: var(--sch-menu);
}
.menubalk__logo { display: block; flex: none; padding-block: var(--s-2); }
.menubalk__logo img { width: 118px; height: auto; aspect-ratio: 468.6 / 108; }

.menu__lijst { list-style: none; margin: 0; padding: 0; }
.menu__link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: var(--r-pil);
  color: var(--ink);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}
.menu__link::-webkit-details-marker { display: none; }
.menu__link:hover { background: var(--violet-50); color: var(--ink); }
summary.menu__link::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--d-snel) var(--ease-uit);
}
.uitklap[open] > summary.menu__link::after { transform: translate(0, 3px) rotate(225deg); }

.uitklap__lijst { list-style: none; margin: 0; padding: var(--s-2); }
.uitklap__lijst a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--r-xs);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.uitklap__lijst a:hover { background: var(--violet-50); color: var(--ink); }
.uitklap__alle { margin-bottom: var(--s-1); padding-bottom: var(--s-1); border-bottom: 1px solid var(--lijn); }
.uitklap__alle a { font-family: var(--f-mono); font-size: var(--t-label); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--violet); }

/* Menuknop (alleen klein scherm, alleen als menu.js draait: html.menu-klaar) */
.menuknop {
  display: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--papier);
  cursor: pointer;
}
.menuknop__streepjes,
.menuknop__streepjes::before,
.menuknop__streepjes::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--d-mid) var(--ease-uit), opacity var(--d-snel);
}
.menuknop__streepjes { position: relative; }
.menuknop__streepjes::before, .menuknop__streepjes::after { content: ""; position: absolute; left: 0; }
.menuknop__streepjes::before { transform: translateY(-6px); }
.menuknop__streepjes::after { transform: translateY(6px); }
.menuknop[aria-expanded="true"] .menuknop__streepjes { background: transparent; }
.menuknop[aria-expanded="true"] .menuknop__streepjes::before { background: var(--papier); transform: rotate(45deg); }
.menuknop[aria-expanded="true"] .menuknop__streepjes::after { background: var(--papier); transform: rotate(-45deg); }

/* Klein scherm (< 960px) */
@media (max-width: 959.98px) {
  .menubalk { flex-wrap: wrap; border-radius: var(--r-kaart); }
  .menu { width: 100%; padding: 0 var(--s-2) var(--s-3); }
  .menu__lijst { display: flex; flex-wrap: wrap; gap: var(--s-1); }
  .menu__knop { margin-top: var(--s-3); }

  .menu-klaar .menubalk { flex-wrap: nowrap; border-radius: var(--r-pil); }
  .menu-klaar .menuknop { display: grid; }
  .menu-klaar .menu {
    position: fixed;
    width: auto;
    inset: 84px var(--rand) auto;
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    padding: var(--s-4);
    border-radius: var(--r-kaart);
    background: var(--papier);
    box-shadow: var(--sch-menu);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--d-mid) var(--ease-uit), transform var(--d-mid) var(--ease-uit), visibility 0s linear var(--d-mid);
  }
  .menu-klaar .menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--d-mid) var(--ease-uit), transform var(--d-mid) var(--ease-uit);
  }
  .menu-klaar .menu__lijst { display: block; }
  .menu-klaar .menu__link { justify-content: space-between; padding: 14px 12px; font-size: 1.0625rem; border-radius: var(--r-sm); }
  .menu-klaar .menu__knop { display: flex; width: 100%; margin-top: var(--s-4); }
  .uitklap__lijst { padding: 0 0 var(--s-2) var(--s-3); }
}

/* Groot scherm (>= 960px) */
@media (min-width: 960px) {
  .menu { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: var(--s-4); }
  .menu__lijst { display: flex; flex: 1; justify-content: center; gap: 2px; }
  .menu__item { position: relative; }
  .uitklap__lijst {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 240px;
    border-radius: var(--r-kaart);
    background: var(--papier);
    box-shadow: var(--sch-menu);
  }
  .uitklap__lijst a { white-space: nowrap; }
}

/* Voet */
.voet { padding-block: var(--s-9) var(--s-6); margin-top: auto; }
.voet__raster { display: grid; gap: var(--s-7); }
.voet__merk img { width: 140px; height: auto; aspect-ratio: 468.6 / 108; margin-bottom: var(--s-5); }
.voet__kop {
  margin: 0 0 var(--s-4);
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--violet-200);
}
.voet__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); color: var(--op-donker-zacht); }
.voet a { color: var(--op-donker); text-decoration: none; }
.voet a:hover { color: var(--op-donker); text-decoration: underline; }
.voet__onder {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--op-donker-lijn);
  color: var(--op-donker-zacht);
  font-size: var(--t-klein);
}
@media (min-width: 640px) {
  .voet__raster { grid-template-columns: 2fr 1fr 1fr; }
}

/* Kader: groot donker blok */
.kader {
  padding: clamp(32px, 6vw, 80px) clamp(20px, 5vw, 64px);
  border-radius: var(--r-kader);
  overflow: hidden;
}