/* ============================================
   FAQ SECTION - Tabbed Filtering
   FIGMA MATCH v2.3 - Answer Alignment Fix
   Dev: Paul .Y 20260207
   
   v2.3: Answer padding-left aligned with question text (after number) + nl2br support
   v2.2: Centered FAQ items (867px) + separators (1000px) within 1200px
   v2.1: Active tab bg → #928572 (bg-Primary)
   v2.0: Roboto → Afacad Flux, text → #2A2A2A
   ============================================ */

.faq-section-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 80px auto;
    padding: 0 20px;
}

/* ============================================
   FAQ TABS CONTAINER
   Figma: inline-flex gap-2.5 (10px), centered
   ============================================ */

.faq-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 56px !important; /* gap-14 between tabs and items */
}

/* ============================================
   FAQ TAB BUTTON - ALL STATES
   Figma: px-5 py-2.5 rounded-[50px] text-sm
   Active:   bg-Primary (#928572) text-White
   Inactive: bg-200 (#EFEDEB) text-600 (#928A80)
   ============================================ */

.faq-tab,
button.faq-tab,
.faq-tabs .faq-tab,
.faq-tabs button.faq-tab {
    /* SIZE */
    width: auto !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 20px !important;
    
    /* PILL SHAPE */
    border-radius: 50px !important;
    border: none !important;
    
    /* INACTIVE STATE — bg-200 + text-600 */
    background: #EFEDEB !important;
    background-color: #EFEDEB !important;
    color: #928A80 !important;
    
    /* Typography — Afacad Flux */
    font-size: 14px !important;
    font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 400 !important;
    line-height: 36px !important;
    text-align: center !important;
    text-transform: capitalize !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    
    /* Behavior */
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    
    /* Layout */
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

/* HOVER - Inactive Tab */
.faq-tab:hover,
button.faq-tab:hover,
.faq-tabs .faq-tab:hover {
    background: #E8E5DF !important;
    background-color: #E8E5DF !important;
    color: #2A2A2A !important;
    transform: translateY(-2px) !important;
}

/* ACTIVE STATE — bg-Primary (#928572) + text-White */
.faq-tab.active,
button.faq-tab.active,
.faq-tabs .faq-tab.active,
.faq-tabs button.faq-tab.active {
    background: #928572 !important;
    background-color: #928572 !important;
    color: #FFFFFF !important;
}

/* ACTIVE HOVER — darken Primary */
.faq-tab.active:hover,
button.faq-tab.active:hover,
.faq-tabs .faq-tab.active:hover {
    background: #7A7062 !important;
    background-color: #7A7062 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
}

/* ============================================
   FAQ ITEMS CONTAINER
   Figma: items-center gap-7 (28px)
   Centers the 867px items + 1000px separators
   ============================================ */

.faq-items-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* ← KEY: centers children */
    gap: 28px; /* gap-7 */
}

/* ============================================
   INDIVIDUAL FAQ ITEM
   Figma: w-[867px] centered within 1200px
   ============================================ */

.faq-item {
    width: 100%;
    max-width: 867px; /* Figma w-[867px] */
    display: flex;
    flex-direction: column;
    gap: 20px; /* gap-5 */
    opacity: 1;
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

.faq-item.hidden {
    display: none;
}

/* Question Header — Figma: flex gap-5 (20px) */
.faq-question-header {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Number — Afacad Flux 18px 400 #2A2A2A */
.faq-number {
    color: #2A2A2A;
    font-size: 18px;
    font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    flex-shrink: 0;
    /* Fix width so answer padding always matches */
    min-width: 58px; /* "( 01 )" approx width */
}

/* Question — Afacad Flux 24px 400 #2A2A2A */
.faq-question {
    color: #2A2A2A;
    font-size: 24px;
    font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    line-height: 1.4;
}

/* ============================================
   ANSWER — ALIGNED WITH QUESTION TEXT
   
   Figma: answer starts at same left edge as number ( 01 )
   No indent — flush left with the number.
   ============================================ */

.faq-answer {
    color: #2A2A2A;
    font-size: 18px;
    font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 300;
    line-height: 1.6;
    padding-left: 0; /* Flush left — same edge as number */
}

/* ============================================
   FAQ SEPARATOR
   Figma: w-[1000px] centered, outline-400
   ============================================ */

.faq-separator {
    width: 100%;
    max-width: 1000px; /* Figma w-[1000px] */
    height: 1px;
    background: #CCC8C0;
    /* No margin needed — parent align-items: center does centering */
}

.faq-separator.hidden {
    display: none;
}

/* ============================================
   NO FAQS FOUND
   ============================================ */

.no-faqs-found {
    text-align: center;
    color: #928A80;
    font-size: 18px;
    font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif;
    padding: 40px 20px;
}

/* ============================================
   RESPONSIVE - TABLET (1024px)
   ============================================ */

@media (max-width: 1024px) {
    .faq-section-wrapper {
        margin: 60px auto;
    }
    
    .faq-tabs {
        margin-bottom: 40px !important;
    }
    
    .faq-tab,
    button.faq-tab {
        padding: 0 18px !important;
        font-size: 14px !important;
        height: 36px !important;
        line-height: 36px !important;
    }
    
    .faq-item {
        max-width: 100%; /* Fill available on tablet */
    }
    
    .faq-question {
        font-size: 20px;
    }
    
    .faq-answer {
        font-size: 16px;
        padding-left: 0;
    }
}

/* ============================================
   RESPONSIVE - MOBILE (768px)
   ============================================ */

@media (max-width: 768px) {
    .faq-section-wrapper {
        margin: 40px auto;
        padding: 0 16px;
    }
    
    .faq-tabs {
        gap: 8px !important;
        margin-bottom: 30px !important;
    }
    
    .faq-tab,
    button.faq-tab {
        font-size: 13px !important;
        padding: 0 16px !important;
        height: 32px !important;
        min-height: 32px !important;
        line-height: 32px !important;
    }
    
    .faq-items-container {
        gap: 24px;
    }
    
    .faq-item {
        max-width: 100%;
    }
    
    .faq-question-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .faq-number {
        font-size: 16px;
        min-width: auto; /* Reset on mobile since stacked */
    }
    
    .faq-question {
        font-size: 18px;
    }
    
    .faq-answer {
        font-size: 15px;
        padding-left: 0; /* No indent on mobile — stacked layout */
    }
    
    .faq-separator {
        max-width: 100%;
    }
}

/* ============================================
   RESPONSIVE - SMALL MOBILE (480px)
   ============================================ */

@media (max-width: 480px) {
    .faq-tab,
    button.faq-tab {
        font-size: 12px !important;
        padding: 0 14px !important;
        height: 30px !important;
        min-height: 30px !important;
        line-height: 30px !important;
    }
    
    .faq-question {
        font-size: 16px;
    }
    
    .faq-answer {
        font-size: 14px;
    }
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.faq-item {
    animation: fadeIn 0.4s ease;
}

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

.faq-tab:focus,
button.faq-tab:focus {
    outline: 2px solid #928572 !important;
    outline-offset: 2px !important;
}

.faq-tab:focus:not(:focus-visible),
button.faq-tab:focus:not(:focus-visible) {
    outline: none !important;
}