/* ╔══════════════════════════════════════════════════════════════╗
   ║  FAQ ACCORDION - Shared component (matches index.html style) ║
   ║                                                               ║
   ║  Usage:                                                       ║
   ║  1. Link this CSS:  <link rel="stylesheet" href="css/faq-accordion.css">
   ║  2. Use this HTML structure:                                  ║
   ║                                                               ║
   ║  <div class="section-wrapper section-wrapper-auto" id="faq">  ║
   ║    <div class="section-content">                              ║
   ║      <h2 class="section-title reveal-up">Your Title</h2>     ║
   ║      <div class="accordion-section">                          ║
   ║        <div class="accordion-group" role="tablist">           ║
   ║          <div class="accordion-item">                         ║
   ║            <button class="accordion-toggle" role="tab"        ║
   ║              tabindex="0" aria-expanded="false"               ║
   ║              aria-label="Question text here">                 ║
   ║              <span class="accordion-icon"></span>             ║
   ║              <span class="accordion-text">"Question?"</span>  ║
   ║            </button>                                          ║
   ║            <div class="accordion-content">                    ║
   ║              <p>Answer text here.</p>                          ║
   ║            </div>                                             ║
   ║          </div>                                               ║
   ║          <!-- repeat .accordion-item for each Q&A -->         ║
   ║        </div>                                                 ║
   ║      </div>                                                   ║
   ║      <!-- optional: -->                                       ║
   ║      <p class="faq-more-link">                                ║
   ║        <a href="page.html#faq">See all FAQs →</a>            ║
   ║      </p>                                                     ║
   ║    </div>                                                     ║
   ║  </div>                                                       ║
   ║                                                               ║
   ║  3. JS handled by scroll-reveal.js (initFaqAccordion).       ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── Container ── */
.accordion-section {
  max-width: 100%;
  margin: 0 auto;
}

.accordion-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}

@media (min-width: 1024px) {
  .accordion-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 3rem;
  }
}

/* ── Item row ── */
.accordion-item {
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.accordion-item:last-child {
  border-bottom: none;
}

@media (min-width: 1024px) {
  .accordion-item {
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  }
}

/* ── Toggle button ── */
.accordion-toggle {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.25rem 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all 0.2s ease;
}

.accordion-toggle:hover {
  opacity: 0.8;
}

.accordion-toggle:focus-visible {
  outline: 2px solid var(--primary, #2563eb);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ── Circled +/− icon ── */
.accordion-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border: 2px solid #9ca3af;
  border-radius: 50%;
  font-size: 1.25rem;
  font-weight: 300;
  color: #9ca3af;
  transition: all 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
  position: relative;
}

.accordion-icon::before,
.accordion-icon::after {
  content: '';
  position: absolute;
  background: #9ca3af;
  transition: all 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.accordion-icon::before {
  width: 12px;
  height: 2px;
}

.accordion-icon::after {
  width: 2px;
  height: 12px;
}

/* Expanded state: circle fills blue, + becomes − */
.accordion-toggle[aria-expanded="true"] .accordion-icon {
  background: var(--primary, #2563eb);
  border-color: var(--primary, #2563eb);
}

.accordion-toggle[aria-expanded="true"] .accordion-icon::before,
.accordion-toggle[aria-expanded="true"] .accordion-icon::after {
  background: #fff;
}

.accordion-toggle[aria-expanded="true"] .accordion-icon::after {
  height: 0;
}

/* ── Question text ── */
.accordion-text {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 500;
  color: #e5e7eb;
  line-height: 1.4;
}

/* ── Collapsible answer ── */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.accordion-content.open {
  max-height: 500px;
}

.accordion-content p {
  padding: 0 0 1.25rem 2.75rem;
  margin: 0;
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  color: #9ca3af;
  line-height: 1.7;
}

.accordion-content p a {
  color: #60a5fa;
  text-decoration: none;
  transition: color 0.2s;
}

.accordion-content p a:hover {
  color: #93c5fd;
  text-decoration: underline;
}

/* ── "See all FAQs" link ── */
.faq-more-link {
  text-align: center;
  margin-top: 1.5rem;
}

.faq-more-link a {
  color: #60a5fa;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}

.faq-more-link a:hover {
  color: #93c5fd;
  text-decoration: underline;
}

/* ── Mobile overrides ── */
@media (max-width: 767px) {
  .accordion-section {
    padding: 0;
  }
  .accordion-group {
    padding: 0;
  }
  .accordion-item {
    padding: 0 0.5rem;
  }
  .accordion-toggle {
    padding: 1rem 0.5rem;
  }
  .accordion-content p {
    padding-left: 2rem;
    padding-right: 0.5rem;
  }
}