/* Label listing — used by the Labels and Distribution Labels pages.
   Styles the A-Z navigation and the label list, and drives the letter
   filtering: the JS toggles a body class (az-filter-A ... az-filter-hash)
   and the rules below show only the matching items.

   Until 2026-08-03 this lived in WPBakery's per-page custom CSS
   (postmeta _wpb_post_custom_css) and was only emitted while that plugin
   was active. WPBakery has been removed; the rules are unchanged. */

/* Basis: eenvoudige lijst met underline */
.list-small { list-style: none; margin: 0; padding: 0; }
.list-small .label-item { padding: 6px 0; margin: 0; text-align: left; }
.list-small .details a {
  display: inline-block;
  text-decoration: none;
  color: #222;
  padding-bottom: 3px;
  border-bottom: 1px solid #e0e0e0;
  transition: color .12s ease, border-color .12s ease;
}
.list-small .details a:hover { color: #000; border-bottom-color: #000; }
.list-small .details h4 { margin: 0; display: inline; font-size: 16px; font-weight: 600; }

/* A–Z nav styling (ongewijzigd) */
.az-buttons-row { display:flex; gap:8px; align-items:center; margin-bottom:12px; overflow-x:auto; padding-bottom:6px; }
.az-btn { display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:30px; padding:0 8px; border:0.5px solid #7c7c7c; background:#fafafa; color:#7c7c7c; text-decoration:none; font-weight:500; border-radius:6px; cursor:pointer; }
.az-btn:hover { background:#f0f0f0; color:#333; }
.az-disabled { opacity:0.35; cursor:default; border-color:transparent; background:transparent; }
.az-all-link { margin-right:8px; }

/* --- body-class filtering (JS toggles classes like az-filter-A or az-filter-hash) --- */
/* Default: show all */
.list-small .label-item { display: block; }

/* When a filter class is present, hide all items first */
body[class*="az-filter-"] .list-small .label-item { display: none; }

/* Show only the matching groups */
body.az-filter-A .list-small .letter-A { display: block; }
body.az-filter-B .list-small .letter-B { display: block; }
body.az-filter-C .list-small .letter-C { display: block; }
body.az-filter-D .list-small .letter-D { display: block; }
body.az-filter-E .list-small .letter-E { display: block; }
body.az-filter-F .list-small .letter-F { display: block; }
body.az-filter-G .list-small .letter-G { display: block; }
body.az-filter-H .list-small .letter-H { display: block; }
body.az-filter-I .list-small .letter-I { display: block; }
body.az-filter-J .list-small .letter-J { display: block; }
body.az-filter-K .list-small .letter-K { display: block; }
body.az-filter-L .list-small .letter-L { display: block; }
body.az-filter-M .list-small .letter-M { display: block; }
body.az-filter-N .list-small .letter-N { display: block; }
body.az-filter-O .list-small .letter-O { display: block; }
body.az-filter-P .list-small .letter-P { display: block; }
body.az-filter-Q .list-small .letter-Q { display: block; }
body.az-filter-R .list-small .letter-R { display: block; }
body.az-filter-S .list-small .letter-S { display: block; }
body.az-filter-T .list-small .letter-T { display: block; }
body.az-filter-U .list-small .letter-U { display: block; }
body.az-filter-V .list-small .letter-V { display: block; }
body.az-filter-W .list-small .letter-W { display: block; }
body.az-filter-X .list-small .letter-X { display: block; }
body.az-filter-Y .list-small .letter-Y { display: block; }
body.az-filter-Z .list-small .letter-Z { display: block; }
body.az-filter-hash .list-small .letter-hash { display: block; }

/* --- Remove caret/visual jump on click --- */
/* Prevent mouse click from leaving a persistent outline; keep :focus-visible for keyboard */
.az-btn:focus { outline: none; }
.az-all-link:focus { outline: none; }
.list-small .details a:focus { outline: none; border-bottom-color: #e0e0e0; box-shadow: none; }

/* Keep keyboard focus visible */
.az-btn:focus-visible, .az-all-link:focus-visible, .list-small .details a:focus-visible {
  outline: 3px solid rgba(255,213,79,0.12);
  outline-offset: 2px;
}

/* Small screens */
@media (max-width:600px) {
  .az-btn { min-width:28px; height:28px; font-size:13px; }
  .list-small .details h4 { font-size:15px; }
}

/* Basis: A–Z knoppen altijd dezelfde kleur (niet lichtgrijs) */
.az-btn,
.az-all-link {
  color: #222 !important;               /* gewenste vaste kleur voor letters */
  background: #fafafa;
  border-color: #7c7c7c;
  text-decoration: none;
}

/* Zorg dat visited/active/focus/hover de kleur niet veranderen */
.az-btn:visited,
.az-btn:active,
.az-btn:focus,
.az-btn:hover,
.az-all-link:visited,
.az-all-link:active,
.az-all-link:focus,
.az-all-link:hover {
  color: #222 !important;               /* houdt kleur constant */
}

/* Optioneel: hover verandert alleen achtergrond, niet kleur */
.az-btn:hover,
.az-all-link:hover {
  background: #f6f6f6;
}

/* Wanneer een filter actief is (body class), voorkom dat corresponderende knop donkerder wordt */
body[class*="az-filter-"] .az-btn,
body[class*="az-filter-"] .az-all-link {
  color: #222 !important;
}

/* Als je specifieke styling voor de actieve knop had (bijv. .active), overschrijf die kleur */
.az-btn.active,
.az-btn.active:hover,
.az-btn.active:focus {
  color: #222 !important;
  background: #fafafa !important;       /* of kies een subtiele achtergrond als je wilt */
  border-color: #7c7c7c !important;
}

/* Houd keyboard focus zichtbaar maar zonder kleurverandering */
.az-btn:focus-visible,
.az-all-link:focus-visible {
  outline: 3px solid rgba(255,213,79,0.12);
  outline-offset: 2px;
  color: #222 !important;
}

/* Kleine schermen: behoud dezelfde kleur */
@media (max-width:600px) {
  .az-btn, .az-all-link { color: #222 !important; }
}

html {
  overflow-y: scroll;
}