/**
 * Copyright © MagedIn Technology. All rights reserved.
 * See COPYING.txt for license details.
 *
 * Editorial "prose" typography for the single blog-post body.
 *
 * The article body is stored HTML pulled from the database and rendered through
 * Magento PageBuilder (Hyvä-compatible output), so its real <h2>/<p>/<ul>/<pre>/
 * <blockquote>/<code>/<a> elements are nested several PageBuilder wrapper divs deep
 * and already carry their own utility classes. Because of that nesting these rules use
 * DESCENDANT selectors (`.magedin-blog-prose h2`), not the child combinator the flat
 * mockup used — a `.magedin-blog-prose > h2` rule would never match PageBuilder markup.
 * A single (class + element) selector still out-specifies the content's own single
 * utility classes, so the brand typography wins without !important.
 *
 * Loaded directly via `<css src="css/blog-prose.css"/>` (plain stylesheet, NOT part of
 * the Tailwind build), so it is independent of web/css/styles.css. Brand colors/fonts
 * mirror the design tokens (graphite/orange/mist, Sora/Inter/JetBrains Mono).
 */

/*
 * PageBuilder posts frequently repeat the post title as the first in-body <h1>. The
 * styled article header already renders the page's single, canonical <h1>, so suppress
 * any <h1> inside the body to avoid a duplicate heading (and duplicate-h1 SEO issue).
 * Article bodies should start at <h2>.
 */
.magedin-blog-prose h1 {
    display: none;
}

.magedin-blog-prose p {
    margin: 0 0 1.35rem;
    color: #3A3D45;
    line-height: 1.8;
    font-size: 1.0625rem;
}

.magedin-blog-prose h2 {
    font-family: var(--font-display, "Sora", sans-serif);
    font-weight: 700;
    font-size: 1.6rem;
    color: #18191C;
    margin: 2.6rem 0 1rem;
    letter-spacing: -0.01em;
}

.magedin-blog-prose h3 {
    font-family: var(--font-display, "Sora", sans-serif);
    font-weight: 700;
    font-size: 1.2rem;
    color: #18191C;
    margin: 2rem 0 0.75rem;
}

.magedin-blog-prose h4 {
    font-family: var(--font-display, "Sora", sans-serif);
    font-weight: 700;
    font-size: 1.05rem;
    color: #18191C;
    margin: 1.75rem 0 0.6rem;
}

.magedin-blog-prose ul,
.magedin-blog-prose ol {
    margin: 0 0 1.35rem;
    padding: 0;
    list-style: none;
}

.magedin-blog-prose ul li,
.magedin-blog-prose ol li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: 0.6rem;
    color: #3A3D45;
    line-height: 1.7;
}

.magedin-blog-prose ul li:before,
.magedin-blog-prose ol li:before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: #FE5618;
    font-weight: 700;
}

.magedin-blog-prose a {
    color: #FE5618;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.magedin-blog-prose strong {
    color: #18191C;
    font-weight: 600;
}

.magedin-blog-prose blockquote {
    margin: 2rem 0;
    padding: 0.4rem 0 0.4rem 1.4rem;
    border-left: 3px solid #FE5618;
    font-family: var(--font-display, "Sora", sans-serif);
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 1.5;
    color: #18191C;
}

.magedin-blog-prose code {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 0.85em;
    background: #F6F6F7;
    border: 1px solid rgba(43, 45, 51, 0.08);
    border-radius: 5px;
    padding: 0.1em 0.4em;
    color: #232529;
}

.magedin-blog-prose pre {
    background: #18191C;
    border-radius: 14px;
    padding: 1.25rem 1.4rem;
    overflow-x: auto;
    margin: 0 0 1.5rem;
}

.magedin-blog-prose pre code {
    font-size: 0.82rem;
    line-height: 1.7;
    background: none;
    border: none;
    padding: 0;
    color: #E7E7EA;
    display: block;
}

.magedin-blog-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    margin: 0 0 1.5rem;
}

/**
 * Auto-generated table of contents (post/content.phtml).
 *
 * Populated client-side from the article body's h2/h3. The scroll-margin-top on those
 * headings clears the sticky site header when a TOC link scrolls one into view.
 */
#blog-article-body :is(h2, h3) {
    scroll-margin-top: 7rem;
}

.blog-toc-list a {
    display: block;
    padding: 3px 0 3px 14px;
    border-left: 2px solid transparent;
    color: rgba(43, 45, 51, 0.55);
    line-height: 1.45;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.blog-toc-list a:hover {
    color: #FE5618;
}

.blog-toc-list a.is-active {
    color: #18191C;
    font-weight: 600;
    border-left-color: #FE5618;
}

.blog-toc-list a.blog-toc-link--sub {
    padding-left: 28px;
    font-size: 0.8125rem;
}

/* A leading number in a heading (e.g. <span class="num">01</span>) reproduced in the TOC. */
.blog-toc-list a .blog-toc-num {
    margin-right: 0.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: #FE5618;
}