/**
 * Morlok Group FAQ - Frontend Styles
 *
 * Neutrale, minimale Styles für die FAQ-Darstellung.
 * Kann über Theme-CSS angepasst werden.
 */

/* Container (<section>) */
.morlok-faq-wrapper {
    max-width: 100%;
    margin: 0 auto;
}

/*
 * Block-Titel (<h2>) – wirkt wie Fettdruck, kein Heading-Layout.
 * !important notwendig: Elementor setzt H2-Styles (Größe, Abstände, Farbe)
 * mit hoher Spezifität und überschreibt sonst unsere Werte.
 */
.morlok-faq-heading {
    font-size: 1em !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    color: inherit !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* FAQ-Item */
.morlok-faq-item {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-bottom: 10px;
    background: #fff;
    box-sizing: border-box;
}

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

/*
 * Frage-Überschrift (<h3>) – wirkt wie normaler Fließtext.
 * !important notwendig: Elementor und Gutenberg-Themes setzen H3-Styles
 * (Größe, Gewicht, Abstände) mit hoher Spezifität.
 */
.morlok-faq-question-heading {
    font-size: 1em !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    display: block !important;  /* Sicherstellen dass kein Theme inline setzt */
}

/* Frage-Button (<button>) – Browser-Defaults zurücksetzen, dann stylen */
/*
 * !important notwendig: Themes (Elementor, Astra, u.a.) setzen auf <button>
 * oft width:auto / display:inline-block mit hoher Spezifität und überschreiben
 * sonst unsere Layout-Properties. box-sizing verhindert Padding-Overflow.
 */
.morlok-faq-question {
    /* Reset */
    appearance: none !important;
    -webkit-appearance: none !important;
    border: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    text-align: left !important;
    font: inherit !important;
    /* Eigene Styles */
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important; /* Pfeil bleibt oben wenn Text umbricht */
    padding: 15px 20px !important;
    cursor: pointer;
    user-select: none;
    background: #f9f9f9 !important;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.morlok-faq-question:hover {
    background: #f0f0f0;
}

.morlok-faq-question:focus-visible {
    outline: 2px solid #0073aa;
    outline-offset: -2px;
}

.morlok-faq-question-text {
    font-weight: 600;
    font-size: 1em;
    line-height: 1.4;
    color: #333;
    flex: 1;
    min-width: 0;                   /* Flex-Kind darf unter Content-Breite schrumpfen */
    padding-right: 15px;
    white-space: normal !important; /* Theme-Override (nowrap) verhindern */
    word-break: break-word;         /* Fallback bei sehr langen Wörtern ohne Leerzeichen */
}

/*
 * Toggle-Indikator – Chevron-Pfeil (▾/▴)
 *
 * Deutlich sichtbarer als der frühere + / - Ansatz:
 * größerer Bereich (24×24px), dunkle Farbe (#333), 2.5px Linienstärke.
 * Im geschlossenen Zustand zeigt der Pfeil nach unten (rotate 45°),
 * im geöffneten Zustand nach oben (rotate -135°) mit sanfter Transition.
 */
.morlok-faq-toggle {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px; /* optische Ausrichtung an erster Textzeile */
}

.morlok-faq-toggle::before {
    content: '';
    display: block;
    width: 9px;
    height: 9px;
    border-right: 2.5px solid #333;
    border-bottom: 2.5px solid #333;
    transform: rotate(45deg);      /* zeigt nach unten */
    transition: transform 0.25s ease, margin-top 0.25s ease;
    margin-top: -5px;              /* optische Zentrierung */
}

/* Geöffneter Zustand */
.morlok-faq-item.is-open .morlok-faq-question {
    background: #f0f0f0;
    border-radius: 4px 4px 0 0;
}

.morlok-faq-item.is-open .morlok-faq-toggle::before {
    transform: rotate(-135deg);    /* zeigt nach oben */
    margin-top: 5px;               /* optische Zentrierung im geöffneten Zustand */
}

/* Antwort – vollständig im DOM, nur visuell ausgeblendet */
.morlok-faq-answer {
    display: none;
    border-top: 1px solid #e0e0e0;
}

.morlok-faq-item.is-open .morlok-faq-answer {
    display: block;
}

.morlok-faq-answer-content {
    padding: 20px;
    font-size: 1em;
    line-height: 1.6;
    color: #444;
}

.morlok-faq-answer-content p:first-child {
    margin-top: 0;
}

.morlok-faq-answer-content p:last-child {
    margin-bottom: 0;
}

/* ── Lange Antwort ──────────────────────────────────────── */

.morlok-faq-long-answer {
    border-top: 1px dashed #d0d0d0;
    margin: 0 20px;
    padding: 15px 0 20px;
}

.morlok-faq-long-answer-label {
    font-size: 0.78em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #888;
    margin: 0 0 10px;
}

.morlok-faq-long-answer-content {
    font-size: 1em;
    line-height: 1.6;
    color: #555;
}

.morlok-faq-long-answer-content p:first-child {
    margin-top: 0;
}

.morlok-faq-long-answer-content p:last-child {
    margin-bottom: 0;
}

/* Fehlermeldung */
.morlok-faq-error {
    padding: 15px 20px;
    background: #fef0f0;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    color: #721c24;
    font-size: 0.95em;
}

/* Hinweis */
.morlok-faq-notice {
    padding: 15px 20px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    color: #856404;
    font-size: 0.95em;
}

/* Responsive – Tablet */
@media (max-width: 900px) {
    .morlok-faq-question {
        padding: 13px 16px;
    }

    .morlok-faq-question-text {
        font-size: 0.97em;
    }
}

/* Responsive – Mobil */
@media (max-width: 600px) {
    .morlok-faq-question {
        padding: 12px 14px;
    }

    .morlok-faq-question-text {
        font-size: 0.93em;
        line-height: 1.45;
        padding-right: 12px;
    }

    .morlok-faq-toggle {
        width: 20px;
        height: 20px;
    }

    .morlok-faq-answer-content {
        padding: 15px;
    }

    .morlok-faq-long-answer {
        margin: 0 15px;
    }
}