/* Shared blog detail page styles */
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, *::-webkit-scrollbar { display: none; }
html { scroll-behavior: smooth; }

#siteHeader { height: 72px; background: white; box-shadow: 0 8px 30px rgba(0,0,0,.06); }
.nav-link { position: relative; color: black; padding: 4px 0; }
.nav-link::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 0; height: 2px; background: black; transform: translateX(-50%); transition: width .25s ease; }
.nav-link:hover::after { width: 100%; }
.nav-cta { border-color: black; }
.page-wrapper { padding-top: 72px; }
#mobileMenu nav a { display: block; width: 100%; line-height: 1.4; padding: 6px 0; white-space: normal; }

.prose h2 { font-size: 1.55rem; line-height: 1.3; font-weight: 700; margin-top: 2.5rem; margin-bottom: 1rem; color: #0f172a; scroll-margin-top: 90px; }
.prose h3 { font-size: 1.05rem; line-height: 1.4; font-weight: 600; margin-top: 1.75rem; margin-bottom: .6rem; color: #0f172a; }
.prose p { margin-bottom: 1rem; color: #334155; line-height: 1.85; }
.prose ul, .prose ol { padding-left: 1.5rem; margin-bottom: 1.25rem; color: #334155; line-height: 1.85; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose table { width: 100%; margin: 1.5rem 0; border-radius: 12px; overflow: hidden; border: 1px solid #e2e8f0; }
.prose th { background: #f1f5f9; text-align: left; padding: 10px 12px; font-weight: 600; font-size: .875rem; border-bottom: 1px solid #e2e8f0; color: #0f172a; }
.prose td { padding: 9px 12px; font-size: .875rem; color: #334155; border-bottom: 1px solid #f1f5f9; }
.prose a { color: #0d9488; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: #0f172a; }
.prose section { margin-bottom: 0; }

.toc-link { display: block; padding: 5px 0 5px 12px; border-left: 2px solid #e2e8f0; font-size: .82rem; color: #64748b; transition: color .15s, border-color .15s; text-decoration: none; line-height: 1.4; }
.toc-link:hover, .toc-link.active { color: #0d9488; border-color: #0d9488; font-weight: 500; }

.rel-card { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 10px; text-decoration: none; transition: background .15s; }
.rel-card:hover { background: #f8fafc; }
.rel-card img { width: 58px; height: 46px; object-fit: cover; border-radius: 7px; flex-shrink: 0; }

#readProgress { position: fixed; top: 72px; left: 0; height: 3px; background: linear-gradient(90deg, #14b8a6, #0d9488); width: 0%; z-index: 100; }

.more-card { background: white; border-radius: 18px; border: 1px solid #e2e8f0; overflow: hidden; transition: box-shadow .2s, transform .2s; text-decoration: none; display: block; }
.more-card:hover { box-shadow: 0 10px 28px rgba(0,0,0,.08); transform: translateY(-3px); }

.cat-pill { display: inline-block; padding: 4px 12px; border-radius: 9999px; font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; background: #f0fdfa; color: #0f766e; }