/**
 * Public presentation for ProRank's server-rendered schema blocks.
 *
 * Keep every rule scoped to a schema-block root so theme styles remain in
 * control outside the block. The same asset is registered through each
 * block's `style` handle and is therefore loaded only when needed.
 */

:where(
    .prorank-faq-block,
    .prorank-howto-block,
    .prorank-recipe-block,
    .prorank-jobposting-block,
    .prorank-dataset-block
) {
    --prorank-schema-accent: var(--wp--preset--color--primary, #c2410c);
    --prorank-schema-border: #dcdcde;
    --prorank-schema-muted: #50575e;
    background: var(--wp--preset--color--base, Canvas);
    border: 1px solid var(--prorank-schema-border);
    border-radius: 8px;
    box-sizing: border-box;
    color: var(--wp--preset--color--contrast, CanvasText);
    margin-block: 1.5em;
    padding: clamp(1rem, 2.5vw, 1.5rem);
}

:where(
    .prorank-faq-block,
    .prorank-howto-block,
    .prorank-recipe-block,
    .prorank-jobposting-block,
    .prorank-dataset-block
) *,
:where(
    .prorank-faq-block,
    .prorank-howto-block,
    .prorank-recipe-block,
    .prorank-jobposting-block,
    .prorank-dataset-block
) *::before,
:where(
    .prorank-faq-block,
    .prorank-howto-block,
    .prorank-recipe-block,
    .prorank-jobposting-block,
    .prorank-dataset-block
) *::after {
    box-sizing: border-box;
}

:where(
    .prorank-faq-title,
    .prorank-howto-title,
    .prorank-recipe-title,
    .prorank-jobposting-title,
    .prorank-dataset-title
) {
    color: inherit;
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    line-height: 1.3;
    margin: 0 0 0.75rem;
}

:where(
    .prorank-faq-answer,
    .prorank-howto-description,
    .prorank-howto-step-text,
    .prorank-recipe-description,
    .prorank-jobposting-description,
    .prorank-dataset-description
) > :first-child {
    margin-top: 0;
}

:where(
    .prorank-faq-answer,
    .prorank-howto-description,
    .prorank-howto-step-text,
    .prorank-recipe-description,
    .prorank-jobposting-description,
    .prorank-dataset-description
) > :last-child {
    margin-bottom: 0;
}

.prorank-faq-item {
    border-top: 1px solid var(--prorank-schema-border);
    padding-block: 1rem;
}

.prorank-faq-item:last-child {
    padding-bottom: 0;
}

.prorank-faq-question {
    color: inherit;
    font-size: 1.05em;
    line-height: 1.4;
    margin: 0 0 0.5rem;
}

.prorank-howto-steps,
.prorank-recipe-instructions {
    list-style-position: outside;
    margin: 1rem 0 0;
    padding-inline-start: 1.5rem;
}

.prorank-howto-step,
.prorank-recipe-instructions > li {
    margin-block: 0.75rem;
    padding-inline-start: 0.35rem;
}

.prorank-howto-step::marker,
.prorank-recipe-instructions > li::marker {
    color: var(--prorank-schema-accent);
    font-weight: 700;
}

.prorank-howto-step-title {
    display: block;
    margin-bottom: 0.25rem;
}

.prorank-recipe-meta,
.prorank-jobposting-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    list-style: none;
    margin: 1rem 0;
    padding: 0;
}

.prorank-recipe-meta > li,
.prorank-jobposting-meta > li {
    color: var(--prorank-schema-muted);
    margin: 0;
}

.prorank-recipe-ingredients {
    margin-block: 1rem;
    padding-inline-start: 1.25rem;
}

.prorank-recipe-ingredients > li {
    margin-block: 0.4rem;
}

.prorank-dataset-url {
    margin-bottom: 0;
    overflow-wrap: anywhere;
}

.prorank-dataset-url a {
    color: var(--prorank-schema-accent);
}

@media (forced-colors: active) {
    :where(
        .prorank-faq-block,
        .prorank-howto-block,
        .prorank-recipe-block,
        .prorank-jobposting-block,
        .prorank-dataset-block
    ) {
        border-color: CanvasText;
    }
}