/* ==========================================================================
   FAQ Manager — Frontend Styles (BEM)
   CSS custom properties are injected inline from plugin settings.
   ========================================================================== */

/* Block
   ========================================================================== */

.faq-manager {
    /* Default CSS variables — overridden by the inline <style> from plugin settings. */
    --faq-item-border: #e0e0e0;
    --faq-color-background: #ffffff;
    --faq-color-font: #333333;
    --faq-color-hover-background: #f5f5f5;
    --faq-color-hover-font: #333333;
    --faq-color-focus-background: #e8e8e8;
    --faq-color-focus-font: #333333;
    --faq-font-size-title: 16px;
    --faq-font-size-content: 14px;
    --faq-border-radius: 4px;
    --faq-question-padding-v: 16px;
    --faq-question-padding-h: 20px;
    --faq-answer-padding-v: 20px;
    --faq-answer-padding-h: 20px;
    --faq-icon-circle-bg: #f0f0f0;
    --faq-icon-circle-border: #e0e0e0;
    --faq-answer-border: #e0e0e0;

    width: 100%;
    box-sizing: border-box;
}

/* Group
   ========================================================================== */

.faq-manager__group {
    margin-bottom: 2em;
}

.faq-manager__group:last-child {
    margin-bottom: 0;
}

.faq-manager__group-heading {
    /* Reset heading styles that themes commonly override. */
    margin: 0 0 0.75em;
    padding: 0;
    font-size: 1.15em;
    font-weight: 600;
    line-height: 1.3;
    color: var(--faq-color-font);
    background: none;
    border: none;
    box-shadow: none;
    text-transform: none;
    letter-spacing: normal;
}

/* List
   ========================================================================== */

.faq-manager__list {
    border-radius: var(--faq-border-radius);
}

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

.faq-manager__item {
    border: 1px solid var(--faq-item-border);
    position: relative;
}

/* Collapse the double border between adjacent items */
.faq-manager__item + .faq-manager__item {
    margin-top: -1px;
}

/* Bring hovered/active item border to the front */
.faq-manager__item:hover,
.faq-manager__item:focus-within {
    z-index: 1;
}

/* Round the outer corners of the first and last items */
.faq-manager__item:first-child {
    border-radius: var(--faq-border-radius) var(--faq-border-radius) 0 0;
    overflow: hidden;
}

.faq-manager__item:last-child {
    border-radius: 0 0 var(--faq-border-radius) var(--faq-border-radius);
    overflow: hidden;
}

.faq-manager__item:only-child {
    border-radius: var(--faq-border-radius);
}

/* Question (button)
   ========================================================================== */

.faq-manager .faq-manager__question {
    /* Full reset so theme button styles (borders, gradients, shadows, etc.) cannot bleed in. */
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    gap: 0.75em;
    width: 100%;
    margin: 0;
    padding: var(--faq-question-padding-v) var(--faq-question-padding-h);
    background: var(--faq-color-background) !important;
    color: var(--faq-color-font) !important;
    font-family: inherit;
    font-size: var(--faq-font-size-title);
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer;
    transition: background-color 0.15s ease;
    box-sizing: border-box;
}

.faq-manager .faq-manager__question:hover {
    background-color: var(--faq-color-hover-background) !important;
    color: var(--faq-color-hover-font) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* :focus covers browsers/themes that use button:focus instead of :focus-visible */
.faq-manager .faq-manager__question:focus,
.faq-manager .faq-manager__question:focus-visible,
.faq-manager .faq-manager__question:focus:hover,
.faq-manager .faq-manager__question:focus-visible:hover {
    background-color: var(--faq-color-focus-background) !important;
    color: var(--faq-color-focus-font) !important;
    outline: none !important;
    box-shadow: none !important;
}

.faq-manager__question--icon-right {
    justify-content: space-between;
}

.faq-manager__question--icon-left {
    justify-content: flex-start;
}

/* Question text
   ========================================================================== */

.faq-manager__question-text {
    flex: 1;
}

/* Icon
   ========================================================================== */

.faq-manager__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: var(--faq-color-font);
    transition: transform 0.2s ease;
}

/* Arrow icons: show down when closed, up when open */

.faq-manager__icon-svg--up {
    display: none;
}

[aria-expanded="true"] .faq-manager__icon-svg--down {
    display: none;
}

[aria-expanded="true"] .faq-manager__icon-svg--up {
    display: block;
}

/* Plus / Minus icons: show plus when closed, minus when open */

.faq-manager__icon-svg--minus {
    display: none;
}

[aria-expanded="true"] .faq-manager__icon-svg--plus {
    display: none;
}

[aria-expanded="true"] .faq-manager__icon-svg--minus {
    display: block;
}

/* Icon circle
   ========================================================================== */

.faq-manager__icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--faq-icon-circle-bg);
    border: 1px solid var(--faq-icon-circle-border);
    flex-shrink: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.faq-manager__question:hover .faq-manager__icon-circle,
.faq-manager__question:focus-visible .faq-manager__icon-circle {
    background-color: var(--faq-color-hover-background);
    border-color: var(--faq-icon-circle-border);
}

/* Answer
   ========================================================================== */

.faq-manager__answer {
    background: var(--faq-color-background);
}

.faq-manager__answer-inner {
    padding: var(--faq-answer-padding-v) var(--faq-answer-padding-h);
    border: 1px solid var(--faq-answer-border);
    border-radius: var(--faq-border-radius);
    color: var(--faq-color-font);
    font-size: var(--faq-font-size-content);
    font-family: inherit;
    line-height: 1.65;
    box-sizing: border-box;
}

.faq-manager__answer-inner > *:first-child {
    margin-top: 0;
}

.faq-manager__answer-inner > *:last-child {
    margin-bottom: 0;
}

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

@media (max-width: 600px) {
    .faq-manager__question {
        padding: calc(var(--faq-question-padding-v) * 0.875) calc(var(--faq-question-padding-h) * 0.8);
    }

    .faq-manager__answer-inner {
        padding: calc(var(--faq-answer-padding-v) * 0.875) calc(var(--faq-answer-padding-h) * 0.8);
    }
}