/* ──────────────────────────────────────────────────────────────
   FAQ — Haus Vajbz. One sheet for templates/documentation/faq.html
   (index: red hero with the search, ruled category cells, ink CTA) and
   faq_category.html (red hero with breadcrumb + icon tile, native
   <details> accordion, ink CTA). Builds on hv/docs.css (.doc-hero,
   .doc-icon) and hv/theme.css. Tokens only: radius 0, no shadows, no
   gradients, rules instead of boxes, → as the ornament. Band surfaces come
   from data-surface="red|ink" on the section; the sheet only lays out.
   ────────────────────────────────────────────────────────────── */

/* ── Hero: kicker with the FA icon, display title, lead, search ─ */
.df-hero__kicker { display: inline-flex; align-items: center; gap: 0.5rem; }
.df-hero__kicker i { color: var(--ink); }
.df-hero__title { font-size: clamp(2.1rem, 9vw, 4.6rem); }

/* the search sits on a paper strip inside the red band: input + dropdown
   flip to the paper palette through data-surface, the wrap only positions */
.df-search { position: relative; margin-top: 0.4rem; max-width: 560px; color: var(--text); }
.df-search__icon {
  position: absolute; left: 1rem; top: 26px; transform: translateY(-50%);
  z-index: 1; pointer-events: none; color: var(--text-muted); font-size: 0.95rem;
}
.df-search .hv-input { padding-left: 2.8rem; }
.df-search .hv-input::-webkit-search-decoration,
.df-search .hv-input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* suggestions: the nav search's dropdown (hv/nav.css .hv-nav__suggest), hung
   under the input on a 2px ink frame; items are rows on a rule */
.df-suggest {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 70;
  background: var(--bg); color: var(--text);
  border: 2px solid var(--line-strong); border-top: 0;
  max-height: 360px; overflow: auto; text-align: left;
}
.df-suggest__item, .df-suggest__empty {
  display: flex; align-items: center; gap: 0.75rem; margin: 0;
  padding: 0.6rem 0.7rem; text-decoration: none; color: inherit;
  border-top: 1px solid var(--line);
}
.df-suggest__item:first-child, .df-suggest__empty:first-child { border-top: 0; }
.df-suggest__item:hover, .df-suggest__item:focus-visible, .df-suggest__item.focused { background: var(--paper-2); outline: none; }
.df-suggest__text { flex: 1; min-width: 0; display: grid; gap: 0.15rem; }
.df-suggest__cat { color: var(--red); }
.df-suggest__q { font-size: 0.95rem; }
.df-suggest__arrow { flex: none; color: var(--text-muted); font-size: 0.8rem; transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.df-suggest__item:hover .df-suggest__arrow, .df-suggest__item.focused .df-suggest__arrow { color: var(--red); transform: translateX(3px); }
.df-suggest__empty { display: block; padding: 1.2rem 0.9rem; text-align: center; color: var(--text-muted); font-size: 0.9rem; }

/* ── Category cells: rows on rules, a square icon tile, index, → ── */
.df-cats { padding-block: 2rem 0.5rem; }
.df-cats__grid { display: grid; border-top: 2px solid var(--text); }
.df-cat {
  display: flex; align-items: center; gap: 0.9rem; min-width: 0;
  padding: 1rem 0; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
  animation: hv-rise 0.5s var(--ease) both;   /* hv-rise lives in theme.css */
}
.df-cat:nth-child(2) { animation-delay: 0.05s; }
.df-cat:nth-child(3) { animation-delay: 0.10s; }
.df-cat:nth-child(4) { animation-delay: 0.15s; }
.df-cat:nth-child(5) { animation-delay: 0.20s; }
.df-cat:nth-child(6) { animation-delay: 0.25s; }
.df-cat__body { flex: 1; min-width: 0; display: grid; gap: 0.2rem; }
.df-cat__name { font-size: 1.05rem; transition: color var(--dur) var(--ease); }
.df-cat__n { color: var(--red); }
.df-cat__arrow { flex: none; color: var(--text-muted); font-size: 0.85rem; transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.df-cat:hover .df-cat__name, .df-cat:focus-visible .df-cat__name { color: var(--red); }
.df-cat:hover .df-cat__arrow, .df-cat:focus-visible .df-cat__arrow { color: var(--red); transform: translateX(4px); }
.df-cat:hover .doc-icon, .df-cat:focus-visible .doc-icon { background: var(--ink); }
.df-cat:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* ── Category hero: breadcrumb, ink icon tile, title ─────────── */
.df-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; }
.df-crumbs a { text-decoration: none; color: var(--text); }
.df-crumbs a:hover { color: var(--ink); }
.df-crumbs__sep { color: var(--ink); font-size: 0.6rem; }
.df-crumbs__current { color: var(--text); }
.df-cat-hero__tile { width: 56px; height: 56px; font-size: 1.4rem; }

/* ── Accordion: the organizers page's ruled <details> (hv/organizers.css
   .org-faq), + / − in mono, answer on a red left rule ────────── */
.df-faq { padding-block: 2rem 0.5rem; }
.df-faq__list { border-top: 2px solid var(--text); }
.df-faq__item { border-bottom: 1px solid var(--line); scroll-margin-top: 1rem; }
.df-faq__q {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1rem 0; cursor: pointer; list-style: none;
  font-family: var(--font-sub); font-weight: 600; font-size: 1.02rem; line-height: 1.3;
  transition: color var(--dur) var(--ease);
}
.df-faq__q::-webkit-details-marker { display: none; }
.df-faq__q::after { content: '+'; flex: none; font-family: var(--font-mono); color: var(--red); font-size: 1.2rem; line-height: 1; }
.df-faq__item[open] .df-faq__q::after { content: '−'; }
.df-faq__q:hover { color: var(--red); }
.df-faq__q:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.df-faq__a {
  margin: 0 0 1.2rem; padding-left: 1rem; border-left: 3px solid var(--red);
  max-width: 66ch; color: var(--text-dim); font-size: 0.95rem; line-height: 1.65;
}
.df-faq__a a { color: var(--red); font-weight: 600; text-decoration: none; }
.df-faq__a a:hover { text-decoration: underline; }

/* ── Closing CTA band: ink, centred, one paper button ─────────── */
.df-cta { margin-top: 2.6rem; background: var(--bg); color: var(--text); }
.df-cta__inner { padding-block: 2.4rem 2.6rem; display: grid; gap: 1rem; justify-items: center; text-align: center; }
.df-cta__title { font-size: clamp(2rem, 9vw, 3.6rem); }
.df-cta__lead { margin: 0; max-width: 44ch; color: var(--text-dim); }
.df-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 0.4rem; }
.df-cta .hv-btn { width: auto; }

/* ── Tablet ──────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .df-cats { padding-top: 2.6rem; }
  .df-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
  .df-cat { padding: 1.3rem 0; }
  .df-faq { padding-top: 2.6rem; }
  .df-faq__q { font-size: 1.08rem; }
  .df-cta { margin-top: 3.2rem; }
  .df-cta__inner { padding-block: 3.2rem 3.4rem; gap: 1.2rem; }
}

/* ── Desktop ─────────────────────────────────────────────────── */
@media (min-width: 1100px) {
  .df-cats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .df-faq__list { max-width: 74ch; }
}