/* ===================================
   FAQ SECTION BLOCK STYLES
   =================================== */

/* Main block container - ISOLATED to prevent conflicts */
.wp-block-acf-atax-faq-section .faq-section-section {
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 60px; /* Vertical spacing between sections */
    box-sizing: border-box;
    position: relative;
    color: var(--primary-color, #354477); /* Dark blue text */
}

/* Separate container class to ensure it applies (WordPress specificity fix) */
.faq-section-section {
    background: white; /* White background as per design */
    padding: 48px 20px 48px 20px; /* Same padding as testimonials block - main container controls all side spacing */
    position: relative;
    width: 100%;
    max-width: 100%;
}

/* Main container - 768px max-width as per design */
.faq-section-container {
    max-width: 768px; /* Focused container width as per design */
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px; /* Inherits spacing from parent */
    position: relative;
    z-index: 2;
    padding: 0; /* No side padding - main container controls it */
}

/* FAQ Header */
.faq-section-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 24px; /* Space between title and subtitle */
    padding: 0; /* No side padding - main container controls it */
}

/* Main title */
.faq-section-title {
    font-size: 48px; /* Large title as per design */
    font-weight: 700; /* Bold */
    line-height: 1.2;
    color: var(--accent-color, #10A1DC); /* Blue color as per design */
    margin: 0; /* No margin - gap handles spacing */
    font-family: var(--font-montserrat, 'Montserrat'), sans-serif;
    word-wrap: break-word;
    hyphens: auto;
    padding: 0; /* No side padding - main container controls it */
}

/* Subtitle */
.faq-section-subtitle {
    font-size: 18px; /* Body text size */
    font-weight: 400; /* Regular weight */
    line-height: 1.6;
    color: #666666; /* Dark gray text as per design */
    margin: 0; /* No margin - gap handles spacing */
    font-family: var(--font-montserrat, 'Montserrat'), sans-serif;
    word-wrap: break-word;
    hyphens: auto;
    padding: 0; /* No side padding - main container controls it */
}

/* FAQ Items Container */
.faq-section-items {
    display: flex;
    flex-direction: column;
    gap: 0; /* No gap - separators handle spacing */
    background: #fafafa; /* Subtle background for FAQ items */
    padding: 0; /* No side padding - main container controls it */
}

/* Individual FAQ Item */
.faq-item {
    border-bottom: 1px solid #e5e5e5; /* Light gray separator as per design */
    background: white;
    transition: background-color 0.3s ease;
}

.faq-item:last-child {
    border-bottom: none; /* Remove border from last item */
}

/* FAQ Question Row */
.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 20px; /* Add horizontal padding for better spacing */
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.faq-question:hover {
    background-color: #f8f9fa; /* Subtle hover effect */
}

/* Question Text */
.faq-question-text {
    font-size: 18px; /* Question text size */
    font-weight: 600; /* Semi-bold */
    line-height: 1.4;
    color: var(--primary-color, #354477); /* Dark blue text */
    margin: 0; /* No margin */
    font-family: var(--font-montserrat, 'Montserrat'), sans-serif;
    word-wrap: break-word;
    flex: 1; /* Take remaining space */
    padding-right: 24px; /* Space between text and chevron */
}

/* Chevron Container */
.faq-chevron {
    flex-shrink: 0; /* Don't shrink chevron */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

/* Chevron Icon */
.faq-chevron-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
    transform: rotate(0deg); /* Start pointing down */
}

/* FAQ Answer (Hidden by default) */
.faq-answer {
    display: none; /* Hidden by default */
    padding: 0 20px 24px 20px; /* Match question padding and add bottom padding */
    border-top: 1px solid #f0f0f0; /* Subtle top border */
    background: #f8f9fa; /* Slightly different background for answers */
}

/* Answer Content */
.faq-answer-content {
    font-size: 16px; /* Answer text size */
    font-weight: 400; /* Regular weight */
    line-height: 1.6;
    color: #666666; /* Medium gray text */
    font-family: var(--font-montserrat, 'Montserrat'), sans-serif;
    word-wrap: break-word;
    hyphens: auto;
}

/* Expanded FAQ Item */
.faq-item-expanded .faq-chevron-icon {
    transform: rotate(180deg); /* Rotate chevron when expanded */
}

/* View All FAQs Link */
.faq-section-view-all {
    text-align: center;
    padding: 0px;
    margin-top: 0px; /* Add some space above */
}

/* Enhanced View All Link */
.faq-view-all-link {
    color: var(--accent-color, #10A1DC); /* Blue color as per design */
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 12px 24px; /* Add padding for better clickability */
    border: 2px solid transparent; /* Invisible border for hover effect */
    border-radius: 6px;
    display: inline-block;
}

.faq-view-all-link:hover {
    color: var(--primary-color, #354477); /* Dark blue on hover */
    border-color: var(--accent-color, #10A1DC); /* Show border on hover */
    background: rgba(16, 161, 220, 0.05); /* Subtle background on hover */
}

.faq-view-all-link {
    color: var(--accent-color, #10A1DC); /* Blue color as per design */
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.faq-view-all-link:hover {
    color: var(--primary-color, #354477); /* Dark blue on hover */
}

/* Contact Section */
.faq-section-contact {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 16px; /* Space between elements */
    margin-top: 32px;
}

/* ATAX Button Styling - Only fix width issues, preserve reusable button styles */
.faq-section-contact .atax-button {
    display: inline-block; /* Prevent full width */
    width: auto; /* Auto width based on content */
    max-width: none; /* Remove any max-width constraints */
    margin: 0 auto; /* Center the button */
}

/* Contact Title */
.faq-section-contact-title {
    font-size: 36px; /* Large title as per design */
    font-weight: 700; /* Bold */
    line-height: 1.2;
    color: var(--accent-color, #10A1DC); /* Blue color as per design */
    margin: 0; /* No margin - gap handles spacing */
    font-family: var(--font-montserrat, 'Montserrat'), sans-serif;
    word-wrap: break-word;
    padding: 0; /* No side padding - main container controls it */
}

/* Contact Subtitle */
.faq-section-contact-subtitle {
    font-size: 18px; /* Body text size */
    font-weight: 400; /* Regular weight */
    line-height: 1.6;
    color: #666666; /* Dark gray text as per design */
    margin: 0; /* No margin - gap handles spacing */
    font-family: var(--font-montserrat, 'Montserrat'), sans-serif;
    word-wrap: break-word;
    padding: 0; /* No side padding - main container controls it */
}

/* No FAQs Fallback */
.faq-section-no-faqs {
    text-align: center;
    padding: 40px;
    color: #666666;
    font-style: italic;
}

/* ===================================
   RESPONSIVE DESIGN - GLOBAL FRAMEWORK
   =================================== */

/* Laptop (1151px-1600px) - Same layout, reduced gaps only */
@media (max-width: 1600px) {
    .wp-block-acf-atax-faq-section .faq-section-section {
        padding: 40px 20px 40px 20px; /* Same padding as testimonials block */
        gap: 50px; /* Reduced gap */
    }
    .faq-section-container {
        gap: 28px; /* Reduced gap */
    }
    /* Contact section laptop optimization */
    .faq-section-contact {
        gap: 16px; /* Maintain desktop spacing */
        margin-top: 32px; /* Maintain desktop negative margin */
    }
    /* NO font size changes - same fonts as desktop */
}

/* Tablet (768px-1150px) - Layout optimization */
@media (max-width: 1150px) {
    .wp-block-acf-atax-faq-section .faq-section-section {
        padding: 40px 20px 40px 20px; /* Same padding as testimonials block */
        gap: 45px;
    }
    .faq-section-container {
        max-width: 100%; /* Full width on tablet for better readability */
        gap: 28px;
        padding: 0; /* No side padding - main container controls it */
    }
    .faq-section-header {
        padding: 0; /* No side padding - main container controls it */
    }
    .faq-section-items {
        padding: 0; /* No side padding - main container controls it */
    }
    /* Contact section tablet optimization */
    .faq-section-contact {
        gap: 15px; /* Slightly tighter spacing on tablet */
        margin-top: 16px; /* Adjusted negative margin for tablet */
    }
    /* NO font size changes - same fonts as desktop */
}

/* Mobile (0px-767px) - Stacked layout, mobile optimization */
@media (max-width: 767px) {
    .wp-block-acf-atax-faq-section .faq-section-section {
        padding: 40px 16px 30px 16px; /* Same mobile padding as testimonials block */
        gap: 40px;
    }
    .faq-section-container {
        gap: 24px; /* Reduced gap for mobile */
        padding: 0; /* No side padding - main container controls it */
    }
    .faq-section-title {
        font-size: 36px; /* 48px → 36px for mobile readability (framework exception) */
    }
    .faq-section-contact-title {
        font-size: 28px; /* 36px → 28px for mobile readability */
    }
    .faq-question {
        padding: 20px 16px; /* Reduced padding for mobile */
    }
    .faq-answer {
        padding: 0 16px 20px 16px; /* Reduced padding for mobile */
    }
    .faq-question-text {
        font-size: 16px; /* Reduced font size for mobile */
    }
    .faq-answer-content {
        font-size: 15px; /* Reduced font size for mobile */
    }
    /* Contact section mobile optimization */
    .faq-section-contact {
        gap: 14px; /* Slightly tighter spacing on mobile */
        margin-top: 16px; /* Reduced negative margin for mobile */
    }
    /* NO other font size changes - same fonts as desktop */
}

/* ===================================
   ALIGNMENT SUPPORT
   =================================== */

/* Wide alignment support */
.wp-block-acf-atax-faq-section .faq-section-container.alignwide {
    max-width: 768px; /* Maintain focused width even on wide alignment */
}

/* Full width alignment support */
.wp-block-acf-atax-faq-section .faq-section-container.alignfull {
    max-width: 100%;
}

/* ===================================
   OVERFLOW PROTECTION & TEXT HANDLING
   =================================== */

/* Prevent text overflow on all screen sizes */
.wp-block-acf-atax-faq-section .faq-section-title,
.wp-block-acf-atax-faq-section .faq-section-subtitle,
.wp-block-acf-atax-faq-section .faq-question-text,
.wp-block-acf-atax-faq-section .faq-answer-content,
.wp-block-acf-atax-faq-section .faq-section-contact-title,
.wp-block-acf-atax-faq-section .faq-section-contact-subtitle {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    max-width: 100%;
    margin: 0px;
}

/* Ensure containers don't cause horizontal scroll */
.wp-block-acf-atax-faq-section .faq-section-container {
    max-width: 100%;
    overflow: hidden;
}

/* ===================================
   ACCESSIBILITY & FOCUS STATES
   =================================== */

/* Focus states for keyboard navigation */
.faq-question:focus {
    outline: 2px solid var(--accent-color, #10A1DC);
    outline-offset: 2px;
}

.faq-view-all-link:focus {
    outline: 2px solid var(--accent-color, #10A1DC);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .faq-item {
        border-bottom: 2px solid var(--primary-color, #354477);
    }
    
    .faq-answer {
        border-top: 2px solid var(--primary-color, #354477);
    }
}