/* ==========================================================================
   grap-faq.css — the /faq/ hub (Agent D)
   Loaded by grap-loader.php whenever the file is present in
   wp-content/uploads/grap-assets/. No JS: everything here is native
   <details>. Scannable first — short rows, one idea per row.

   Palette: brand orange #E4642C -> #F0A440, ink #111111, body #4A4A4A,
   hairline #E4E4E4, soft ground #F6F7F8.
   ========================================================================== */

:root{
  --gfq-ink:#111111;
  --gfq-body:#4A4A4A;
  --gfq-line:#E4E4E4;
  --gfq-soft:#F6F7F8;
  --gfq-orange:#E4642C;
  --gfq-orange-l:#F0A440;
  --gfq-orange-d:#C8521F;
}

/* ---------------------------------------------------------- shell ---------- */
.gfq{padding:0 0 72px;}
.gfq .grap-wrap{max-width:1000px;}          /* reading width, not the 1290 grid */
.gfq-blurb{margin:-6px 0 20px;font-size:14.5px;color:var(--gfq-body);}

/* ---------------------------------------------------- jump / model bars --- */
.gfq-jump,
.gfq-models{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:16px 0;margin:0 0 14px;
}
.gfq-jump{border-bottom:1px solid var(--gfq-line);padding-top:26px;}
.gfq-models{padding-top:0;margin-bottom:34px;}

.gfq-jump-t,
.gfq-models-t{
  font-family:var(--grap-display);font-size:11.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--gfq-body);
  margin-right:6px;
}

/* capsule buttons */
.gfq-pill{
  display:inline-block;padding:7px 16px;border:1px solid var(--gfq-line);
  border-radius:999px;background:#fff;color:var(--gfq-ink);
  font-family:var(--grap-display);font-size:13.5px;font-weight:600;
  line-height:1.3;text-decoration:none !important;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.gfq-pill:hover{
  background:#FFF5F0;border-color:var(--gfq-orange-l);color:var(--gfq-orange-d);
}

/* by-model index — deliberately quieter than the category pills */
.gfq-mlink{
  font-family:var(--grap-mono);font-size:12px;letter-spacing:.01em;
  color:var(--gfq-body);padding:4px 10px;border:1px solid var(--gfq-line);
  border-radius:var(--grap-r);background:var(--gfq-soft);
  text-decoration:none !important;transition:.15s ease;
}
.gfq-mlink:hover{
  background:#FFF5F0;border-color:var(--gfq-orange-l);color:var(--gfq-orange-d);
}

/* --------------------------------------------------------- sections ------- */
.gfq-sec{scroll-margin-top:96px;}
.gfq-sec .grap-h2{margin:60px 0 14px;padding-bottom:10px;}

.gfq-sub{
  font-family:var(--grap-display);font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gfq-orange-d);
  margin:22px 0 8px;
}

/* ------------------------------------------------------ accordion --------- */
.gfq-list{border-top:1px solid var(--gfq-line);}

.gfq-item{
  border-bottom:1px solid var(--gfq-line);
  border-left:3px solid transparent;
  transition:background .15s ease;
}
.gfq-item:hover{background:var(--gfq-soft);}
.gfq-item[open]{
  border-left-color:var(--gfq-orange);
  background:#FFFBF8;
}

.gfq-item > summary{
  cursor:pointer;list-style:none;position:relative;
  padding:14px 40px 14px 15px;
  font-family:var(--grap-display);font-size:15.5px;font-weight:600;
  line-height:1.45;color:var(--gfq-ink);
}
.gfq-item > summary::-webkit-details-marker{display:none;}
.gfq-item > summary::after{
  content:'';position:absolute;right:17px;top:19px;width:8px;height:8px;
  border-right:2px solid var(--gfq-orange);border-bottom:2px solid var(--gfq-orange);
  transform:rotate(45deg);transition:transform .18s ease,top .18s ease;
}
.gfq-item[open] > summary{color:var(--gfq-orange-d);}
.gfq-item[open] > summary::after{transform:rotate(-135deg);top:21px;}

.gfq-a{padding:0 40px 16px 15px;font-size:14.5px;line-height:1.72;color:var(--gfq-body);}
.gfq-a p{margin:0 0 9px;}
.gfq-a p:last-child{margin-bottom:0;}

.gfq-ul{margin:0 0 9px;padding-left:19px;}
.gfq-ul li{margin-bottom:5px;}
.gfq-ul li:last-child{margin-bottom:0;}

/* model chips — the bridge back to the model page */
.gfq-chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 2px;}
.gfq-chip{
  font-family:var(--grap-mono);font-size:11.5px;letter-spacing:.01em;
  padding:3px 9px;border-radius:var(--grap-r);
  background:#fff;border:1px solid var(--gfq-line);color:var(--gfq-body);
  text-decoration:none !important;transition:.15s ease;
}
.gfq-chip:hover{border-color:var(--gfq-orange-l);color:var(--gfq-orange-d);background:#FFF5F0;}

/* ------------------------------------------------------------- CTA -------- */
.gfq-cta{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px;
  margin:48px 0 0;padding:22px 24px;
  background:var(--gfq-soft);border:1px solid var(--gfq-line);
  border-left:3px solid var(--gfq-orange);border-radius:var(--grap-r);
}
.gfq-cta-t{
  font-family:var(--grap-display);font-size:17px;font-weight:800;
  color:var(--gfq-ink);margin:0;letter-spacing:-.015em;
}

/* ------------------------------------------------- article back-link ------
   replaces the old embedded FAQ block on the Insights articles */
.grap-faqlink{
  margin:26px 0 0;padding:13px 16px;
  background:var(--gfq-soft);border:1px solid var(--gfq-line);
  border-left:3px solid var(--gfq-orange);border-radius:var(--grap-r);
  font-size:14.5px;
}
.grap-faqlink .grap-arrow{color:var(--gfq-orange);margin:0 4px;}

/* ------------------------------------------------------ anchors ----------- */
.gfq-anchor{display:block;height:0;overflow:hidden;scroll-margin-top:96px;}

/* ------------------------------------------------------ responsive -------- */
@media (max-width:900px){
  .gfq .grap-wrap{padding:0 20px;}
}

@media (max-width:640px){
  .gfq{padding-bottom:48px;}
  .gfq-sec{scroll-margin-top:72px;}
  .gfq-anchor{scroll-margin-top:72px;}

  /* two compact index rows, wrapping rather than scrolling — nothing hidden */
  .gfq-jump{padding-top:20px;gap:7px;}
  .gfq-models{gap:6px;margin-bottom:26px;}

  .gfq-jump-t,
  .gfq-models-t{flex:0 0 100%;margin:0 0 2px;}

  .gfq-pill{padding:6px 13px;font-size:12.5px;}
  .gfq-mlink{font-size:11px;padding:3px 8px;}

  .gfq-item > summary{padding:13px 34px 13px 12px;font-size:15px;}
  .gfq-item > summary::after{right:13px;top:18px;}
  .gfq-a{padding:0 16px 14px 12px;font-size:14px;}

  .gfq-cta{flex-direction:column;align-items:flex-start;padding:18px 16px;}
  .gfq-cta .grap-btn{width:100%;justify-content:center;}

  .gfq-sec .grap-h2{margin:32px 0 12px;}
}