/* Public Frontend Styles - FULLY RESPONSIVE */

#faq-accordion, [id^='faq-accordion'] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
    margin-bottom: 20px;
    font-family: var(--faq-font-family, 'Georgia, serif');
}

#faq-accordion h3, [id^='faq-accordion'] h3 {
    font-family: var(--faq-font-family, inherit);
    font-size: var(--faq-font-size, 16px);
    font-weight: var(--faq-font-weight, normal);
    color: var(--faq-q-color, #333);
    background: var(--faq-q-bg, #f9f9f9);
    
    margin: 0;
    padding: 15px 20px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    transition: background 0.2s, color 0.2s;
    position: relative;
}

/* Handle Icon Tags (Dashicons <span> and FA <i>) */
#faq-accordion h3 .dashicons, 
#faq-accordion h3 i,
[id^='faq-accordion'] h3 .dashicons, 
[id^='faq-accordion'] h3 i {
    font-size: 1.2em;
    width: 1.2em;
    margin-right: 10px;
    color: var(--faq-icon-color, #0073aa);
    vertical-align: middle;
    text-align: center;
}

/* Ensure Dashicon font applies */
#faq-accordion h3 .dashicons, [id^='faq-accordion'] h3 .dashicons {
    font-family: 'dashicons';
}

/* Toggle Sign (+ / -) */
#faq-accordion h3::after, 
[id^='faq-accordion'] h3::after {
    content: "+";
    font-family: Arial, sans-serif;
    font-size: 1.5em;
    font-weight: 300;
    line-height: 1;
    color: var(--faq-q-color, #333);
    margin-left: auto;
    transition: color 0.2s;
}

/* --- ACTIVE STATE STYLES (Highlight) --- */
#faq-accordion h3.ui-accordion-header-active, 
[id^='faq-accordion'] h3.ui-accordion-header-active {
    background-color: var(--faq-icon-color, #0073aa); /* Use Icon Color as Highlight */
    color: #fff;
    border-bottom-color: var(--faq-icon-color, #0073aa);
}

/* Force Icons to be white when active */
#faq-accordion h3.ui-accordion-header-active .dashicons, 
#faq-accordion h3.ui-accordion-header-active i,
[id^='faq-accordion'] h3.ui-accordion-header-active .dashicons, 
[id^='faq-accordion'] h3.ui-accordion-header-active i {
    color: #fff;
}

/* Force Toggle Sign to be white when active */
#faq-accordion h3.ui-accordion-header-active::after, 
[id^='faq-accordion'] h3.ui-accordion-header-active::after {
    content: "-";
    color: #fff;
}

/* Hover Effects */
#faq-accordion h3:hover, [id^='faq-accordion'] h3:hover {
    opacity: 0.9;
}

#faq-accordion .faq-answer, [id^='faq-accordion'] .faq-answer {
    padding: 20px;
    line-height: 1.6;
    border-bottom: 1px solid #eee;
    background: var(--faq-a-bg, #fff);
    color: var(--faq-a-color, #555);
    font-size: calc(var(--faq-font-size, 16px) * 0.95);
}

/* --- RESPONSIVE BREAKPOINTS --- */

@media (max-width: 768px) {
    #faq-accordion h3, [id^='faq-accordion'] h3 {
        font-size: calc(var(--faq-font-size, 16px) * 0.9);
        padding: 12px 15px;
    }
    #faq-accordion .faq-answer, [id^='faq-accordion'] .faq-answer {
        padding: 15px;
    }
}

@media (max-width: 480px) {
    #faq-accordion h3, [id^='faq-accordion'] h3 {
        font-size: calc(var(--faq-font-size, 16px) * 0.8);
        padding: 10px 12px;
    }
    #faq-accordion h3 .dashicons, [id^='faq-accordion'] h3 .dashicons {
        margin-right: 5px;
    }
    #faq-accordion .faq-answer, [id^='faq-accordion'] .faq-answer {
        padding: 10px 12px;
        font-size: calc(var(--faq-font-size, 16px) * 0.8);
    }
}