/* Moe's Mobile Detailing, FAQ page.

   Header from subpage.css, everything shared from site.css. What lives here
   is the question list: native details/summary, every answer present in the
   HTML whether or not it is open, so a search engine and a screen reader
   both get the whole page.

   The details treatment matches the FAQ block on the commercial page. It is
   restated here rather than imported because commercial.css belongs to a
   signed-off page and stays untouched. */

.faqs {
  background: var(--surface);
}

.faqs__group + .faqs__group {
  margin-top: var(--s5);
}

.faqs__grouptitle {
  margin: 0 0 var(--s3);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.faq__list details {
  background: var(--white);
  border-radius: var(--r-tile);
  margin-bottom: var(--s2);
}

.faq__list summary {
  padding: var(--s3) var(--s4);
  padding-right: calc(var(--s4) + 28px);
  cursor: pointer;
  font-weight: 600;
  color: var(--navy);
  list-style: none;
  position: relative;
}

.faq__list summary::-webkit-details-marker {
  display: none;
}

/* the trade's own mark for "this opens": a plain plus that becomes a minus */
.faq__list summary::after {
  content: "+";
  position: absolute;
  right: var(--s4);
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 400;
  color: var(--royal);
}

.faq__list details[open] summary::after {
  content: "\2212";
}

.faq__list summary:hover {
  color: var(--royal);
}

.faq__list p {
  margin: 0;
  padding: 0 var(--s4) var(--s3);
  max-width: 44em;
  line-height: 1.7;
  color: var(--muted);
}

.faq__list p a {
  color: var(--royal);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.subhero__lede a {
  color: var(--white);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.subhero__lede a:hover {
  color: var(--ice);
}