/* ============================================================
   Kennisbank / begrippen
   INDEX (/begrippen/): A-Z lijst met alleen de begrippen + zoek.
   DETAIL (/begrippen/{slug}/): eigen pagina per begrip.
   ============================================================ */

/* ---------- Hero (petrol) ---------- */
.gloss-hero { position: relative; overflow: hidden; padding: clamp(var(--space-3xl), 10vw, var(--space-5xl)) 0; }
.gloss-hero__inner { max-width: var(--container-max, 1280px); margin: 0 auto; padding: 0 var(--container-pad, 5vw); position: relative; z-index: 1; }
.gloss-hero .eyebrow { color: var(--color-accent); margin-bottom: var(--space-lg); }
.gloss-hero__title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 var(--space-lg); color: #fff; max-width: 16ch; }
.gloss-hero__title em { color: var(--color-accent); font-style: italic; }
.gloss-hero__lead { max-width: 62ch; font-size: var(--text-lg); line-height: 1.55; color: rgba(255, 255, 255, 0.82); margin: 0 0 var(--space-2xl); }

/* ---------- Zoekveld ---------- */
.gloss-search { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); }
/* Donkere tekst (vaste kleur, niet de layer-afhankelijke --color-text-primary die op
   petrol wit wordt) zodat getypte tekst zichtbaar blijft op het witte zoekveld. */
.gloss-search__input { flex: 1 1 340px; max-width: 520px; padding: 0.85em 1.1em; font-size: var(--text-md); font-family: var(--font-body); color: var(--color-petrol-900, #1F3A44); background: #fff; border: 1px solid transparent; border-radius: 4px; outline: none; }
.gloss-search__input::placeholder { color: #6b7780; opacity: 1; }
.gloss-search__input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(245, 183, 9, 0.3); }
.gloss-search__count { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.7); }

/* ---------- A-Z sprongnavigatie (sticky) ---------- */
.gloss-az { position: sticky; top: var(--header-h, 72px); z-index: 20; display: flex; flex-wrap: wrap; gap: 0.15em; justify-content: center; padding: var(--space-md) var(--container-pad, 5vw); background: var(--color-bg-surface, #f4f4f2); border-bottom: 1px solid var(--color-rule); }
.gloss-az__link { display: inline-flex; align-items: center; justify-content: center; min-width: 1.9em; height: 1.9em; padding: 0 0.35em; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-secondary); text-decoration: none; border-radius: 3px; transition: background .12s, color .12s; }
.gloss-az__link:hover { background: var(--color-accent); color: var(--color-petrol-900, #1F3A44); }

/* ---------- Index-lijst ---------- */
.gloss-list { padding: var(--space-3xl) 0 var(--space-5xl); }
.gloss-list__inner { max-width: var(--container-max, 1280px); margin: 0 auto; padding: 0 var(--container-pad, 5vw); }
.gloss-empty { font-size: var(--text-lg); color: var(--color-text-secondary); padding: var(--space-2xl) 0; }

.gloss-group { display: grid; grid-template-columns: 4rem 1fr; gap: var(--space-xl); padding: var(--space-xl) 0; border-top: 1px solid var(--color-rule); scroll-margin-top: calc(var(--header-h, 72px) + 3rem); }
.gloss-group__letter { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 2.4rem; line-height: 1; color: var(--color-accent); margin: 0; position: sticky; top: calc(var(--header-h, 72px) + 3.4rem); align-self: start; }

.gloss-idx { list-style: none; margin: 0; padding: 0; }
.gloss-idx__item[hidden] { display: none; }
.gloss-idx__link { display: flex; align-items: baseline; gap: var(--space-md); padding: 0.7em 0; border-bottom: 1px solid var(--color-rule); text-decoration: none; transition: padding-left .14s ease; }
.gloss-idx__link:hover { padding-left: 0.5em; }
.gloss-idx__term { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-lg); color: var(--color-text-primary); }
.gloss-idx__link:hover .gloss-idx__term { color: var(--color-accent); }
.gloss-idx__cat { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.03em; color: var(--color-text-muted); white-space: nowrap; }
.gloss-idx__arrow { color: var(--color-accent); opacity: 0; transition: opacity .14s ease; }
.gloss-idx__link:hover .gloss-idx__arrow { opacity: 1; }

/* ---------- Detailpagina per begrip ---------- */
.gloss-single { padding: clamp(var(--space-2xl), 7vw, var(--space-4xl)) 0 var(--space-5xl); }
.gloss-single__inner { max-width: 760px; margin: 0 auto; padding: 0 var(--container-pad, 5vw); }
.gloss-crumbs { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--color-text-muted); margin-bottom: var(--space-xl); display: flex; gap: 0.6em; align-items: center; flex-wrap: wrap; }
.gloss-crumbs a { color: var(--color-text-secondary); text-decoration: none; }
.gloss-crumbs a:hover { color: var(--color-accent); }
.gloss-single__cat { display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-sm); }
.gloss-single__term { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--color-text-primary); margin: 0 0 var(--space-lg); }
.gloss-single__def { font-size: var(--text-xl); line-height: 1.6; color: var(--color-text-secondary); margin: 0 0 var(--space-lg); }
.gloss-single__src { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.03em; color: var(--color-text-muted); margin: 0 0 var(--space-xl); }
/* Verrijkte termen: context-alinea + dienst-CTA (van dunne definitie naar ranking/conversie). */
.gloss-single__body { font-size: var(--text-lg); line-height: 1.75; color: var(--color-text-secondary); margin: 0 0 var(--space-md); max-width: 64ch; }
.gloss-single__body:last-of-type { margin-bottom: var(--space-xl); }
/* Datumstempel + (optioneel) vakredacteur — zichtbaar EEAT-signaal, spiegelt dateModified/reviewedBy in het schema. */
.gloss-single__updated { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.03em; color: var(--color-text-muted); margin: 0 0 var(--space-xl); }
.gloss-single__cta { display: flex; flex-direction: column; gap: var(--space-2xs); margin: 0 0 var(--space-3xl); }
.gloss-single__cta-eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.gloss-single__cta a { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-sm); font-weight: var(--weight-semibold); font-size: var(--text-lg); color: var(--color-text-primary); text-decoration: none; border-bottom: 2px solid var(--color-accent); padding-bottom: 3px; }
.gloss-single__cta a:hover { color: var(--color-accent); }
.gloss-single__cta a span { color: var(--color-accent); }
.gloss-single__related { border-top: 1px solid var(--color-rule); padding-top: var(--space-xl); margin-bottom: var(--space-2xl); }
.gloss-single__related h2 { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); margin: 0 0 var(--space-md); font-weight: var(--weight-semibold); }
.gloss-single__related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); }
.gloss-single__related a { font-weight: var(--weight-semibold); color: var(--color-text-primary); text-decoration: none; }
.gloss-single__related a span { color: var(--color-accent); }
.gloss-single__related a:hover { color: var(--color-accent); }
.gloss-single__back a { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text-secondary); text-decoration: none; }
.gloss-single__back a:hover { color: var(--color-accent); }

/* Veelgestelde vragen op verrijkte termen (FAQPage-schema = zichtbare FAQ). */
.gloss-single__faq { border-top: 1px solid var(--color-rule); padding-top: var(--space-xl); margin-bottom: var(--space-2xl); max-width: 64ch; }
.gloss-single__faq > h2 { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); margin: 0 0 var(--space-lg); font-weight: var(--weight-semibold); }
.gloss-faq__item { margin: 0 0 var(--space-lg); }
.gloss-faq__item:last-child { margin-bottom: 0; }
.gloss-faq__q { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-medium); line-height: 1.3; color: var(--color-text-primary); margin: 0 0 var(--space-xs); }
.gloss-faq__a { font-size: var(--text-base); line-height: 1.7; color: var(--color-text-secondary); margin: 0; }

@media (max-width: 720px) {
  .gloss-group { grid-template-columns: 1fr; gap: var(--space-sm); }
  .gloss-group__letter { position: static; font-size: 1.6rem; }
  .gloss-idx__cat { display: none; }
}