/**
 * Interactive FAQ Accordion Styles
 * Dr. Yıldız Digital Ecosystem
 * 
 * Requirements: 33.1, 33.2, 33.3, 33.4, 33.5
 * - Smooth height animation (300-400ms)
 * - Staggered content reveal (fade-in + slide-up)
 * - Rotating icon animation (plus to X)
 * - Multiple items open simultaneously
 * - Keyboard accessibility
 */

/* ============================================
 * ACCORDION LIST CONTAINER
 * ============================================ */

.accordion-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
}

/* ============================================
 * ACCORDION ITEM
 * ============================================ */

.accordion-list__item {
  background-color: var(--color-white, #ffffff);
  border: 1px solid var(--color-border, #e5e5e5);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  transition: border-color var(--transition-fast, 0.2s ease),
              box-shadow var(--transition-fast, 0.2s ease);
}

.accordion-list__item:hover {
  border-color: var(--color-primary-light, #fce4ec);
}

.accordion-list__item.is-open {
  border-color: var(--color-primary, #f03167);
  box-shadow: 0 2px 8px rgba(240, 49, 103, 0.1);
}

/* ============================================
 * ACCORDION HEADER / TRIGGER
 * ============================================ */

.accordion-list__header {
  margin: 0;
}

.accordion-list__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-4, 16px) var(--space-5, 20px);
  font-family: var(--font-body, 'Roboto', sans-serif);
  font-size: var(--font-size-base, 1rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--line-height-normal, 1.5);
  color: var(--color-charcoal, #2d2d2d);
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast, 0.2s ease),
              background-color var(--transition-fast, 0.2s ease);
}

.accordion-list__trigger:hover {
  color: var(--color-primary, #f03167);
  background-color: var(--color-off-white, #fafafa);
}

.accordion-list__trigger:focus-visible {
  outline: 2px solid var(--color-primary, #f03167);
  outline-offset: -2px;
  border-radius: var(--radius-sm, 4px);
}

.accordion-list__item.is-open .accordion-list__trigger {
  color: var(--color-primary, #f03167);
  background-color: var(--color-primary-light, #fce4ec);
}

.accordion-list__title {
  flex: 1;
  padding-right: var(--space-3, 12px);
}

/* ============================================
 * ACCORDION ICON (Plus to X animation)
 * Requirements: 33.4
 * ============================================ */

.accordion-list__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-medium-gray, #6b6b6b);
  transition: color var(--transition-fast, 0.2s ease),
              transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-list__trigger:hover .accordion-list__icon {
  color: var(--color-primary, #f03167);
}

.accordion-list__item.is-open .accordion-list__icon {
  color: var(--color-primary, #f03167);
  transform: rotate(45deg);
}

.accordion-list__icon svg {
  width: 100%;
  height: 100%;
}

/* Horizontal line of plus icon - fades out when rotating to X */
.accordion-list__icon-horizontal {
  transition: opacity 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-list__item.is-open .accordion-list__icon-horizontal {
  opacity: 0;
}

/* ============================================
 * ACCORDION PANEL (Collapsible content)
 * Requirements: 33.1 - Smooth height animation (300-400ms)
 * ============================================ */

.accordion-list__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-list__panel[hidden] {
  display: none;
}

.accordion-list__item.is-open .accordion-list__panel {
  grid-template-rows: 1fr;
}

.accordion-list__panel-inner {
  overflow: hidden;
}

.accordion-list__content {
  padding: 0 var(--space-5, 20px) var(--space-5, 20px);
  font-size: var(--font-size-base, 1rem);
  line-height: var(--line-height-relaxed, 1.75);
  color: var(--color-dark-gray, #4a4a4a);
}

/* ============================================
 * STAGGERED CONTENT REVEAL
 * Requirements: 33.2 - Fade-in + slide-up per paragraph/list item
 * ============================================ */

.accordion-list__content > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Staggered delays for child elements */
.accordion-list__content > *:nth-child(1) { transition-delay: 50ms; }
.accordion-list__content > *:nth-child(2) { transition-delay: 100ms; }
.accordion-list__content > *:nth-child(3) { transition-delay: 150ms; }
.accordion-list__content > *:nth-child(4) { transition-delay: 200ms; }
.accordion-list__content > *:nth-child(5) { transition-delay: 250ms; }
.accordion-list__content > *:nth-child(6) { transition-delay: 300ms; }
.accordion-list__content > *:nth-child(7) { transition-delay: 350ms; }
.accordion-list__content > *:nth-child(8) { transition-delay: 400ms; }

/* Reveal animation when item is open */
.accordion-list__item.is-open .accordion-list__content > * {
  opacity: 1;
  transform: translateY(0);
}

/* List items within content also get staggered */
.accordion-list__content ul,
.accordion-list__content ol {
  margin: var(--space-3, 12px) 0;
  padding-left: var(--space-5, 20px);
}

.accordion-list__content li {
  margin-bottom: var(--space-2, 8px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-list__content li:nth-child(1) { transition-delay: 100ms; }
.accordion-list__content li:nth-child(2) { transition-delay: 150ms; }
.accordion-list__content li:nth-child(3) { transition-delay: 200ms; }
.accordion-list__content li:nth-child(4) { transition-delay: 250ms; }
.accordion-list__content li:nth-child(5) { transition-delay: 300ms; }
.accordion-list__content li:nth-child(6) { transition-delay: 350ms; }
.accordion-list__content li:nth-child(7) { transition-delay: 400ms; }
.accordion-list__content li:nth-child(8) { transition-delay: 450ms; }

.accordion-list__item.is-open .accordion-list__content li {
  opacity: 1;
  transform: translateY(0);
}

/* Paragraphs within content */
.accordion-list__content p {
  margin: 0 0 var(--space-3, 12px);
}

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

/* ============================================
 * EMPTY STATE
 * ============================================ */

.accordion-list__empty {
  padding: var(--space-6, 24px);
  text-align: center;
  color: var(--color-medium-gray, #6b6b6b);
  font-style: italic;
}

/* ============================================
 * REDUCED MOTION PREFERENCE
 * ============================================ */

@media (prefers-reduced-motion: reduce) {
  .accordion-list__icon,
  .accordion-list__icon-horizontal,
  .accordion-list__panel,
  .accordion-list__content > *,
  .accordion-list__content li {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

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

@media (max-width: 767px) {
  .accordion-list__trigger {
    padding: var(--space-3, 12px) var(--space-4, 16px);
    font-size: var(--font-size-sm, 0.875rem);
  }
  
  .accordion-list__content {
    padding: 0 var(--space-4, 16px) var(--space-4, 16px);
    font-size: var(--font-size-sm, 0.875rem);
  }
}