/* ============================================================
   ForumHub — Base / Reset / Typography
   File: assets/css/base.css
   ============================================================ */

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; }
a { text-decoration: none; color: var(--color-primary); transition: opacity var(--transition-fast); }
a:hover { opacity: .78; }
ul, ol { list-style: none; }
input, textarea, select { font-family: inherit; }

/* ── Body ─────────────────────────────────────────────────── */
body {
    font-family:      var(--font-body);
    font-size:        15px;
    line-height:      1.65;
    color:            var(--text-primary);
    background-color: var(--surface-bg);
    min-height:       100vh;
    display:          flex;
    flex-direction:   column;
}

/* ── Headings ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    font-weight: 700;
    line-height: 1.25;
    color:       var(--text-primary);
}
h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; }
h2 { font-size: clamp(1.3rem, 2.5vw, 1.75rem); }
h3 { font-size: 1.1rem; }

/* ── Prose / Post content ────────────────────────────────── */
.prose { line-height: 1.8; }
.prose p           { margin-bottom: .85em; }
.prose p:last-child{ margin-bottom: 0; }
.prose pre {
    background: var(--surface-muted);
    border-radius: var(--border-radius-sm);
    padding: var(--space-4);
    overflow-x: auto;
    font-size: 13px;
    margin-bottom: .85em;
}
.prose code {
    background: var(--surface-muted);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 13px;
}
.prose blockquote {
    border-left: 4px solid var(--color-primary);
    padding-left: var(--space-4);
    color: var(--text-secondary);
    font-style: italic;
    margin-bottom: .85em;
}

/* ── Utility classes ─────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.text-muted   { color: var(--text-muted); }
.text-sm      { font-size: 13px; }
.text-xs      { font-size: 11px; }
.text-center  { text-align: center; }
.fw-600       { font-weight: 600; }
.fw-700       { font-weight: 700; }
.d-flex       { display: flex; }
.align-center { align-items: center; }
.gap-1        { gap: var(--space-1); }
.gap-2        { gap: var(--space-2); }
.gap-3        { gap: var(--space-3); }
.gap-4        { gap: var(--space-4); }
.mt-2         { margin-top: var(--space-2); }
.mt-4         { margin-top: var(--space-4); }
.mt-6         { margin-top: var(--space-6); }
.mb-4         { margin-bottom: var(--space-4); }
.mb-6         { margin-bottom: var(--space-6); }
.w-full       { width: 100%; }

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--surface-muted); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }