/* assets/css/components/accordion.css
 * @layer components — .accordion + .faq-section BEM blocks
 * ════════════════════════════════════════════════════════════════════ */

@layer components {

  /* ── FAQ section wrapper ── */

  .faq-section__heading {
    margin: 0;
    font-size: var(--heading-m);
    font-weight: var(--weight-bold);
    color: var(--text-main);
  }


  /* ── Accordion container ── */

  .accordion {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-block-start: var(--line-thin) solid var(--border-default);
  }


  /* ── Accordion item ── */

  .accordion__item {
    border-block-end: var(--line-thin) solid var(--border-default);
  }


  /* ── Trigger (button) ── */

  .accordion__heading {
    margin: 0;
  }

  .accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    inline-size: 100%;
    padding-block: var(--space-m);
    padding-inline: 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: start;
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: var(--text-m);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    transition: color var(--duration-fast) var(--ease-default);
  }

  .accordion__trigger:hover {
    color: var(--text-accent);
  }

  .accordion__trigger:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-xs);
  }

  .accordion__question {
    flex: 1;
  }


  /* ── Chevron icon ── */

  .accordion__icon {
    flex-shrink: 0;
    display: inline-block;
    inline-size: 0.5625rem;
    block-size: 0.5625rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--duration-normal) var(--ease-default);
    margin-block-end: 0.15em;
    opacity: 0.6;
  }

  /* Rotate chevron when expanded */
  .accordion__trigger[aria-expanded="true"] .accordion__icon {
    transform: rotate(-135deg);
    margin-block-end: -0.15em;
    opacity: 1;
  }

  /* Active trigger highlight */
  .accordion__trigger[aria-expanded="true"] {
    color: var(--text-accent);
  }


  /* ── Panel ── */

  .accordion__panel {
    /* hidden attribute handles display:none for JS-off state */
  }

  .accordion__panel:not([hidden]) {
    display: block;
  }

  .accordion__body {
    padding-block-end: var(--space-m);
    color: var(--text-body);
    font-size: var(--text-m);
    line-height: var(--leading-relaxed);
  }

  .accordion__body > * + * {
    margin-block-start: var(--space-xs);
  }

  .accordion__body p {
    margin: 0;
  }

  .accordion__body a {
    color: var(--text-accent);
    text-underline-offset: 0.2em;
  }

  .accordion__body a:hover {
    color: var(--primary-dark);
  }

  .accordion__body ul,
  .accordion__body ol {
    padding-inline-start: var(--space-m);
  }


  /* ── Smooth open/close animation ── */

  @media (prefers-reduced-motion: no-preference) {

    .accordion__panel {
      overflow: hidden;
    }

    /* JS adds .is-animating during transition */
    .accordion__panel.is-animating {
      display: block;
      transition: block-size var(--duration-normal) var(--ease-default);
    }

  }


  /* ── Reduced motion ── */

  @media (prefers-reduced-motion: reduce) {
    .accordion__trigger,
    .accordion__icon {
      transition: none;
    }
  }


  /* ════════════════════════════════════════════════════════════════════
     V3 — Dashed-divider accordion (Pencil FAQ component)
     ════════════════════════════════════════════════════════════════════ */

  .accordion--dashed .accordion__item {
    border-block-end: 1px dashed var(--border-default);
  }

  .accordion--dashed .accordion__trigger-text {
    font-size: var(--text-m);
    font-weight: var(--weight-semibold);
    color: var(--text-main);
  }

  .accordion--dashed .accordion__trigger[aria-expanded="true"] .accordion__trigger-text {
    color: var(--text-accent);
  }

  /* "Show more FAQs" button */
  .accordion__show-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xs) var(--space-l);
    border-radius: var(--radius-m);
    border: 1px solid var(--border-default);
    background: transparent;
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    color: var(--text-main);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-default);
  }
  .accordion__show-more:hover {
    background-color: var(--surface-tinted);
  }

  /* Two-column FAQ layout (left heading, right accordion) */
  .faq-section--two-col {
    display: flex;
    gap: var(--space-3xl);
  }

  .faq-section__intro {
    flex-shrink: 0;
    max-inline-size: 24rem;
  }

  .faq-section__list {
    flex: 1;
  }

  @media (max-width: 48em) {
    .faq-section--two-col {
      flex-direction: column;
      gap: var(--space-xl);
    }
  }

}