/* BricksBlog Theme CSS — Minimal, performance-first */

/* ─── Base Reset ─── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ─── Typography for article content ─── */
.prose { font-family: 'IBM Plex Serif', Georgia, serif; color: #1a1a2e; line-height: 1.8; }
.prose h2 { font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 1.5rem; margin: 2.5rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #e2e8f0; color: #1a1a2e; }
.prose h3 { font-family: 'Inter', system-ui, sans-serif; font-weight: 600; font-size: 1.25rem; margin: 2rem 0 0.75rem; color: #1a1a2e; }
.prose p { margin: 1.25rem 0; }
.prose a { color: #2563eb; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.prose a:hover { color: #1d4ed8; }
.prose ul, .prose ol { margin: 1.25rem 0; padding-left: 1.75rem; }
.prose li { margin: 0.375rem 0; }
.prose ul li { list-style-type: disc; }
.prose ol li { list-style-type: decimal; }
.prose blockquote { border-left: 3px solid #2563eb; padding: 0.75rem 1.25rem; margin: 1.5rem 0; background: #f8fafc; font-style: italic; }
.prose code { font-size: 0.875em; background: #f1f5f9; padding: 0.15em 0.4em; border-radius: 0.25rem; font-family: 'SF Mono', 'Fira Code', monospace; }
.prose pre { background: #1e293b; color: #e2e8f0; padding: 1.25rem; border-radius: 0.5rem; overflow-x: auto; margin: 1.5rem 0; font-size: 0.875rem; line-height: 1.6; }
.prose pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
.prose img { border-radius: 0.5rem; margin: 1.5rem 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-family: 'Inter', system-ui, sans-serif; font-size: 0.9rem; }
.prose th, .prose td { padding: 0.75rem 1rem; border: 1px solid #e2e8f0; text-align: left; }
.prose th { background: #f8fafc; font-weight: 600; }
.prose hr { border: none; border-top: 1px solid #e2e8f0; margin: 2rem 0; }

/* ─── TOC Active State ─── */
.toc-link { transition: all 0.2s ease; border-left: 2px solid transparent; }
.toc-link:hover { color: #2563eb; border-left-color: #e2e8f0; }
.toc-link.active { color: #2563eb; font-weight: 600; border-left-color: #2563eb; background: #eff6ff; }

/* ─── Search Bar ─── */
.search-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); border-color: #2563eb; }

/* ─── Card Hover ─── */
.guide-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.guide-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px -5px rgba(0,0,0,0.08), 0 4px 10px -5px rgba(0,0,0,0.04); }

/* ─── Category icon pulse ─── */
.cat-icon { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* ─── Skip link ─── */
.skip-link { position: absolute; left: -9999px; z-index: 999; padding: 0.5rem 1rem; background: #2563eb; color: white; text-decoration: none; }
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* ─── Print ─── */
@media print {
    nav, .toc-sidebar, footer, .no-print { display: none !important; }
    .prose { max-width: 100% !important; }
}