/* =============================================================
   Tech Bytes — Engineering Post Shared Stylesheet
   Loaded by all engineering deep-dive posts.
   Fonts: Montserrat (headings), Source Serif Pro (body), Fira Code (code)
   ============================================================= */

/* ── Font imports ── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Source+Serif+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Fira+Code:wght@400;500&display=swap');

/* ── Base typography ── */
body {
    font-family: 'Source Serif Pro', Georgia, 'Times New Roman', serif;
}

h1, h2, h3, h4, h5, h6,
nav, .nav-font {
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
}

/* ── Prose (article body) ── */
.prose p {
    font-size: 1.125rem;
    line-height: 1.85;
    color: #374151;
    margin-bottom: 1.35rem;
    font-family: 'Source Serif Pro', Georgia, serif;
}

.prose ul,
.prose ol {
    margin: 1.1rem 0 1.35rem 1.6rem;
}

.prose li {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #374151;
    margin-bottom: 0.6rem;
    font-family: 'Source Serif Pro', Georgia, serif;
}

.prose h2 {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 1.75rem;
    font-weight: 800;
    color: #111827;
    margin-top: 3.5rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #E5E7EB;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.prose h3 {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #1F2937;
    margin-top: 2.5rem;
    margin-bottom: 0.85rem;
    padding-left: 0.875rem;
    border-left: 3px solid #6366F1;
    letter-spacing: -0.01em;
    line-height: 1.4;
}

.prose strong {
    color: #111827;
    font-weight: 700;
}

.prose em {
    font-style: italic;
    color: #374151;
}

/* Links within prose */
.prose a {
    color: #4338CA;
    text-decoration: underline;
    text-decoration-color: #C7D2FE;
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s ease;
}

.prose a:hover {
    text-decoration-color: #4338CA;
}

/* ── Code ── */
.prose pre {
    background: #1E1E2E;
    color: #CDD6F4;
    border-radius: 0.75rem;
    padding: 1.5rem;
    font-size: 0.875rem;
    overflow-x: auto;
    margin: 2rem 0;
    border: 1px solid #313244;
    position: relative;
}

.prose pre code {
    font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    font-size: inherit;
    background: none;
    color: inherit;
    padding: 0;
    border-radius: 0;
}

.prose code:not(pre code) {
    font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    background: #EEF2FF;
    color: #1E40AF;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.875em;
}

/* ── Copy button ── */
pre {
    position: relative;
}

.copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #374151;
    color: #9CA3AF;
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-family: 'Montserrat', system-ui, sans-serif;
    cursor: pointer;
    transition: background 0.15s ease;
}

.copy-btn:hover {
    background: #4B5563;
    color: #F3F4F6;
}

.copy-btn.copied {
    background: #065F46;
    color: #6EE7B7;
}

/* ── Table of Contents ── */
.toc-link {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 0.8125rem;
}

.toc-link.active {
    color: #4F46E5;
    border-left-color: #4F46E5;
    font-weight: 600;
}

/* ── Section anchor offset for sticky nav ── */
.prose h2[id],
.prose h3[id] {
    scroll-margin-top: 80px;
}

/* ── Callout / takeaway boxes ── */
.prose .callout-info {
    background: #EFF6FF;
    border-left: 4px solid #3B82F6;
    padding: 1.25rem 1.5rem;
    border-radius: 0 0.5rem 0.5rem 0;
    margin: 1.75rem 0;
}

.prose .callout-warning {
    background: #FEF2F2;
    border-left: 4px solid #DC2626;
    padding: 1.25rem 1.5rem;
    border-radius: 0 0.5rem 0.5rem 0;
    margin: 1.75rem 0;
}

/* ── H1 (post title) ── */
h1.post-title {
    font-family: 'Montserrat', system-ui, sans-serif;
    letter-spacing: -0.025em;
}