/* Public FAQ (faq.html). Builds on app.css tokens and gallery.css's hero, closing section and footer. */
/* The banner's words share the questions' column. This banner is shorter than the gallery's, so the photo sits lower to keep the fire pit in view. */
.faq-hero { background-position: 70% 68%; }
.faq-hero .gallery-hero-inner { max-width: 820px; }
.faq-page { max-width: 820px; margin: 0 auto; padding: 24px 16px 48px; }
.faq-group + .faq-group { margin-top: 32px; }
.faq-group h2 { font-size: 21px; letter-spacing: -.5px; margin-bottom: 10px; }

.faq-group details { background: #fff; border: 1px solid var(--line-2); border-radius: 10px; }
.faq-group details + details { margin-top: 8px; }
.faq-group summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; border-radius: 10px; }
.faq-group summary::-webkit-details-marker { display: none; }
.faq-group summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 3px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }
.faq-group details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq-group summary:hover { color: var(--primary); }
.faq-group summary:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.faq-group details p { margin: 0; padding: 0 16px 16px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.faq-group details a { color: var(--primary); overflow-wrap: anywhere; }

@media (min-width: 760px) {
  .faq-hero .gallery-hero-inner { padding-left: 32px; padding-right: 32px; }
  .faq-page { padding: 40px 32px 64px; }
  .faq-group + .faq-group { margin-top: 40px; }
  .faq-group h2 { font-size: 24px; }
  .faq-group summary { padding: 16px 20px; font-size: 16px; }
  .faq-group details p { padding: 0 20px 18px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .faq-group summary::after { transition: none; } }