
.faqs-inner {
    display: flex;
    padding-right: var(--wp--style--root--padding-right);
    padding-left: var(--wp--style--root--padding-left);
    padding-top: var(--wp--preset--spacing--70);
    padding-bottom: var(--wp--preset--spacing--70);
}

.faqs-inner .faqs-title {
    flex: 1;
    border-top: 1px solid;
    padding-top: 1rem;
}

.faqs-title h2 {
    margin-bottom: 1rem !important;
    max-width: 220px;
}

.faqs-inner .wp-element-button {
    margin-bottom: 3rem;
}

.faqs-list {
    flex: 2;
    padding: 0;
    margin: 0;
    list-style: none;
    /* The same element also carries .schema-faq.wp-block-yoast-faq-block, which
       sets gap: 1rem in style.css. The sections already space themselves with
       their own padding and dividing border. */
    gap: 0 !important;
}

.faq-item {
    border-bottom: 1px solid currentColor;
}

.faq-item:first-child {
    border-top: 1px solid currentColor;
}

.faq-item-content {
    padding: 1.5rem 0;
}

/* The FAQ appearance — the circle toggle, the question and answer type, the
   open state — lives in style.css under "Yoast FAQ Block". These selectors are
   all single-class, so a copy here would only fight it on load order (this
   file is enqueued at render, after style.css, so it would silently win).
   Anything visual belongs there; this file keeps the block's own layout. */

@media (max-width: 900px) {

.faqs-inner {
    flex-direction: column;
    gap: 2rem;
}

.faqs-inner .faqs-title {
    padding-top: 0;
    border-top: none;
}

}

/* --------------------------------------------------------------------------
   Optional link under an answer
   -------------------------------------------------------------------------- */

.schema-faq-link {
    display: inline-block;
    margin-top: 1rem;
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.schema-faq-link:hover {
    text-decoration-thickness: 2px;
}

/* The answer is run through wpautop, so its first and last paragraphs would
   otherwise add their default margins to the open/close spacing. */
.schema-faq-answer > :first-child {
    margin-top: 0;
}

.schema-faq-answer > :last-child {
    margin-bottom: 0;
}
