/* ============================================
   FAQ Accordion Themed Component
   Extracted from layouts/partials/faq-accordion.html
   ============================================ */

/* Theme Variables */
.faq-themed {
    --faq-border-color: var(--warm-beige);
    --faq-border-active: var(--golden-yellow);
    --faq-bg: white;
    --faq-header-bg: var(--off-white);
    --faq-hover-bg: var(--warm-beige);
    --faq-text-color: var(--dark-gray);
    --faq-accent: var(--brand-red);
    --faq-shadow: var(--shadow-light);
    --faq-radius: var(--border-radius);
}

/* Subtle theme - softer borders and lighter accents */
.faq-themed[data-theme="subtle"] {
    --faq-border-color: var(--soft-gray, #e0e0e0);
    --faq-border-active: var(--medium-gray);
    --faq-accent: var(--earthy-olive);
    --faq-hover-bg: var(--off-white);
}

/* Minimal theme - almost invisible borders */
.faq-themed[data-theme="minimal"] {
    --faq-border-color: transparent;
    --faq-border-active: var(--warm-beige);
    --faq-header-bg: transparent;
    --faq-hover-bg: var(--off-white);
    --faq-shadow: none;
}

/* Core Accordion Styles */
.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.faq-accordion .faq-category {
    margin-bottom: var(--spacing-md);
}

.faq-accordion .category-title {
    font-size: 1.1rem;
    color: var(--faq-text-color);
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--faq-hover-bg);
    border-radius: var(--faq-radius);
    cursor: pointer;
}

.faq-accordion .category-title::before {
    content: '▸ ';
    color: var(--faq-accent);
}

.faq-accordion .category-title.active::before {
    content: '▾ ';
}

.faq-accordion .category-content {
    display: none;
    padding-left: var(--spacing-sm);
}

.faq-accordion .category-content.active {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.faq-accordion details {
    border: 1px solid var(--faq-border-color);
    border-radius: var(--faq-radius);
    overflow: hidden;
    background: var(--faq-bg);
    transition: all var(--transition-medium);
}

.faq-accordion details[open] {
    border-color: var(--faq-border-active);
    box-shadow: var(--faq-shadow);
}

.faq-accordion summary {
    padding: var(--spacing-md);
    cursor: pointer;
    font-weight: 500;
    color: var(--faq-text-color);
    background: var(--faq-header-bg);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background var(--transition-fast);
}

.faq-accordion summary::-webkit-details-marker {
    display: none;
}

.faq-accordion summary::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--faq-accent);
    transition: transform var(--transition-medium);
}

.faq-accordion details[open] summary::after {
    transform: rotate(45deg);
}

.faq-accordion summary:hover {
    background: var(--faq-hover-bg);
}

.faq-accordion .faq-answer {
    padding: var(--spacing-md);
    padding-top: 0;
    color: var(--faq-text-color);
    line-height: 1.6;
}

.faq-accordion .faq-answer p,
.faq-accordion .faq-answer li {
    font-size: 0.95rem;
    line-height: 1.6;
}

.faq-accordion .faq-answer ul,
.faq-accordion .faq-answer ol {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-md);
}

.faq-accordion .faq-answer li {
    margin-bottom: var(--spacing-xs);
}