/* ------------------------------------------------------------------ *
 * Hub-side /alla-kategorier/ — kategori-grid + stylet artikel + FAQ.   *
 * Ligger i /public (uhashet, uden for bundlen) → ændrer IKKE CSS-hash  *
 * på øvrige sider. Scoped til .qf-hub-page. Bruger quizfragors         *
 * --sh-*-tokens. Kun hub-siden loader den.                             *
 * ------------------------------------------------------------------ */

/* ---------- Kategori-grid (fliser) ---------- */
.qf-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sh-space-4);
  margin-bottom: var(--sh-space-8);
}
.qf-hub-tile {
  display: block;
  background: var(--sh-surface);
  border: 1px solid var(--sh-slate-200);
  border-left: 4px solid var(--sh-lime-500);
  border-radius: var(--sh-radius-md);
  padding: var(--sh-space-5) var(--sh-space-6);
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.qf-hub-tile:hover { border-color: var(--sh-slate-300); border-left-color: var(--sh-lime-500); box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.qf-hub-tile__name { display: block; font-size: 17px; font-weight: 700; color: var(--sh-ink-950); }
.qf-hub-tile__sub { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--sh-slate-500); }

/* ---------- Artikel (prosa) — nulstil WP-tema-rester + rytme ---------- */
/* Neutralisér data-midnight="dark"-rækken (mørk bg + grøn tekst) + wrapper-spacing. */
.qf-hub-article [data-midnight],
.qf-hub-article .row-bg,
.qf-hub-article .row-bg-wrap,
.qf-hub-article .row-bg-layer { background: transparent !important; color: inherit !important; }
.qf-hub-article .wpb_wrapper,
.qf-hub-article .wpb_text_column,
.qf-hub-article .wpb_content_element,
.qf-hub-article .vc_column-inner,
.qf-hub-article .vc_column_container,
.qf-hub-article .vc_row,
.qf-hub-article .row_col_wrap_12,
.qf-hub-article .row_col_wrap_12_inner { margin: 0 !important; padding: 0 !important; background: transparent !important; }

/* Kort-afstand: .qf-card er børnebørn af .qf-main (via .qf-hub-page), så den
   globale .qf-main-gap når dem ikke. Giv .qf-hub-page samme 24px-gap som pub. */
.qf-hub-page { display: flex; flex-direction: column; gap: var(--sh-space-6); }

/* Hover (variant D): rolig i hvile (border slate-200), lime ramme + løft ved hover. */
.qf-hub-page .qf-card { transition: border-color 160ms ease, box-shadow 160ms ease; }
.qf-hub-page .qf-card:hover { border-color: var(--sh-lime-500); box-shadow: 0 12px 32px -12px rgba(16, 24, 40, 0.12); }

/* Typografi — match pub (.qf-pub .qf-prose): h2 25/700, h3 19/600, p:last-child-reset.
   Emne-overskrift i mørk lime (#4d7c0f — ingen passende sh-token). */
.qf-hub-page .qf-hub-article h2 {
  font-size: 25px; font-weight: 700; line-height: 1.25;
  color: #4d7c0f; margin: var(--sh-space-8) 0 var(--sh-space-3);
}
.qf-hub-page .qf-hub-article h3 {
  font-size: 19px; font-weight: 600; line-height: 1.35;
  color: var(--sh-ink-800); margin: var(--sh-space-6) 0 var(--sh-space-2);
}
.qf-hub-article { color: var(--sh-slate-700); line-height: 1.6; max-width: 72ch; }
.qf-hub-article > :first-child { margin-top: 0; }
.qf-hub-article p { margin: 0 0 var(--sh-space-4); color: var(--sh-slate-700); }
.qf-hub-article p:last-child { margin-bottom: 0; }
.qf-hub-article p > strong:only-child { display: block; margin-top: var(--sh-space-6); font-size: 19px; color: var(--sh-ink-950); } /* "Vanliga frågor om …"-labels */
.qf-hub-article a { color: var(--sh-ink-950); text-decoration: underline; text-decoration-color: var(--sh-lime-500); text-underline-offset: 2px; }
.qf-hub-article a:hover { text-decoration-color: var(--sh-ink-950); }

/* ---------- FAQ-accordion (native <details>) ---------- */
.qf-faq { border: 1px solid var(--sh-slate-200); border-radius: var(--sh-radius-md); margin: 0 0 var(--sh-space-2); background: var(--sh-surface); }
.qf-faq__q {
  cursor: pointer; list-style: none; padding: var(--sh-space-3) var(--sh-space-4);
  font-weight: 600; color: var(--sh-ink-950); position: relative;
}
.qf-faq__q::-webkit-details-marker { display: none; }
.qf-faq__q::after { content: "+"; position: absolute; right: var(--sh-space-4); color: var(--sh-slate-500); font-weight: 400; }
.qf-faq[open] .qf-faq__q::after { content: "–"; }
.qf-faq__a { padding: 0 var(--sh-space-4) var(--sh-space-4); color: var(--sh-slate-700); line-height: 1.6; }

@media (max-width: 480px) {
  .qf-hub-grid { grid-template-columns: 1fr; }
}