/* Questions & answers (<details class="faq__item">), shared by vchurch.us, missions and español.
   Needs site.css (colors, fonts). Moved out of pages.css on 2026-10-16. */
.faq { max-width: 900px; margin-inline: auto; border-top: 1px solid var(--rule-light); }
.faq__item { border-bottom: 1px solid var(--rule-light); }
.faq__item summary { position: relative; display: block; padding: 26px 64px 26px 0; cursor: pointer; list-style: none; font-family: var(--serif); font-weight: 500; font-size: clamp(23px, 2.2vw, 30px); line-height: 1.2; color: var(--navy); transition: color .2s; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%;
  border: 1px solid rgba(7, 26, 57, .35);
  background: linear-gradient(var(--navy), var(--navy)) center / 12px 1.4px no-repeat, linear-gradient(var(--navy), var(--navy)) center / 1.4px 12px no-repeat;
  transition: transform .3s var(--ease), background-color .3s;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:hover { color: var(--blue); }
.faq__a { padding: 0 64px 28px 0; font-size: 17px; color: var(--ink); }
.faq__a p + p { margin-top: 10px; }
.faq__a a { color: var(--navy); font-weight: 600; border-bottom: 1px solid rgba(7, 26, 57, .3); }
.faq__a a:hover { color: var(--blue); border-color: var(--blue); }
@media (max-width: 560px) { .faq__a { padding-right: 0; } }