/* ZEITLOSEN UI base (keep empty or add site-wide rules)
   Your per-view overrides can stay in template CSS. */

/* ---------- Toggle (Kacheln | Liste) ---------- */
.zl-view-tabs{
  display:inline-flex;
  border:1px solid var(--sp-border-color);
  border-radius:.5rem;
  overflow:hidden;
  margin:.5rem 0 1rem;
  background: var(--zl-card-bg, #fff);
}
.zl-view-tabs .tab{
  padding:.35rem .75rem;
  font-size:.9rem;
  color: var(--zl-link, #8A5A28);
  text-decoration:none;
  border-right:1px solid var(--sp-border-color);
  line-height:1.2;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.zl-view-tabs .tab:last-child{ border-right:none; }
.zl-view-tabs .tab:hover,
.zl-view-tabs .tab:focus{
  background: var(--zl-gold, #C7923E);
  color: var(--sp-text-invert, #fff);
}
/* ACTIEF = GOUD */
.zl-view-tabs .tab[aria-selected="true"]{
  background: var(--zl-gold, #C7923E);
  color: var(--sp-text-invert, #fff);
  border-color: var(--zl-gold, #C7923E);
}
/* Zorg dat laatste actieve tab ook geen rechter-border toont */
.zl-view-tabs .tab[aria-selected="true"]:last-child {
  border-right: none;
}
/* Focus zichtbaar maken in light mode */
.zl-view-tabs .tab:focus-visible {
  outline: 2px solid var(--zl-gold);
  outline-offset: 3px;
}

/* Optional alt pill-toggle (if you use it) */
.zl-layout-toggle{
  display:flex; gap:.5rem; align-items:center; margin:.5rem 0 1rem;
  border:1px solid var(--sp-border-color); border-radius:12px; padding:.35rem;
  background: var(--sp-section-bg, #F5F7FA);
}
.zl-toggle-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.4rem .9rem; border-radius:9999px; text-decoration:none;
  border:1px solid transparent; font-weight:600; color: var(--zl-link, #8A5A28);
  transition: background .15s ease, color .15s ease;
}
.zl-toggle-btn:hover, .zl-toggle-btn:focus{
  background: color-mix(in srgb, var(--sp-border-color) 55%, #fff 45%);
  text-decoration: underline; text-underline-offset: 3px;
}
.zl-layout-toggle .zl-toggle-btn[aria-selected="true"]{
  background: var(--zl-gold, #C7923E);
  color: var(--sp-text-invert, #fff);
  border-color: var(--zl-gold, #C7923E);
}

/* ========== TOGGLE (Kacheln | Liste) in dark mode ========== */
[data-bs-theme="dark"] .zl-view-tabs{
  background: #0e0f12; /* fallback */
  background: color-mix(in srgb, #0e0f12 70%, var(--zl-card-bg, #fff) 30%);
  border-color: rgba(255,255,255,.14);
}
[data-bs-theme="dark"] .zl-view-tabs .tab{
  color: rgba(255,255,255,.88);
  border-color: rgba(255,255,255,.12);
}
[data-bs-theme="dark"] .zl-view-tabs .tab:hover,
[data-bs-theme="dark"] .zl-view-tabs .tab:focus{
  background: var(--zl-gold);
  color: var(--sp-light);            /* wit */
}
[data-bs-theme="dark"] .zl-view-tabs .tab[aria-selected="true"]{
  background: var(--zl-gold);
  color: var(--sp-light);
  border-color: var(--zl-gold);
}
[data-bs-theme="dark"] .zl-view-tabs .tab:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--zl-gold) 70%, #fff 30%);
  outline-offset: 3px;
}

/* (optioneel) alternatieve pill-toggle */
[data-bs-theme="dark"] .zl-layout-toggle{
  background: #0e0f12; /* fallback */
  background: color-mix(in srgb, #0e0f12 80%, var(--sp-section-bg, #F5F7FA) 20%);
  border-color: rgba(255,255,255,.14);
}
[data-bs-theme="dark"] .zl-layout-toggle .zl-toggle-btn{
  color: rgba(255,255,255,.88);
}
[data-bs-theme="dark"] .zl-layout-toggle .zl-toggle-btn:hover,
[data-bs-theme="dark"] .zl-layout-toggle .zl-toggle-btn:focus{
  background: rgba(255,255,255,.06);
}
[data-bs-theme="dark"] .zl-layout-toggle .zl-toggle-btn[aria-selected="true"]{
  background: var(--zl-gold);
  color: var(--sp-light);
  border-color: var(--zl-gold);
}

/*************************************************************
  ZEITLOSEN — Tag/Pill chips (compact, dark-mode)
*************************************************************/

/* ---------- TAGS/PILLS onder lijst/blog ---------- */
/* Container */
.category-tags--from-articles{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin:.5rem 0 1rem; padding:0; list-style:none;
}

/* Pill (match module feel, compact) */
.category-tags--from-articles a.zl-tagchip{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.875rem;                 /* kleiner dan body 20px */
  padding:.25rem .70rem;
  border-radius:9999px;
  background: color-mix(in srgb, var(--sp-gray-100, #EEF2F7) 85%, #fff 15%);
  border:1px solid var(--sp-border-color, #E5E7EB);
  color: var(--sp-text, #111827);
  line-height:1.1;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  text-decoration: underline;
  text-decoration-color: var(--zl-gold);
  text-underline-offset: 2px;
  text-decoration-thickness: 2px;
}

/* Hover = goud pill */
.category-tags--from-articles a.zl-tagchip:hover,
.category-tags--from-articles a.zl-tagchip:focus{
  background: var(--zl-gold, #C7923E);
  border-color: var(--zl-gold, #C7923E);
  color: var(--sp-text-invert, #fff);
  text-decoration:none;
}

/* Teller — NEUTRAAL GRIJS (geen blauw) */
.category-tags--from-articles .zl-tagchip__count{
  margin-left:.35rem;
  font-size:.78em;
  line-height:1;
  padding:.15rem .45rem;
  border-radius:9999px;
  background: var(--sp-gray-200, #E9ECEF);
  color: var(--sp-text, #111827);
}

/* Teller bij hover iets lichter */
.category-tags--from-articles a.zl-tagchip:hover .zl-tagchip__count,
.category-tags--from-articles a.zl-tagchip:focus .zl-tagchip__count{
  background: rgba(255,255,255,.25);
  color: #fff;
}

/*************************************************************
  ZEITLOSEN — DARK MODE overrides (tags/pills)
*************************************************************/

/* ========== TAGS / PILLS in dark mode ========== */
/* Popular Tags module */
[data-bs-theme="dark"] .tags li a{
  color: var(--sp-light) !important;       /* wit */
  text-decoration-color: var(--zl-gold) !important;
  border-color: transparent;
  background: color-mix(in srgb, var(--sp-gray-100) 80%, #fff 20%);
}
[data-bs-theme="dark"] .tags li a:hover,
[data-bs-theme="dark"] .tags li a:focus{
  background: var(--zl-gold);
  border-color: var(--zl-gold);
  color: var(--sp-light) !important;
  text-decoration: none !important;
}

/* Categorie-tags onder lijst/blog */
[data-bs-theme="dark"] .category-tags--from-articles a.zl-tagchip{
  color: var(--sp-light) !important;       /* wit */
  text-decoration-color: var(--zl-gold) !important;
  border-color: transparent;
  background: color-mix(in srgb, var(--sp-gray-100) 80%, #fff 20%);
}
[data-bs-theme="dark"] .category-tags--from-articles a.zl-tagchip:hover,
[data-bs-theme="dark"] .category-tags--from-articles a.zl-tagchip:focus{
  background: var(--zl-gold);
  border-color: var(--zl-gold);
  color: var(--sp-light) !important;
  text-decoration: none !important;
}

/* Teller-badges (module + categorie-tags) */
[data-bs-theme="dark"] .category-tags--from-articles .zl-tagchip__count,
[data-bs-theme="dark"] .tags li a .tag-count,
[data-bs-theme="dark"] .tags li a .badge{
  background: rgba(255,255,255,.18);
  color: #fff;
  border-radius: 9999px;
}
[data-bs-theme="dark"] .category-tags--from-articles a.zl-tagchip:hover .zl-tagchip__count,
[data-bs-theme="dark"] .category-tags--from-articles a.zl-tagchip:focus .zl-tagchip__count,
[data-bs-theme="dark"] .tags li a:hover .tag-count,
[data-bs-theme="dark"] .tags li a:focus .tag-count,
[data-bs-theme="dark"] .tags li a:hover .badge,
[data-bs-theme="dark"] .tags li a:focus .badge{
  background: rgba(255,255,255,.28);
  color: #fff;
}
/* Toolbar spacing en compacte knop */
.zl-toolbar { gap: 10px; margin-bottom: .5rem; }

.zl-limit .btn {
  font-size: .875rem;
  line-height: 1.2;
  padding: .35rem .6rem;
  border-radius: .5rem;
}

/* Zorg dat het dropdown-menu niet wordt “afgeknipt” door ancestors */
.zl-toolbar, .zl-limit { overflow: visible; }