/* ===== ACCORDION/FAQ COMPONENT STYLES ===== */

/*
ACCORDION COMPONENT SYSTEM:
Provides clear visual structure, interactive feedback, and accessible
expandable/collapsible content areas for FAQ sections with appropriate
spacing and typography.

STRUCTURE:
- FAQ item: Container for each accordion item with border
- Trigger: Button that toggles content visibility (shows question + icon)
- Content: Expandable area containing answer text
- Icon: Chevron that indicates state (down for closed, rotates on open)

ACCESSIBILITY:
- Semantic button elements for keyboard navigation
- aria-expanded attribute tracks state
- Visible focus indicators for keyboard users
- Proper heading hierarchy with h3 for questions
- Hidden content area with .hidden class

INTERACTION:
- Hover states indicate clickability
- Focus states show keyboard navigation
- Content area smoothly shows/hides (animation in Phase 4)
*/

/* ===== FAQ SECTION CONTAINER ===== */

/*
FAQ section wrapper and layout
Provides background, padding, and content boundaries
*/

.faq {
  background: #ffffff;
  padding: var(--spacing-3xl) 0;
}

.faq-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

/* FAQ section title and subtitle inherited from section-title/section-subtitle */

/* ===== FAQ LIST WRAPPER ===== */

/*
Container for all accordion items
Provides consistent spacing between items
Flex column for vertical stacking
*/

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* ===== FAQ ITEM ===== */

/*
Individual accordion item wrapper
Border provides visual separation between items
Clean, minimal styling for focus on content
*/

.faq-item {
  border: 1px solid #e5e7eb;
  border-radius: var(--border-radius-lg);
  background: #ffffff;
  overflow: hidden;
  transition: all var(--transition-base);
}

/* Item hover state for visual feedback */
.faq-item:hover {
  border-color: #d1d5db;
  box-shadow: var(--shadow-sm);
}

/* ===== FAQ TRIGGER / BUTTON ===== */

/*
Question button (trigger) for expanding/collapsing content
Full width for easy clicking
Flexbox layout to align question and icon
Interactive states (hover, focus, active)
*/

.faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-lg);
  background: #ffffff;
  border: none;
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  transition: all var(--transition-base);
  gap: var(--spacing-md);
  position: relative;
}

/* Hover state - indicates clickability */
.faq-trigger:hover {
  background: #f9fafb;
  color: #7c3aed;
}

/* Focus state - keyboard navigation indicator */
.faq-trigger:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: -2px;
  background: #f9fafb;
}

/* Active/expanded state */
.faq-trigger[aria-expanded="true"] {
  background: #f9fafb;
  color: #7c3aed;
}

/* ===== FAQ QUESTION TEXT ===== */

/*
Question heading within trigger button
Clear visual hierarchy with h3 element
Proper margins to ensure spacing
*/

.faq-question {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
  color: #1f2937;
  margin: 0;
  flex-grow: 1;
  transition: color var(--transition-base);
}

/* Question text color change on hover/active */
.faq-trigger:hover .faq-question {
  color: #7c3aed;
}

.faq-trigger[aria-expanded="true"] .faq-question {
  color: #7c3aed;
}

/* ===== FAQ ICON ===== */

/*
Chevron icon indicating expand/collapse state
Positioned on right side of question
Centered vertically with question text
Animation comes in Phase 4
*/

.faq-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  flex-shrink: 0;
  color: #6b7280;
  transition: color var(--transition-base), transform var(--transition-base);
}

/* Icon color changes on hover/active */
.faq-trigger:hover .faq-icon {
  color: #7c3aed;
}

.faq-trigger[aria-expanded="true"] .faq-icon {
  color: #7c3aed;
  transform: rotate(180deg);
}

/* ===== FAQ CONTENT / ANSWER AREA ===== */

/*
Expandable content area containing answer text
Hidden by default with .hidden class
Padding provides comfortable reading area
Typography optimized for answer content
*/

.faq-content {
  padding: var(--spacing-lg);
  padding-top: 0;
  background: #ffffff;
  color: #4b5563;
  font-size: 0.9375rem;
  line-height: 1.6;
  border-top: 1px solid #f3f4f6;
  max-height: 1000px;
  opacity: 1;
  visibility: visible;
  transition: all var(--transition-base);
}

/* Hidden state - initially collapsed */
.faq-content.hidden {
  display: none;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  padding: 0;
  border-top: none;
}

/* Answer paragraph styling within content */
.faq-content p {
  margin: 0;
  color: #6b7280;
}

/* Multiple paragraphs spacing */
.faq-content p + p {
  margin-top: var(--spacing-md);
}

/* Lists within FAQ content */
.faq-content ul,
.faq-content ol {
  margin: var(--spacing-md) 0;
  padding-left: var(--spacing-lg);
  color: #6b7280;
}

.faq-content li {
  margin-bottom: var(--spacing-sm);
  line-height: 1.6;
}

/* Links within FAQ content */
.faq-content a {
  color: #7c3aed;
  text-decoration: underline;
  transition: color var(--transition-base);
}

.faq-content a:hover {
  color: #6d28d9;
}

/* Code blocks within FAQ content */
.faq-content code {
  background: #f3f4f6;
  padding: 0.25rem 0.5rem;
  border-radius: var(--border-radius-sm);
  font-family: "Monaco", "Courier New", monospace;
  font-size: 0.875rem;
  color: #374151;
}

/* ===== RESPONSIVE ACCORDION DESIGN ===== */

/* Mobile screens - adjust padding and spacing */
@media (max-width: 640px) {
  .faq {
    padding: var(--spacing-2xl) 0;
  }

  .faq-trigger {
    padding: var(--spacing-md) var(--spacing-lg);
    gap: var(--spacing-sm);
  }

  .faq-question {
    font-size: 1rem;
    white-space: normal !important; /* Allows text to wrap to the next line */
    overflow-wrap: break-word; /* Breaks long words if necessary */
  }

  .faq-content {
    padding: var(--spacing-md) var(--spacing-lg);
    padding-top: 0;
    font-size: 0.875rem;
  }

  .faq-icon {
    width: 20px;
    height: 20px;
  }

  .faq-list {
    gap: var(--spacing-sm);
  }
}

/* Tablet screens - moderate adjustments */
@media (min-width: 641px) and (max-width: 768px) {
  .faq {
    padding: var(--spacing-3xl) 0;
  }

  .faq-trigger {
    padding: var(--spacing-lg);
    gap: var(--spacing-md);
  }

  .faq-question {
    font-size: 1.0625rem;
  }

  .faq-content {
    padding: var(--spacing-lg);
    padding-top: 0;
  }
}

/* Large screens - optimize spacing */
@media (min-width: 769px) {
  .faq {
    padding: var(--spacing-3xl) 0;
  }

  .faq-trigger {
    padding: var(--spacing-lg);
    gap: var(--spacing-md);
  }

  .faq-question {
    font-size: 1.0625rem;
  }

  .faq-content {
    padding: var(--spacing-lg);
    padding-top: 0;
  }

  .faq-list {
    gap: var(--spacing-md);
  }
}

/* ===== EMPTY STATE / NO ITEMS ===== */

/*
Styling for empty FAQ sections (if applicable)
Provides fallback appearance when no items exist
*/

.faq-empty {
  padding: var(--spacing-2xl);
  text-align: center;
  color: #9ca3af;
  font-size: 0.9375rem;
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */

/*
Ensures accordion is fully accessible to all users
Keyboard navigation, focus indicators, and semantic markup
*/

/* Reduced motion support for users who prefer less animation */
@media (prefers-reduced-motion: reduce) {
  .faq-trigger,
  .faq-content,
  .faq-icon {
    transition: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: more) {
  .faq-trigger {
    border: 1px solid #1f2937;
  }

  .faq-trigger:focus-visible {
    outline-width: 3px;
    outline-offset: -3px;
  }

  .faq-item {
    border-width: 2px;
  }
}

/* Dark mode support (future consideration) */
@media (prefers-color-scheme: dark) {
  .faq {
    background: #1f2937;
  }

  .faq-trigger {
    background: #374151;
    color: #f3f4f6;
  }

  .faq-trigger:hover {
    background: #4b5563;
  }

  .faq-content {
    background: #374151;
    border-top-color: #4b5563;
  }

  .faq-question {
    color: #f3f4f6;
  }

  .faq-item {
    border-color: #4b5563;
  }

  .faq-content p {
    color: #d1d5db;
  }
}

/* ===== PRINT STYLES ===== */

/*
Ensure accordions display appropriately when printed
All items expanded to show full content
*/

@media print {
  .faq-content.hidden {
    display: block;
    max-height: none;
    opacity: 1;
    visibility: visible;
    padding: var(--spacing-lg);
    border-top: 1px solid #e5e7eb;
  }

  .faq-trigger {
    page-break-inside: avoid;
  }

  .faq-content {
    page-break-inside: avoid;
  }
}