/* Purpose: FAQ — cream section, two-column (sticky head + accordion). Built on native
   <details>/<summary> (keyboard-accessible, zero JS). Ported into the WV design system. */

.faq { background: var(--cream); }

.faq__grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 900px) { .faq__grid { grid-template-columns: minmax(280px, 0.85fr) 1.15fr; gap: 64px; align-items: start; } }

@media (min-width: 900px) { .faq__head { position: sticky; top: 104px; } }
.faq .eyebrow { display: inline-flex; color: var(--emerald); margin-bottom: 16px; }
.faq__title { color: var(--ink); margin: 0; }
.faq__title em { color: var(--emerald); font-style: italic; }
.faq__lead { color: var(--ink-72); margin-top: 16px; max-width: 42ch; }

.faq__list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: #FFFFFF; border: 1px solid rgba(55, 96, 84, 0.12); border-radius: 14px; overflow: hidden;
  transition: border-color var(--dur-default), box-shadow var(--dur-default);
}
.faq-item[open] { border-color: rgba(55, 96, 84, 0.28); box-shadow: 0 16px 36px -24px rgba(55, 96, 84, 0.30); }
.faq-item__q {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px;
  font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 1.4; color: var(--ink);
  transition: color var(--dur-default);
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q:hover { color: var(--emerald); }
.faq-item__q:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; border-radius: 8px; }
/* Plus → minus toggle */
.faq-item__toggle { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.faq-item__toggle::before, .faq-item__toggle::after {
  content: ''; position: absolute; background: var(--emerald); border-radius: 2px;
  transition: transform var(--dur-default), opacity var(--dur-default);
}
.faq-item__toggle::before { top: 8px; left: 2px; width: 14px; height: 2px; }
.faq-item__toggle::after  { top: 2px; left: 8px; width: 2px; height: 14px; }
.faq-item[open] .faq-item__toggle::after { transform: scaleY(0); opacity: 0; }
.faq-item__a { padding: 0 22px 20px; }
.faq-item__a p { font-family: var(--font-body); font-size: 14.5px; line-height: 1.7; color: var(--ink-72); margin: 0; max-width: 64ch; }