/* =============================================================================
   sbc-faq-block.css

   What this file does:
   Styles the FAQ block on the pad: a column of questions in Newsreader, each opening with a "+" that
   turns into an "x", hairline rules between them, and the pad's double margin rule down the left
   (brand/pages.md, "The pad"). Each question is a plain <details><summary> pair, so the answers are
   in the page for search engines and AI tools, open without JavaScript, and work with the keyboard.

   Context of where it's used in the repo:
   templates/homepage-2.html and templates/ai-answering-service-LP.html wrap their questions in
   <div class="faq-block">. The FAQPage schema on each page lists the same questions. Tokens are scoped
   to the block so it works on pages whose :root variables are named differently.

   What it calls:
   Nothing. Fonts come from the page (Newsreader for questions, Figtree for answers).

   What calls it:
   A <link rel="stylesheet"> on each page that uses the block.
   ============================================================================= */

.faq-block{
  --faq-ink:#222222; --faq-body:#4A463E; --faq-muted:#6F6A60; --faq-forest:#1F3D33; --faq-terracotta:#B86A50;
  --faq-rule-strong:rgba(31,61,51,.18); --faq-margin-rule:rgba(31,61,51,.22);
  --faq-serif:"Newsreader",Georgia,"Times New Roman",serif;
  --faq-sans:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  position:relative; max-width:820px; margin:34px auto 0; padding-left:30px; text-align:left;
}

/* The pad's double margin rule */
.faq-block::before{content:"";position:absolute;left:0;top:-24px;bottom:0;width:4px;border-left:1px solid var(--faq-margin-rule);border-right:1px solid var(--faq-margin-rule)}

.faq-block details{border-bottom:1px solid var(--faq-rule-strong)}
.faq-block details:first-child{border-top:1px solid var(--faq-rule-strong)}
.faq-block summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 0;font:500 1.2rem/1.3 var(--faq-serif);color:var(--faq-ink)}
.faq-block summary::-webkit-details-marker{display:none}
.faq-block summary::after{content:"+";margin-left:auto;flex:none;font:400 1.5rem/1 var(--faq-sans);color:var(--faq-muted);transition:transform .25s ease}
.faq-block details[open] summary::after{transform:rotate(45deg)}
.faq-block summary:focus-visible{outline:2px solid var(--faq-terracotta);outline-offset:2px}
.faq-block details p{margin:0;padding:0 0 20px;font:400 1rem/1.6 var(--faq-sans);color:var(--faq-body);max-width:66ch}
.faq-block details a{color:var(--faq-forest);font-weight:600}

@media (max-width:560px){
  .faq-block{padding-left:22px}
  .faq-block summary{font-size:1.1rem}
}
@media (prefers-reduced-motion: reduce){
  .faq-block summary::after{transition:none}
}