/*
 * VOMA Child Theme – faq.css
 *
 * FAQ Accordion: Section, Inner, Item, Question (Toggle), Answer.
 * Transitions: max-height 220ms (dokumentierte Ausnahme laut ANIMATIONS.md).
 *
 * Quellen:
 *   06_Standards/CI/COMPONENTS.md      – Zielwerte FAQ Accordion
 *   06_Standards/DEVELOPMENT/CSS-TOKENS.md – Token-Register
 *   06_Standards/DEVELOPMENT/ANIMATIONS.md – 220ms Ausnahme
 *   06_Standards/QUALITAET/ACCESSIBILITY.md – ARIA, Fokus
 */

/* ============================================================
   SECTION
   Quelle: COMPONENTS.md – Section Padding 36px 0
   ============================================================ */

.voma-faq {
  padding-block: 36px 0;
}

.voma-faq__inner {
  max-width: var(--voma-max-service);
  margin-inline: auto;
  /* Kein eigenes horizontales Padding mehr – kommt von .site-content
     (Mobile-Design-System, docs/components/mobile-design-system.md). */
  display: flex;
  flex-direction: column;
  gap: var(--voma-space-3);
}

/* ============================================================
   ITEM
   Quelle: COMPONENTS.md – Radius 22px, Border voma-border,
   Shadow 0 6px 22px rgba(0,0,0,.045)
   ============================================================ */

.voma-faq__item {
  background: #ffffff;
  border: var(--voma-border);
  border-radius: 22px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .045);
  overflow: hidden;
  transition:
    transform var(--voma-transition-base),
    box-shadow var(--voma-transition-base);
}

.voma-faq__item.is-open {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .08);
}

/* ============================================================
   QUESTION (Accordion-Toggle)
   Quelle: COMPONENTS.md – Padding 20px 24px, mobil 18px
   ============================================================ */

.voma-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--voma-space-4);
  width: 100%;
  padding: 18px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: #111827;
}

/* Akkordeon-Pfeil */
.voma-faq__question-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(82, 177, 101, .1);
  color: var(--voma-green);
  flex-shrink: 0;
  transition:
    transform var(--voma-transition-base),
    background var(--voma-transition-base);
}

.voma-faq__question-icon svg {
  width: 16px;
  height: 16px;
  transition: transform var(--voma-transition-base);
}

.voma-faq__item.is-open .voma-faq__question-icon {
  background: var(--voma-green);
  color: #ffffff;
}

.voma-faq__item.is-open .voma-faq__question-icon svg {
  transform: rotate(180deg);
}

/* ============================================================
   ANSWER
   Quelle: COMPONENTS.md – Padding 0 24px 22px, Zeilenhöhe 1.7
   Animation: max-height 220ms (dokumentierte Ausnahme ANIMATIONS.md)
   ============================================================ */

.voma-faq__answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 220ms ease;
}

.voma-faq__item.is-open .voma-faq__answer {
  max-height: 1000px;
}

.voma-faq__answer-inner {
  padding: 0 18px 20px;
  font-size: 15.5px;
  line-height: 1.7;
  color: #1f2933;
}

.voma-faq__answer-inner a {
  color: var(--voma-green);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================================
   DESKTOP BREAKPOINT (≥ 64rem)
   ============================================================ */

@media (min-width: 64rem) {
  .voma-faq__question {
    padding: 20px 24px;
    font-size: 17px;
  }

  .voma-faq__answer-inner {
    padding: 0 24px 22px;
  }
}