/* ==========================================================================
   QUESTIONS — the <details> accordion. Shared by the homepage and the three
   trade pages.

   Load AFTER system.css:

     <link rel="stylesheet" href="/css/system.css">
     <link rel="stylesheet" href="/css/faq.css">

   These rules used to live in the inline <style> in index.html. They are in a
   file now for the same reason guarantee.css exists: /hvac and /roofing each
   answer the same six questions in trade-specific words, and the alternative
   was copies of one accordion drifting apart. (/contractors was a third until
   the shop narrowed to 2 trades.)

   Tokens, type and .sec come from system.css. No hardcoded colours.

   Native <details>, no JS — it is keyboard accessible and findable by browser
   find-in-page for free, which a div-and-script accordion is not. Rules
   between rows, no boxes, so it stays in the same family as the rest.
   ========================================================================== */

/* The list is capped at 900 and centred, so a full-width left-aligned heading
   above it starts ~50px to the left of the first question and reads as a
   misalignment rather than a hierarchy. Centre the two on the same axis. */
.faqs-h{text-align:center;max-width:24ch;margin-inline:auto}
.faqs{
  margin-top:clamp(24px,2.8vw,34px);
  border-top:1px solid var(--line);
  /* Capped and centred. Full-bleed question rows on a 1180 wrap run ~1070px
     wide and the eye loses the line between the question and its plus sign. */
  max-width:900px;margin-inline:auto;
}
.faq{
  border-bottom:1px solid var(--line);
  padding-inline:clamp(10px,1.4vw,18px);
  transition:background .34s var(--ease),border-color .34s var(--ease);
}
.faq:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
/* Open rows get a real fill and a lit bottom edge, so an expanded answer
   reads as a panel that opened rather than as loose text on the ground. On a
   textured band — which is where this sits on the homepage — an open answer
   with no backing reads as text floating on wallpaper. */
.faq[open]{
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--accent) 9%,transparent),color-mix(in srgb,var(--ox-deep) 34%,transparent));
  border-bottom-color:color-mix(in srgb,var(--accent) 42%,transparent);
}
.faq summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;gap:clamp(14px,2vw,30px);
  padding:clamp(14px,1.55vw,19px) 0;
  font-weight:700;font-size:clamp(15.5px,1.4vw,17.5px);line-height:1.35;color:var(--sand);
  transition:color .2s var(--ease),transform .28s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
/* A couple of pixels, not a jump. Enough that the row feels like it responds
   to the cursor; not so much that a seven-row list twitches while you scan. */
.faq summary:hover,.faq[open] summary{transform:translateX(3px)}
/* Plus/minus drawn as two crossed gradients inside a ring. The ring is what
   makes it read as a control; the bare cross read as punctuation. The
   vertical bar scales to nothing on open and the whole marker turns 90° with
   it, so plus becomes minus in one continuous move instead of a swap. */
.faq summary::after{
  content:"";flex:0 0 auto;margin:.12em 0 0 auto;
  width:26px;height:26px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);
  background:
    linear-gradient(var(--accent),var(--accent)) center/9px 1.6px no-repeat,
    linear-gradient(var(--accent),var(--accent)) center/1.6px 9px no-repeat;
  transition:transform .38s var(--ease),background-size .38s var(--ease),
             border-color .28s var(--ease),background-color .28s var(--ease);
}
.faq summary:hover::after{
  border-color:var(--accent);
  background-color:color-mix(in srgb,var(--accent) 14%,transparent);
}
.faq[open] summary{color:var(--accent)}
.faq[open] summary::after{
  transform:rotate(90deg);
  background-size:9px 1.6px,1.6px 0;
  border-color:var(--accent);
  background-color:color-mix(in srgb,var(--accent) 18%,transparent);
}

.faq-a{padding:0 0 clamp(16px,1.8vw,22px)}
/* The answer slides down and in whenever the row opens. `both` holds the end
   state, so the text does not snap back to transparent after the run.

   This animates the CONTENT, not the height. <details> has no animatable
   open/closed height in browsers that matter yet, and the JS accordions that
   fake it break find-in-page and keyboard access — which is the entire reason
   this is a native <details> in the first place. A 320ms content reveal reads
   as the panel opening and costs none of that. */
.faq[open] .faq-a{animation:faqIn .32s var(--ease) both}
@keyframes faqIn{
  from{opacity:0;transform:translateY(-9px)}
  to  {opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .faq[open] .faq-a{animation:none}
  .faq summary,.faq summary::after{transition:none}
}
.faq-a p{margin:0;font-size:15px;line-height:1.62;color:var(--sand-2);max-width:74ch}
/* A second paragraph inside one answer. Only used where the honest answer has
   a caveat that should not be welded onto the end of the first sentence. */
.faq-a p+p{margin-top:.8em}