/* footer.css: de globale footer. Staat buiten main en blijft bij routerwissels staan (js/sections/footer.js, Motion.global).

   Eindstaat eerst: zonder JS, bij reduce, bij "Beweging uit" en na een fout is dit een gewone donkere voettekst in de flow: een enorme link,
   de pillen netjes gewrapt in een rij, de nav, de schakelaar. De onthulling (html.footer-reveal) en de fysica van de pillen
   (.site-footer__wereld.is-fysica) zijn klassen die footer.js zet, alleen met beweging aan, vanaf 900 px breed en (onthulling) als de
   footer niet hoger is dan de viewport. Zet de klassen niet met de hand.

   De opbouw schakelt op de breedte van de footer zelf (een container query in rem), niet op de breedte van het venster: bij een grotere tekst
   schakelt de brede opbouw dus eerder uit en blijven kolommen en pillen leesbaar. Alleen de onthulling gaat over het venster (hoogte). */

/* ---------- Het papier ligt over de footer ----------
   main krijgt een eigen laag en een dichte achtergrond (overgenomen van body, dus ook als een sectie die laat veranderen): de footer
   staat er pas onder als html.footer-reveal staat. De regel staat altijd aan, zodat main in elke stand dezelfde stapelcontext heeft. */
main#inhoud {
  position: relative;
  z-index: 1;
  background-color: inherit;
}

@media (min-width: 56.25rem) and (min-height: 40rem) {
  /* Onthulling: de footer plakt onderaan het beeld, main schuift er als een vel papier overheen. Werkt met Lenis (sticky is native). */
  html.footer-reveal .site-footer { position: sticky; bottom: 0; }
  html.footer-reveal main#inhoud { min-height: 100svh; }                          /* ook een korte pagina laat de footer helemaal onthullen */
  html.footer-reveal main#inhoud::after {                                         /* de onderhoeken van het vel: inkt over de papieren hoeken (niets wordt geknipt) */
    content: "";
    position: absolute;
    top: calc(100% - var(--r-open));
    left: 0;
    right: 0;
    z-index: 5;
    height: var(--r-open);
    background:
      radial-gradient(circle at 100% 0, transparent calc(var(--r-open) - 0.5px), var(--inkt) var(--r-open)) left top / var(--r-open) var(--r-open) no-repeat,
      radial-gradient(circle at 0 0, transparent calc(var(--r-open) - 0.5px), var(--inkt) var(--r-open)) right top / var(--r-open) var(--r-open) no-repeat;
    pointer-events: none;
  }
}

/* ---------- Opbouw ---------- */
.site-footer {
  container: footer / inline-size;
  display: flex;
  flex-direction: column;
  padding: 0;                                                /* de basisregel in components.css geeft hier padding; de binnenkant regelt dat zelf */
  overflow-wrap: break-word;
}
@media (min-width: 56.25rem) and (min-height: 40rem) {
  .site-footer { min-height: min(100svh, 64rem); }
}
.site-footer__inner {
  --fs-footer-cta: calc(0.2rem + 16vw);
  --lucht: clamp(6rem, 24svh, 14rem);                        /* de wereld van de pillen reikt zoveel boven zijn vak: ruimte om op te springen */
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--s-32);
  padding-top: var(--s-64);
  padding-bottom: var(--s-24);
}
@container footer (min-width: 37.5rem) {
  .site-footer__inner { --fs-footer-cta: calc(0.3rem + 13.5vw); }
}
@container footer (min-width: 55rem) {
  .site-footer__inner {
    --fs-footer-cta: calc(0.3rem + 13vw);
    gap: var(--s-16);
    padding-top: calc(var(--header-min) + var(--s-8));       /* de vaste header ligt aan het einde van de pagina over de bovenrand (bij Beweging uit blijft hij staan) */
    padding-bottom: var(--s-16);
  }
}
@container footer (min-width: 55rem) {
  @media (min-height: 40rem) {
    .site-footer__inner { --fs-footer-cta: min(calc(0.3rem + 13vw), 21svh); }      /* op een lage desktop past de footer zo nog in beeld */
  }
}
@container footer (min-width: 55rem) and (max-width: 69.9375rem) {
  .site-footer__inner { --fs-footer-cta: min(calc(0.3rem + 11vw), 21svh); }        /* smalle desktop: de pillen krijgen meer ruimte onder de link */
}

/* HUD: live tijd links, aanwijzercoordinaten rechts (alleen desktop met fijne aanwijzer en beweging aan) */
.site-footer__hud {
  display: flex;
  justify-content: space-between;
  gap: var(--s-16);
  min-height: 1.5rem;
  color: var(--fg-dim);
}
.site-footer__coord { white-space: pre; }

/* ---------- De enorme link ---------- */
.site-footer__cta { min-width: 0; }
.site-footer__link {
  display: block;
  width: fit-content;                                        /* footer.js trekt de breedte strak om de langste regel, zodat de focusring een nette rechthoek is */
  max-width: 100%;
  min-height: 44px;
  color: var(--fg);
  font-family: var(--f-display);
  font-size: var(--fs-footer-cta);
  font-weight: 800;
  font-optical-sizing: auto;
  letter-spacing: -0.012em;
  line-height: 0.92;
  text-decoration: none;
  text-wrap: balance;
  hyphens: manual;
  touch-action: manipulation;
  transition: color var(--t-snel) ease;
}
.site-footer__link-tekst { font-variant-ligatures: none; }
.site-footer__pijl {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  margin-inline: 0.14em;
  vertical-align: -0.02em;
  overflow: visible;
  color: var(--accent);                                      /* de pijl is het enige accent in rust: groot, 4,5:1 op inkt */
  transition: transform calc(var(--t-middel) * var(--m)) var(--ease-out);
}
.site-footer__pijl path { stroke-width: 2.4; }
.site-footer__link--techniek .site-footer__pijl { margin-inline-end: 0; }
.site-footer__link--effecten .site-footer__pijl { margin-inline-end: 0; }
@media (hover: hover) and (pointer: fine) {
  .site-footer__link:hover { color: var(--accent); }
  .site-footer__link--techniek:hover .site-footer__pijl { transform: translateX(0.08em); }
  .site-footer__link--effecten:hover .site-footer__pijl { transform: translateX(0.08em); }
}
.site-footer__link:focus-visible { color: var(--accent); outline-offset: 0.1em; }
.site-footer__link--techniek:focus-visible .site-footer__pijl { transform: translateX(0.08em); }
.site-footer__link--effecten:focus-visible .site-footer__pijl { transform: translateX(0.08em); }

/* ---------- Wereld van de pillen ----------
   Smal en in de flow: de pillen liggen gewrapt in een rij. Breed: ze liggen in een vak dat boven de wereld uitsteekt (over de enorme link
   heen, die zelf de klik houdt), onderaan en rechts uitgelijnd. footer.js legt de fysica er alleen als transform overheen: de lay-out
   verandert dus niet als de fysica aangaat (geen verspringing, geen CLS) en zonder JS of bij Beweging uit staan ze gewoon zo. */
.site-footer__wereld { position: relative; min-width: 0; }
.site-footer__etiket { color: var(--fg-dim); }
.site-footer__hint { display: none; }
.site-footer__wereld.is-fysica .site-footer__hint { display: block; }
.site-footer__pillen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
  margin-top: var(--s-12);
}
.site-footer__pil-item { display: block; max-width: 100%; }
.site-footer__pil {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  max-width: 100%;
  min-height: 44px;                                          /* tikdoel in px: bij een grotere tekst groeit het doel niet mee, maar de pil wel */
  padding: 0.4rem 1.125rem 0.4rem 0.875rem;
  border: 1.5px solid var(--fg-dim);
  border-radius: var(--r-bediening);
  background-color: var(--bg-2);
  color: var(--fg);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.15;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  transition:
    scale calc(var(--t-snel) * var(--m)) var(--ease-out),
    color var(--t-snel) ease,
    background-color var(--t-snel) ease,
    border-color var(--t-snel) ease;
}
.site-footer__pil:active { scale: calc(1 - 0.03 * var(--m)); }
.site-footer__pil-nr {
  flex-shrink: 0;
  color: var(--fg-dim);
  font-family: var(--f-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: 0.04em;
  transition: color var(--t-snel) ease;
}
@media (hover: hover) and (pointer: fine) {
  .site-footer__pil:hover { border-color: var(--accent); background-color: var(--accent); color: var(--inkt); }
  .site-footer__pil:hover .site-footer__pil-nr { color: var(--inkt); }
}
.site-footer__pil:focus-visible { border-color: var(--accent); background-color: var(--accent); color: var(--inkt); }
.site-footer__pil:focus-visible .site-footer__pil-nr { color: var(--inkt); }

@container footer (min-width: 55rem) {
  .site-footer__wereld {
    flex: 1 1 auto;
    min-height: 8rem;
  }
  @media (max-height: 39.9375rem) {                            /* laag venster: geen onthulling, een gewone footer met ruimte voor het hoopje */
    .site-footer__wereld { min-height: 15rem; }
  }
  .site-footer__etiket {                                     /* linksonder, bij het hoopje; vaste maat, zodat de hint er zonder verspringen bij komt */
    position: absolute;
    bottom: var(--s-8);
    left: 0;
    width: 24ch;
    min-height: 2.8em;
  }
  .site-footer__pillen {
    position: absolute;
    inset: calc(var(--lucht) * -1) 0 0;
    align-content: flex-end;
    justify-content: flex-end;
    margin: 0;
    pointer-events: none;                                    /* alleen de pillen vangen de aanwijzer, de ruimte ertussen en de link eronder niet */
  }
  .site-footer__pil-item { width: max-content; pointer-events: auto; }
  .site-footer__pil { white-space: nowrap; }
}
@container footer (min-width: 70rem) {                         /* ruim en hoog genoeg: grotere pillen, een hoopje met gewicht. Vanaf 46rem hoog (736 px): bij 720 px hoog (1152 en 1280 breed) lagen ze over de pijl van de grote link (D15) */
  @media (min-height: 46rem) {
    .site-footer__pil {
      min-height: 3.25rem;
      padding: 0.5rem 1.375rem 0.5rem 1.125rem;
      font-size: 1.0625rem;
    }
  }
}

/* ---------- Onderbalk ---------- */
.site-footer__balk {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--s-32) var(--goot);
  padding-top: var(--s-16);
  border-top: 1px solid var(--lijn-fg);
}
.site-footer .site-footer__mark {                            /* zelfstandig: de basisregels in components.css voor de voettekst mogen weg */
  min-width: 0;
  font-family: var(--f-display);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.012em;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.site-footer__demo { max-width: 40ch; margin-top: var(--s-8); }
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: start;
  gap: var(--s-4) var(--s-32);
}
.site-footer__nav .link { font-weight: 500; }
.site-footer__stil { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-16); min-width: 0; }
.site-footer__stil-kop { font-weight: 600; }
.js:not(.motion-failed) .site-footer__stil-kop[data-js-only][hidden] { display: block !important; }   /* hoort bij de schakelaar: zonder JS (en na een fout) staat de kop er niet zonder knop */
.site-footer__stil-tekst { flex-basis: 100%; }
.site-footer__omhoog { justify-self: start; }
@container footer (min-width: 40rem) {
  .site-footer__balk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container footer (min-width: 68.75rem) {
  .site-footer__balk { grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1.5fr) auto; column-gap: var(--s-32); }
  .site-footer__omhoog { justify-self: end; }
}