/* ==========================================================================
   FAQ PAGE — page-faq.php
   --------------------------------------------------------------------------
   Everything here is scoped under `.pcr-faq`. No global selector is touched:
   the header, footer and every other template are shared, and this file is
   loaded only on the FAQ page, so anything unscoped would leak.

   The accordion is native <details>/<summary>, styled here. There is no JS for
   it at all — front.js owns a different, front-page-only accordion and is not
   loaded on this template.

   GROUND RHYTHM (top to bottom):
     1. `.pcr-faq-hero`  — --void, with a soft copper wash. Dark, so the nav
        and the h1 land the way the front page's hero does.
     2. `.pcr-faq-body`  — `.sect-light`, i.e. --base. Ten long answers on a
        white page read far better than ten long answers on black.
     3. `.pcr-faq-cta`   — `.sect-copper`, the full-bleed closing band.

   `.sect-light` and `.sect-copper` themselves are global (assets/css/
   chrome.css). This file only restyles the page's own components for the new
   ground — chiefly the <details> rows, which chrome.css knows nothing about.

   COLOUR LAW: --copper-hot is for DARK grounds only. On --base and --surface
   the accent is --copper, or the contrast fails. Chamfers come from
   --clip-* ; there is no border-radius anywhere in this file.
   ========================================================================== */

/* ------------------------------------------------------------------ page */

.pcr-faq {
  /* --base, not --void. Each section paints its own ground; the wrapper
     matches the light section so no seam can show between them. */
  background: var(--base);
  color: var(--ink);
  overflow-x: clip;
}

/* -------------------------------------------------------------- reveals */
/* base.css declares `.reveal { opacity: 0 }` unconditionally, which hides the
   page when JS is off. Re-gate it behind `.js` (header.php adds that class to
   <html> inline, before paint) so the FAQ is readable without JavaScript. The
   observer in pcr.js resolves it with `.is-in` and `.is-visible`. */
.pcr-faq .reveal { opacity: 1; transform: none; }
.js .pcr-faq .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.js .pcr-faq .reveal.is-in,
.js .pcr-faq .reveal.is-visible { opacity: 1; transform: none; }
.js .pcr-faq .reveal[data-delay="1"] { transition-delay: .08s; }
.js .pcr-faq .reveal[data-delay="2"] { transition-delay: .16s; }
.js .pcr-faq .reveal[data-delay="3"] { transition-delay: .24s; }

/* ================================================================== HERO ==
   Dark ground. --copper-hot is correct here and only here. */

.pcr-faq-hero {
  position: relative;
  background: var(--void);
  color: var(--on-dark);
  overflow: hidden;
}
/* A single, very soft copper wash so the hero is not a flat slab. The stop
   colour comes from the token; the strength lives on `opacity`, so no brand
   hex is written into this file. */
.pcr-faq-hero::before {
  content: "";
  position: absolute;
  top: -32%; right: -12%;
  width: min(760px, 78vw);
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle at 50% 50%, var(--copper-hot) 0%, transparent 68%);
  opacity: .18;
  pointer-events: none;
}
.pcr-faq-hero .shell { position: relative; z-index: 1; }

.pcr-faq-hero-body { margin-top: var(--sp-lg); max-width: 62ch; text-align: center; margin-inline: auto; }
.pcr-faq-hero .crumbs { justify-content: center; display: flex; }
.pcr-faq-intro { text-align: center; margin-inline: auto; }

.pcr-faq-title {
  color: #fff;
  margin-top: var(--sp-sm);
  /* --fs-3xl rather than the h1 default (--fs-4xl): this is a page hero, and
     the 88px display size is reserved for the case-study titles. */
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
.pcr-faq-lede {
  margin-top: var(--sp-md);
  max-width: 58ch;
  color: var(--on-dark-mute);
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
}

/* proof strip — three facts, no badges and no invented logos */
.pcr-faq-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-md);
  margin: var(--sp-2xl) 0 0;
  padding: 0;
  list-style: none;
}
.pcr-faq-proof-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: var(--sp-md) var(--sp-lg);
  background: var(--graphite);
  border: 1px solid var(--on-dark-line);
  clip-path: var(--clip-sm);
}
.pcr-faq-proof-n {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--copper-hot);
  font-variant-numeric: tabular-nums;
}
.pcr-faq-proof-of { font-size: .5em; color: var(--on-dark-mute); margin-left: 2px; }
.pcr-faq-proof-l {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--on-dark-mute);
  text-wrap: pretty;
}

@media (max-width: 760px) {
  .pcr-faq-proof { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================= LIST HEAD ==
   Sits on `.sect-light`, so the shared chrome.css rules already do the right
   thing: h2 -> --ink, p -> --ink-light, .eyebrow -> --copper. These rules only
   set measure and rhythm. */

.pcr-faq-intro { max-width: 68ch; }
.pcr-faq-body-title {
  margin-top: var(--sp-sm);
  font-size: var(--fs-2xl);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  text-wrap: balance;
}
.pcr-faq-body-lede {
  margin-top: var(--sp-md);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}

/* ============================================================== ACCORDION ==
   Light-ground rows: --surface raised cards, --line hairlines, --ink labels,
   --copper markers. */

.pcr-faq-list {
  width: 100%;
  max-width: 940px;
  margin: var(--sp-2xl) auto 0;
}

.pcr-faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  clip-path: var(--clip-sm);
  transition: border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.pcr-faq-item + .pcr-faq-item { margin-top: var(--sp-sm); }
.pcr-faq-item:hover { border-color: var(--support); }
.pcr-faq-item[open] {
  border-color: var(--copper-edge);
  box-shadow: var(--sh-3);
}

/* -------------------------------------------------------------- summary */

.pcr-faq-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-md);
  padding: clamp(18px, 2.2vw, 26px) clamp(16px, 2.2vw, 26px);
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  cursor: pointer;
  text-wrap: balance;
  transition: color var(--t-base) var(--ease),
              background var(--t-base) var(--ease);
}
/* Kill the native disclosure triangle in every engine: `list-style: none`
   covers the legacy marker, `::marker` the standards-track one, and the vendor
   pseudo-element the WebKit / Blink renderer draws. */
.pcr-faq-q { list-style: none; }
.pcr-faq-q::-webkit-details-marker { display: none; }
.pcr-faq-q::marker { content: ""; }
.pcr-faq-q:hover { color: var(--copper-dim); }
.pcr-faq-item[open] .pcr-faq-q { color: var(--ink); }

/* The chamfer clips the focus ring, so inset it well inside the shape. */
.pcr-faq-q:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: -5px;
}
.pcr-faq-q:focus:not(:focus-visible) { outline: none; }

.pcr-faq-q-text { min-width: 0; overflow-wrap: break-word; }

/* --------------------------------------------------------- +/× marker */

/* Remix Icon is loaded globally (inc/assets.php), so `ri-add-line` is
   available; the 45° rotation turns it into ×, which is exactly what the
   front page's accordion does on open. */
.pcr-faq-marker {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-top: 1px;
  background: var(--copper-wash);
  border: 1px solid var(--copper-edge);
  color: var(--copper);
  clip-path: var(--clip-xs);
  transition: transform var(--t-base) var(--ease),
              background var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease);
}
.pcr-faq-marker i {
  font-size: 17px;
  line-height: 1;
  transition: color var(--t-base) var(--ease);
}
.pcr-faq-item[open] .pcr-faq-marker {
  transform: rotate(45deg);
  background: var(--copper);
  border-color: var(--copper);
  color: #fff;
}

/* -------------------------------------------------------------- answers */

.pcr-faq-a {
  padding: 0 clamp(16px, 2.2vw, 26px) clamp(20px, 2.4vw, 28px);
  max-width: 74ch;
}
.pcr-faq-a > * { margin: 0; }
/* Scoped through .pcr-faq so it outranks `.sect-light p` in chrome.css even
   though both are 0,2,0 — page-faq.css is enqueued after chrome-design.css,
   so source order decides the tie. */
.pcr-faq .pcr-faq-a p {
  padding-top: var(--sp-xs);
  color: var(--ink-light);
  line-height: var(--lh-loose);
}

/* <details> cannot be transitioned reliably across engines, so the open state
   animates the answer instead of the container. */
@media (prefers-reduced-motion: no-preference) {
  .pcr-faq-item[open] .pcr-faq-a { animation: pcr-faq-a-in var(--t-base) var(--ease); }
}
@keyframes pcr-faq-a-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* the standing industry-reference caveat */
.pcr-faq-foot {
  max-width: 74ch;
  margin: var(--sp-xl) auto 0;
  padding: var(--sp-md) var(--sp-lg);
  background: var(--surface);
  border-left: 3px solid var(--copper);
  clip-path: var(--clip-sm);
  color: var(--ink-light);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

/* ==================================================================== CTA ==
   `.sect-copper` is global: white type, white-on-copper primary button. The
   front page's `.cta` is a flat band, so this one is too — no panel, because
   there is nothing below it to frame. */

.pcr-faq-cta-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 3vw, 56px);
  align-items: center;
}
.pcr-faq-cta-title {
  color: #fff;
  margin-top: var(--sp-xs);
  font-size: var(--fs-2xl);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}
.pcr-faq .pcr-faq-cta-copy p {
  margin-top: var(--sp-md);
  max-width: 54ch;
  color: rgba(255, 255, 255, .9);
  line-height: var(--lh-body);
}
/* On a copper ground the secondary button is a white hairline, mirroring the
   front page's `.cta .btn-outline`. chrome.css only re-draws
   `.btn--outline-light` for LIGHT grounds, so the copper case is ours. */
.pcr-faq .pcr-faq-cta .btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, .62);
}
.pcr-faq .pcr-faq-cta .btn--outline-light:hover {
  --btn-bg: #fff;
  --btn-fg: var(--ink);
  --btn-bd: #fff;
}
.pcr-faq-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
}

@media (max-width: 860px) {
  .pcr-faq-cta-box { grid-template-columns: minmax(0, 1fr); }
  .pcr-faq-cta-actions .btn { flex: 1 1 auto; }
}

/* -------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  .pcr-faq *,
  .pcr-faq *::before,
  .pcr-faq *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------- narrow guard */
/* `.shell` already clamps the gutter; this is the belt-and-braces pass so a
   long unbroken token in an answer can never produce a horizontal scrollbar
   at 390px. */
@media (max-width: 420px) {
  .pcr-faq-q { gap: var(--sp-sm); }
  .pcr-faq-marker { width: 30px; height: 30px; }
  .pcr-faq-marker i { font-size: 15px; }
  .pcr-faq .pcr-faq-a p { overflow-wrap: break-word; }
}