/*
 * FAQ Component
 * Accordion-style FAQ sections
 * Uses CSS nesting
 */

@layer components {
  /* FAQ container */
  .faq {
    max-width: var(--content-width-xs);
    margin-inline: auto;
  }

  .faq__title {
    font-size: clamp(1.625rem, 0.5vw + 1.375rem, 2rem);
    color: var(--color-gray-darker);
    text-align: center;
    margin-bottom: var(--block-space-double);
  }

  /* FAQ list */
  .faq__list {
    display: flex;
    flex-direction: column;
  }

  /* FAQ item */
  .faq__item {
    border-bottom: var(--border-subtle);

    &[open] .faq__icon {
      transform: rotate(180deg);
    }
  }

  /* FAQ question/trigger */
  .faq__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--block-space) var(--block-space-double);
    text-align: left;
    background-color: transparent;
    border: none;
    cursor: pointer;
    list-style: none;
    transition: background-color 150ms ease;

    &::-webkit-details-marker {
      display: none;
    }

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--color-gray-lightest);
      }
    }

    &:focus {
      outline: none;
    }

    &:focus-visible {
      background-color: var(--color-gray-lightest);
    }
  }

  .faq__question {
    font-size: var(--text-medium);
    color: var(--color-gray-darker);
    padding-right: var(--block-space);
    line-height: var(--leading-normal);
  }

  /* FAQ icon */
  .faq__icon {
    flex-shrink: 0;
    width: var(--icon-md);
    height: var(--icon-md);
    color: var(--color-gray-dark);
    transition: transform 200ms ease;
  }

  /* FAQ answer/content */
  .faq__content {
    padding: 0 var(--block-space-double) var(--block-space);
  }

  .faq__answer {
    font-size: var(--text-normal);
    color: var(--color-gray-dark);
    line-height: var(--leading-relaxed);

    & p {
      margin-bottom: var(--block-space-3quarter);

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  /* Soft FAQ variant (no borders, bg contrast, rounded) */
  .faq--soft .faq__list {
    gap: var(--block-space-half);
  }

  .faq--soft .faq__item {
    border-bottom: none;
    background-color: var(--color-gray-lightest);
    border-radius: var(--radius-lg);
  }

  .faq--soft .faq__trigger {
    background-color: transparent;
    border-radius: var(--radius-lg);
  }
}