/* Service FAQ - an accordion of six questions, above the blog band.
 *
 * Built on native <details>/<summary>, so there is no JavaScript at all. Three
 * reasons, in order of weight:
 *
 *   1. The service pages already carry a scripted accordion - the "Similar
 *      Services We Offer" block, with `button.accordion` and `div.panel` and
 *      its own handler. A second scripted accordion is exactly the kind of
 *      thing that quietly binds to the wrong elements. <details> cannot.
 *   2. Keyboard and screen-reader behaviour come free. A <div> with a click
 *      handler would have to reimplement all of it, and usually doesn't.
 *   3. Nothing to load and nothing to initialise, so nothing to fail.
 *
 * The `name` attribute on <details> makes the group mutually exclusive - open
 * one and the last closes, as in the reference. On a browser too old for it,
 * several can sit open at once, which is still perfectly usable.
 *
 * Loaded after blog.css. Same reason as every light band before it:
 * sections.css paints `.sos-band h2` white for the dark bands, and source order
 * is what lets this restate the colour without !important.
 */

/* ---- the band -----------------------------------------------------------
   White, with a hairline top border. The page body above is also white, so
   without the border there is nothing to say where the article ends and the
   FAQ begins; the blog band below is #f5f5f5 and separates itself. */

.sos-faq {
  background: #fff;
  border-top: 1px solid #e2e2e2;
  padding: 64px 0;
}

/* Narrower than the 1180px the other bands use. FAQ answers are prose, and
   prose set to 1180px is a chore to read. */
.sos-faq .sos-wrap {
  max-width: 880px;
}

.sos-faq .sos-fq-head {
  text-align: center;
  margin-bottom: 36px;
}

/* sections.css sets .sos-band h2 to #fff for the dark bands. Restated, not
   fought - this sheet loads later, so source order settles it. */
.sos-faq h2 {
  color: #1a1a1a;
  margin: 0;
}

.sos-faq .sos-fq-sub {
  color: #666;
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 14px 0 0;
  padding: 0;
}

/* ---- a row -------------------------------------------------------------- */

.sos-faq .sos-fq-item {
  background: #f6f6f6;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.sos-faq .sos-fq-item:last-of-type {
  margin-bottom: 0;
}

/* The open row lifts out of the stack: white, with the brand colour down its
   leading edge so the eye lands on the answer rather than hunting for it. */
.sos-faq .sos-fq-item[open] {
  background: #fff;
  border-color: #dd5c26;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* ---- the question ------------------------------------------------------
   `list-style: none` plus the -webkit- marker rule are both needed: Firefox
   and Chrome use the list marker, older WebKit uses its own pseudo-element,
   and missing either leaves a stray triangle next to the question. */

.sos-faq .sos-fq-q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  font-family: 'Poppins', 'Archivo', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.4;
  color: #1a1a1a;
  text-transform: none;
}

.sos-faq .sos-fq-q::-webkit-details-marker {
  display: none;
}

.sos-faq .sos-fq-q:hover {
  color: #dd5c26;
}

/* Focus has to stay visible - the whole row is a keyboard control, and the
   default outline is removed by nothing here, so this only strengthens it. */
.sos-faq .sos-fq-q:focus-visible {
  outline: 2px solid #dd5c26;
  outline-offset: -2px;
}

/* ---- the chevron -------------------------------------------------------
   Drawn as a data: URI rather than fetched, the same way the promise band's
   tick and the process band's camera are done. No asset, no request. */

.sos-faq .sos-fq-icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #dd5c26
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    no-repeat center / 15px 15px;
  transition: transform 0.2s ease, background-color 0.15s ease;
}

.sos-faq .sos-fq-item[open] .sos-fq-icon {
  transform: rotate(180deg);
}

/* ---- the answer --------------------------------------------------------- */

.sos-faq .sos-fq-a {
  padding: 0 22px 22px;
  border-top: 1px solid #ededed;
  margin-top: -1px;
}

.sos-faq .sos-fq-a p {
  font-size: 0.98rem;
  line-height: 1.75;
  color: #3d3d3d;
  margin: 18px 0 0;
  padding: 0;
}

.sos-faq .sos-fq-a p:first-child {
  margin-top: 18px;
}

/* ---- responsive --------------------------------------------------------- */

@media all and (max-width: 980px) {
  .sos-faq {
    padding: 48px 0;
  }
  .sos-faq .sos-fq-head {
    margin-bottom: 28px;
  }
}

@media all and (max-width: 620px) {
  .sos-faq .sos-fq-q {
    padding: 16px 16px;
    font-size: 0.96rem;
    gap: 14px;
  }
  .sos-faq .sos-fq-icon {
    width: 28px;
    height: 28px;
    background-size: 13px 13px;
  }
  .sos-faq .sos-fq-a {
    padding: 0 16px 18px;
  }
}