/*
 * Tixomat – FAQ Accordion
 * Alle Farben/Größen über CSS-Variablen steuerbar.
 */

.tix-faq {
    max-width: var(--tix-faq-max-width, 720px);
    width: 100%;
    font-family: var(--tix-font-body, inherit);
    color: var(--tix-text, inherit);
}

/* ── Titel ── */
.tix-faq-title {
    font-size: var(--tix-faq-title-size, var(--tix-h2, 20px));
    font-weight: 700;
    margin: 0 0 16px 0;
}

/* ── Liste ── */
.tix-faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: var(--tix-faq-border-width, 1px) solid var(--tix-faq-border, #333);
    border-radius: var(--tix-faq-radius, 8px);
    overflow: hidden;
    background: var(--tix-faq-list-bg, transparent);
}

/* ── Item ── */
.tix-faq-item {
    border-bottom: var(--tix-faq-border-width, 1px) solid var(--tix-faq-divider, var(--tix-faq-border, #333));
}
.tix-faq-item:last-child {
    border-bottom: none;
}

/* ── Question Button ── */
.tix-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--tix-faq-padding, 14px 18px);
    margin: 0;
    border: none;
    background: var(--tix-faq-bg, transparent);
    color: var(--tix-text, inherit);
    font: inherit;
    font-size: var(--tix-faq-question-size, var(--tix-h4, 16px));
    font-weight: var(--tix-faq-question-weight, 600);
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
    gap: 12px;
    line-height: 1.4;
}
.tix-faq-question:hover,
.tix-faq-question:focus-visible {
    background: var(--tix-faq-hover, rgba(0,0,0,0.03));
    color: var(--tix-faq-hover-text, var(--tix-text, inherit));
    outline: none;
}

/* ── Icon ── */
.tix-faq-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tix-faq-icon-size, 24px);
    height: var(--tix-faq-icon-size, 24px);
    transition: transform 0.25s ease;
    color: var(--tix-faq-icon-color, currentColor);
    opacity: var(--tix-faq-icon-opacity, 0.5);
}
.tix-faq-icon svg {
    display: block;
}
.tix-faq-question[aria-expanded="true"] .tix-faq-icon {
    transform: rotate(180deg);
}

/* ── Answer ── */
.tix-faq-answer {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease;
    max-height: 0;
    opacity: 0;
}
.tix-faq-answer[hidden] {
    display: block !important;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
}
.tix-faq-answer.tix-faq-open {
    opacity: 1;
    visibility: visible;
}

.tix-faq-a-inner {
    padding: 0 var(--tix-faq-padding-h, 18px) 16px var(--tix-faq-padding-h, 18px);
    font-size: var(--tix-faq-answer-size, var(--tix-body, 15px));
    line-height: var(--tix-faq-answer-line-height, 1.65);
    color: var(--tix-text, inherit);
    opacity: var(--tix-faq-answer-opacity, 0.75);
}
.tix-faq-a-inner p:first-child { margin-top: 0; }
.tix-faq-a-inner p:last-child  { margin-bottom: 0; }

/* Links in FAQ-Antworten */
.tix-faq-a-inner a,
.tix-faq-a-inner a:link,
.tix-faq-a-inner a:visited {
    color: var(--tix-faq-link-color, inherit) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.tix-faq-a-inner a:hover { opacity: 0.7; }

/* ── Active accent line ── */
.tix-faq-item.tix-faq-active {
    box-shadow: inset var(--tix-faq-accent-width, 3px) 0 0 var(--tix-faq-accent, #c8ff00);
}
.tix-faq-item.tix-faq-active .tix-faq-question {
    background: var(--tix-faq-active-bg, transparent);
}

/* ── Wide variant: [tix_faq wide="1"] ── */
.tix-faq.tix-faq-wide {
    max-width: none !important;
    width: 100% !important;
}
.tix-faq-wide .tix-faq-list {
    border-radius: 0;
}