/* Verriq - Herbarium
   Stijllaag bovenop main.css: papier, inkt, wijnblad en kopergroen,
   met gestileerde druiventakken (images/herbarium, gegenereerd door
   tools/draw-vines.js). Twee thema's: herbarium (licht) en nacht (donker). */

[data-theme="herbarium"] {
  --theme-bg-1: #eceee4;
  --theme-bg-2: #e9ecdf;
  --theme-bg-3: #e5e9da;
  --theme-accent: 70, 98, 58;
  --theme-accent-hex: #46623a;
  --theme-text: #1e2721;
  --theme-text-muted: rgba(30, 39, 33, 0.72);
  --glass-bg: #f7f8f1;
  --glass-border: rgba(70, 98, 58, 0.22);
  --wine-800: 70, 98, 58;
  --wine-900: 55, 77, 46;
  --hb-paper: #f7f8f1;
  --hb-rule: rgba(70, 98, 58, 0.07);
  --hb-verd: #2f7f78;
  --hb-draw: rgba(70, 98, 58, 0.5);
  --hb-on-accent: #f7f8f1;
}

[data-theme="nacht"] {
  --theme-bg-1: #121a15;
  --theme-bg-2: #141d17;
  --theme-bg-3: #16201a;
  --theme-accent: 143, 174, 116;
  --theme-accent-hex: #8fae74;
  --theme-text: #e9ecdf;
  --theme-text-muted: rgba(233, 236, 223, 0.74);
  --glass-bg: #18221c;
  --glass-border: rgba(143, 174, 116, 0.2);
  --hb-paper: #18221c;
  --hb-rule: rgba(143, 174, 116, 0.05);
  --hb-verd: #5fb3a9;
  --hb-draw: rgba(143, 174, 116, 0.42);
  --hb-on-accent: #121a15;
}

/* ---------- Grond en letters ---------- */
body[data-theme] {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  background: var(--theme-bg-1);
  background-image: linear-gradient(var(--hb-rule) 1px, transparent 1px);
  background-size: 100% 28px;
  color: var(--theme-text);
}
[data-theme] .font-display,
[data-theme] h1, [data-theme] h2, [data-theme] h3 {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.005em;
}
[data-theme] .font-sans { font-family: 'IBM Plex Sans', system-ui, sans-serif; }
[data-theme] kbd, [data-theme] .font-mono, .hb-label, .hb-no { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

/* ---------- Papier in plaats van glas ---------- */
[data-theme] .glass {
  background: var(--glass-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border);
  box-shadow: 0 1px 0 rgba(30, 39, 33, 0.04);
  will-change: auto;
  transform: none;
}
[data-theme] .rounded-3xl { border-radius: 8px; }
[data-theme] .rounded-2xl { border-radius: 6px; }
[data-theme] .rounded-xl { border-radius: 5px; }
[data-theme] .rounded-lg { border-radius: 4px; }
[data-theme] .hover\:bg-white\/10:hover { background-color: rgba(var(--theme-accent), 0.06); }
[data-theme] .shadow-lg { box-shadow: none; }

/* Knoppen: vlak en zonder verloop */
[data-theme] button.bg-gradient-to-r,
[data-theme] a.bg-gradient-to-r {
  background-image: none !important;
  background-color: var(--theme-accent-hex) !important;
  color: var(--hb-on-accent) !important;
}
[data-theme] button.bg-gradient-to-r:hover,
[data-theme] a.bg-gradient-to-r:hover { filter: brightness(1.08); }
[data-theme] .level-btn-1, [data-theme] .level-btn-2, [data-theme] .level-btn-3, [data-theme] .level-btn-sden {
  color: var(--hb-on-accent) !important;
}
[data-theme] .level-btn-sden {
  background: var(--hb-verd);
  border: 0;
}
[data-theme] .level-btn-sden:hover { background: var(--hb-verd); filter: brightness(1.1); }

/* ---------- Herbarium-motieven ---------- */
/* Etiket zoals op een herbariumvel */
.hb-label {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--theme-text-muted);
}
.hb-label em { font-style: italic; text-transform: none; letter-spacing: 0.02em; font-family: 'Newsreader', Georgia, serif; font-size: 0.85rem; color: var(--theme-text); }

/* Specimennummers op de hoofdkaarten (tekst via i18n: menu.specimen.*) */
.hb-no {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--theme-text-muted);
}
[data-theme] #quizCard .hb-no { color: var(--hb-on-accent); }

/* Quiz als ingekleurd specimen */
[data-theme] #quizCard {
  background: var(--theme-accent-hex);
  border-color: var(--theme-accent-hex) !important;
  color: var(--hb-on-accent);
}
[data-theme] #quizCard .text-theme,
[data-theme] #quizCard .text-theme-muted { color: var(--hb-on-accent) !important; }
[data-theme] #quizCard svg { color: var(--hb-on-accent); }
[data-theme] #quizCard .bg-gradient-to-br { background: rgba(255, 255, 255, 0.14) !important; }
[data-theme] #quizCard button {
  background: var(--hb-paper) !important;
  color: var(--theme-accent-hex) !important;
}

/* Overige hoofdkaarten: gekleurde randen terug naar inkt en blad */
[data-theme] #practiceCard { border-color: var(--glass-border) !important; }
[data-theme] #trainerCard, [data-theme] #chemistryCard, [data-theme] #englishWineCard { border-color: rgba(var(--theme-accent), 0.55) !important; }
[data-theme] #chemistryCard h2 { font-style: italic; }
[data-theme] #dutchWineCard { border-color: rgba(var(--theme-accent), 0.55) !important; }

/* Druiventakken: lijntekening via mask, kleur uit het thema */
.hb-vine {
  display: block;
  background-color: var(--hb-draw);
  -webkit-mask: var(--hb-src) no-repeat center / contain;
  mask: var(--hb-src) no-repeat center / contain;
  pointer-events: none;
}

/* Gegraveerde slinger onder het logo (img in index.html) */
.hb-garland { display: block; width: min(100%, 720px); height: auto; margin: 1.25rem auto 0; }

/* Takje in de hoek van de kaart Nederlandse wijn */
[data-theme] #dutchWineCard { position: relative; overflow: hidden; }
[data-theme] #dutchWineCard > * { position: relative; z-index: 1; }
[data-theme] #dutchWineCard::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -0.75rem;
  top: -0.5rem;
  width: 96px;
  aspect-ratio: 281 / 355;
  background: url(../images/herbarium/engraved-sprig.webp) no-repeat center / contain;
  opacity: 0.95;
  pointer-events: none;
}

/* Trosje als scheiding boven de kennisbanktegels en in lege schermen */
.hb-divider {
  height: 3.2rem;
  margin: 0.75rem auto 1.5rem;
  width: 2.6rem;
  background: url(../images/herbarium/engraved-cluster.webp) no-repeat center / contain;
}
.hb-vine.hb-divider { -webkit-mask: none; mask: none; background-color: transparent; }



/* Themaknoppen */
.theme-btn[data-hb="herbarium"] { background: linear-gradient(135deg, #f7f8f1 50%, #46623a 50%) !important; }
.theme-btn[data-hb="nacht"] { background: linear-gradient(135deg, #121a15 50%, #8fae74 50%) !important; }

/* ---------- Toegankelijkheid (WCAG AA) ----------
   Gemeten tegen papier #f7f8f1: tekst >= 4.5:1, iconen en randen >= 3:1. */

/* Oude achtergrondbellen horen niet bij het herbarium */
[data-theme] .wine-bubble { display: none; }

/* Niveauknoppen: effen, drie tinten blad, papieren tekst (5.1 / 6.4 / 8.7:1) */
[data-theme="herbarium"] .level-btn-1 { background: #557140; }
[data-theme="herbarium"] .level-btn-2 { background: #46623a; }
[data-theme="herbarium"] .level-btn-3 { background: #374d2e; }
[data-theme="herbarium"] .level-btn-1:hover,
[data-theme="herbarium"] .level-btn-2:hover,
[data-theme="herbarium"] .level-btn-3:hover { filter: brightness(1.12); }
[data-theme="herbarium"] { --hb-verd: #286c66; } /* 5.7:1 op papier */

/* Bleke Tailwind-tekstkleuren zijn voor een donkere grond gemaakt.
   Op papier vallen ze terug op de 800-tint van dezelfde kleur (>= 5.5:1). */
[data-theme="herbarium"] .text-red-100,
[data-theme="herbarium"] .hover\:text-red-100:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-red-100,
[data-theme="herbarium"] .text-red-200,
[data-theme="herbarium"] .hover\:text-red-200:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-red-200,
[data-theme="herbarium"] .text-red-300,
[data-theme="herbarium"] .hover\:text-red-300:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-red-300,
[data-theme="herbarium"] .text-red-400,
[data-theme="herbarium"] .hover\:text-red-400:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-red-400,
[data-theme="herbarium"] .text-red-500,
[data-theme="herbarium"] .hover\:text-red-500:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-red-500 { color: #991b1b !important; }
[data-theme="herbarium"] .text-orange-100,
[data-theme="herbarium"] .hover\:text-orange-100:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-orange-100,
[data-theme="herbarium"] .text-orange-200,
[data-theme="herbarium"] .hover\:text-orange-200:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-orange-200,
[data-theme="herbarium"] .text-orange-300,
[data-theme="herbarium"] .hover\:text-orange-300:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-orange-300,
[data-theme="herbarium"] .text-orange-400,
[data-theme="herbarium"] .hover\:text-orange-400:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-orange-400,
[data-theme="herbarium"] .text-orange-500,
[data-theme="herbarium"] .hover\:text-orange-500:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-orange-500 { color: #9a3412 !important; }
[data-theme="herbarium"] .text-amber-100,
[data-theme="herbarium"] .hover\:text-amber-100:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-amber-100,
[data-theme="herbarium"] .text-amber-200,
[data-theme="herbarium"] .hover\:text-amber-200:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-amber-200,
[data-theme="herbarium"] .text-amber-300,
[data-theme="herbarium"] .hover\:text-amber-300:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-amber-300,
[data-theme="herbarium"] .text-amber-400,
[data-theme="herbarium"] .hover\:text-amber-400:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-amber-400,
[data-theme="herbarium"] .text-amber-500,
[data-theme="herbarium"] .hover\:text-amber-500:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-amber-500 { color: #92400e !important; }
[data-theme="herbarium"] .text-yellow-100,
[data-theme="herbarium"] .hover\:text-yellow-100:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-yellow-100,
[data-theme="herbarium"] .text-yellow-200,
[data-theme="herbarium"] .hover\:text-yellow-200:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-yellow-200,
[data-theme="herbarium"] .text-yellow-300,
[data-theme="herbarium"] .hover\:text-yellow-300:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-yellow-300,
[data-theme="herbarium"] .text-yellow-400,
[data-theme="herbarium"] .hover\:text-yellow-400:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-yellow-400,
[data-theme="herbarium"] .text-yellow-500,
[data-theme="herbarium"] .hover\:text-yellow-500:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-yellow-500 { color: #854d0e !important; }
[data-theme="herbarium"] .text-lime-100,
[data-theme="herbarium"] .hover\:text-lime-100:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-lime-100,
[data-theme="herbarium"] .text-lime-200,
[data-theme="herbarium"] .hover\:text-lime-200:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-lime-200,
[data-theme="herbarium"] .text-lime-300,
[data-theme="herbarium"] .hover\:text-lime-300:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-lime-300,
[data-theme="herbarium"] .text-lime-400,
[data-theme="herbarium"] .hover\:text-lime-400:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-lime-400,
[data-theme="herbarium"] .text-lime-500,
[data-theme="herbarium"] .hover\:text-lime-500:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-lime-500 { color: #3f6212 !important; }
[data-theme="herbarium"] .text-green-100,
[data-theme="herbarium"] .hover\:text-green-100:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-green-100,
[data-theme="herbarium"] .text-green-200,
[data-theme="herbarium"] .hover\:text-green-200:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-green-200,
[data-theme="herbarium"] .text-green-300,
[data-theme="herbarium"] .hover\:text-green-300:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-green-300,
[data-theme="herbarium"] .text-green-400,
[data-theme="herbarium"] .hover\:text-green-400:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-green-400,
[data-theme="herbarium"] .text-green-500,
[data-theme="herbarium"] .hover\:text-green-500:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-green-500 { color: #166534 !important; }
[data-theme="herbarium"] .text-emerald-100,
[data-theme="herbarium"] .hover\:text-emerald-100:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-emerald-100,
[data-theme="herbarium"] .text-emerald-200,
[data-theme="herbarium"] .hover\:text-emerald-200:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-emerald-200,
[data-theme="herbarium"] .text-emerald-300,
[data-theme="herbarium"] .hover\:text-emerald-300:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-emerald-300,
[data-theme="herbarium"] .text-emerald-400,
[data-theme="herbarium"] .hover\:text-emerald-400:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-emerald-400,
[data-theme="herbarium"] .text-emerald-500,
[data-theme="herbarium"] .hover\:text-emerald-500:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-emerald-500 { color: #065f46 !important; }
[data-theme="herbarium"] .text-teal-100,
[data-theme="herbarium"] .hover\:text-teal-100:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-teal-100,
[data-theme="herbarium"] .text-teal-200,
[data-theme="herbarium"] .hover\:text-teal-200:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-teal-200,
[data-theme="herbarium"] .text-teal-300,
[data-theme="herbarium"] .hover\:text-teal-300:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-teal-300,
[data-theme="herbarium"] .text-teal-400,
[data-theme="herbarium"] .hover\:text-teal-400:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-teal-400,
[data-theme="herbarium"] .text-teal-500,
[data-theme="herbarium"] .hover\:text-teal-500:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-teal-500 { color: #115e59 !important; }
[data-theme="herbarium"] .text-cyan-100,
[data-theme="herbarium"] .hover\:text-cyan-100:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-cyan-100,
[data-theme="herbarium"] .text-cyan-200,
[data-theme="herbarium"] .hover\:text-cyan-200:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-cyan-200,
[data-theme="herbarium"] .text-cyan-300,
[data-theme="herbarium"] .hover\:text-cyan-300:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-cyan-300,
[data-theme="herbarium"] .text-cyan-400,
[data-theme="herbarium"] .hover\:text-cyan-400:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-cyan-400,
[data-theme="herbarium"] .text-cyan-500,
[data-theme="herbarium"] .hover\:text-cyan-500:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-cyan-500 { color: #155e75 !important; }
[data-theme="herbarium"] .text-sky-100,
[data-theme="herbarium"] .hover\:text-sky-100:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-sky-100,
[data-theme="herbarium"] .text-sky-200,
[data-theme="herbarium"] .hover\:text-sky-200:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-sky-200,
[data-theme="herbarium"] .text-sky-300,
[data-theme="herbarium"] .hover\:text-sky-300:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-sky-300,
[data-theme="herbarium"] .text-sky-400,
[data-theme="herbarium"] .hover\:text-sky-400:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-sky-400,
[data-theme="herbarium"] .text-sky-500,
[data-theme="herbarium"] .hover\:text-sky-500:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-sky-500 { color: #075985 !important; }
[data-theme="herbarium"] .text-blue-100,
[data-theme="herbarium"] .hover\:text-blue-100:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-blue-100,
[data-theme="herbarium"] .text-blue-200,
[data-theme="herbarium"] .hover\:text-blue-200:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-blue-200,
[data-theme="herbarium"] .text-blue-300,
[data-theme="herbarium"] .hover\:text-blue-300:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-blue-300,
[data-theme="herbarium"] .text-blue-400,
[data-theme="herbarium"] .hover\:text-blue-400:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-blue-400,
[data-theme="herbarium"] .text-blue-500,
[data-theme="herbarium"] .hover\:text-blue-500:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-blue-500 { color: #1e40af !important; }
[data-theme="herbarium"] .text-indigo-100,
[data-theme="herbarium"] .hover\:text-indigo-100:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-indigo-100,
[data-theme="herbarium"] .text-indigo-200,
[data-theme="herbarium"] .hover\:text-indigo-200:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-indigo-200,
[data-theme="herbarium"] .text-indigo-300,
[data-theme="herbarium"] .hover\:text-indigo-300:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-indigo-300,
[data-theme="herbarium"] .text-indigo-400,
[data-theme="herbarium"] .hover\:text-indigo-400:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-indigo-400,
[data-theme="herbarium"] .text-indigo-500,
[data-theme="herbarium"] .hover\:text-indigo-500:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-indigo-500 { color: #3730a3 !important; }
[data-theme="herbarium"] .text-violet-100,
[data-theme="herbarium"] .hover\:text-violet-100:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-violet-100,
[data-theme="herbarium"] .text-violet-200,
[data-theme="herbarium"] .hover\:text-violet-200:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-violet-200,
[data-theme="herbarium"] .text-violet-300,
[data-theme="herbarium"] .hover\:text-violet-300:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-violet-300,
[data-theme="herbarium"] .text-violet-400,
[data-theme="herbarium"] .hover\:text-violet-400:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-violet-400,
[data-theme="herbarium"] .text-violet-500,
[data-theme="herbarium"] .hover\:text-violet-500:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-violet-500 { color: #5b21b6 !important; }
[data-theme="herbarium"] .text-purple-100,
[data-theme="herbarium"] .hover\:text-purple-100:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-purple-100,
[data-theme="herbarium"] .text-purple-200,
[data-theme="herbarium"] .hover\:text-purple-200:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-purple-200,
[data-theme="herbarium"] .text-purple-300,
[data-theme="herbarium"] .hover\:text-purple-300:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-purple-300,
[data-theme="herbarium"] .text-purple-400,
[data-theme="herbarium"] .hover\:text-purple-400:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-purple-400,
[data-theme="herbarium"] .text-purple-500,
[data-theme="herbarium"] .hover\:text-purple-500:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-purple-500 { color: #6b21a8 !important; }
[data-theme="herbarium"] .text-fuchsia-100,
[data-theme="herbarium"] .hover\:text-fuchsia-100:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-fuchsia-100,
[data-theme="herbarium"] .text-fuchsia-200,
[data-theme="herbarium"] .hover\:text-fuchsia-200:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-fuchsia-200,
[data-theme="herbarium"] .text-fuchsia-300,
[data-theme="herbarium"] .hover\:text-fuchsia-300:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-fuchsia-300,
[data-theme="herbarium"] .text-fuchsia-400,
[data-theme="herbarium"] .hover\:text-fuchsia-400:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-fuchsia-400,
[data-theme="herbarium"] .text-fuchsia-500,
[data-theme="herbarium"] .hover\:text-fuchsia-500:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-fuchsia-500 { color: #86198f !important; }
[data-theme="herbarium"] .text-pink-100,
[data-theme="herbarium"] .hover\:text-pink-100:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-pink-100,
[data-theme="herbarium"] .text-pink-200,
[data-theme="herbarium"] .hover\:text-pink-200:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-pink-200,
[data-theme="herbarium"] .text-pink-300,
[data-theme="herbarium"] .hover\:text-pink-300:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-pink-300,
[data-theme="herbarium"] .text-pink-400,
[data-theme="herbarium"] .hover\:text-pink-400:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-pink-400,
[data-theme="herbarium"] .text-pink-500,
[data-theme="herbarium"] .hover\:text-pink-500:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-pink-500 { color: #9d174d !important; }
[data-theme="herbarium"] .text-rose-100,
[data-theme="herbarium"] .hover\:text-rose-100:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-rose-100,
[data-theme="herbarium"] .text-rose-200,
[data-theme="herbarium"] .hover\:text-rose-200:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-rose-200,
[data-theme="herbarium"] .text-rose-300,
[data-theme="herbarium"] .hover\:text-rose-300:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-rose-300,
[data-theme="herbarium"] .text-rose-400,
[data-theme="herbarium"] .hover\:text-rose-400:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-rose-400,
[data-theme="herbarium"] .text-rose-500,
[data-theme="herbarium"] .hover\:text-rose-500:hover,
[data-theme="herbarium"] .group:hover .group-hover\:text-rose-500 { color: #9f1239 !important; }

/* Nederlandse wijn: kopergroen (tekst 4.8:1 op tint, knop 5.7:1) */
[data-theme] #dutchWineCard { border-color: rgba(40, 108, 102, 0.5) !important; }
[data-theme="nacht"] #dutchWineCard { border-color: rgba(95, 179, 169, 0.45) !important; }
.hb-verd-tint { background: color-mix(in srgb, var(--hb-verd) 14%, transparent); color: var(--hb-verd); }
.hb-verd-solid { background: var(--hb-verd); color: var(--hb-on-accent); }
.group:hover .hb-verd-solid { filter: brightness(1.1); }
.hb-icon { display: block; width: 2.2rem; height: 2.6rem; background: url(../images/herbarium/engraved-cluster.webp) no-repeat center / contain; }

/* Losse trosjes in de hoeken van de hoofdkaarten (decoratief) */
[data-theme] #quizCard, [data-theme] #practiceCard, [data-theme] #trainerCard, [data-theme] #chemistryCard { position: relative; overflow: hidden; }
[data-theme] #quizCard > *, [data-theme] #practiceCard > *, [data-theme] #trainerCard > *, [data-theme] #chemistryCard > * { position: relative; z-index: 1; }
[data-theme] #quizCard::after, [data-theme] #practiceCard::after, [data-theme] #trainerCard::after, [data-theme] #chemistryCard::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0.6rem;
  right: 0.9rem;
  width: 46px;
  aspect-ratio: 259 / 341;
  background: url(../images/herbarium/engraved-cluster.webp) no-repeat center / contain;
  pointer-events: none;
}
[data-theme] #quizCard::after { transform: rotate(-8deg); width: 52px; }
[data-theme] #practiceCard::after { transform: rotate(6deg); }
[data-theme] #trainerCard::after { transform: rotate(-4deg); width: 50px; }
[data-theme] #chemistryCard::after { transform: rotate(10deg); width: 42px; }

/* Tros boven de footer */
#menu footer { position: relative; }
#menu footer::before {
  content: "";
  display: block;
  width: 34px;
  aspect-ratio: 259 / 341;
  margin: -2.6rem auto 1.4rem;
  background: url(../images/herbarium/engraved-cluster.webp) no-repeat center / contain;
}

/* Kaartvensters en zwevende balken: geen bordeauxzwart meer in het lichte thema */
[data-theme="herbarium"] .bg-wine-950\/98 { background-color: rgba(236, 238, 228, 0.98) !important; }
[data-theme="herbarium"] .bg-wine-900\/95,
[data-theme="herbarium"] .bg-wine-900\/90,
[data-theme="herbarium"] .bg-wine-900\/80 { background-color: rgba(247, 248, 241, 0.95) !important; }
[data-theme="nacht"] .bg-wine-950\/98 { background-color: rgba(18, 26, 21, 0.98) !important; }
.leaflet-container { font-family: 'IBM Plex Sans', system-ui, sans-serif; }
.leaflet-control-attribution { background: rgba(247, 248, 241, 0.8) !important; color: #5a6457 !important; }

/* Witte en blauwe trossen afwisselen */
[data-theme] #practiceCard::after, [data-theme] #chemistryCard::after { background-image: url(../images/herbarium/engraved-cluster-white.webp); }

/* Kaarten met één knop zijn in hun geheel klikbaar: het klikvlak van de knop
   wordt over de kaart uitgerekt. Toetsenbord en schermlezer zien één knop. */
.hb-card-link { position: relative; cursor: pointer; }
.hb-card-link .hb-stretch { position: static !important; }
.hb-card-link .hb-stretch::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }

/* Logo: woordmerk en slogan in diep groen in het lichte thema (11:1 op papier) */
[data-theme="herbarium"] #menu header .logo-text,
[data-theme="herbarium"] svg .logo-text { fill: #2a3b24; }

/* Admin, tab Bezoek: sessies per dag. Terugkerend = themagroen, nieuw = lichte tint van dezelfde kleur */
.vq-bars { display: flex; align-items: flex-end; gap: 2px; height: 120px; }
.vq-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-width: 3px; }
.vq-bar span { display: block; width: 100%; }
.vq-bar span:first-child { border-radius: 4px 4px 0 0; }
.vq-bar span[style="height:0%"] { display: none; }
.vq-bar span[style="height:0%"] + span { border-radius: 4px 4px 0 0; }
.vq-bar-ret { background: #46623a; }
.vq-bar-new { background: #a3b596; }
[data-theme="nacht"] .vq-bar-ret { background: #8fae74; }
[data-theme="nacht"] .vq-bar-new { background: #4a5c42; }
.vq-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }

/* Hoofdknop Volgende stap op het quizresultaat: tekstkleur per thema (wit op het lichte groen van Nacht haalt geen 4.5:1) */
.vq-btn-primary { background: var(--theme-accent-hex); color: var(--hb-on-accent); }

/* Amber/emerald-labels (o.a. examenlabel en "geen aandachtspunten") in Nacht: donkere amber/emerald-tekst haalde 1.6:1 op de getinte achtergrond, licht haalt 7.7:1 */
[data-theme="nacht"] .text-amber-800 { color: #fcd34d; }
[data-theme="nacht"] .text-emerald-800 { color: #6ee7b7; }

/* Rondleiding (js/tour.js). Venster in themakleuren; het doel wordt uitgespaard in een donkere laag. */
.vq-tour { position: fixed; inset: 0; z-index: 9990; }
.vq-tour-block { position: fixed; inset: 0; }
.vq-tour-center .vq-tour-block { background: rgba(0, 0, 0, 0.55); }
.vq-tour-hole { position: fixed; border-radius: 14px; border: 2px solid var(--theme-accent-hex); box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55); pointer-events: none; transition: top .25s, left .25s, width .25s, height .25s; }
.vq-tour-box { position: fixed; width: min(360px, calc(100vw - 32px)); padding: 20px; border-radius: 14px; background: var(--glass-bg); color: var(--theme-text); border: 1px solid var(--glass-border); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); }
.vq-tour-center .vq-tour-box { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.vq-tour-mobile:not(.vq-tour-center) .vq-tour-box { left: 16px; right: 16px; bottom: 16px; width: auto; }
.vq-tour-step { font-size: 12px; color: var(--theme-text-muted); margin-bottom: 4px; min-height: 1em; }
.vq-tour-title { font-size: 20px; font-weight: 600; margin-bottom: 6px; }
.vq-tour-text { font-size: 15px; line-height: 1.5; margin-bottom: 16px; }
.vq-tour-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.vq-tour-btn { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--theme-accent-hex); background: transparent; color: var(--theme-text); font-weight: 500; cursor: pointer; }
.vq-tour-primary { background: var(--theme-accent-hex); color: var(--hb-on-accent); font-weight: 600; }
.vq-tour-btn:focus-visible { outline: 3px solid var(--theme-accent-hex); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .vq-tour-hole { transition: none; } }
/* Ruimte boven een uitgelichte kaart als die naar boven scrolt (mobiel) */
#menu .rounded-3xl { scroll-margin-top: 16px; }
/* Mobiel: vaste menubalk bovenin (ca. 66 px) niet over de uitgelichte kaart; knoppen compacter zodat ze op één regel passen */
@media (max-width: 767px) {
  #menu .rounded-3xl { scroll-margin-top: 84px; }
  .vq-tour-btn { padding: 0 12px; }
  .vq-tour-actions { gap: 6px; }
}

/* Zoekvenster: actieve filterknop in themakleur (6.4:1 licht, 7.2:1 Nacht) */
#globalSearchModal .gs-filter-btn.gs-filter-active { background: var(--theme-accent-hex); color: var(--hb-on-accent); }