/*
FAQ page template -- styles unique to this page only. Everything else it
needs (reset, :root palette, body/html, nav, hamburger, mobile menu,
footer, .fade-in, the shared .page-header/.crumb/.page-eyebrow/.page-title
block, .btn-primary/.btn-ghost) already lives in the shared style.css and
loads on every page via ironwood_enqueue_styles(). This file is enqueued
ONLY on pages using the FAQ template (see the is_page_template() check in
functions.php) so it never adds weight to the rest of the site.

The accordion itself is native <details>/<summary> -- no JS file, no
third-party library. This stylesheet only has to: hide the browser's own
disclosure marker, draw a custom gold chevron in its place, and rotate
that chevron when a <details> is open.
*/

.faq-wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 76px 80px 60px;
}

.faq-category { margin-bottom: 52px; }
.faq-category:last-of-type { margin-bottom: 0; }
.faq-category-title {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--forest);
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(176,144,61,0.3);
}

.faq-list { border-top: 1px solid rgba(74,63,53,0.14); }

.faq-item {
  border-bottom: 1px solid rgba(74,63,53,0.14);
}

/* Strip the native disclosure triangle (both the old-style marker and the
   newer ::marker pseudo-element) so the custom chevron below is the only
   one shown. */
.faq-question { list-style: none; }
.faq-question::-webkit-details-marker { display: none; }
.faq-question::marker { content: ''; }

.faq-question {
  position: relative;
  cursor: pointer;
  padding: 22px 40px 22px 2px;
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--forest);
  line-height: 1.4;
  transition: color 0.2s;
}
.faq-question:hover { color: var(--gold-muted); }
.faq-question:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

/* Custom chevron -- the same gold arrow used on the contact/trade form
   selects, for a consistent visual language across the site. Rotates
   180deg when the <details> is open. */
.faq-question::after {
  content: '';
  position: absolute;
  top: 26px;
  right: 2px;
  width: 12px;
  height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23B0903D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 12px 8px;
  transition: transform 0.2s;
}
.faq-item[open] .faq-question::after { transform: rotate(180deg); }

.faq-answer {
  padding: 0 40px 24px 2px;
  font-family: 'EB Garamond', serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-mid);
  max-width: 680px;
}
.faq-answer p { margin: 0; }
.faq-answer a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.faq-answer a:hover { color: var(--gold-muted); }

/* ── CTA FOOTER ── */
.faq-cta {
  margin-top: 70px;
  padding: 54px 40px;
  background: var(--cream-warm);
  text-align: center;
}
.faq-cta-title {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--forest);
  margin-bottom: 12px;
}
.faq-cta-body {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  color: var(--text-mid);
  max-width: 460px;
  margin: 0 auto 28px;
}
.faq-cta-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

@media (max-width: 1024px) {
  .faq-wrap { padding: 60px 40px 50px; }
}
@media (max-width: 768px) {
  .faq-wrap { padding: 48px 20px 40px; }
  .faq-category-title { font-size: 21px; }
  .faq-question { font-size: 16.5px; padding: 18px 34px 18px 0; }
  .faq-answer { padding: 0 34px 20px 0; }
  .faq-cta { padding: 44px 24px; margin-top: 50px; }
  .faq-cta-title { font-size: 23px; }
}