/* ==========================================================================
   Wijze Wolf — Components: buttons, nav, drawer, cards, chips, forms
   ========================================================================== */

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 48px;
  padding: .7rem 1.5rem;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .98rem;
  line-height: 1;
  text-align: center;
  transition: transform var(--dur) var(--ease-spring), background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn .btn__icon { flex: none; }
.btn:active { transform: translateY(0); }

/* Primary = amber fill, DARK label (white-on-amber fails AA).
   Hover keeps the amber fill + dark label (5.56:1 AA) and lifts/elevates — darkening
   to accent-dark would drop white below AA and dark below AA, so we don't recolour. */
.btn--primary { background: var(--c-accent); color: var(--c-on-accent); box-shadow: var(--shadow-cta); }
.btn--primary:hover { background: var(--c-accent); color: var(--c-on-accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Secondary = green ghost outline */
.btn--secondary { background: transparent; color: var(--c-primary); border: 1.5px solid var(--c-primary); }
.btn--secondary:hover { background: var(--c-primary); color: var(--c-on-primary); transform: translateY(-2px); }

/* On dark bands */
.btn--light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.5); }
.btn--light:hover { background: #fff; color: var(--c-primary-dark); transform: translateY(-2px); }

/* Green solid */
.btn--green { background: var(--c-primary); color: #fff; }
.btn--green:hover { background: var(--c-primary-dark); color: #fff; transform: translateY(-2px); }

/* Text link CTA */
.link-cta {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; color: var(--c-link);
  background-image: linear-gradient(var(--c-accent), var(--c-accent));
  background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.link-cta:hover { background-size: 100% 2px; gap: .65rem; }
.link-cta .ww-icon { color: var(--c-accent); }

/* --- Primary nav (desktop) --- */
.primary-nav { display: flex; align-items: center; gap: 1.75rem; }
.primary-menu { display: flex; align-items: center; gap: 1.5rem; }
/* Anders breekt "Über uns" of "Politique de confidentialité" midden in het item af zodra de
   balk krap wordt, en dat maakt de rij ongelijk hoog. */
.primary-menu > li > a { white-space: nowrap; }
.primary-menu a {
  position: relative;
  font-weight: 500;
  font-size: .98rem;
  color: var(--c-text);
  padding: .35rem 0;
}
.primary-menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--c-accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.primary-menu a:hover, .primary-menu .current-menu-item > a { color: var(--c-primary-dark); }
.primary-menu a:hover::after, .primary-menu .current-menu-item > a::after { transform: scaleX(1); }

/* Submenu */
.primary-menu .menu-item-has-children { position: relative; }
.primary-menu .sub-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 230px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: .5rem;
  display: flex; flex-direction: column; gap: .15rem;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.primary-menu .menu-item-has-children:hover > .sub-menu,
.primary-menu .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(4px);
}
/* Niet afbreken: het uitklapblok groeit mee met het langste item. Een vaste breedte zou
   je bij elke nieuwe of hernoemde dienst opnieuw moeten raden. min-width blijft de
   ondergrens, zodat een menu met alleen korte items niet smal en priegelig wordt. */
.primary-menu .sub-menu a { padding: .55rem .85rem; border-radius: var(--r-sm); width: 100%; white-space: nowrap; }
.primary-menu .sub-menu a::after { display: none; }
.primary-menu .sub-menu a:hover { background: var(--c-surface-2); }

/* Aanmelden is de stap die de site wil dat je zet, dus dat item leest als een knop. Uitgelijnd
   op btn--secondary en niet op de oranje belknop ernaast: twee volle knoppen naast elkaar
   vechten om dezelfde aandacht en dan wint er geen van beide. */
.primary-menu > .menu-cta > a {
  padding: .45rem 1rem;
  border: 1.5px solid var(--c-primary);
  border-radius: var(--r-pill);
  color: var(--c-primary);
  font-weight: 600;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.primary-menu > .menu-cta > a::after { display: none; }
.primary-menu > .menu-cta > a:hover,
.primary-menu > .menu-cta.current-menu-item > a {
  background: var(--c-primary);
  color: var(--c-on-primary);
}

/* Het telefoonnummer breekt anders midden in de knop af tot twee regels. */
.nav-cta { margin-left: .25rem; flex-shrink: 0; white-space: nowrap; }
.nav-cta .ww-icon { color: currentColor; }

/* --- Mobile nav toggle --- */
.nav-toggle { display: none; width: 48px; height: 48px; place-items: center; color: var(--c-primary); border-radius: var(--r-sm); }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* --- Cards --- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--c-accent) 55%, var(--c-border)); }
/* De titel van een kaart is een h2 geworden, want op de zoekpagina sprong de koppenstructuur van
   h1 naar h3. Het formaat blijft dat van een h3: de rangorde is voor een schermlezer, de maat voor
   het oog, en die twee hoeven niet hetzelfde te zeggen. */
.card__titel { font-size: var(--fs-h3); }

/* Icon chip */
.icon-chip {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
  color: var(--c-accent-dark);
}
.icon-chip .ww-icon { color: var(--c-accent-dark); }

/* Credential / feature chips */
.chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .9rem;
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
  color: var(--c-primary);
  font-size: var(--fs-small); font-weight: 600;
}
.chip .ww-icon { color: var(--c-accent); }

/* --- Forms --- */
.ww-form { display: grid; gap: 1.1rem; min-width: 0; max-width: 100%; }
.ww-field { display: grid; gap: .4rem; min-width: 0; }
.ww-field label { font-weight: 600; font-size: var(--fs-small); }
.ww-field input, .ww-field textarea, .ww-field select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: .8rem 1rem;
  background: var(--c-surface);
  border: 1px solid var(--c-field-border);
  border-radius: var(--r-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ww-field input:focus-visible, .ww-field textarea:focus-visible, .ww-field select:focus-visible {
  outline: 2px solid var(--c-accent-dark);
  outline-offset: 2px;
  border-color: var(--c-primary);
}
.ww-field input[aria-invalid="true"],
.ww-field textarea[aria-invalid="true"],
.ww-field select[aria-invalid="true"] { border-color: var(--c-error); border-width: 2px; }
.ww-field .field-error { color: var(--c-error); font-size: var(--fs-small); font-weight: 600; }
.ww-field textarea { min-height: 140px; resize: vertical; }

/* --- Mobile drawer ---
   1200 en niet 900: in de balk staan het menu, de knop Aanmelden, de belknop en de taalkiezer
   naast elkaar. In het Duits zijn de menuwoorden zoveel langer dat die rij pas vanaf ongeveer
   1200 pixels past. Bleef de drempel op 1080, dan liep de kiezer op een tabletscherm het beeld
   uit; dat was op 900 al zo en het is er met het item Aanmelden erbij niet beter op geworden.

   1199.98 en niet 1200: met max-width 1200px kreeg een venster van precies 1200 pixels de lade,
   terwijl de balk daar past. De Duitse rij is de breedste en heeft 1095 pixels nodig binnen een
   container van 1200. Een venster van 1200 is geen randgeval maar een gewone laptopbreedte. */
@media (max-width: 1199.98px) {
  .nav-toggle { display: grid; }
  .primary-nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(86vw, 360px);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: .25rem;
    padding: 5.5rem 1.5rem 2rem;
    background: color-mix(in srgb, var(--c-bg) 96%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-left: 1px solid var(--c-border);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .32s var(--ease), visibility 0s var(--ease) .32s;
    z-index: var(--z-drawer);
    overflow-y: auto;
  }
  .primary-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .32s var(--ease), visibility 0s var(--ease) 0s;
  }
  .primary-menu { flex-direction: column; align-items: stretch; gap: .15rem; width: 100%; }
  .primary-menu > .menu-item > a { padding: .85rem .5rem; font-size: 1.1rem; border-bottom: 1px solid var(--c-border); }
  .primary-menu a::after { display: none; }
  /* De hover- en focus-within-regels hierboven staan buiten deze media query en wegen zwaarder
     dan een losse .primary-menu .sub-menu. Raak je op een telefoon het bovenliggende item aan,
     dan zet de browser :hover vast en krijgt de link focus, waarna translateX(-50%) alsnog
     terugkomt. In de lade is het submenu schermbreed, dus dat schuift de dienstnamen een halve
     menubreedte naar links het beeld uit. Alle drie de toestanden horen hier dus samen. */
  .primary-menu .sub-menu,
  .primary-menu .menu-item-has-children:hover > .sub-menu,
  .primary-menu .menu-item-has-children:focus-within > .sub-menu {
    position: static; transform: none; opacity: 1; visibility: visible;
    box-shadow: none; border: 0; padding: .25rem 0 .5rem 1rem;
    background: transparent; min-width: 0;
  }
  /* Op een telefoon staat het submenu in de kolom zelf; daar moet een lange dienstnaam
     juist wél kunnen afbreken, anders loopt hij buiten het scherm. */
  .primary-menu .sub-menu a { white-space: normal; }
  /* In de lade staat alles onder elkaar met een scheidingslijn eronder. De knopvorm zou daar
     een losse pil in een lijst met tekstregels zijn; hij houdt zijn kleur en zijn gewicht,
     verder is het gewoon een regel. */
  .primary-menu > .menu-cta > a {
    padding: .85rem .5rem;
    border: 0;
    border-bottom: 1px solid var(--c-border);
    border-radius: 0;
  }
  .primary-menu > .menu-cta > a:hover,
  .primary-menu > .menu-cta.current-menu-item > a { background: transparent; color: var(--c-primary-dark); }
  .nav-cta { margin-top: 1.25rem; }
  body.nav-open { overflow: hidden; }
}

/* --- Formuliermeldingen --- */
.form-success, .form-error {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1.5rem;
  padding: .9rem 1.1rem;
  border-radius: var(--r-sm);
  font-weight: 600;
  background: var(--c-surface);
  border-left: 4px solid currentColor;
}
.form-success { color: var(--c-primary); }
.form-error { color: var(--c-error); }
.form-success:focus-visible, .form-error:focus-visible { outline: 2px solid var(--c-accent-dark); outline-offset: 2px; }

/* --- Taalkiezer --- */
/* Een <details> en geen eigen menu met JavaScript: openen, sluiten en de toetsenbordbediening
   krijg je dan van de browser, en zonder JavaScript werkt hij ook. taal.js doet er alleen
   Escape en klikken-buiten bij. */
.taalkiezer { position: relative; flex-shrink: 0; }
.taalkiezer__knop {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 44px;
  padding: .25rem .5rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-text-muted);
  cursor: pointer;
  list-style: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* Het driehoekje van de browser weg; er staat een eigen pijltje. */
.taalkiezer__knop::-webkit-details-marker { display: none; }
.taalkiezer__knop::marker { content: ""; }
.taalkiezer__knop:hover { background: var(--c-surface-2); color: var(--c-text); }
.taalkiezer[open] .taalkiezer__knop { background: var(--c-surface-2); color: var(--c-text); }
.taalkiezer__pijl { transition: transform var(--dur) var(--ease); }
.taalkiezer[open] .taalkiezer__pijl { transform: rotate(180deg); }

.taalkiezer__lijst {
  position: absolute;
  top: calc(100% + .35rem);
  right: 0;
  z-index: 60;
  min-width: 11rem;
  margin: 0;
  padding: .35rem;
  list-style: none;
  background: var(--c-surface);
  border: 1px solid var(--c-field-border);
  border-radius: var(--r-sm);
  box-shadow: 0 12px 28px rgba(30, 42, 35, .14);
}
.taalkiezer__keuze {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .25rem .55rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-text);
  text-decoration: none;
  white-space: nowrap;
}
.taalkiezer__keuze:hover { background: var(--c-surface-2); }
.taalkiezer__keuze.is-actief { font-weight: 700; }
.taalkiezer__keuze.is-actief .taalkiezer__naam::after { content: " \2713"; }
.taalkiezer__keuze::after { display: none; }
.taalkiezer__code { letter-spacing: .02em; }
/* flex-shrink uit: zonder dit knijpt de balk de vlaggen tot streepjes zodra het krap wordt. */
.taalkiezer .vlag { display: block; flex-shrink: 0; border-radius: 2px; box-shadow: 0 0 0 1px rgba(30, 42, 35, .18); }

@media (max-width: 1199.98px) {
  /* In de lade is er ruimte zat en hoeft er niets over de pagina heen te zweven. */
  .taalkiezer { margin-top: 1.25rem; }
  .taalkiezer__knop { font-size: 1rem; padding: .45rem .6rem; }
  .taalkiezer__lijst { position: static; min-width: 0; margin-top: .35rem; box-shadow: none; }
  .taalkiezer__keuze { font-size: 1rem; }
}