/* ================================================================
   Nachtgoed — "De Nacht" hub components (additive).
   Loaded only by the hub pages, after nachtgoed.css.
   Reuses the existing design tokens; adds nothing global.
   ================================================================ */

/* ── Breadcrumb in the page hero ── */
.page-hero .crumb {
  font-family: var(--ng-font-meta);
  font-size: var(--ng-fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ng-kalkwit);
  opacity: 0.9;
  margin-bottom: var(--ng-space-m);
}
.page-hero .crumb a { color: inherit; text-decoration: none; opacity: 0.8; }
.page-hero .crumb a:hover { opacity: 1; text-decoration: underline; }
.page-hero .crumb [aria-current="page"] { opacity: 1; }
.page-hero .page-lede {
  font-size: var(--ng-fs-lede);
  line-height: 1.5;
  color: var(--ng-kalkwit);
  max-width: 46ch;
  margin-top: var(--ng-space-m);
  text-wrap: balance;
}

/* ── Prose rhythm inside the hub ── */
.prose .lede {
  font-size: var(--ng-fs-lede);
  line-height: 1.55;
  color: var(--ng-kalkwit);
  margin: 0 0 var(--ng-space-l);
}
.prose .hub-h2 {
  font-family: var(--ng-font-display);
  font-size: var(--ng-fs-h2);
  line-height: 1.02;
  letter-spacing: var(--ng-display-track);
  color: var(--ng-kalkwit);
  margin: var(--ng-space-2xl) 0 var(--ng-space-m);
  scroll-margin-top: 96px;
}
.prose .hub-h3 {
  font-family: var(--ng-font-body);
  font-weight: 600;
  font-size: var(--ng-fs-body-lg);
  color: var(--ng-kalkwit);
  margin: var(--ng-space-xl) 0 var(--ng-space-xs);
}
.prose .hub-list { margin: var(--ng-space-m) 0; padding-left: 1.1em; }
.prose .hub-list li { margin: 0 0 var(--ng-space-xs); line-height: 1.6; }
.prose .note {
  font-family: var(--ng-font-meta);
  font-size: var(--ng-fs-meta);
  color: var(--ng-text-muted);
}

/* ── Pull quote inside content ── */
.hub-quote {
  border-left: 3px solid var(--ng-spuitroze);
  padding: var(--ng-space-xs) 0 var(--ng-space-xs) var(--ng-space-l);
  margin: var(--ng-space-xl) 0;
}
.hub-quote p {
  font-family: var(--ng-font-display);
  font-size: var(--ng-fs-pull-sm);
  line-height: 1.15;
  color: var(--ng-kalkwit);
  margin: 0 0 var(--ng-space-xs);
}
.hub-quote cite {
  font-family: var(--ng-font-meta);
  font-size: var(--ng-fs-meta);
  font-style: normal;
  color: var(--ng-text-muted);
}

/* ── Inline citations ── */
sup.cite { line-height: 0; font-size: 0.62em; margin-left: 1px; }
sup.cite a {
  color: var(--ng-spuitroze);
  text-decoration: none;
  font-family: var(--ng-font-meta);
}
sup.cite a:hover { text-decoration: underline; }

/* ── Timeline ── */
.timeline { list-style: none; margin: var(--ng-space-l) 0 0; padding: 0; }
.timeline-item {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--ng-space-l);
  padding: var(--ng-space-l) 0;
  border-top: 1px solid var(--ng-line);
}
.timeline-item:last-child { border-bottom: 1px solid var(--ng-line); }
.tl-year {
  font-family: var(--ng-font-meta);
  font-size: var(--ng-fs-body-lg);
  color: var(--ng-avondzon);
  letter-spacing: 0.02em;
}
.tl-title {
  font-family: var(--ng-font-body);
  font-weight: 600;
  font-size: var(--ng-fs-body-lg);
  color: var(--ng-kalkwit);
  margin: 0 0 var(--ng-space-2xs);
}
.tl-body p { margin: 0; line-height: 1.6; }
@media (max-width: 640px) {
  .timeline-item { grid-template-columns: 1fr; gap: var(--ng-space-2xs); }
  .tl-year { color: var(--ng-spuitroze); }
}

/* ── Directory (organisations) ── */
.dir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--ng-space-l);
  margin: var(--ng-space-l) 0;
}
.dir-card {
  border: 1px solid var(--ng-line);
  border-radius: 14px;
  padding: var(--ng-space-l);
  background: rgba(32, 14, 88, 0.28);
}
.dir-name {
  font-family: var(--ng-font-body);
  font-weight: 600;
  font-size: var(--ng-fs-body-lg);
  color: var(--ng-kalkwit);
  margin: 0 0 2px;
}
.dir-role {
  display: block;
  font-family: var(--ng-font-meta);
  font-size: var(--ng-fs-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ng-avondzon);
  margin-bottom: var(--ng-space-xs);
}
.dir-card p { margin: 0 0 var(--ng-space-s); line-height: 1.55; font-size: var(--ng-fs-body); }
.dir-link {
  font-family: var(--ng-font-meta);
  font-size: var(--ng-fs-meta);
  color: var(--ng-spuitroze);
  text-decoration: none;
  word-break: break-word;
}
.dir-link:hover { text-decoration: underline; }

/* ── FAQ ── */
.faq { margin: var(--ng-space-l) 0; border-top: 1px solid var(--ng-line); }
.faq-item { border-bottom: 1px solid var(--ng-line); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--ng-space-m) 2rem var(--ng-space-m) 0;
  position: relative;
  font-family: var(--ng-font-body);
  font-weight: 600;
  font-size: var(--ng-fs-body-lg);
  color: var(--ng-kalkwit);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--ng-font-meta);
  color: var(--ng-spuitroze);
  font-size: 1.4em;
}
.faq-item[open] summary::after { content: "–"; }
.faq-a { padding: 0 0 var(--ng-space-m); }
.faq-a p { margin: 0; line-height: 1.6; color: var(--ng-kalkwit); }

/* ── Hub card grid ── */
.hubgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--ng-space-l);
  margin: var(--ng-space-xl) 0 var(--ng-space-l);
}
.hubcard {
  position: relative;
  display: block;
  border: 1px solid var(--ng-line);
  border-radius: 16px;
  padding: var(--ng-space-xl) var(--ng-space-l) var(--ng-space-2xl);
  text-decoration: none;
  background: rgba(32, 14, 88, 0.32);
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.hubcard:hover {
  border-color: var(--ng-spuitroze);
  transform: translateY(-2px);
  background: rgba(122, 22, 144, 0.28);
}
.hubcard-title {
  font-family: var(--ng-font-display);
  font-size: var(--ng-fs-pull-sm);
  line-height: 1.04;
  color: var(--ng-kalkwit);
  margin: 0 0 var(--ng-space-xs);
}
.hubcard-text { margin: 0; color: var(--ng-text-muted); font-size: var(--ng-fs-body); line-height: 1.5; }
.hubcard-go {
  position: absolute;
  left: var(--ng-space-l);
  bottom: var(--ng-space-l);
  color: var(--ng-avondzon);
  font-size: 1.3em;
}

/* ── In-content CTA ── */
.hub-cta { margin: var(--ng-space-xl) 0; }

/* ── Related strip ── */
.rel-band { border-top: 1px solid var(--ng-line); }
.rel-title {
  font-family: var(--ng-font-meta);
  font-size: var(--ng-fs-label);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ng-text-muted);
  margin: 0 0 var(--ng-space-m);
}
.rel-grid { display: flex; flex-wrap: wrap; gap: var(--ng-space-s); }
.rel-link {
  font-family: var(--ng-font-body);
  font-size: var(--ng-fs-body);
  color: var(--ng-kalkwit);
  text-decoration: none;
  border: 1px solid var(--ng-line);
  border-radius: 999px;
  padding: 0.5em 1em;
  transition: border-color 0.16s ease, color 0.16s ease;
}
.rel-link:hover { border-color: var(--ng-spuitroze); color: var(--ng-spuitroze); }
.rel-hub { border-color: var(--ng-spuitroze); color: var(--ng-spuitroze); }

/* ── Sources & credits ── */
.src-band { border-top: 1px solid var(--ng-line); background: rgba(11, 7, 32, 0.6); }
.src-ledger { max-width: 72ch; }
.src-title {
  font-family: var(--ng-font-meta);
  font-size: var(--ng-fs-label);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ng-text-muted);
  margin: 0 0 var(--ng-space-m);
}
.verified-stamp {
  font-family: var(--ng-font-meta);
  font-size: var(--ng-fs-meta);
  color: var(--ng-avondzon);
  margin: 0 0 var(--ng-space-m);
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.vs-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ng-zonsgloed); display: inline-block; }
.src-list {
  margin: 0;
  padding-left: 1.4em;
  font-family: var(--ng-font-meta);
  font-size: var(--ng-fs-meta);
  color: var(--ng-text-muted);
  line-height: 1.55;
}
.src-list li { margin: 0 0 var(--ng-space-xs); }
.src-list a { color: var(--ng-kalkdof); text-decoration: underline; text-underline-offset: 2px; }
.src-list a:hover { color: var(--ng-spuitroze); }
.src-list li:target { color: var(--ng-kalkwit); }