/* Kinnection, bouwstenen: navigatie. Prompt 05.
   De kop met het merk en het menu, het gsm-menu dat uitklapt, en de voettekst.
   Gedrag (openen, sluiten, Escape) staat in navigatie.js. Zonder script blijft het menu op gsm gewoon zichtbaar.

   Toestanden van een menulink: rust, aanwijzen, focus, ingedrukt, gekozen (aria-current="page"). */

.kop{position:relative;z-index:var(--layer-menu);background:var(--color-ground)}
.kop-binnen{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-element);padding-block:var(--gap-tight)}
.merk{display:inline-flex;align-items:center;gap:var(--gap-inline);min-height:var(--touch-min);color:var(--color-heading);font:var(--type-title);letter-spacing:var(--tracking-title);text-decoration:none}
.merk img,.merk svg{width:var(--size-logo);height:var(--size-logo)}

/* De menuknop bestaat enkel op gsm en tablet */
.menuknop{display:none}
.menuknop .icoon-sluit{display:none}
.menuknop[aria-expanded="true"] .icoon-open{display:none}
.menuknop[aria-expanded="true"] .icoon-sluit{display:block}

.menu{display:flex;flex-direction:column;gap:0}
.menu a:not(.knop){position:relative;display:flex;align-items:center;min-width:var(--touch-min);min-height:var(--control-md);color:var(--color-text);font:var(--type-button);text-decoration:none;border-bottom:var(--stroke-rule) solid var(--color-rule)}
.menu a:not(.knop)::after{content:"";position:absolute;left:0;bottom:var(--gap-tight);width:100%;height:var(--stroke-check);border-radius:var(--radius-knot);background:var(--color-thread);transform:scaleX(0);transform-origin:left;transition:transform var(--duration-fast) var(--ease-calm)}
@media (hover:hover),(min-width:900px){
  .menu a:not(.knop):hover{color:var(--color-heading)}
  .menu a:not(.knop):hover::after{transform:scaleX(1)}
}
.menu a.toestand-aanwijzen{color:var(--color-heading)}
.menu a.toestand-aanwijzen::after{transform:scaleX(1)}
.menu a:not(.knop):active,.menu a.toestand-ingedrukt{color:var(--color-heading);background:var(--color-tint)}
.menu a[aria-current="page"]{color:var(--color-heading)}
.menu a[aria-current="page"]::after{transform:scaleX(1);background:var(--color-heading)}
.menu .knop{margin-top:var(--gap-element)}

/* Met script: het menu is dicht tot je de knop aantikt */
.kop.heeft-script .menuknop{display:inline-flex}
.kop.heeft-script .menu{display:none;position:absolute;left:0;right:0;top:100%;padding:0 var(--page-margin-end) var(--gap-element) var(--page-margin-start);background:var(--color-ground);border-bottom:var(--stroke-border) solid var(--color-border);box-shadow:var(--shadow-card)}
.kop.heeft-script .menu.open{display:flex;animation:menu-in var(--duration-fast) var(--ease-calm)}
@keyframes menu-in{from{opacity:0;transform:translateY(calc(var(--gap-tight) * -1))}}

/* Scherm: het menu staat gewoon in de kop */
@media (min-width:900px){
  .kop .menuknop,.kop.heeft-script .menuknop{display:none}
  .kop .menu,.kop.heeft-script .menu{display:flex;position:static;flex-direction:row;align-items:center;gap:var(--gap-element);padding:0;border:0;box-shadow:none;background:none;animation:none}
  .kop .menu,.kop.heeft-script .menu{gap:var(--gap-hair)}
  .menu a:not(.knop){min-height:var(--touch-min);padding-inline:var(--gap-tight);border-bottom:0;border-radius:var(--radius-control);font:var(--type-button-sm)}
  .menu a:not(.knop)::after{left:var(--gap-tight);width:calc(100% - var(--gap-tight) * 2);bottom:var(--gap-inline)}
  .menu a:not(.knop):focus-visible,.menu a.toestand-focus{outline-offset:calc(var(--stroke-focus) * -1);border-radius:var(--radius-control);background:var(--color-surface)}
  .menu .knop{margin-left:var(--gap-tight)}
  .menu a:not(.knop):active,.menu a.toestand-ingedrukt{background:none}
  .menu .knop{margin-top:0}
}

/* Voettekst */
.voet{background:var(--color-ground);border-top:var(--stroke-rule) solid var(--color-rule);font:var(--type-small);color:var(--color-text-muted)}
.voet-binnen{display:flex;flex-direction:column;gap:var(--gap-tight);padding-block:var(--gap-element)}
.voet nav{display:flex;flex-wrap:wrap;gap:0 var(--gap-element)}
.voet a{display:inline-flex;align-items:center;min-width:var(--touch-min);min-height:var(--touch-min);color:var(--color-heading);font:var(--type-button-sm);text-decoration:none}
@media (hover:hover),(min-width:900px){
  .voet a:hover{text-decoration:underline;text-decoration-thickness:var(--stroke-rule);text-underline-offset:var(--gap-hair)}
}
.voet a.toestand-aanwijzen,.voet a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:var(--stroke-rule);text-underline-offset:var(--gap-hair)}
.voet a:active{color:var(--color-text)}
@media (min-width:900px){
  .voet-binnen{flex-direction:row;align-items:center;justify-content:space-between}
}
/* Loopt de checklist mee als balk onderaan, dan houdt de voet daar plaats voor vrij */
.voet-met-balk .voet-binnen{padding-bottom:calc(var(--gap-element) + var(--control-lg) + var(--gap-element))}
@media (min-width:900px){
  .voet-met-balk .voet-binnen{padding-bottom:var(--gap-element)}
}

/* Aanwijzen: het logo springt op, draait een volle toer en landt met een veer. De vorm van het logo blijft onaangeroerd. Prompt 10. */
.merk span{transition:transform var(--duration-spring) var(--ease-spring)}
@keyframes logo-tol{0%{transform:none}30%{transform:translateY(-30%) rotate(-200deg) scale(1.25)}60%{transform:translateY(0) rotate(-360deg) scale(1.1)}80%{transform:rotate(-360deg) scale(0.94)}100%{transform:rotate(-360deg)}}
@media (hover:hover),(min-width:900px){
  .merk:hover img{animation:logo-tol var(--duration-story) var(--ease-calm)}
  .merk:hover span{transform:translateX(var(--gap-hair))}
}