/*
 * Page-scoped styles for /create-your-first-webservice
 * Auto-loaded by Pages/Shared/DocsPage.cshtml from /wwwroot/pages/{slug}.css
 *
 * Delete this file to restore the standard docs layout.
 */

/* Give the interactive walkthrough components room, while keeping running text
   at a readable measure centred in the wider column. */
#doc > .prose {
    max-width: 64rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

#doc .content > :where(p, ul, ol, h2, h3, h4, blockquote, pre, .custom-block, .copy, .sh) {
    max-width: 54rem;
    margin-left: auto;
    margin-right: auto;
}

/* The auto-rendered <h1> is hidden by the site's .hide-title convention -
   drop its margin too so the hero sits at the top of the page */
#doc > .prose > section:first-child {
    margin-bottom: 0;
}

/*
 * highlight.css sets a global `pre { min-width: fit-content }`, which lets a wide
 * code sample push past its column instead of scrolling inside it.
 * Scope it back for this page so the code tour stays contained.
 */
#doc pre {
    min-width: 0;
    max-width: 100%;
}

/* --- Code blocks inside the page's Vue components ------------------------ */

/*
 * highlight.css styles every `pre` on the page (margins, padding, radius) and
 * paints `.hljs` its own background, which double-frames code rendered inside a
 * component's own card. Let the card own the frame, and the code own the padding.
 */
#doc pre.codeblock {
    margin: 0;
    padding: 0;
    font-size: .875rem;
    line-height: 1.6;
}
#doc pre.codeblock code.hljs {
    background: transparent;
    padding: 1.25rem;
}

/* Compact variant, for code shown inside the narrow columns of <dto-boundary> */
#doc pre.codeblock.codeblock-sm {
    font-size: .75rem;
    line-height: 1.55;
}
#doc pre.codeblock.codeblock-sm code.hljs {
    padding: .875rem 1rem;
}