/**
 * FAQ Accordion — shared numbered accordion with framed image (About, Services).
 * template-parts/sections/faq-accordion.php
 *
 * 1. FAQ Accordion
 * 2. Responsive
 */

/* ============================ FAQ ACCORDION ============================ */
.faq-accordion {
  padding: var(--section-spacing, 6rem) 0;
  overflow-x: hidden;
}

.row.faq-accordion__row.g-4 {
  display: flex;
  justify-content: space-evenly;
}
.faq-accordion__media {
  position: relative;
}
.faq-accordion__media-frame {
  position: absolute;
  top: -1.5rem;
  left: -0.9rem;
  width: 60%;
  height: 60%;
  border: 3px solid var(--color-accent-red);
  z-index: -1;
}
.faq-accordion__img {
  width: 100%;
  border-radius: var(--radius-lg);
  object-fit: cover;
  object-position: top;
  aspect-ratio: 1;
}
.faq-accordion__accordion {
  margin: 1.5rem 0;
}
.faq-accordion__item {
  border: 0;
  /* margin-bottom: 1rem; */
}
.faq-accordion__question {
  background: #fff;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--heading-color);
  box-shadow: none;
  gap: 0.75rem;
  border-bottom: 1px solid #caced4;
}
/* Bootstrap's .accordion-button:focus box-shadow (the blue ring) beats the
   rule above on specificity — it needs its own :focus override. */
.faq-accordion__question:focus,
.faq-accordion__question:focus-visible {
  box-shadow: none;
}
.faq-accordion__question:not(.collapsed) {
  background: #fff;
  color: var(--heading-color);
  border-bottom: 1px solid #caced4;
}
.faq-accordion__question::after {
  display: none;
}
.faq-accordion__number {
  color: var(--color-accent-red);
  font-weight: 700;
}
.faq-accordion__question-text {
  flex: 1;
}
.faq-accordion__toggle-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.faq-accordion__question.collapsed .faq-accordion__toggle-icon--minus,
.faq-accordion__question:not(.collapsed) .faq-accordion__toggle-icon--plus {
  display: none;
}
.faq-accordion__answer {
  color: var(--text-color);
}
.faq-accordion__cta {
  background: var(--color-accent-red);
  color: var(--dark-text);
  font-weight: var(--font-weight-semibold);
  padding: 0.8rem 2.5rem;
  border-radius: var(--radius-btn);
  display: inline-block;
}
.faq-accordion__cta:hover {
  color: var(--dark-text);
  background: var(--color-nav-bg);
}
.faq-accordion__cta--dark {
  background: var(--color-nav-bg);
}
.faq-accordion__cta--dark:hover {
  background: var(--color-accent-red);
}

/* ============================ RESPONSIVE ============================ */

/* --- md: 768-991 --- */
@media (max-width: 991.98px) {
  .faq-accordion__media-frame {
    display: none;
  }
}