/* Blog 前台（blog/templates/blog/88/）。
   88_base.html 的 Tailwind CDN preflight 會清掉清單符號、標題大小、引言樣式；Quill 存的
   <h2> <h3> <ul> <ol> <blockquote> <img> <a> 要在這裡補回來，前台才看得出差別。 */

.blog-nav-offset { padding-top: 4.5rem; } /* 88_base 的 nav 是 fixed（py-4 + h-10） */

.blog-prose {
    font-size: 1.0625rem;
    line-height: 1.95;
    color: #374151;
    max-width: 42rem;
    overflow-wrap: break-word;
}
.blog-prose > :first-child { margin-top: 0; }
.blog-prose > :last-child { margin-bottom: 0; }
.blog-prose p { margin: 0 0 1.5em; }
.blog-prose h2 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
    color: #1e3a8a;
    margin: 2.2em 0 0.8em;
    text-wrap: balance;
}
.blog-prose h3 {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.5;
    color: #1f2937;
    margin: 1.8em 0 0.6em;
}
.blog-prose ul,
.blog-prose ol { padding-left: 1.5em; margin: 0 0 1.5em; }
.blog-prose ul { list-style: disc; }
.blog-prose ol { list-style: decimal; }
.blog-prose ul ul { list-style: circle; }
.blog-prose li { margin: 0.35em 0; }
.blog-prose li::marker { color: #1e40af; }
.blog-prose li > ul,
.blog-prose li > ol { margin: 0.35em 0 0; }
.blog-prose blockquote {
    border-left: 4px solid #D4AF37;
    background: #fffbeb;
    color: #78350f;
    padding: 1em 1.25em;
    margin: 0 0 1.5em;
    border-radius: 0 1rem 1rem 0;
}
.blog-prose blockquote > :last-child { margin-bottom: 0; }
.blog-prose img {
    height: auto;
    border-radius: 1rem;
    margin: 2em auto;
}
.blog-prose a {
    color: #1e40af;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.blog-prose a:hover { color: #3b82f6; }
.blog-prose strong { font-weight: 700; color: #111827; }
.blog-prose em { font-style: italic; }

/* Phase 5c：Quill 的其他格式。字級／對齊／縮排是 ql-* class（數值與 Quill 自己的 snow 主題一致），
   顏色／底色是 inline style、不需要 CSS。 */
.blog-prose u { text-decoration: underline; text-underline-offset: 3px; }
.blog-prose s { text-decoration: line-through; }
.blog-prose sub,
.blog-prose sup { font-size: 0.75em; line-height: 0; position: relative; vertical-align: baseline; }
.blog-prose sup { top: -0.5em; }
.blog-prose sub { bottom: -0.25em; }
.blog-prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    background: #f3f4f6;
    color: #be123c;
    padding: 0.15em 0.4em;
    border-radius: 0.375rem;
}
.blog-prose pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    line-height: 1.7;
    background: #111827;
    color: #f9fafb;
    padding: 1em 1.25em;
    margin: 0 0 1.5em;
    border-radius: 0.75rem;
    overflow-x: auto;
    white-space: pre-wrap;
}
.blog-prose .ql-align-center { text-align: center; }
.blog-prose .ql-align-right { text-align: right; }
.blog-prose .ql-align-justify { text-align: justify; }
.blog-prose .ql-indent-1 { padding-left: 3em; }
.blog-prose .ql-indent-2 { padding-left: 6em; }
.blog-prose .ql-indent-3 { padding-left: 9em; }
.blog-prose .ql-indent-4 { padding-left: 12em; }
.blog-prose .ql-indent-5 { padding-left: 15em; }
.blog-prose .ql-indent-6 { padding-left: 18em; }
.blog-prose .ql-indent-7 { padding-left: 21em; }
.blog-prose .ql-indent-8 { padding-left: 24em; }
.blog-prose .ql-size-small { font-size: 0.75em; }
.blog-prose .ql-size-large { font-size: 1.5em; }
.blog-prose .ql-size-huge { font-size: 2.5em; }

.blog-page a:focus-visible { outline: 3px solid #D4AF37; outline-offset: 2px; }