/*
  ============================================================
  FAQ ACCORDION — individual cards, soft open/close, one-at-a-time
  ============================================================
  Used on: service_page.php, city_page.php, nashik.php

  Markup contract — IDENTICAL on all three pages:

    <div class="space-y-2.5" id="faq-accordion">
      <div class="faq-item <?= $i === 0 ? 'is-open' : '' ?>" id="faq-item-<?= $i ?>">
        <button type="button" onclick="toggleFaq(<?= $i ?>)" class="faq-q">
          <span>Question text</span>
          <span class="faq-toggle"></span>
        </button>
        <div class="faq-a-wrap">
          <div class="faq-a-inner">
            <p>Answer text</p>
          </div>
        </div>
      </div>
      ...
    </div>

    <script>
    const faqTotal = <?= count($faqs) ?>;
    function toggleFaq(i) {
        const item = document.getElementById('faq-item-' + i);
        const isOpen = item.classList.contains('is-open');
        for (let j = 0; j < faqTotal; j++) {
            document.getElementById('faq-item-' + j).classList.remove('is-open');
        }
        if (!isOpen) item.classList.add('is-open');
    }
    </script>

  Only ONE .faq-item can carry "is-open" at a time — opening one always
  closes whichever was open. The container uses space-y (a real gap
  between cards) instead of divide-y borders, so items read as separate
  cards rather than one stuck-together block. Each card has its own
  border, radius and background regardless of open/closed state so
  they're visually distinct even before a click.

  Height animates via the grid-template-rows 0fr -> 1fr trick, which
  works smoothly without ever needing to know the answer's real height.
  ============================================================
*/

.faq-item {
  background: #fff;
  border: 1px solid #F0F1F3;
  border-radius: var(--sf-radius, 4px);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.faq-item.is-open {
  background-color: #FAFAFA;
  border-color: #E5E7EB;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  padding: 14px 16px;
  cursor: pointer;
  background: none;
  border: none;
}

.faq-q span {
  color: #1F2937;
  transition: color .2s ease;
}

.faq-item.is-open .faq-q span {
  color: var(--color-primary, #0185FC);
}

/* Pure-CSS +/- toggle — two bars forming a plus; the vertical bar collapses to 0 height on open,
   leaving just the horizontal bar (a minus). No icon font involved, so it can never render blank
   the way an unincluded Font Awesome glyph would. Left round (rounded-full) on purpose — the
   sitewide 4px corner theme deliberately does not touch circular badges/avatars. */
.faq-toggle {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #F3F4F6;
  transition: background-color .25s ease;
}
.faq-toggle::before,
.faq-toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: #9CA3AF;
  border-radius: 1px;
  transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1), background-color .25s ease;
}
.faq-toggle::before {                 /* horizontal bar — always visible */
  width: 10px;
  height: 2px;
  transform: translate(-50%, -50%);
}
.faq-toggle::after {                  /* vertical bar — shrinks away on open, leaving a minus */
  width: 2px;
  height: 10px;
  transform: translate(-50%, -50%) scaleY(1);
}

.faq-item.is-open .faq-toggle {
  background: var(--color-primary, #0185FC);
}
.faq-item.is-open .faq-toggle::before,
.faq-item.is-open .faq-toggle::after {
  background: #fff;
}
.faq-item.is-open .faq-toggle::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.faq-a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity .3s ease;
}

.faq-item.is-open .faq-a-wrap {
  grid-template-rows: 1fr;
  opacity: 1;
}

.faq-a-inner {
  overflow: hidden;
}

.faq-a-inner p {
  padding: 0 16px 16px;
}