/* =============================================================================
   faq-wpisy.css
   Styl bloku Yoast FAQ (.schema-faq) dla pojedynczych WPISÓW (is_single).
   Odtwarza wygląd z szablonu lid_kalkulator, ale scope pod .entry-content —
   żeby nie ruszać reszty layoutu wpisu (GeneratePress).

   Powiązane:
     - functions.php  → enqueue tylko na is_single() + globalny JS akordeonu
                         (toggle klasy .faq-closed po kliknięciu w pytanie).
   Bez zmian w JS — skrypt z functions.php (wp_footer) działa już globalnie.
   ============================================================================= */

/* --- Zmienne (kopia z .lk-page, żeby plik był samowystarczalny) --- */
.single .entry-content .schema-faq {
    --lk-color-primary: #922221;        /* czerwień z motywu */
    --lk-color-primary-dark: #6f1a19;   /* ciemniejszy odcień na hover */
    --lk-color-text: #1a1a1a;
    --lk-color-muted: #555;
    --lk-color-bg-card: #fff;
    --lk-color-border-light: #eef0f2;
    --lk-radius-sm: 10px;
    --lk-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
    --lk-shadow-hover: 0 4px 16px rgba(0,0,0,0.08);

    /* W szablonie sekcja jest pełnoekranowa (max-width:1240 + padding:0 30).
       We wpisie treść siedzi już w kolumnie GeneratePress, więc bierzemy
       naturalną szerokość kolumny — bez sztucznego cappingu i bocznych
       paddingów, które wcinałyby FAQ względem reszty tekstu wpisu. */
    margin: 40px 0 60px 0;
}

/* Auto-nagłówek "Najczęściej zadawane pytania" przez :has().
   Pojawia się TYLKO jeśli wewnątrz .schema-faq jest jakaś sekcja FAQ. */
.single .entry-content .schema-faq:has(.schema-faq-section)::before {
    content: "Najczęściej zadawane pytania";
    display: block;
    font-size: 30px;
    line-height: 1.25;
    color: var(--lk-color-text);
    margin: 0 0 36px 0;
    font-weight: 700;
    letter-spacing: -0.3px;
    text-wrap: balance;
}

/* Pojedyncza sekcja FAQ — biała karta */
.single .entry-content .schema-faq-section {
    background: var(--lk-color-bg-card);
    border: 1px solid var(--lk-color-border-light);
    border-radius: var(--lk-radius-sm);
    box-shadow: var(--lk-shadow);
    margin-bottom: 12px;
    overflow: hidden;
    transition: box-shadow .2s ease;
}
.single .entry-content .schema-faq-section:hover {
    box-shadow: var(--lk-shadow-hover);
}

/* Pytanie — klikalne, hover na czerwono */
.single .entry-content .schema-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    font-size: 16px;
    line-height: 1.4;
    color: var(--lk-color-text);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    margin: 0;
    transition: color .2s ease;
}
.single .entry-content .schema-faq-question:hover {
    color: var(--lk-color-primary);
}

/* Czerwone kółko po prawej z chevronem.
   Domyślnie (rozwinięte) — chevron "^" (transform rotate 180deg).
   Stan .faq-closed       — chevron "v" (rotate 0). */
.single .entry-content .schema-faq-question::after {
    content: "";
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--lk-color-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    transition: background-color .2s ease, transform .25s ease;
    transform: rotate(180deg);
}
.single .entry-content .schema-faq-question:hover::after {
    background-color: var(--lk-color-primary-dark);
}
.single .entry-content .schema-faq-section.faq-closed .schema-faq-question::after {
    transform: rotate(0deg);
}

/* Odpowiedź — smooth max-height na zwijaniu */
.single .entry-content .schema-faq-answer {
    padding: 0 22px 18px 22px;
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--lk-color-muted);
    font-weight: 400;
    max-height: 1000px;
    transition: max-height .35s ease, padding .25s ease, opacity .2s ease;
    opacity: 1;
    text-wrap: pretty;
}
.single .entry-content .schema-faq-answer p { margin: 0 0 10px; }
.single .entry-content .schema-faq-answer p:last-child { margin-bottom: 0; }

/* Stan zamknięty — chowamy odpowiedź */
.single .entry-content .schema-faq-section.faq-closed .schema-faq-answer {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    overflow: hidden;
}

/* Responsive FAQ */
@media (max-width: 768px) {
    .single .entry-content .schema-faq {
        margin: 30px 0 40px 0;
    }
    .single .entry-content .schema-faq:has(.schema-faq-section)::before {
        font-size: 22px;
        margin-bottom: 24px;
    }
    .single .entry-content .schema-faq-question {
        padding: 14px 18px;
        font-size: 15px;
    }
    .single .entry-content .schema-faq-answer {
        padding: 0 18px 14px 18px;
        font-size: 14px;
    }
    .single .entry-content .schema-faq-section.faq-closed .schema-faq-answer {
        padding: 0 18px;
    }
}