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

   Expandable FAQ items with smooth accordion animation.

   Purpose: Display frequently asked questions in a collapsible accordion
   format for better space efficiency and user experience.

   Required HTML Structure:

   <section class="faq">
     <div class="container">
       <h2 class="section-title">Frequently Asked Questions</h2>
       <p class="section-subtitle">Optional subtitle</p>

       <div class="faq-container">
         <div class="faq-item active">
           <div class="faq-question">
             <span>Your question text here?</span>
             <i class="fas fa-chevron-down faq-icon"></i>
           </div>
           <div class="faq-answer">
             <div class="faq-answer-content">
               Answer text here. <strong>Bold text</strong> is supported.
               <a href="#">Links</a> work too.
             </div>
           </div>
         </div>
         <!-- More FAQ items -->
       </div>
     </div>
   </section>

   State Classes:
   - .active       # Applied to .faq-item when expanded

   Dependencies:
   - Font Awesome (for chevron icon)
   - JavaScript for accordion toggle functionality

   Accessibility:
   - Use semantic button elements for .faq-question
   - Add aria-expanded attribute
   - Include role="region" on .faq-answer
   - Keyboard navigation support

   Features:
   - Smooth max-height animation for expansion
   - Icon rotation on expand/collapse
   - Hover effects
   - Background color change when active
   - Support for links and bold text in answers

   Notes:
   - max-height: 1000px on active (adjust if content is taller)
   - Transition uses ease timing for natural feel
   - Only one item should have .active class at a time
   ============================================================================ */

/* ===== Section Container ===== */

.faq {
  padding: 80px 0;
  background: transparent;
  position: relative;
  overflow: hidden;
}


/* ===== FAQ Container ===== */

.faq-container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: var(--z-index-content);
}


/* ===== FAQ Item ===== */

.faq-item {
  background: var(--card-bg);
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  overflow: hidden;
  transition: all var(--transition-normal);
  border: 1px solid var(--border-color);
}

.faq-item:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}


/* ===== FAQ Question (Clickable Header) ===== */

.faq-question {
  padding: 1.5rem 2rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
  color: var(--text-primary);
  transition: all var(--transition-normal);
}

.faq-question:hover {
  background: rgba(74, 144, 226, 0.05);
}

.faq-item.active .faq-question {
  background: rgba(74, 144, 226, 0.08);
  color: var(--sky-blue);
}


/* ===== FAQ Icon (Chevron) ===== */

.faq-icon {
  transition: transform var(--transition-normal);
  color: var(--sky-blue);
  font-size: 18px;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}


/* ===== FAQ Answer (Collapsible Content) ===== */

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-normal);
}

.faq-item.active .faq-answer {
  max-height: 1000px; /* Adjust if content is taller */
}

.faq-answer-content {
  padding: 1.5rem 2rem 1.5rem;
  color: var(--text-secondary);
  line-height: 1.8;
}

.faq-answer-content strong {
  color: var(--text-primary);
  display: inline-block;
  margin-top: 0.5rem;
}

.faq-answer-content a {
  color: var(--sky-blue);
  text-decoration: none;
}

.faq-answer-content a:hover {
  text-decoration: underline;
}


/* ===== Responsive ===== */

@media (max-width: 768px) {
  .faq {
    padding: 60px 0;
  }

  .faq-question {
    padding: 1.25rem 1.5rem;
    font-size: 0.95rem;
  }

  .faq-answer-content {
    padding: 1.25rem 1.5rem 1.25rem;
    font-size: 0.9rem;
  }

  .faq-icon {
    font-size: 16px;
  }
}