/* Styles for list/templates/list/sub_components/faq.html.
   Loaded by both design arms: the base rules below are arm A's look (light page,
   orange brand), and the .design-c block at the bottom restates them in arm C's
   tokens. Nothing here is scoped to a page, so the block can be reused on an
   occasion landing page later without a second stylesheet. */

.ws-faq {
  padding: 48px 32px;
  box-sizing: border-box;
}

.ws-faq-inner {
  max-width: 760px;
  margin-inline: auto;
}

/* welcome_sections.css already styles a centred 2.2rem h2 on this page; only the
   bottom margin needs tightening, since the rows below carry their own rhythm. */
.ws-faq h2 {
  margin-bottom: 28px;
}

.ws-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ws-faq-item {
  background: #fff;
  border: 1px solid #e6e8ec;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

.ws-faq-item summary {
  /* list-style removes the default triangle in Firefox; ::-webkit-details-marker
     below does the same for older WebKit. The +/− sign replaces both, so the
     indicator sits on the right where the eye returns after the question. */
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.4;
  color: #26191f;
}

.ws-faq-item summary::-webkit-details-marker {
  display: none;
}

.ws-faq-item summary:focus-visible {
  outline: 2px solid var(--brand, #fea64d);
  outline-offset: 2px;
  border-radius: 12px;
}

.ws-faq-q {
  text-wrap: balance;
}

/* A + that becomes a − when the row is open: two bars, one rotated away. */
.ws-faq-sign {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.ws-faq-sign::before,
.ws-faq-sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  border-radius: 2px;
  background: var(--brand, #fea64d);
  transform: translateY(-50%);
  transition: transform .18s ease;
}

.ws-faq-sign::after {
  transform: translateY(-50%) rotate(90deg);
}

.ws-faq-item[open] .ws-faq-sign::after {
  transform: translateY(-50%) rotate(0deg);
}

.ws-faq-a {
  padding: 0 20px 18px;
  max-width: 62ch;
}

.ws-faq-a p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #5c4a52;
}

.ws-faq-more {
  margin-top: 10px !important;
}

.ws-faq-more a {
  color: #b86a16;
  font-weight: 600;
  text-decoration: none;
}

.ws-faq-more a:hover,
.ws-faq-more a:focus {
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .ws-faq-sign::before,
  .ws-faq-sign::after {
    transition: none;
  }
}

@media (max-width: 575.98px) {
  .ws-faq {
    padding: 36px 16px;
  }

  .ws-faq-item summary {
    padding: 14px 16px;
    font-size: 1rem;
  }

  .ws-faq-a {
    padding: 0 16px 16px;
  }
}

/* ---------------------------------------------------------------------------
   Arm C: same markup in the redesign's tokens. Arm C sets its own section
   rhythm (.c-section) and width (.c-wrap), so the wrapper padding is handed
   back to those and only the rows are restyled.
   --------------------------------------------------------------------------- */

.design-c .ws-faq {
  padding: 0;
}

.design-c .ws-faq-inner {
  max-width: 820px;
  margin-inline: 0;
}

.design-c .ws-faq h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.35rem);
  font-weight: 700;
  text-align: left;
  margin: 0 0 24px;
  color: var(--c-ink);
}

.design-c .ws-faq-item {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--c-r-md);
  box-shadow: var(--c-shadow-sm);
}

.design-c .ws-faq-item summary {
  color: var(--c-ink);
  font-size: 1.02rem;
}

.design-c .ws-faq-item summary:focus-visible {
  outline-color: var(--c-brand-deep);
  border-radius: var(--c-r-md);
}

.design-c .ws-faq-sign::before,
.design-c .ws-faq-sign::after {
  background: var(--c-brand-deep);
}

.design-c .ws-faq-a p {
  color: var(--c-ink-2);
  font-size: .95rem;
}

.design-c .ws-faq-more a {
  color: var(--c-brand-deep);
}