/* FAQ static pages — layered on directory/listing-page.css (which provides the
   header, breadcrumb, 2fr/1fr body, sidebar cards, and meta chips). This adds
   only the FAQ-specific bits: answer typography, related/sibling lists,
   category question cards, tag chips, and the A-Z index grid. */

/* question page header — reuses the directory editorial header (eyebrow +
   title, bottom border, grain wash) for spacing consistent with the rest of
   the site. No logo, so the title spans the full width. */
.faq-q-header.dx-model-header { align-items: stretch; }
.faq-q-header-text { width: 100%; }
.faq-q-title { max-width: 64ch; margin-top: 4px; }

/* the answer — note the high-specificity padding so the directory rule
   `.dx-detail-main > section { padding: 0 }` cannot flatten it (that was why
   the text sat crowded against the container edge). */
.faq-detail .dx-detail-main > section.faq-answer-block,
section.faq-answer-block {
  background: #fff; border: 1.5px solid var(--rule, #E2DBC9);
  border-left: 5px solid var(--orange, #F25C1F);
  border-radius: var(--r-lg, 14px);
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3.2vw, 38px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
}
.faq-answer { display: flow-root; }
.faq-answer-lead {
  font: 500 19px/1.55 var(--body, 'DM Sans', sans-serif);
  color: var(--charcoal, #1F2528); margin: 0;
}
.faq-answer-body {
  font: 400 15.5px/1.72 var(--body, 'DM Sans', sans-serif);
  color: #444c52; margin: 14px 0 0;
}
/* when the answer is short enough that there's no separate body paragraph,
   the lead alone shouldn't read oversized */
.faq-answer-lead:only-child { font-size: 16.5px; line-height: 1.66; font-weight: 400; color: #2f373d; }

/* tag chips — the label needs its own spacing so it doesn't run into the
   first chip ("Tagshunting..."). */
.faq-tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--rule, #E2DBC9);
}
.faq-tags-label {
  font: 600 10px var(--mono, 'JetBrains Mono', monospace); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted, #6E7178);
  width: 100%; margin-bottom: 2px;
}
.faq-tag {
  font: 600 12px var(--body, 'DM Sans', sans-serif); color: #5a6168;
  background: var(--paper, #F4F1EA); border: 1px solid var(--rule, #E2DBC9);
  border-radius: 999px; padding: 5px 12px;
}

/* related questions (main column) */
.faq-rel-list { display: grid; gap: 8px; }
.faq-rel-item {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--rule, #E2DBC9); border-radius: 11px;
  padding: 13px 15px; text-decoration: none;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.faq-rel-item:hover { transform: translateY(-2px); border-color: var(--orange, #F25C1F); box-shadow: 0 10px 22px -12px rgba(200, 71, 17, 0.32); }
.faq-rel-q { font: 700 14.5px var(--body, 'DM Sans', sans-serif); color: var(--charcoal, #1F2528); flex: 1; line-height: 1.35; }
.faq-rel-cat { font: 600 10px var(--mono, 'JetBrains Mono', monospace); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted, #6E7178); white-space: nowrap; }
.faq-rel-item .dx-related-arrow { color: var(--orange, #F25C1F); flex-shrink: 0; }

/* sidebar: siblings + facts */
.faq-sib-list { display: flex; flex-direction: column; }
.faq-sib-item {
  font: 600 13px/1.4 var(--body, 'DM Sans', sans-serif); color: #3f474d;
  text-decoration: none; padding: 10px 0; border-bottom: 1px dashed var(--rule, #E2DBC9);
  transition: color 0.14s ease;
}
.faq-sib-item:hover { color: var(--orange-deep, #C84711); }
.faq-sib-card .dx-mfr-card-cta { margin-top: 14px; }

/* ===== category page ===== */
.faq-cat-header .dx-model-header-text { width: 100%; }
.faq-cat-lede { font: 400 16px/1.55 var(--body, 'DM Sans', sans-serif); color: #4a5258; margin: 10px 0 0; max-width: 62ch; }
.faq-cat-list { gap: var(--s-4, 18px) !important; }
.faq-cat-q {
  background: #fff; border: 1.5px solid var(--rule, #E2DBC9); border-radius: var(--r-lg, 14px);
  padding: var(--s-5, 22px); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.faq-cat-q:hover { border-color: rgba(242, 92, 31, 0.4); box-shadow: 0 10px 26px -16px rgba(31, 37, 40, 0.28); }
.faq-cat-q-title { font: 800 19px/1.25 var(--display, 'Archivo', sans-serif); margin: 0 0 8px; }
.faq-cat-q-title a { color: var(--charcoal, #1F2528); text-decoration: none; }
.faq-cat-q-title a:hover { color: var(--orange-deep, #C84711); }
.faq-cat-q-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 11px; }
.faq-cat-q-meta span { font: 600 10px var(--mono, 'JetBrains Mono', monospace); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted, #6E7178); background: var(--paper, #F4F1EA); border-radius: 5px; padding: 3px 8px; }
.faq-cat-q-ans { font: 400 14.5px/1.6 var(--body, 'DM Sans', sans-serif); color: #3f474d; margin: 0 0 12px; }
.faq-cat-q-link { display: inline-flex; align-items: center; gap: 5px; font: 700 13px var(--body, 'DM Sans', sans-serif); color: var(--orange-deep, #C84711); text-decoration: none; }
.faq-cat-q-link:hover .dx-related-arrow { transform: translateX(3px); }

/* sidebar: other categories */
.faq-othercat { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--rule, #E2DBC9); text-decoration: none; font: 700 13.5px var(--body, 'DM Sans', sans-serif); color: var(--charcoal, #1F2528); transition: color 0.14s ease; }
.faq-othercat:last-of-type { border-bottom: none; }
.faq-othercat:hover { color: var(--orange-deep, #C84711); }
.faq-othercat-n { font: 700 11px var(--mono, 'JetBrains Mono', monospace); color: var(--muted, #6E7178); background: var(--paper, #F4F1EA); border-radius: 6px; padding: 2px 8px; }
.faq-allcard .dx-mfr-card-cta { display: flex; margin-top: 10px; }
.faq-allcard .dx-mfr-card-cta:first-of-type { margin-top: 0; }

/* ===== all-index page ===== */
.faq-allgrid { columns: 2; column-gap: var(--s-8, 48px); margin-bottom: var(--s-9, 72px); }
.faq-allsec { break-inside: avoid; margin-bottom: var(--s-7, 36px); }
.faq-allsec-h { display: flex; align-items: center; gap: 10px; font: 800 17px var(--display, 'Archivo', sans-serif); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--rule, #E2DBC9); }
.faq-allsec-h a { color: var(--charcoal, #1F2528); text-decoration: none; }
.faq-allsec-h a:hover { color: var(--orange-deep, #C84711); }
.faq-allsec-n { font: 700 11px var(--mono, 'JetBrains Mono', monospace); color: var(--muted, #6E7178); background: var(--paper, #F4F1EA); border-radius: 6px; padding: 2px 8px; }
.faq-alllist { list-style: none; padding: 0; margin: 0; }
.faq-alllist li { margin-bottom: 7px; }
.faq-alllist a { font: 500 14px/1.45 var(--body, 'DM Sans', sans-serif); color: #3f474d; text-decoration: none; transition: color 0.14s ease; }
.faq-alllist a:hover { color: var(--orange-deep, #C84711); text-decoration: underline; }

@media (max-width: 760px) {
  .faq-allgrid { columns: 1; }
}

/* ===== injected static-links section on the /faqs/ index (below the explorer) ===== */
.faq-static-links { padding: var(--s-8, 56px) 0 var(--s-9, 72px); border-top: 1px solid var(--rule, #E2DBC9); background: var(--paper, #F4F1EA); }
.faq-static-links .wrap { max-width: 1140px; margin: 0 auto; padding: 0 var(--gutter, 24px); }
.faq-static-links .faq-section-eye { font: 600 var(--t-eye, 11px) var(--mono, 'JetBrains Mono', monospace); letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange-deep, #C84711); }
.faq-static-links .faq-section-h { font: 900 clamp(24px, 3vw, 34px) var(--display, 'Archivo', sans-serif); letter-spacing: -0.02em; color: var(--charcoal, #1F2528); margin: 8px 0 6px; }
.faq-static-links .faq-section-sub { font: 400 15px/1.55 var(--body, 'DM Sans', sans-serif); color: #4a5258; max-width: 60ch; margin: 0 0 var(--s-6, 28px); }
.faq-xcat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.faq-xcat {
  display: flex; flex-direction: column; gap: 5px;
  background: #fff; border: 1.5px solid var(--rule, #E2DBC9); border-radius: var(--r-lg, 14px);
  padding: 16px 18px; text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.faq-xcat:hover { transform: translateY(-3px); border-color: var(--orange, #F25C1F); box-shadow: 0 14px 30px -16px rgba(200, 71, 17, 0.35); }
.faq-xcat-name { font: 800 17px var(--display, 'Archivo', sans-serif); color: var(--charcoal, #1F2528); }
.faq-xcat-blurb { font: 400 12.5px/1.45 var(--body, 'DM Sans', sans-serif); color: var(--muted, #6E7178); flex: 1; }
.faq-xcat-n { font: 700 10px var(--mono, 'JetBrains Mono', monospace); letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange-deep, #C84711); margin-top: 4px; }
.faq-xall { margin: var(--s-5, 22px) 0; }
.faq-xall-link { display: inline-flex; align-items: center; gap: 6px; font: 800 15px var(--display, 'Archivo', sans-serif); color: #fff; background: var(--charcoal, #1F2528); border-radius: 999px; padding: 11px 22px; text-decoration: none; transition: background 0.15s ease, transform 0.15s ease; }
.faq-xall-link:hover { background: var(--orange-deep, #C84711); transform: translateY(-2px); }
.faq-xpopular { margin-top: var(--s-6, 28px); }
.faq-xpopular-h { font: 700 var(--t-eye, 11px) var(--mono, 'JetBrains Mono', monospace); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted, #6E7178); margin: 0 0 12px; }
.faq-xpopular-list { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: var(--s-8, 48px); }
.faq-xpopular-list li { margin-bottom: 8px; break-inside: avoid; }
.faq-xpopular-list a { font: 500 14px/1.45 var(--body, 'DM Sans', sans-serif); color: #3f474d; text-decoration: none; transition: color 0.14s ease; }
.faq-xpopular-list a:hover { color: var(--orange-deep, #C84711); text-decoration: underline; }
@media (max-width: 760px) { .faq-xpopular-list { columns: 1; } }

/* ===== mobile reading order: the answer must follow the question =====
   listing-page.css flattens main/side to display:contents on mobile, so the
   FAQ cards are orderable siblings. Answer first, then related, then the
   sidebar reference cards. */
@media (max-width: 980px) {
  .faq-q-body .faq-answer-block { order: 1; }
  .faq-q-body .faq-sec-related  { order: 2; }
  .faq-q-body .faq-facts-card   { order: 3; }
  .faq-q-body .faq-tools-card   { order: 4; }
  .faq-q-body .faq-sib-card     { order: 5; }
}

/* ===== "Explore further" cross-link card ===== */
.faq-tools-card { border-top: 4px solid var(--topo-sage, #5A8F3A); }
.faq-tools-list { display: flex; flex-direction: column; gap: 8px; }
.faq-tool {
  display: flex; align-items: center; gap: 11px;
  background: #fff; border: 1px solid var(--rule, #E2DBC9); border-radius: 11px;
  padding: 11px 12px; text-decoration: none;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.faq-tool:hover { transform: translateY(-2px); border-color: var(--topo-sage, #5A8F3A); box-shadow: 0 10px 22px -13px rgba(90, 143, 58, 0.4); }
.faq-tool-ico {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 9px;
  background: rgba(90, 143, 58, 0.1); color: var(--topo-sage-deep, #3A6225);
  display: flex; align-items: center; justify-content: center;
}
.faq-tool-ico svg { width: 21px; height: 21px; }
.faq-tool-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.faq-tool-name { font: 800 13.5px var(--display, 'Archivo', sans-serif); color: var(--charcoal, #1F2528); }
.faq-tool-blurb { font: 400 11.5px/1.4 var(--body, 'DM Sans', sans-serif); color: var(--muted, #6E7178); }
.faq-tool .dx-related-arrow { flex-shrink: 0; color: var(--topo-sage, #5A8F3A); }