/*********************************************/
/*  wegwijzer.css                            */
/*-------------------------------------------*/
/*  Opmaak van de Wegwijzer (app Wegwijzer:  */
/*  overzicht, detailpagina's en beheer).    */
/*                                           */
/*  Maten uit Figma, frame "NIK - Wegwijzer" */
/*  en "NIK - Themapagina Overzichten:       */
/*  Hulploketten/ Geld&Regels /Tips". Kleuren en lettergroottes  */
/*  staan als --bond-ww-* in theme.css van   */
/*  het NIKBS5-thema; hier staat alleen de   */
/*  vorm. De themaknoppen zijn              */
/*  .bond-chips--groot en het merkblokje is  */
/*  .bond-image-mark, allebei uit het thema. */
/*********************************************/

/* ---------- Ankermenu (themaknoppen op het overzicht) ---------- */
/* Plakt bovenaan, zoals op KKZ. Zolang het plakt schuift het hoofdmenu van het thema omhoog
   weg (klasse op <body>, gezet door het script in Wegwijzer.cshtml). Het hoofdmenu is zelf
   sticky (.sticky-top); translate laat het weg- en terugschuiven zonder dat de pagina springt. */

.wegwijzer-nav-sentinel {
  height: 1px;
  margin-bottom: -1px;
}

.wegwijzer-nav--anker {
  /* Geen scroll anchoring op de balk zelf: de browser mag de scrollpositie niet aan dit
     element ophangen terwijl het van hoogte wisselt. */
  overflow-anchor: none;
  position: sticky;
  top: 0;
  z-index: 1020; /* onder het hoofdmenu (1030), dat er bij het plakken overheen ligt tot het wegschuift */
  padding-block: 0.75rem;
  margin-bottom: var(--bond-space-md);
  background-color: var(--bond-bg);
}

.wegwijzer-nav--anker .wegwijzer-nav-list {
  margin-bottom: 0;
}

/* Geplakt: achtergrond en lijn over de hele breedte van het venster, niet alleen de container */
.wegwijzer-nav--anker.is-plakt::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 50%;
  z-index: -1;
  width: 100vw;
  transform: translateX(-50%);
  background-color: var(--bond-bg);
  border-bottom: 1px solid var(--bond-border);
  box-shadow: var(--bs-box-shadow-sm);
}

/* Geplakt is het label overbodig: de balk spreekt dan voor zich en houdt meer ruimte over */
.wegwijzer-nav--anker.is-plakt .wegwijzer-nav-label {
  display: none;
}

/* Geplakt: kleinere knoppen op één rij. Past het niet, dan schuift de rij opzij (het script
   houdt de actieve knop in beeld). Ongeplakt blijven ze zoals in het ontwerp. */
.wegwijzer-nav--anker.is-plakt {
  padding-block: 0.5rem;
}

.wegwijzer-nav--anker.is-plakt .wegwijzer-nav-list {
  flex-wrap: nowrap;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.wegwijzer-nav--anker.is-plakt .wegwijzer-nav-list::-webkit-scrollbar {
  display: none;
}

.wegwijzer-nav--anker.is-plakt .wegwijzer-nav-list > li {
  flex: 0 0 auto;
}

.wegwijzer-nav--anker.is-plakt .bond-chip {
  padding: 0.375rem 0.875rem;
  font-size: 1rem;
  line-height: 1.25;
  white-space: nowrap;
}

nav#theme-page-navigation {
  transition: transform 0.2s ease;
}

body.wegwijzer-anker-plakt nav#theme-page-navigation {
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
  nav#theme-page-navigation {
    transition: none;
  }
}

/* ---------- Thema ---------- */

.wegwijzer-thema {
  --ww-kleur: var(--bond-border);
  margin-bottom: 4rem; /* 64 tussen twee thema's */
  /* Net onder het geplakte ankermenu; --ww-nav-hoogte zet het script in Wegwijzer.cshtml
     zodra de balk plakt. Daarvoor een schatting van de geplakte hoogte (één rij knoppen). */
  scroll-margin-top: calc(var(--ww-nav-hoogte, 3.75rem) + 1rem);
}

/* --ww-kleur-tekst: tekst op een vlak in die kleur. Wit op blauw (8,7:1) en rood (4,6:1),
   zwart op de lichte kleuren. */
.wegwijzer-kleur-groen    { --ww-kleur: var(--bond-ww-groen); --ww-kleur-tekst: #000; }
.wegwijzer-kleur-oranje   { --ww-kleur: var(--bond-ww-oranje); --ww-kleur-tekst: #000; }
.wegwijzer-kleur-turkoois,
.wegwijzer-kleur-cyaan,
.wegwijzer-kleur-lichtblauw { --ww-kleur: var(--bond-ww-turkoois); --ww-kleur-tekst: #000; }
.wegwijzer-kleur-geel     { --ww-kleur: var(--bond-ww-geel); --ww-kleur-tekst: #000; }
.wegwijzer-kleur-blauw,
.wegwijzer-kleur-donkerblauw { --ww-kleur: var(--bond-ww-blauw); --ww-kleur-tekst: #fff; }
.wegwijzer-kleur-paars    { --ww-kleur: var(--bond-ww-paars); --ww-kleur-tekst: #000; }
.wegwijzer-kleur-rood     { --ww-kleur: var(--bond-ww-rood); --ww-kleur-tekst: #fff; }

/* Themaknoppen in de kleur van hun thema: actief een vlak, bij hover een rand.
   Zonder kleur op het thema blijft het lichtgroen van het NIK-thema (.bond-chip.active). */
.wegwijzer-nav-link.bond-chip[class*="wegwijzer-kleur-"]:hover {
  border-color: var(--ww-kleur);
}

.wegwijzer-nav-link.bond-chip[class*="wegwijzer-kleur-"].active,
.wegwijzer-nav-link.bond-chip[class*="wegwijzer-kleur-"][aria-current="true"] {
  background-color: var(--ww-kleur);
  border-color: var(--ww-kleur);
  color: var(--ww-kleur-tekst);
}

/* Themakop: balk van 6px links in de themakleur, 16px boven en onder, 32px
   opzij. Twee derde van de breedte, net als in het ontwerp (855 van 1280). */
.wegwijzer-thema-intro {
  max-width: 53.5rem;
  margin-bottom: var(--bond-space-md);
  padding: var(--bond-space-sm) 2rem;
  border-left: var(--bond-ww-bar) solid var(--ww-kleur);
}

.wegwijzer-thema-titel {
  display: flex;
  align-items: center;
  gap: var(--bond-space-sm);
  margin-bottom: var(--bond-space-sm);
  font-size: var(--bond-ww-intro-title);
  font-weight: 500;
  line-height: 1.1;
}

.wegwijzer-thema-icoon {
  flex: 0 0 auto;
  font-size: 0.9em;
  line-height: 1;
}

.wegwijzer-thema-tekst {
  font-size: var(--bond-ww-intro-text);
  line-height: 1.4;
}

.wegwijzer-thema-tekst > :last-child {
  margin-bottom: 0;
}

.wegwijzer-thema-intro .cta-knoppen {
  margin-top: var(--bond-space-md);
}

/* ---------- Raster ---------- */

.wegwijzer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bond-ww-gap);
}

@media (min-width: 768px) {
  .wegwijzer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
  .wegwijzer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wegwijzer-cel--groot { grid-column: span 2; }
}

.wegwijzer-cel {
  display: flex;
  min-width: 0;
}

/* ---------- Kaart ---------- */

.wegwijzer-kaart {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  background-color: var(--bond-surface);
  border: 1px solid var(--bond-overview-border);
  border-radius: var(--bond-radius-card);
  transition: border-color 0.15s ease;
}

.wegwijzer-kaart:hover {
  border-color: var(--bond-navy);
}

/* Foto 405x224, vlak tegen de randen; merkblokje van 32px rechtsboven. */
.wegwijzer-kaart__media {
  flex: 0 0 auto;
  aspect-ratio: 405 / 224;
}

.wegwijzer-kaart__media picture,
.wegwijzer-kaart__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wegwijzer-kaart .bond-image-mark {
  --bond-mark-size: var(--bond-overview-mark-size);
}

/* Tekstvlak: 32px boven, 24px opzij en onder. De links zakken naar de bodem,
   zodat ze in een rij kaarten op dezelfde hoogte staan. */
.wegwijzer-kaart__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
  padding: 2rem var(--bond-space-md) var(--bond-space-md);
}

.wegwijzer-kaart__titel {
  margin: 0;
  font-size: var(--bond-ww-card-title);
  font-weight: var(--bond-weight-strong);
  line-height: 1.333;
}

.wegwijzer-kaart__tekst {
  font-size: var(--bond-ww-card-text);
  line-height: 1.4;
}

.wegwijzer-kaart__tekst p {
  margin-bottom: 0;
}

.wegwijzer-kaart__links {
  position: relative;
  z-index: 2; /* boven de overlay-link, zodat elke link zijn eigen doel houdt */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
}

/* Links: 20px, onderstreept, pijl van 20px met 4px ertussen. */
.wegwijzer-kaart__links .bond-arrow-link {
  gap: 0.25rem;
  font-size: var(--bond-ww-card-text);
  font-weight: 500;
  line-height: 1.25;
  color: var(--bond-text);
}

.wegwijzer-kaart__links .bond-arrow-link::after {
  width: 1em;
  height: 1em;
}

/* De hele kaart klikbaar: een lege link die de kaart bedekt. */
.wegwijzer-kaart__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.wegwijzer-kaart__overlay:focus-visible {
  outline: 2px solid var(--bond-navy);
  outline-offset: -2px;
}

/* ---------- Groot: foto links, tekst rechts ---------- */

@media (min-width: 992px) {
  .wegwijzer-kaart--groot {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .wegwijzer-kaart--groot .wegwijzer-kaart__media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 100%;
  }

  .wegwijzer-kaart--groot .wegwijzer-kaart__body {
    padding: 2rem var(--bond-space-md) var(--bond-space-md);
  }
}

/* ---------- Quote ---------- */
/* Perzik vlak zonder rand, met links een balk van 8px in drie gelijke delen:
   navy, oranje, rood. Tekst cursief: 32/40 voor het citaat, 20/32 eronder. */

.wegwijzer-kaart--quote {
  border: 0;
  background-color: var(--bond-peach);
}

.wegwijzer-kaart--quote:hover {
  border: 0;
}

.wegwijzer-kaart--quote::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 8px;
  background: linear-gradient(
    var(--bond-navy) 0 33.33%,
    var(--bond-orange) 33.33% 66.66%,
    var(--bond-red) 66.66% 100%
  );
}

.wegwijzer-kaart--quote .wegwijzer-kaart__body {
  gap: var(--bond-space-sm);
  padding: 2.375rem 2.5rem 2.25rem 2.6875rem;
}

.wegwijzer-kaart__quote {
  margin: 0;
  font-size: var(--bond-ww-quote);
  font-style: italic;
  line-height: 1.25;
}

.wegwijzer-kaart--quote .wegwijzer-kaart__tekst {
  font-style: italic;
  line-height: 1.6;
}

/* ---------- Inkorten + modal (script in _KaartenScript.cshtml) ---------- */

.js-clamp-text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lines, 3);
  line-clamp: var(--lines, 3);
}

.custom-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  background: rgba(0, 0, 0, 0.45);
}

.custom-modal-overlay.show {
  display: block;
}

.ilv3-modal {
  z-index: 2010;
}

.modal-backdrop {
  z-index: 1990 !important;
}

/* ---------- Detailpagina ---------- */
/* De kop staat in de ContentPane (de Hero in de HeaderPane is op een detailpagina verborgen,
   zie _Detail.cshtml). Ruimte eronder tot de themaknoppen, zoals in het ontwerp. */
.wegwijzer-detail-kop {
  margin-bottom: var(--bond-space-lg);
}

/* Figma, frame "NIK - Themapagina Overzichten: Hulploketten/ Geld&Regels /Tips":
   rijen van 1280 breed in een wit vlak met een rand van #706F6F op 20%, 40px binnenruimte,
   tekst links (titel 32, tekst 20), beeld 363x211 rechts met het merkblokje. */

.wegwijzer-detail .wegwijzer-nav {
  margin-bottom: 2rem;
}

.wegwijzer-detail__inhoud {
  max-width: 43rem;
  margin-bottom: var(--bond-space-lg);
  font-size: var(--bond-ww-card-text);
  line-height: 1.4;
}

.wegwijzer-rijen {
  background-color: var(--bond-surface);
  border: 1px solid var(--bond-overview-border);
  border-radius: var(--bond-radius-card);
}

.wegwijzer-rij {
  display: grid;
  gap: var(--bond-space-md);
  padding: var(--bond-space-md);
}

/* De lijn hoort tussen de rijen, niet onder de laatste. */
.wegwijzer-rij + .wegwijzer-rij {
  border-top: 1px solid var(--bond-overview-border);
}

.wegwijzer-rij[hidden] {
  display: none;
}

@media (min-width: 768px) {
  .wegwijzer-rij {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 22.6875rem); /* beeld tot 363 */
    gap: 2.5rem;
    padding: 2.5rem;
  }
}

@media (min-width: 1200px) {
  .wegwijzer-rij {
    column-gap: 6.25rem; /* 100 tussen tekst en beeld */
  }
}

.wegwijzer-rij__body {
  display: flex;
  flex-direction: column;
  gap: var(--bond-space-sm);
  min-width: 0;
}

.wegwijzer-rij__titel {
  margin: 0;
  font-size: var(--bond-ww-intro-title);
  font-weight: 500;
  line-height: 1.1;
}

.wegwijzer-rij__titel:focus {
  outline: none;
}

.wegwijzer-rij__titel:focus-visible {
  outline: 2px solid var(--bond-navy);
  outline-offset: 4px;
}

.wegwijzer-rij__tekst {
  font-size: var(--bond-ww-card-text);
  line-height: 1.4;
  overflow-wrap: anywhere; /* lange URL's in de oude teksten */
}

.wegwijzer-rij__tekst > :last-child,
.wegwijzer-rij__link {
  margin-bottom: 0;
}

.wegwijzer-rij__tekst a {
  color: inherit;
}

.wegwijzer-rij__link .bond-arrow-link {
  font-size: var(--bond-ww-card-text);
  font-weight: 500;
  line-height: 1.25;
  color: var(--bond-text);
}

/* Beeld 363x211. Contain en niet cover: veel beelden zijn logo's van organisaties, en die
   mogen niet afgesneden worden. Een foto krijgt dan hooguit een witte rand. */
.wegwijzer-rij__media {
  align-self: start;
  aspect-ratio: 363 / 211;
  overflow: hidden;
  border-radius: var(--bond-radius-media);
  background-color: var(--bond-surface);
}

.wegwijzer-rij__media picture,
.wegwijzer-rij__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 767.98px) {
  .wegwijzer-rij__media {
    order: -1; /* op een telefoon het beeld boven de tekst, zoals bij de kaarten */
    max-width: 22.6875rem;
  }
}

/* Downloadpijl, voor een link naar een pdf of ander bestand ("Download de praatkaart"). */
.bond-arrow-link.wegwijzer-link--download::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5v9M4 7l4 4 4-4M2 14.5h12' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.bond-arrow-link.wegwijzer-link--download:hover::after {
  transform: translateY(2px);
}

/* "Laad meer": pil met zwarte rand, 20px medium, midden onder de lijst. */
.wegwijzer-laadmeer {
  display: flex;
  justify-content: center;
  margin-top: var(--bond-space-sm);
}

.wegwijzer-laadmeer__knop {
  padding: 0.75rem 1.5rem;
  font-size: var(--bond-ww-card-text);
  font-weight: 500;
  line-height: 1;
  border-radius: var(--bond-radius-pill);
}

.wegwijzer-terug {
  margin-top: var(--bond-space-lg);
}

.wegwijzer-nietgevonden {
  max-width: 43rem;
  padding-block: var(--bond-space-lg);
}

/* ---------- Beheer (alleen voor redacteuren) ---------- */

.wegwijzer-beheerbalk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bond-space-sm);
  margin-bottom: var(--bond-space-md);
  padding: 0.75rem var(--bond-space-sm);
  border: 1px dashed var(--bond-overview-border);
  border-radius: var(--bond-radius-card);
  font-size: 0.875rem;
}

/* ======================================================================
   Beheerscherm (_Beheer.cshtml) in de stijl van de 2sxc-admin
   ----------------------------------------------------------------------
   De klant kent de schermen van 2sxc (Data, Fields, Views). Dit scherm
   volgt die: Roboto, witte vlakken met een lichte schaduw, dichte rijen
   met dunne lijnen, ronde zwarte icoonknoppen met de omschrijving in de
   tooltip, tekstknoppen in hoofdletters in het donkerrood van 2sxc.
   De themakleur blijft als smalle balk links en als bolletje.
   ====================================================================== */

.wegwijzer-beheer {
  --ww-a-tekst: rgba(0, 0, 0, 0.87);
  --ww-a-zacht: rgba(0, 0, 0, 0.54);
  --ww-a-lijn: rgba(0, 0, 0, 0.12);
  --ww-a-hover: rgba(0, 0, 0, 0.04);
  --ww-a-accent: #7d0f31;   /* donkerrood van de 2sxc-admin (tellers, opslaan) */
  /* Verloop van de 2sxc-werkbalk: donker linksboven, lichter rood rechtsonder */
  --ww-a-knop: linear-gradient(135deg, #2e0510 0%, #6e1230 45%, #b3285a 100%);
  --ww-a-gevaar: #b3261e;
  --ww-a-schaduw: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
  padding-block: var(--bond-space-md) var(--bond-space-lg);
  color: var(--ww-a-tekst);
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.875rem;
  line-height: 1.43;
}

.wegwijzer-beheer h1,
.wegwijzer-beheer h2 {
  font-family: inherit;
  letter-spacing: normal;
}

/* ---- Kop van het scherm: "Wegwijzer > Beheer" zoals in de 2sxc-admin ---- */
.wegwijzer-beheer__kop,
.wegwijzer-beheer__thema-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.wegwijzer-beheer__kop {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--ww-a-lijn);
}

/* Zoals "WegwijzerThema Data" in de 2sxc-admin: groot, gewone dikte */
.wegwijzer-beheer__kop h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 400;
}

.wegwijzer-beheer__kop h1 .fa-angle-right {
  margin-inline: 0.25rem;
  color: var(--ww-a-zacht);
  font-size: 0.9em;
}

.wegwijzer-beheer__intro {
  margin: 0.125rem 0 0;
  color: var(--ww-a-zacht);
}

.wegwijzer-beheer__acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125rem;
}

/* ---- Knoppen ---- */
/* Rond, wit icoon op donkerrood met een witte rand: de knoppen van de 2sxc-werkbalk op de
   site (potlood, plus, ⋯). De klant kent ze daarvan. */
.ww-icoonknop {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0.125rem;
  padding: 0;
  color: #fff;
  font-size: 0.8125rem;
  text-decoration: none;
  background: var(--ww-a-knop);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  list-style: none;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.ww-icoonknop:hover,
.ww-icoonknop:focus-visible,
.wegwijzer-beheer__meer[open] > .ww-icoonknop {
  color: #fff;
  filter: brightness(1.25);
  transform: scale(1.06);
}

.ww-icoonknop:focus-visible {
  outline: 2px solid var(--ww-a-accent);
  outline-offset: 3px;
}

/* Een link (het oog) krijgt anders de linkkleur en onderstreping van het thema */
.wegwijzer-beheer a.ww-icoonknop,
.wegwijzer-beheer a.ww-icoonknop:hover,
.wegwijzer-beheer a.ww-icoonknop:focus {
  color: #fff;
  text-decoration: none;
}

/* Iconen van Font Awesome zijn niet even breed (potlood, oog, punten). Vaste breedte en
   regelhoogte, dan staat elk icoon in het midden van het rondje. */
.ww-icoonknop > .fas,
.ww-plus > .fas {
  display: block;
  width: 1em;
  line-height: 1;
  text-align: center;
}

.ww-icoonknop::-webkit-details-marker {
  display: none;
}

/* Tekstknop in hoofdletters, donkerrood: "+ KAART TOEVOEGEN". Het plusje is een rondje in
   de stijl van de werkbalk (.ww-plus). */
.ww-tekstknop {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  color: var(--ww-a-accent);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.0892em;
  text-transform: uppercase;
  background: none;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.ww-tekstknop:hover,
.ww-tekstknop:focus-visible {
  background-color: rgba(125, 15, 49, 0.06);
}

.ww-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: #fff;
  font-size: 0.6875rem;
  background: var(--ww-a-knop);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.ww-tekstknop.is-gevaar {
  color: var(--ww-a-gevaar);
}

.ww-tekstknop.is-gevaar:hover {
  background-color: rgba(179, 38, 30, 0.06);
}

/* ---- Uitleg en meldingen ---- */
.wegwijzer-beheer__uitleg,
.wegwijzer-beheer__let-op,
.wegwijzer-beheer__prullenbak {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: var(--ww-a-schaduw);
}

.wegwijzer-beheer__uitleg summary {
  color: var(--ww-a-accent);
  font-weight: 500;
  cursor: pointer;
}

.wegwijzer-beheer__uitleg ul {
  margin: 0.75rem 0 0;
}

.wegwijzer-beheer__let-op {
  border-left: 4px solid #e8a33d;
}

.wegwijzer-beheer__let-op h2,
.wegwijzer-beheer__prullenbak h2 {
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
}

.wegwijzer-beheer__let-op ul {
  margin: 0;
  padding-left: 1.25rem;
}

.wegwijzer-beheer__let-op li {
  display: list-item;
}

/* ---- Thema: een kaart (in Material-zin) met een smalle balk in de themakleur ---- */
/* Geen --ww-kleur hier zetten: deze regel staat later in het bestand dan .wegwijzer-kleur-...
   en zou die kleur dan overschrijven. Zonder themakleur valt het terug op grijs. */
.wegwijzer-beheer__thema {
  margin-bottom: 0.5rem;
  background-color: #fff;
  border-left: 4px solid var(--ww-kleur, rgba(0, 0, 0, 0.12));
  border-radius: 4px;
  box-shadow: var(--ww-a-schaduw);
}

.wegwijzer-beheer__thema-kop {
  flex-wrap: nowrap;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
}

.wegwijzer-beheer__thema.is-open .wegwijzer-beheer__thema-kop {
  border-bottom: 1px solid var(--ww-a-lijn);
}

/* De hele kop (icoon, naam, teller) is de knop om open te klappen */
.wegwijzer-beheer__uitklap {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.5rem;
  color: inherit;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.wegwijzer-beheer__uitklap:hover {
  background-color: var(--ww-a-hover);
}

.wegwijzer-beheer__thema-naam {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 1rem;
  font-weight: 500;
}

.wegwijzer-beheer__teller {
  color: var(--ww-a-zacht);
  white-space: nowrap;
}

.wegwijzer-beheer__pijlje {
  margin-left: auto;
  color: var(--ww-a-zacht);
  font-size: 0.75rem;
  transition: transform 0.15s ease;
}

.wegwijzer-beheer__thema.is-open .wegwijzer-beheer__pijlje {
  transform: rotate(180deg);
}

.wegwijzer-beheer__thema-inhoud {
  display: none;
}

.wegwijzer-beheer__thema.is-open .wegwijzer-beheer__thema-inhoud {
  display: block;
}

/* Bolletje in de themakleur met het icoon, zoals de tellers in de 2sxc-admin.
   Het icoon zit er als <i> in; zo wint de uitlijning het niet van Font Awesome. */
.wegwijzer-beheer__icoon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--ww-kleur-tekst, #000);
  font-size: 0.8125rem;
  line-height: 1;
  background-color: var(--ww-kleur, #e0e0e0);
  border-radius: 50%;
}

.wegwijzer-beheer__url {
  margin: 0;
  color: var(--ww-a-zacht);
  font-size: 0.75rem;
}

/* ---- Volgorde: kleine pijltjes boven en onder het nummer ---- */
.wegwijzer-beheer__volgorde {
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  width: 2rem;
  line-height: 1;
}

.wegwijzer-beheer__nummer {
  padding-block: 0.125rem;
  color: var(--ww-a-zacht);
  font-size: 0.75rem;
}

.wegwijzer-beheer__pijl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1rem;
  padding: 0;
  color: var(--ww-a-tekst);
  font-size: 0.625rem;
  background: none;
  border: 0;
  border-radius: 2px;
  opacity: 0.38;
  cursor: pointer;
}

.wegwijzer-beheer__pijl:hover,
.wegwijzer-beheer__pijl:focus-visible {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.08);
}

.wegwijzer-beheer__pijl.is-leeg {
  cursor: default;
}

/* Met een muis: pijltjes pas zichtbaar bij de regel waar je overheen gaat. Op een
   touchscherm (geen hover) blijven ze staan. */
@media (hover: hover) {
  .wegwijzer-beheer__kaart:not(:hover):not(:focus-within) > .wegwijzer-beheer__volgorde .wegwijzer-beheer__pijl,
  .wegwijzer-beheer__item:not(:hover):not(:focus-within) > .wegwijzer-beheer__volgorde .wegwijzer-beheer__pijl,
  .wegwijzer-beheer__thema-kop:not(:hover):not(:focus-within) > .wegwijzer-beheer__volgorde .wegwijzer-beheer__pijl {
    visibility: hidden;
  }
}

/* ---- Meer (⋯): verwijderen staat hierachter, als een Material-menu ---- */
.wegwijzer-beheer__meer {
  position: relative;
}

.wegwijzer-beheer__menu {
  position: absolute;
  top: calc(100% + 0.125rem);
  right: 0;
  z-index: 10;
  width: max-content;
  max-width: 18rem;
  padding: 0.5rem 0;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.wegwijzer-beheer__menu-item {
  display: block;
  width: 100%;
  padding: 0.625rem 1rem;
  color: var(--ww-a-gevaar);
  font-family: inherit;
  font-size: 0.875rem;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.wegwijzer-beheer__menu-item.is-gewoon {
  color: var(--ww-a-tekst);
  text-decoration: none;
}

.wegwijzer-beheer__menu-item .fas {
  width: 1.25em;
  margin-right: 0.5rem;
  text-align: center;
}

.wegwijzer-beheer__menu-item:hover {
  background-color: var(--ww-a-hover);
}

.wegwijzer-beheer__menu small {
  display: block;
  padding: 0 1rem 0.25rem;
  color: var(--ww-a-zacht);
  font-size: 0.75rem;
}

/* ---- Rijen: kaarten ---- */
.wegwijzer-beheer__leeg {
  margin: 0;
  padding: 0.75rem 1rem;
  color: var(--ww-a-zacht);
}

.wegwijzer-beheer__kaarten {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Vaste kolommen, zodat de kolomkoppen erboven precies passen:
   volgorde | beeld | tekst | acties (met een lijn ervoor, zoals in de 2sxc-tabellen) */
.wegwijzer-beheer__kaart,
.wegwijzer-beheer__kolommen {
  --ww-kolommen: 2rem 4rem minmax(0, 1fr) 5.75rem;
}

.wegwijzer-beheer__kolommen {
  display: grid;
  grid-template-columns: var(--ww-kolommen);
  gap: 0 0.75rem;
  padding: 0.375rem 0.5rem 0.375rem 0.25rem;
  color: var(--ww-a-zacht);
  font-size: 0.75rem;
  font-weight: 500;
  border-bottom: 1px solid var(--ww-a-lijn);
}

.wegwijzer-beheer__kolommen > span:first-child {
  text-align: center;
}

.wegwijzer-beheer__kaart {
  display: grid;
  grid-template-columns: var(--ww-kolommen);
  align-items: start;
  gap: 0.25rem 0.75rem;
  padding: 0.5rem 0.5rem 0.5rem 0.25rem;
  border-bottom: 1px solid var(--ww-a-lijn);
}

.wegwijzer-beheer__kaart:hover {
  background-color: var(--ww-a-hover);
}

.wegwijzer-beheer__kaart.is-verborgen > :not(.wegwijzer-beheer__acties) {
  opacity: 0.55;
}

.wegwijzer-beheer__mini {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 2.5rem;
  overflow: hidden;
  background-color: #eee;
  border-radius: 4px;
}

.wegwijzer-beheer__mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wegwijzer-beheer__mini.is-citaat {
  background-color: var(--bond-peach);
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1;
}


.wegwijzer-beheer__kaart-titel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
}

.wegwijzer-beheer__kaart-titel strong,
.wegwijzer-beheer__item strong {
  font-weight: 500;
}

/* Label zoals de chips in de 2sxc-admin */
.wegwijzer-beheer__soort {
  padding: 0 0.5rem;
  color: var(--ww-a-zacht);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background-color: rgba(0, 0, 0, 0.06);
  border-radius: 0.625rem;
}

.wegwijzer-beheer__doel {
  margin-top: 0.125rem;
  color: var(--ww-a-zacht);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.wegwijzer-beheer__doel a {
  color: inherit;
}

.wegwijzer-beheer__doel .fas {
  width: 1.1em;
  margin-right: 0.25rem;
  text-align: center;
}

.wegwijzer-beheer .is-let-op {
  color: #8a4b00;
}

.wegwijzer-beheer__soort.is-let-op {
  background-color: #fdf0dc;
}

/* De kolom rekt mee met uitgeklapte items (voor de lijn ervoor); de knoppen blijven bovenaan,
   op de hoogte van de titel. */
.wegwijzer-beheer__kaart > .wegwijzer-beheer__acties {
  flex-wrap: nowrap;
  align-self: stretch;
  align-items: flex-start;
  justify-content: flex-end;
  padding-left: 0.5rem;
  border-left: 1px solid var(--ww-a-lijn);
}

/* Teller zoals in de kolom Items van de 2sxc-admin: donkerrood bolletje, wit cijfer */
.ww-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.375rem;
  height: 1.375rem;
  padding: 0 0.375rem;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  background: var(--ww-a-knop);
  border-radius: 0.6875rem;
}

.wegwijzer-beheer__items > summary .ww-badge {
  margin-inline: 0.25rem 0.125rem;
}

.wegwijzer-beheer__kaart-tekst {
  min-width: 0;
  padding-top: 0.25rem;
}

/* ---- Items van een detailpagina: uitklapbaar, als een expansion panel ---- */
.wegwijzer-beheer__items > summary {
  width: fit-content;
  color: var(--ww-a-accent);
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}

.wegwijzer-beheer__items > summary::-webkit-details-marker {
  display: none;
}

.wegwijzer-beheer__items > summary::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-left: 0.5em;
  vertical-align: 0.2em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.wegwijzer-beheer__items[open] > summary::after {
  vertical-align: 0;
  transform: rotate(-135deg);
}

.wegwijzer-beheer__items ol {
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  background-color: #fafafa;
  border: 1px solid var(--ww-a-lijn);
  border-radius: 4px;
}

.wegwijzer-beheer__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.125rem 0.25rem 0.125rem 0;
}

.wegwijzer-beheer__item-titel {
  flex: 0 1 auto;
  min-width: 0;
}

.wegwijzer-beheer__item > .wegwijzer-beheer__acties {
  flex-wrap: nowrap;
  margin-left: auto;
}

.wegwijzer-beheer__item .ww-icoonknop {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.75rem;
}

.wegwijzer-beheer__item + .wegwijzer-beheer__item {
  border-top: 1px solid var(--ww-a-lijn);
}



/* ---- Toevoegen ---- */
.wegwijzer-beheer__toevoegen {
  padding: 0.25rem 0.5rem;
}

.wegwijzer-beheer__items .wegwijzer-beheer__toevoegen {
  padding: 0.25rem 0 0;
}

.wegwijzer-beheer > .wegwijzer-beheer__toevoegen {
  margin-bottom: 1.5rem;
  padding: 0;
}

/* ---- Niet meer in gebruik ---- */
.wegwijzer-beheer__prullenbak h2 .fas {
  margin-right: 0.375rem;
  color: var(--ww-a-zacht);
}

.wegwijzer-beheer__prullenbak > p {
  color: var(--ww-a-zacht);
}

.wegwijzer-beheer__prullenbak ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wegwijzer-beheer__prullenbak li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.25rem 0;
  border-top: 1px solid var(--ww-a-lijn);
}

/* Miniatuur bij een item: klein, en het logo past er heel in (zoals op de detailpagina) */
.wegwijzer-beheer__mini.is-klein {
  flex: 0 0 auto;
  width: 3rem;
  height: 1.875rem;
  background-color: #fff;
  border: 1px solid var(--ww-a-lijn);
}

.wegwijzer-beheer__mini.is-klein img {
  object-fit: contain;
}

/* ---- Wie werkt waaraan ---- */

/* Onder een kaart of item: "Gewijzigd vandaag 14:05 door Anne" of "Uit import nog niet bewerkt" */
.wegwijzer-beheer__status {
  color: var(--ww-a-zacht);
  font-size: 0.75rem;
}

.wegwijzer-beheer__status strong {
  color: var(--ww-a-tekst);
  font-weight: 500;
}

.wegwijzer-beheer__item-titel .wegwijzer-beheer__status {
  display: block;
}

/* Blauw: werkvoorraad, geen fout (dat is het oranje van is-let-op) */
.wegwijzer-beheer__soort.is-import {
  background-color: #e3ecfb;
  color: #1d4f9c;
}

.wegwijzer-beheer__filter {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  cursor: pointer;
}

.wegwijzer-beheer__recent {
  margin-bottom: 1.5rem;
  border: 1px solid var(--ww-a-lijn);
  border-radius: 4px;
  background-color: #fff;
}

.wegwijzer-beheer__recent summary {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}

.wegwijzer-beheer__recent summary h2 {
  display: inline;
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
}

.wegwijzer-beheer__recent ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wegwijzer-beheer__recent li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto 9rem auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-top: 1px solid var(--ww-a-lijn);
}

.wegwijzer-beheer__recent-titel {
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wegwijzer-beheer__recent-wanneer,
.wegwijzer-beheer__recent-wie {
  color: var(--ww-a-zacht);
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .wegwijzer-beheer__recent li {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .wegwijzer-beheer__recent li > .wegwijzer-beheer__soort,
  .wegwijzer-beheer__recent-wanneer {
    display: none;
  }
}

/* Filter aan: alleen de werkvoorraad. Thema's met werk klappen vanzelf open. */
.wegwijzer-beheer.is-filter-controle .wegwijzer-beheer__thema:not([data-ww-te-controleren]),
.wegwijzer-beheer.is-filter-controle .wegwijzer-beheer__kaart:not([data-ww-te-controleren]),
.wegwijzer-beheer.is-filter-controle .wegwijzer-beheer__item:not([data-ww-te-controleren]),
.wegwijzer-beheer.is-filter-controle .wegwijzer-beheer__recent,
.wegwijzer-beheer.is-filter-controle .wegwijzer-beheer__prullenbak {
  display: none;
}

.wegwijzer-beheer.is-filter-controle .wegwijzer-beheer__thema[data-ww-te-controleren] .wegwijzer-beheer__thema-inhoud {
  display: block;
}

/* Gecontroleerd: groen label, en de vinkjesknop groen zodra hij aan staat */
.wegwijzer-beheer__soort.is-gecontroleerd {
  background-color: #e3f4e5;
  color: #1e6b2a;
}

.wegwijzer-beheer__soort.is-gecontroleerd .fa-check {
  font-size: 0.85em;
}

/* Nog niet gecontroleerd: een open knop met grijs vinkje, zodat hij niet "aan" lijkt */
.wegwijzer-beheer .wegwijzer-beheer__controle {
  color: var(--ww-a-zacht);
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--ww-a-lijn), 0 0 0 2px #fff;
}

.wegwijzer-beheer .wegwijzer-beheer__controle:hover {
  color: #1e6b2a;
  box-shadow: inset 0 0 0 1.5px #1e6b2a, 0 0 0 2px #fff;
}

.wegwijzer-beheer .wegwijzer-beheer__controle.is-gecontroleerd {
  color: #fff;
  background: #2e7d32;
  box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, 0.3);
}

.wegwijzer-beheer .wegwijzer-beheer__controle:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* Het i'tje achter de status: toegevoegd en bijgewerkt, met datum en naam.
   Tooltip in CSS en niet met title, zodat hij ook met de tab-toets verschijnt
   en direct komt (een title-tooltip laat even op zich wachten). */
.ww-info {
  position: relative;
  display: inline-block;
  margin-left: 0.25rem;
  color: var(--ww-a-zacht);
  cursor: help;
}

.ww-info:hover,
.ww-info:focus-visible {
  color: var(--ww-a-accent);
  outline: none;
}

.ww-info::after {
  content: attr(data-ww-info);
  position: absolute;
  bottom: calc(100% + 0.375rem);
  left: 50%;
  z-index: 20;
  width: max-content;
  max-width: 22rem;
  padding: 0.375rem 0.625rem;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  white-space: pre-line;
  text-align: left;
  background-color: rgba(33, 33, 33, 0.95);
  border-radius: 4px;
  box-shadow: var(--ww-a-schaduw);
  transform: translateX(-50%);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
}

.ww-info:hover::after,
.ww-info:focus-visible::after {
  visibility: visible;
  opacity: 1;
}

/* ---- Venster "Item verplaatsen" (naar de detailpagina van een andere kaart) ---- */
.wegwijzer-beheer__venster {
  width: min(30rem, calc(100vw - 2rem));
  padding: 1.5rem;
  color: var(--ww-a-tekst);
  border: 0;
  border-radius: 4px;
  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
}

.wegwijzer-beheer__venster::backdrop {
  background-color: rgba(0, 0, 0, 0.32);
}

.wegwijzer-beheer__venster h2 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 500;
}

.wegwijzer-beheer__venster label {
  display: block;
  margin: 1rem 0 0.25rem;
  color: var(--ww-a-zacht);
  font-size: 0.75rem;
}

.wegwijzer-beheer__venster select {
  width: 100%;
  padding: 0.5rem;
  font: inherit;
  border: 1px solid var(--ww-a-lijn);
  border-radius: 4px;
}

.wegwijzer-beheer__venster-uitleg {
  margin: 0.5rem 0 0;
  color: var(--ww-a-zacht);
  font-size: 0.75rem;
}

.wegwijzer-beheer__venster-knoppen {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.ww-tekstknop.is-hoofd {
  color: #fff;
  background: var(--ww-a-knop);
}

.ww-tekstknop.is-hoofd:hover,
.ww-tekstknop.is-hoofd:focus-visible {
  background: var(--ww-a-accent);
}