/* ===== MQE Questions – CSS ===== */

/* --- BAZA --- */
.mqe-questions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 100%;
}

.mqe-header {
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    margin: 0 0 .5rem;
    color: #42495C;
}

.mqe-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    max-width: 100%;
}

/* Kafelek pytania – ZWINIĘTY: biały + cień */
.mqe-item {
    background: #fff;
    border-radius: 16px;
    padding: .5rem .75rem;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    transition: background-color .2s ease, box-shadow .2s ease;
    max-width: 100%;
}

/* Głowa pytania – reset + responsywność */
.mqe-item-head {
    appearance: none;
    background: transparent;
    border: 0;
    width: 100%;
    display: flex;
    align-items: flex-start;          /* pozwala tytułowi rosnąć w dół */
    justify-content: space-between;
    gap: .75rem;                      /* odstęp między tytułem a ikonką */
    cursor: pointer;
    padding: .75rem .5rem;
    border-radius: 12px;
    color: #42495C;
    text-align: left;
    max-width: 100%;
}

/* Nadpisanie potencjalnego :hover z motywu */
.mqe-questions .mqe-item-head:hover,
.mqe-questions .mqe-item-head:focus,
.mqe-questions .mqe-item-head:active {
    background: transparent;
    color: #42495C;
    outline: none;
}

/* Widoczny focus dla dostępności */
.mqe-item-head:focus-visible {
    outline: 2px solid #7C6FF4;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(124,111,244,.25);
}

/* Teksty/ikony */
.mqe-q {
    flex: 1 1 auto;                   /* wypełnij dostępne miejsce */
    min-width: 0;                     /* pozwól się ściskać i zawijać */
    font-weight: 700;
    font-size: clamp(1rem, 4.5vw, 26px); /* płynne skalowanie na mobile */
    line-height: 1.25;
    overflow-wrap: anywhere;          /* łamie długie słowa/URLe */
    word-break: break-word;
    hyphens: auto;
    color: inherit;
}

.mqe-toggle {
    flex: 0 0 auto;                   /* nie rozpycha wiersza */
    font-size: 1.5rem;
    line-height: 1;
    color: inherit;
}

/* Treść odpowiedzi (panel) – animowany akordeon */
.mqe-item-body {
    overflow: hidden;
    height: 0;
    padding: 0 .5rem;
    transition: height .3s ease;
    display: block;                   /* JS zarządza wysokością, nie display */
    max-width: 100%;
}

/* Wnętrze odpowiedzi */
.mqe-a {
    padding-bottom: .75rem;
    color: inherit;
}

.mqe-a p {
    margin: .5rem 0;
}

/* OTWARTE: tło sekcji #DED5FF, tekst jaśniejszy */
.mqe-item.is-open {
    background: #DED5FF;
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
    color: #42495C;
}

/* Opcjonalnie: delikatny hover kafelka gdy zamknięty */
.mqe-item:not(.is-open):hover {
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/* Zapobieganie poziomowemu przewijaniu na wszelki wypadek */
.mqe-questions, .mqe-list, .mqe-item, .mqe-item-head {
    overflow-x: hidden;
}

/* --- Responsywne dopieszczenia --- */
@media (max-width: 480px) {
    .mqe-item { padding: .5rem .6rem; }
    .mqe-item-head { padding: .6rem .4rem; gap: .6rem; }
    .mqe-toggle { font-size: 1.35rem; }
    .mqe-a { font-size: .95rem; }
}

/* --- Preferencje zmniejszonego ruchu --- */
@media (prefers-reduced-motion: reduce) {
    .mqe-item-body {
        transition: none;
    }
    .mqe-item {
        transition: none;
    }
}