/* ============================================================
   FAQ - article detail (single question answered in depth)
   Reuses the .art-* prose system from kennisbank-artikel.css.
   Adds: category-accented hero, "kort antwoord" summary box,
   answer prose, related questions. Accent driven by --cat.
   ============================================================ */

.faqart { background: var(--bg); --cat: var(--jobit-blue); }

/* category accent (mirrors faq.css setters) */
.faqart-aan-de-slag { --cat: #4364AD; }
.faqart-prijzen     { --cat: #2E9D6F; }
.faqart-producten   { --cat: #36528E; }
.faqart-koppelingen { --cat: #6884C0; }
.faqart-avg         { --cat: #D9544B; }
.faqart-account     { --cat: #E8A53B; }

/* ---- Hero ---- */
.faqart-head {
  position: relative;
  background: linear-gradient(180deg, #FCFDFF 0%, #F1F5FC 100%);
  border-bottom: 1px solid var(--border);
  padding: calc(var(--sec-pad-y) * 0.5 + 40px) 0 calc(var(--sec-pad-y) * 0.45);
  overflow: hidden;
}
.faqart-head-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--neutral-100) 1px, transparent 1px),
    linear-gradient(90deg, var(--neutral-100) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.4;
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, black 0%, transparent 65%);
  mask-image: radial-gradient(ellipse at 100% 0%, black 0%, transparent 65%);
  pointer-events: none;
}
.faqart-head-inner { position: relative; z-index: 2; max-width: 820px; }

/* eyebrow pill (kennisbank-article style: light tint + dot) */
.faqart-cat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cat) 72%, #1b2233);
  background: color-mix(in srgb, var(--cat) 12%, #fff);
  padding: 6px 13px;
  border-radius: var(--r-pill);
  margin-bottom: 22px;
}
.faqart-cat::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--cat); }

.faqart-title {
  font-size: clamp(30px, 3.9vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--fg-strong);
  margin: 0 0 18px;
  max-width: 760px;
  text-wrap: balance;
}
.faqart-meta { font-size: 13px; color: var(--fg-subtle); }
.faqart-meta b { color: var(--fg-muted); font-weight: 600; }

/* ---- Kort antwoord summary box (top of body) ---- */
.faqart-tldr {
  display: flex;
  gap: 16px;
  padding: 22px 24px;
  border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--cat) 7%, #fff);
  border: 1px solid color-mix(in srgb, var(--cat) 22%, var(--border));
  margin-bottom: 8px;
}
.faqart-tldr-ic {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--cat);
  color: #fff;
  display: grid; place-items: center;
  margin-top: 2px;
}
.faqart-tldr-body > * + * { margin-top: 6px; }
.faqart-tldr-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cat);
  margin: 0;
}
.faqart-tldr p { font-size: 16px; line-height: 1.6; color: var(--fg); margin: 0; }

/* ---- recolor the prose accents to --cat ---- */
.faqart .art-prose ul > li::before { background: var(--cat); }
.faqart .art-prose ol > li::before { background: color-mix(in srgb, var(--cat) 12%, #fff); color: var(--cat); }
.faqart .art-prose a { color: var(--cat); }
.faqart .art-prose code { background: color-mix(in srgb, var(--cat) 10%, #fff); color: color-mix(in srgb, var(--cat) 70%, #1b2233); }
.faqart .art-toc a.is-active { color: var(--cat); border-left-color: var(--cat); }
.faqart .art-toc a:hover { color: var(--cat); }
.faqart .art-tag:hover { color: var(--cat); background: color-mix(in srgb, var(--cat) 9%, #fff); border-color: color-mix(in srgb, var(--cat) 26%, var(--border)); }
.faqart .art-share-btn:hover { border-color: var(--cat); color: var(--cat); background: color-mix(in srgb, var(--cat) 7%, #fff); }
.faqart .art-share-btn svg { color: var(--cat); }

/* ---- Related questions (reuses .art-related / .art-rcard) ---- */
.faqart-related .art-rcard { --cat: var(--jobit-blue); }
.faqart-related .art-rcard-aan-de-slag { --cat: #4364AD; }
.faqart-related .art-rcard-prijzen     { --cat: #2E9D6F; }
.faqart-related .art-rcard-producten   { --cat: #36528E; }
.faqart-related .art-rcard-koppelingen { --cat: #6884C0; }
.faqart-related .art-rcard-avg         { --cat: #D9544B; }
.faqart-related .art-rcard-account     { --cat: #E8A53B; }
.faqart-related .art-rcard-cat { color: var(--cat); }
.faqart-related .art-rcard-cat::before { display: none; }
.faqart-related .art-rcard:hover { border-color: color-mix(in srgb, var(--cat) 42%, var(--border)); }
.faqart-related .art-rcard:hover .art-rcard-title { color: var(--cat); }
.faqart-related .art-rcard-go { color: var(--cat); }
/* question cards lead with a Q glyph instead of a category dot */
.faqart-related .art-rcard-q {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--cat) 12%, #fff);
  color: var(--cat);
  font-size: 14px; font-weight: 800;
}

/* CTA notch sits below the white article body - match it */
.cta-band[data-divider-from]::after { background: var(--bg); }

/* ---- Similar-questions accordion (Kenniscentrum-style card accordion) ---- */
.faqart-faq-heading { margin-top: 56px; }
.faqart-faq { display: flex; flex-direction: column; gap: 12px; margin: 24px 0 0; max-width: none; }
.faqart-faq .faq-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.faqart-faq .faq-item:hover { border-color: color-mix(in srgb, var(--cat) 36%, var(--border)); }
.faqart-faq .faq-item.is-open { border-color: color-mix(in srgb, var(--cat) 36%, var(--border)); box-shadow: var(--shadow-sm); }
.faqart-faq .faq-q { padding: 22px 26px; }
.faqart-faq .faq-q:hover { color: var(--cat); }
.faqart-faq .faq-a-inner { padding: 0 26px 24px; font-size: 16px; line-height: 1.7; color: var(--fg); }
.faqart-faq .faq-item.is-open .faq-toggle { background: var(--cat); color: #fff; }
.faqart-q {
  display: flex;
  align-items: baseline;
  gap: 14px;
  text-align: left;
  text-wrap: balance;
}
.faqart-num {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
  font-weight: 700;
  color: var(--cat);
  flex-shrink: 0;
  letter-spacing: 0.04em;
}