/* De toestemmingsbalk. Indeling zoals mensen die van cookiebalken
   kennen: uitleg, een rij schakelaars, drie knoppen.

   Twee dingen zijn bewust zo:

   Geen scherm-vullende overlay. Die dwingt een keuze af en maakt
   accepteren de weg van de minste weerstand, wat de toestemming
   juridisch minder waard maakt.

   De drie knoppen zijn even breed. Alleen "Alles accepteren" heeft
   kleur, omdat dat de handeling is die de meeste mensen zoeken -- maar
   weigeren staat er even groot naast en kost precies evenveel klikken.
   Een weigerknop die kleiner of grijzer is, is wat toezichthouders
   aanwijzen als ongeldige toestemming. */

@layer components {
  /* Verticaal gecentreerd in beeld in plaats van onderaan geplakt: op
     een groot scherm valt een balk onderin buiten de blik, en dit is
     de eerste keuze die iemand op de site maakt. Geen overlay eromheen
     -- de pagina blijft leesbaar en klikbaar, zodat de keuze niet
     wordt afgedwongen. */
  .consent {
    position: fixed;
    inset: 0;
    z-index: 40;
    width: min(52rem, calc(100vw - var(--space-l)));
    height: fit-content;
    margin: auto;
  }

  .consent[hidden] {
    display: none;
  }

  /* Waas over de pagina, zodat de balk het middelpunt is. Hij laat geen
     klikken tegenhouden: de pagina blijft bruikbaar terwijl de keuze
     openstaat. Een waas die de site ook blokkeert, dwingt een keuze af,
     en afgedwongen toestemming is geen toestemming. */
  .consent::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgb(16 17 22 / 0.45);
    backdrop-filter: blur(3px);
    pointer-events: none;
    animation: consent-waas 240ms ease-out;
  }

  @keyframes consent-waas {
    from { opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .consent::before {
      animation: none;
    }
  }

  .consent__card {
    position: relative;
    display: grid;
    max-height: calc(100vh - var(--space-xl));
    overflow-y: auto;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: 0 24px 60px -20px rgb(16 17 22 / 0.35);
  }

  .consent__kop {
    padding: var(--space-s) var(--space-m);
    border-block-end: 1px solid var(--color-line);
  }

  .consent__kop .brand__mark {
    width: 1.7rem;
    height: 1.7rem;
  }

  .consent__kop .brand__word {
    font-size: 1.05rem;
  }

  .consent__tekst {
    padding: var(--space-m);
  }

  .consent h2 {
    margin-block-end: var(--space-2xs);
    font-size: var(--step-1);
    font-weight: 700;
  }

  .consent h2:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
  }

  .consent__tekst p {
    color: var(--color-muted);
    font-size: var(--step--1);
    line-height: 1.6;
  }

  .consent__tekst a {
    color: var(--color-accent);
  }

  /* De rij categorieën, met scheidingslijnen ertussen zoals in de
     balken die mensen kennen. */
  .consent__soorten {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    border-block: 1px solid var(--color-line);
  }

  .consent__soorten li {
    padding: var(--space-s) var(--space-m);
    border-block-start: 1px solid var(--color-line);
  }

  .consent__soorten li:first-child {
    border-block-start: 0;
  }

  .consent__soorten p {
    margin-block-start: 0.2rem;
    color: var(--color-muted);
    font-size: 0.78rem;
    line-height: 1.4;
  }

  @media (min-width: 46rem) {
    .consent__soorten {
      grid-template-columns: repeat(4, 1fr);
    }

    .consent__soorten li {
      border-block-start: 0;
      border-inline-start: 1px solid var(--color-line);
    }

    .consent__soorten li:first-child {
      border-inline-start: 0;
    }
  }

  /* Schakelaar ------------------------------------------------------ */
  .schakelaar {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
  }

  .schakelaar input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
  }

  .schakelaar__spoor {
    position: relative;
    width: 2.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: var(--color-surface-2);
    flex: none;
    transition: background var(--motion);
  }

  .schakelaar__spoor::after {
    content: '';
    position: absolute;
    inset-block-start: 0.19rem;
    inset-inline-start: 0.19rem;
    width: 0.97rem;
    height: 0.97rem;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgb(16 17 22 / 0.35);
    transition: transform var(--motion);
  }

  .schakelaar input:checked + .schakelaar__spoor {
    background: var(--color-accent);
  }

  .schakelaar input:checked + .schakelaar__spoor::after {
    transform: translateX(1rem);
  }

  .schakelaar input:focus-visible + .schakelaar__spoor {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
  }

  /* Noodzakelijk staat vast aan: dat mag je zien. */
  .schakelaar input:disabled + .schakelaar__spoor {
    background: var(--color-line);
    cursor: not-allowed;
  }

  .schakelaar input:disabled ~ .schakelaar__naam {
    color: var(--color-muted);
  }

  .schakelaar__naam {
    font-size: var(--step--1);
    font-weight: 600;
  }

  /* Knoppen --------------------------------------------------------- */
  .consent__acties {
    display: grid;
    gap: var(--space-2xs);
    padding: var(--space-m);
  }

  .consent__acties .button {
    justify-content: center;
    font-size: var(--step--1);
  }

  @media (min-width: 46rem) {
    .consent__acties {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* De zwevende knop rechtsonder waarmee je de balk terughaalt.
     Verdwijnt zodra de balk zelf openstaat. */
  .consent-fab {
    position: fixed;
    inset-block-end: var(--space-m);
    inset-inline-end: var(--space-m);
    z-index: 39;
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    padding: 0;
    border: 1px solid var(--color-line);
    border-radius: 50%;
    background: #ffffff;
    color: var(--color-muted);
    box-shadow: 0 10px 30px -12px rgb(16 17 22 / 0.4);
    cursor: pointer;
    transition: color var(--motion), border-color var(--motion), transform var(--motion);
  }

  .consent-fab:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
    transform: translateY(-2px);
  }

  .consent-fab svg {
    width: 1.35rem;
    height: 1.35rem;
  }

  .consent:not([hidden]) ~ .consent-fab {
    display: none;
  }

  /* De tekstlink in de footer doet hetzelfde als de zwevende knop. */
  .consent-heropen {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
  }

  .consent-heropen:hover {
    color: #ffffff;
    text-decoration: underline;
  }

  @media (max-width: 40rem) {
    /* Op een telefoon juist wél laag: daar is de onderkant van het
       scherm het makkelijkst te bereiken met een duim. */
    .consent {
      inset-block-start: auto;
      inset-block-end: var(--space-2xs);
      inset-inline: var(--space-2xs);
      width: auto;
      margin: 0;
    }

    .consent-fab {
      inset-block-end: var(--space-s);
      inset-inline-end: var(--space-s);
    }
  }
}