/* ── Answer wrapper ─────────────────────────────────────────── */

/*
 * Gutenberg renders paragraphs as <p class="wp-block-paragraph">.
 * WordPress's own block CSS overrides the theme's
 * "details.wp-block-details p { padding: 0 24px 24px 24px }" rule.
 * We apply padding on a wrapper div instead, so it always wins
 * regardless of block class specificity.
 */
details.wp-block-details .sl-faq-answer {
    padding: 0 24px 24px 24px;
}

/* Reset the horizontal padding the theme sets per-<p>,
   since the wrapper now handles it. */
details.wp-block-details .sl-faq-answer p {
    padding-left: 0;
    padding-right: 0;
}

/* ── Load more button ───────────────────────────────────────── */

.sl-faq-load-more-wrap {
    text-align: center;
    margin-top: 12px;
}

.sl-faq-load-more {
    background: linear-gradient(0deg, rgba(64, 20, 20, 0.8) 0%, rgba(158, 11, 11, 0.8) 100%);
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0 40px;
    height: 56px;
    border: none;
    outline: none;
    cursor: pointer;
    transition: filter 0.2s ease;
    clip-path: polygon(
        12px 0,
        calc(100% - 12px) 0,
        100% 12px,
        100% calc(100% - 12px),
        calc(100% - 12px) 100%,
        12px 100%,
        0 calc(100% - 12px),
        0 12px
    );
}

.sl-faq-load-more:hover:not(:disabled) {
    filter: brightness(1.15);
}

.sl-faq-load-more:disabled {
    opacity: 0.5;
    cursor: default;
}