/* =========================================================================
   Shared Accordion Component
   =========================================================================
   Usage: Add class="accordion" to any accordion container.
   Structure:
     .accordion
       .accordion-item[data-accordion-item]
         button.accordion-trigger[data-accordion-trigger]
           span.accordion-question  (label text)
           span.accordion-toggle    (icon container)
             .accordion-icon        (CSS plus/minus)
               OR
             svg with .faq-plus-h / .faq-plus-v paths
         .accordion-body            (collapsible content)
   ========================================================================= */

/* ── Item ── */
.accordion-item {
  background: white;
  border: 1px solid var(--tertiary, #e4f1ef);
  border-radius: var(--radius-l, 16px);
  overflow: clip;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.accordion-item + .accordion-item {
  margin-top: 16px;
}

/* Open state — shadow + teal border */
.accordion-item--open {
  border-color: #aad4cd;
  box-shadow:
    0px 84px 24px 0px rgba(133, 153, 151, 0),
    0px 54px 22px 0px rgba(133, 153, 151, 0.01),
    0px 30px 18px 0px rgba(133, 153, 151, 0.05),
    0px 13px 13px 0px rgba(133, 153, 151, 0.09),
    0px 3px 7px 0px rgba(133, 153, 151, 0.1);
}

/* ── Trigger button ── */
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  gap: 16px;
}

/* ── Question label ── */
.accordion-question {
  font-family: var(--font);
  font-weight: 700;
  font-size: 24px;
  line-height: 36px;
  letter-spacing: -0.5px;
  color: var(--primary);
}

/* ── Toggle icon container ── */
.accordion-toggle {
  width: 42px;
  height: 42px;
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--surface-tint, #e2f1ee);
  flex-shrink: 0;
}

/* ── CSS plus/minus icon (::before/::after approach) ── */
.accordion-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--surface-tint, #e2f1ee);
  flex-shrink: 0;
  position: relative;
}

.accordion-icon::before,
.accordion-icon::after {
  content: '';
  position: absolute;
  background: var(--primary, #023432);
  border-radius: 1.5px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.accordion-icon::before {
  width: 16px;
  height: 2.5px;
}

.accordion-icon::after {
  width: 2.5px;
  height: 16px;
}

/* Hide vertical line when open (CSS icon approach) */
.accordion-item--open .accordion-icon::after {
  display: none;
}

/* Hide vertical line when open (SVG approach) */
.accordion-item--open .faq-plus-v {
  display: none;
}

/* Also support aria-expanded for backward compat */
.accordion-trigger[aria-expanded="true"] .accordion-icon::after {
  display: none;
}

/* ── Body — animated slide ── */
.accordion-body {
  max-height: 0;
  overflow: hidden;
  padding: 0 32px;
  font-family: var(--font);
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--primary);
  transition: max-height 0.35s ease, padding 0.35s ease, opacity 0.25s ease;
  opacity: 0;
}

.accordion-body p {
  margin: 0 0 16px;
}

.accordion-body p:last-child {
  margin-bottom: 0;
}

.accordion-item--open .accordion-body {
  max-height: 800px;
  padding: 0 32px 32px;
  opacity: 1;
}

/* Also support aria-expanded + display for backward compat */
.accordion-trigger[aria-expanded="true"] + .accordion-body {
  max-height: 800px;
  padding: 0 32px 32px;
  opacity: 1;
}

/* ── Responsive ── */
@media (max-width: 690px) {
  .accordion-trigger { padding: 20px 24px; }
  .accordion-body { padding: 0 24px; }
  .accordion-item--open .accordion-body { padding: 0 24px 24px; }
  .accordion-trigger[aria-expanded="true"] + .accordion-body { padding: 0 24px 24px; }
  .accordion-question { font-size: 18px; line-height: 30px; letter-spacing: -0.5px; }
}