/* Blog post page (Components/Pages/Blog/BlogPostPage.razor).
   Article rules are written for :is(.post-content, .blog-editor .rz-html-editor-content): the same rules
   style the live article and the admin blog post editor (BlogPostContent.razor, class "blog-editor"), so the
   editor shows a post exactly as the page will. Nothing here changes the saved HTML, only how it looks.
   On desktop the whole site renders at 0.8 zoom (--site-zoom in output.css), so sizes from 1024px up
   are set larger to read at a comfortable size. Post content is plain HTML from the database: <p>, <h2>,
   <h3>, <ul>/<ol>, <pre><code>, inline <code>, <figure><img><figcaption>, <blockquote>, <a>. */

/* ---------- hero: the standard site hero, with the post title as the page's one H1 ---------- */
.post-hero-title { color: #fff; font-weight: 600; font-size: clamp(30px, 5vw, 52px); line-height: 1.12; letter-spacing: -0.015em; text-align: center; margin: 0 auto 24px; max-width: 18em; }
@media (min-width: 1024px) { .post-hero-title { margin-bottom: 32px; } }

/* ---------- layout: article, and "More articles" beside it on desktop / below it on smaller screens ---------- */
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.5rem; max-width: 46rem; margin: 0 auto; }
@media (min-width: 1024px) {
    .post-layout { grid-template-columns: minmax(0, 46rem) 19rem; max-width: none; justify-content: center; gap: 4.5rem; }
}

/* ---------- article text ---------- */
.post-main, .post-content { min-width: 0; }  /* page only */
:is(.post-content, .blog-editor .rz-html-editor-content), .post-end { font-family: Rubik, ui-sans-serif, system-ui, sans-serif; font-size: 18px; }
@media (min-width: 1024px) { :is(.post-content, .blog-editor .rz-html-editor-content), .post-end { font-size: 21px; } }
:is(.post-content, .blog-editor .rz-html-editor-content) { color: #2a2c31; line-height: 1.75; overflow-wrap: break-word; }
:is(.post-content, .blog-editor .rz-html-editor-content) p { margin: 0 0 1.15em; font-weight: 400; }
:is(.post-content, .blog-editor .rz-html-editor-content) > p:first-child { font-size: 1.12em; color: #474a52; line-height: 1.7; }
/* the accent bar is positioned, not a flex item: in an editable flex heading, Enter at the end of bold or
   underlined text continues the heading instead of starting a paragraph */
:is(.post-content, .blog-editor .rz-html-editor-content) :is(h1, h2) { position: relative; padding-left: .83em; font-size: 1.42em; line-height: 1.3; font-weight: 600; color: #171717; margin: 2em 0 .7em; }
:is(.post-content, .blog-editor .rz-html-editor-content) :is(h1, h2)::before { content: ""; position: absolute; left: 0; top: .14em; width: .28em; height: 1.05em; border-radius: 3px; background: linear-gradient(180deg, #FF6200, #99083C); }
:is(.post-content, .blog-editor .rz-html-editor-content) > :is(h1, h2):first-child { margin-top: 0; }
:is(.post-content, .blog-editor .rz-html-editor-content) h3 { font-size: 1.18em; line-height: 1.35; font-weight: 600; color: #171717; margin: 1.7em 0 .5em; }
:is(.post-content, .blog-editor .rz-html-editor-content) h4, :is(.post-content, .blog-editor .rz-html-editor-content) h5, :is(.post-content, .blog-editor .rz-html-editor-content) h6 { font-size: 1em; font-weight: 600; color: #171717; margin: 1.5em 0 .4em; }
:is(.post-content, .blog-editor .rz-html-editor-content) a { color: #c2410c; text-decoration: underline; text-decoration-color: rgba(194,65,12,.35); text-underline-offset: 3px; }
:is(.post-content, .blog-editor .rz-html-editor-content) a:hover { text-decoration-color: currentColor; }
:is(.post-content, .blog-editor .rz-html-editor-content) strong, :is(.post-content, .blog-editor .rz-html-editor-content) b { font-weight: 600; color: #171717; }
:is(.post-content, .blog-editor .rz-html-editor-content) em, :is(.post-content, .blog-editor .rz-html-editor-content) i { font-style: italic; }
:is(.post-content, .blog-editor .rz-html-editor-content) ul, :is(.post-content, .blog-editor .rz-html-editor-content) ol { margin: 0 0 1.2em; padding-left: 1.3em; }
:is(.post-content, .blog-editor .rz-html-editor-content) ul { list-style: disc; }
:is(.post-content, .blog-editor .rz-html-editor-content) ol { list-style: decimal; }
:is(.post-content, .blog-editor .rz-html-editor-content) li { margin: .35em 0; padding-left: .2em; }
:is(.post-content, .blog-editor .rz-html-editor-content) li::marker { color: #FF6200; }
:is(.post-content, .blog-editor .rz-html-editor-content) blockquote { margin: 1.5em 0; padding: .9em 1.2em; border-left: 4px solid #FF6200; background: #fff6f0; border-radius: 0 12px 12px 0; color: #3b3d44; }
:is(.post-content, .blog-editor .rz-html-editor-content) blockquote p:last-child { margin-bottom: 0; }
:is(.post-content, .blog-editor .rz-html-editor-content) hr { border: 0; height: 1px; background: #ececec; margin: 2.5em 0; }
:is(.post-content, .blog-editor .rz-html-editor-content) table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .9em; }
:is(.post-content, .blog-editor .rz-html-editor-content) th, :is(.post-content, .blog-editor .rz-html-editor-content) td { border: 1px solid #e6e6e6; padding: .5em .75em; text-align: left; vertical-align: top; }
:is(.post-content, .blog-editor .rz-html-editor-content) th { background: #f7f7f7; font-weight: 600; }

/* ---------- older posts: pasted formatting ----------
   Posts pasted from Google Docs/Word or older editors carry fonts, sizes and spacing in the HTML. The
   article's own typography wins, so a heading always looks like a heading and text like text (bold,
   italic and colour stay). The admin editor shows posts the same way (wwwroot/css/radzen/editor-styles.css). */
:is(.post-content, .blog-editor .rz-html-editor-content) p, :is(.post-content, .blog-editor .rz-html-editor-content) li { font-size: 18px; }
@media (min-width: 1024px) { :is(.post-content, .blog-editor .rz-html-editor-content) p, :is(.post-content, .blog-editor .rz-html-editor-content) li { font-size: 21px; } }
:is(.post-content, .blog-editor .rz-html-editor-content) > p:first-child { font-size: 1.12em; }
:is(.post-content, .blog-editor .rz-html-editor-content) :is(span, font, b, strong, i, em, u, a):not(pre *, code *) { font-size: inherit !important; font-family: inherit !important; line-height: inherit !important; }
:is(.post-content, .blog-editor .rz-html-editor-content) :is(p, div, li, blockquote, h1, h2, h3, h4, h5, h6) { font-family: inherit !important; }
:is(.post-content, .blog-editor .rz-html-editor-content) p[style], :is(.post-content, .blog-editor .rz-html-editor-content) div[style] { line-height: 1.75 !important; margin: 0 0 1.15em !important; }
:is(.post-content, .blog-editor .rz-html-editor-content) :is(h1, h2, h3, h4, h5, h6)[style] { line-height: 1.3 !important; }

/* ---------- code ---------- */
:is(.post-content, .blog-editor .rz-html-editor-content) code { font-family: "JetBrains Mono", Consolas, Menlo, monospace; font-style: normal; font-size: .82em; background: #f6f3f1; border: 1px solid #ece6e2; color: #99083C; border-radius: 6px; padding: .08em .38em; overflow-wrap: anywhere; }
:is(.post-content, .blog-editor .rz-html-editor-content) pre { position: relative; margin: 1.4em 0 1.7em; padding: 3em 1.3em 1.25em; background: #15171c; color: #e7e9ee; border-radius: 16px; box-shadow: 0 12px 30px -14px rgba(0,0,0,.45);
                    font-family: "JetBrains Mono", Consolas, Menlo, monospace; font-size: 14.5px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
:is(.post-content, .blog-editor .rz-html-editor-content) pre::before { content: "C#"; position: absolute; top: 1em; left: 1.4em; font: 600 12px/1 Rubik, sans-serif; letter-spacing: .1em; color: #7d8390; }
:is(.post-content, .blog-editor .rz-html-editor-content) pre[data-lang]::before { content: attr(data-lang); }
:is(.post-content, .blog-editor .rz-html-editor-content) pre code { display: block; background: none; border: 0; padding: 0; color: inherit; font-size: inherit; line-height: inherit; white-space: inherit; overflow-wrap: inherit; }
:is(.post-content, .blog-editor .rz-html-editor-content) pre b, :is(.post-content, .blog-editor .rz-html-editor-content) pre strong { color: inherit; }
@media (min-width: 1024px) { :is(.post-content, .blog-editor .rz-html-editor-content) pre { font-size: 17px; } }
.post-copy { position: absolute; top: .7em; right: .8em; font: 500 12px/1 Rubik, sans-serif; color: #aeb3bd; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 7px 11px; cursor: pointer; transition: all .2s; }
.post-copy:hover { color: #fff; border-color: rgba(255,98,0,.6); }
/* syntax colours (classes set by highlight.js) */
:is(.post-content, .blog-editor .rz-html-editor-content) .hljs-comment, :is(.post-content, .blog-editor .rz-html-editor-content) .hljs-quote { color: #7f848e; font-style: italic; }
:is(.post-content, .blog-editor .rz-html-editor-content) .hljs-keyword, :is(.post-content, .blog-editor .rz-html-editor-content) .hljs-selector-tag, :is(.post-content, .blog-editor .rz-html-editor-content) .hljs-doctag { color: #c678dd; }
:is(.post-content, .blog-editor .rz-html-editor-content) .hljs-string, :is(.post-content, .blog-editor .rz-html-editor-content) .hljs-regexp, :is(.post-content, .blog-editor .rz-html-editor-content) .hljs-char { color: #98c379; }
:is(.post-content, .blog-editor .rz-html-editor-content) .hljs-number, :is(.post-content, .blog-editor .rz-html-editor-content) .hljs-literal { color: #d19a66; }
:is(.post-content, .blog-editor .rz-html-editor-content) .hljs-title, :is(.post-content, .blog-editor .rz-html-editor-content) .hljs-section { color: #61afef; }
:is(.post-content, .blog-editor .rz-html-editor-content) .hljs-type, :is(.post-content, .blog-editor .rz-html-editor-content) .hljs-built_in, :is(.post-content, .blog-editor .rz-html-editor-content) .hljs-class { color: #e5c07b; }
:is(.post-content, .blog-editor .rz-html-editor-content) .hljs-meta, :is(.post-content, .blog-editor .rz-html-editor-content) .hljs-attr { color: #56b6c2; }
:is(.post-content, .blog-editor .rz-html-editor-content) .hljs-variable, :is(.post-content, .blog-editor .rz-html-editor-content) .hljs-params { color: #e7e9ee; }

/* ---------- images ---------- */
:is(.post-content, .blog-editor .rz-html-editor-content) img { max-width: 100%; height: auto; }
/* embedded videos (the editor inserts YouTube at a fixed 640px) shrink to the column, keeping 16:9 */
:is(.post-content, .blog-editor .rz-html-editor-content) iframe { display: block; max-width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; }
:is(.post-content, .blog-editor .rz-html-editor-content) figure { margin: 1.8em 0 2em; }
:is(.post-content, .blog-editor .rz-html-editor-content) figure img, :is(.post-content, .blog-editor .rz-html-editor-content) > p > img:only-child { display: block; margin: 0 auto; background: #fff; border: 1px solid #eceae8; border-radius: 16px; padding: 12px; box-shadow: 0 10px 26px -16px rgba(0,0,0,.3); }
:is(.post-content, .blog-editor .rz-html-editor-content) figcaption { text-align: center; font-size: .78em; color: #80838b; margin-top: .8em; line-height: 1.5; }

/* ---------- end of post: link back to all posts ---------- */
.post-end { margin-top: 2.6em; }
.post-back { display: inline-flex; align-items: center; gap: .4em; margin-top: 1.6em; color: #c2410c; font-size: .8em; text-decoration: none; }
.post-back:hover { text-decoration: underline; }

/* ---------- "More articles" ---------- */
.post-aside-card { border: 1px solid #ececec; border-radius: 20px; padding: 22px 20px; background: #fafafa; font-family: Rubik, ui-sans-serif, system-ui, sans-serif; }
@media (min-width: 1024px) {
    /* follows the reader down the page; the list scrolls inside it when it is taller than the window */
    .post-aside-card { position: sticky; top: 32px; max-height: calc(100vh / var(--site-zoom, 1) - 64px); overflow-y: auto; }
}
.post-aside-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #171717; margin: 0 0 14px; }
.post-aside-title::before { content: ""; width: 4px; height: 14px; border-radius: 2px; background: linear-gradient(180deg, #FF6200, #99083C); }
.post-aside ul { list-style: none; margin: 0; padding: 0; }
.post-aside li { padding: 12px 0; border-top: 1px solid #ececec; }
.post-aside li:first-child { border-top: 0; padding-top: 0; }
.post-aside li a { display: block; color: #24262b; font-size: 15px; line-height: 1.45; font-weight: 500; text-decoration: none; transition: color .2s; }
.post-aside li a:hover { color: #c2410c; }
.post-aside-tags { display: block; margin-top: 4px; font-size: 12.5px; color: #8a8d94; }
.post-aside-all { display: inline-block; margin-top: 16px; color: #c2410c; font-size: 14px; text-decoration: none; }
.post-aside-all:hover { text-decoration: underline; }
@media (min-width: 1024px) {
    .post-aside-title { font-size: 15px; }
    .post-aside li a { font-size: 17px; }
    .post-aside-tags { font-size: 14px; }
    .post-aside-all { font-size: 16px; }
}
/* below the article on phones and tablets: the 8 closest posts, then "All posts" */
@media (max-width: 1023px) {
    .post-aside li:nth-child(n+9) { display: none; }
}