/*
Theme Name: bioinfo
Theme URI: https://bioinformaticsindia.com
Author: Bioinformatics India
Author URI: https://bioinformaticsindia.com
Description: A Reddit-style Q&A community theme for bioinformatics professionals and students.
Version: 4.5.3
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bioinfot
*/

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design system ──
     An authentic implementation of Vercel's DESIGN.md (VoltAgent/awesome-
     design-md): black-ink primary CTAs, near-white canvas, hairline
     borders, stacked micro-shadows instead of a single drop-shadow, a
     dual-scale radius system (100px pill for marketing CTAs, 6px for
     nav-scale controls, 8px for cards), and Vercel's own link blue for
     inline links only — never used for primary actions. Light only. ── */
:root {
    --color-primary:    #171717;
    --color-primary-dk: #000000;
    --color-primary-lt: #F5F5F5;
    --color-accent:     #0070F3;
    --color-accent-dk:  #0761D1;
    --color-bg:         #FAFAFA;
    --color-card:       #FFFFFF;
    --color-card-alt:   #F5F5F5;
    --color-elevated:   #FFFFFF;
    --color-border:     #EBEBEB;
    --color-border-soft:#F0F0F0;
    --color-text:       #171717;
    --color-text-dim:   #4D4D4D;
    --color-muted:      #6B6B6B;
    --color-muted-dim:  #8F8F8F;
    --color-vote-up:    #2ea043;
    --color-vote-dn:    #d73a49;
    --color-accepted:   #1C8A5E;
    --color-tag-bg:     #F5F5F5;
    --color-tag-txt:    #4D4D4D;
    --color-ok:         #1C8A5E;
    --color-ok-bg:      #E0F2E9;
    --color-warn:       #AB570A;
    --color-warn-bg:    #FFEFCF;
    --color-destructive:   #C50000;
    --color-destructive-bg:#F7D4D6;
    --color-info:       #0761D1;
    --color-info-bg:    #D3E5FF;
    --radius:           8px;
    --radius-sm:        6px;
    --radius-md:        8px;
    --radius-lg:        12px;
    --radius-xl:        16px;
    --radius-pill:       100px;
    --shadow:           0 0 0 1px rgba(0,0,0,.08), 0px 1px 1px rgba(0,0,0,.02), 0px 2px 2px rgba(0,0,0,.04);
    --shadow-md:        0 0 0 1px rgba(0,0,0,.08), 0px 2px 2px rgba(0,0,0,.04), 0px 8px 16px -4px rgba(0,0,0,.04);
    --ring:             0 0 0 3px rgba(0,112,243,.25);
    --transition:       0.15s ease;
    --font-sans:        "Valley Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono:        ui-monospace, "SF Mono", "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* ── Valley Sans (Helsinki Type Studio, SIL OFL 1.1) — self-hosted variable font ── */
@font-face {
    font-family: 'Valley Sans';
    src: url('assets/fonts/ValleySans-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

/* ── Layout ── */
.site-wrapper { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.content-area { display: grid; grid-template-columns: 1fr 312px; gap: 24px; padding: 20px 0; }
@media (max-width: 860px) { .content-area { grid-template-columns: 1fr; } .sidebar { display: none; } }

/* ── Header ── */
.site-header {
    background: var(--color-card);
    border-bottom: 1px solid var(--color-border);
    position: sticky; top: 0; z-index: 100;
}
.header-inner {
    display: flex; align-items: center; gap: 16px;
    height: 64px; max-width: 1440px; margin: 0 auto; padding: 0 24px;
}
.site-logo {
    display: flex; align-items: center; gap: 10px;
    font-weight: 600; font-size: 16px;
    color: var(--color-text);
    letter-spacing: -.5px; flex-shrink: 0;
}
.site-logo svg { width: 30px; height: 30px; flex-shrink: 0; }
.site-logo:hover { text-decoration: none; color: var(--color-text); }

.header-nav { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.header-nav a {
    padding: 6px 12px; border-radius: var(--radius-pill);
    font-size: 14px; font-weight: 400; color: var(--color-text-dim);
    transition: background var(--transition), color var(--transition);
}
.header-nav a:hover { background: var(--color-card-alt); color: var(--color-text); text-decoration: none; }
.header-nav a.active { color: var(--color-text); background: var(--color-card-alt); }

.header-search { flex: 1; min-width: 0; max-width: 820px; position: relative; }
.header-search input {
    width: 100%; height: 36px; padding: 0 16px;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: var(--color-card); font-size: 14px; font-family: var(--font-sans);
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.header-search input:focus {
    outline: none; border-color: var(--color-text-dim);
    background: #fff; box-shadow: var(--ring);
}

.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 12px; height: 28px; border-radius: var(--radius-sm); font-size: 14px;
    font-weight: 500; cursor: pointer; border: 1px solid transparent;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition), box-shadow var(--transition);
    font-family: var(--font-sans); letter-spacing: -0.1px;
}
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn-outline { border-color: var(--color-border); color: var(--color-text); background: var(--color-card); }
.btn-outline:hover { background: var(--color-card-alt); text-decoration: none; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dk); text-decoration: none; }
.btn-ask { background: var(--color-primary); color: #fff; }
.btn-ask:hover { background: var(--color-primary-dk); text-decoration: none; }
/* Marketing-scale CTAs: Vercel's 100px pill, 48px tall — a distinct scale from nav-scale .btn */
.btn-lg { height: 48px; padding: 0 24px; font-size: 16px; font-weight: 500; border-radius: var(--radius-pill); }

/* ── Hero bar ── */
.hero-bar {
    background: linear-gradient(135deg, #0A1628 0%, #0D3B6B 55%, #0071E3 100%);
    color: #fff;
    border-radius: var(--radius);
    padding: 32px 36px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; margin-bottom: 16px; flex-wrap: wrap;
    box-shadow: var(--shadow-md);
    position: relative; overflow: hidden;
}
.hero-bar::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 78% 50%, rgba(255,255,255,.1) 0%, transparent 55%);
    pointer-events: none;
}
.hero-text h1 { font-size: 28px; font-weight: 800; margin-bottom: 6px; letter-spacing: -.4px; }
.hero-text p  { font-size: 15px; opacity: .88; line-height: 1.5; }
.hero-bar .btn-ask {
    background: #fff; color: var(--color-primary-dk); border-color: transparent;
    white-space: nowrap; box-shadow: 0 3px 12px rgba(0,0,0,.25); font-size: 15px; padding: 10px 22px; font-weight: 700;
}
.hero-bar .btn-ask:hover { background: #E8F2FD; }

/* ── Sort bar ── */
.sort-bar {
    background: var(--color-card);
    border: 1px solid var(--color-border); border-radius: var(--radius);
    padding: 8px 12px;
    display: flex; align-items: center; gap: 4px;
    margin-bottom: 12px; box-shadow: var(--shadow);
}
.sort-bar a {
    display: flex; align-items: center; gap: 4px;
    padding: 7px 14px; border-radius: var(--radius-sm);
    color: var(--color-muted); font-weight: 600; font-size: 14px;
    transition: background var(--transition), color var(--transition);
}
.sort-bar a:hover { background: var(--color-bg); color: var(--color-text); text-decoration: none; }
.sort-bar a.active { background: var(--color-primary-lt); color: var(--color-primary); text-decoration: none; }

/* ── Question Card ── */
.question-card {
    background: var(--color-card);
    border-radius: var(--radius);
    display: flex; gap: 0; margin-bottom: 10px;
    box-shadow: var(--shadow);
    transition: box-shadow var(--transition);
}
.question-card:hover {
    box-shadow: var(--shadow-md);
}

.vote-col {
    width: 44px; min-width: 44px;
    display: flex; flex-direction: column; align-items: center;
    padding: 10px 4px; gap: 4px;
    background: #f8f9fb;
    border-radius: var(--radius) 0 0 var(--radius);
    border-right: 1px solid var(--color-border);
}
.vote-btn {
    background: none; border: none; cursor: pointer;
    color: var(--color-muted); padding: 5px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    line-height: 1; font-size: 18px;
    transition: color var(--transition), background var(--transition);
}
.vote-up:hover,  .vote-btn.voted-up   { color: var(--color-vote-up); }
.vote-down:hover, .vote-btn.voted-down { color: var(--color-vote-dn); }
.vote-up:hover   { background: rgba(46,160,67,.1); }
.vote-down:hover { background: rgba(215,58,73,.1); }
.vote-count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; color: var(--color-text); line-height: 1; }

.card-body { flex: 1; padding: 12px 14px; min-width: 0; }
.card-stats {
    display: flex; gap: 12px; font-size: 12px; color: var(--color-muted); margin-bottom: 7px; align-items: center;
    font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.stat-answers { color: var(--color-primary); font-weight: 700; }
.stat-answers.has-accepted {
    color: var(--color-accepted); background: rgba(46,204,113,.1);
    padding: 2px 8px; border-radius: 20px;
}

.question-title { font-size: 17px; font-weight: 700; line-height: 1.35; margin-bottom: 6px; letter-spacing: -.3px; }
.question-title a { color: var(--color-text); transition: color var(--transition); }
.question-title a:hover { color: var(--color-accent); text-decoration: none; }

.question-excerpt {
    color: var(--color-muted); font-size: 13px; margin-bottom: 10px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5;
}

.card-footer { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tag {
    background: var(--color-tag-bg); color: var(--color-tag-txt);
    border: none; border-radius: var(--radius-pill);
    padding: 3px 10px; font-size: 11px; font-weight: 400; cursor: pointer;
    font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0;
    transition: background var(--transition), color var(--transition);
}
.tag:hover { background: var(--color-border); color: var(--color-text); text-decoration: none; }
.card-meta { margin-left: auto; font-size: 12px; color: var(--color-muted); }
.card-meta a { color: var(--color-accent); }

/* ── Accepted badge ── */
.badge-accepted {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--color-accepted); color: #fff;
    border-radius: 20px; padding: 2px 10px; font-size: 12px; font-weight: 700;
}

/* ── Single Question ── */
.question-thread { display: flex; flex-direction: column; gap: 16px; }

.question-full {
    background: var(--color-card); border: 1px solid var(--color-border);
    border-radius: var(--radius); display: flex; gap: 0; box-shadow: var(--shadow);
}
.question-full .vote-col { width: 52px; min-width: 52px; }
.question-full .card-body { padding: 20px; }

.question-body-content { font-size: 15px; line-height: 1.8; margin: 14px 0; }
.question-body-content pre {
    background: #f6f8fa; border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); padding: 14px 18px; overflow-x: auto; margin: 14px 0;
}
.question-body-content code {
    font-family: var(--font-mono); font-size: 13px;
    background: #f0f2f5; padding: 2px 6px; border-radius: 4px; color: #c7254e;
}
.question-body-content pre code { background: none; padding: 0; color: inherit; }

.question-actions {
    display: flex; gap: 12px; align-items: center;
    padding: 10px 0; border-top: 1px solid var(--color-border);
    font-size: 13px; color: var(--color-muted); margin-top: 14px;
}
.action-btn {
    background: none; border: none; cursor: pointer;
    color: var(--color-muted); font-size: 13px; padding: 4px 8px; border-radius: var(--radius-sm);
    transition: background var(--transition), color var(--transition);
    font-family: var(--font-sans);
}
.action-btn:hover { background: var(--color-bg); color: var(--color-text); }

/* ── Answers section ── */
.answers-section {
    background: var(--color-card); border: 1px solid var(--color-border);
    border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.answers-header {
    padding: 14px 20px; border-bottom: 1px solid var(--color-border);
    font-size: 18px; font-weight: 700; color: var(--color-text); background: #fafbfc;
}
.answer-item {
    display: flex; border-bottom: 1px solid var(--color-border);
    transition: background var(--transition);
}
.answer-item:last-child { border-bottom: none; }
.answer-item:hover { background: #fafbfc; }
.answer-item .vote-col { width: 52px; min-width: 52px; }
.answer-body { flex: 1; padding: 20px; }
.answer-body-content { font-size: 15px; line-height: 1.8; }
.answer-body-content pre {
    background: #f6f8fa; border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); padding: 14px 18px; overflow-x: auto; margin: 14px 0;
}
.answer-body-content code {
    font-family: var(--font-mono); font-size: 13px;
    background: #f0f2f5; padding: 2px 6px; border-radius: 4px; color: #c7254e;
}
.answer-body-content pre code { background: none; padding: 0; color: inherit; }
.answer-accepted { border-left: 3px solid var(--color-accepted); }
.accepted-marker {
    color: var(--color-accepted); font-weight: 700; font-size: 13px;
    display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px;
    background: rgba(46,204,113,.1); padding: 4px 12px; border-radius: 20px;
}

/* ── Post Answer Form ── */
.post-answer {
    background: var(--color-card); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow);
}
.post-answer h3 { font-size: 18px; font-weight: 700; margin-bottom: 14px; }
.post-answer textarea {
    width: 100%; min-height: 200px; padding: 14px;
    border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
    font-family: var(--font-sans); font-size: 14px; resize: vertical; line-height: 1.6;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.post-answer textarea:focus {
    outline: none; border-color: var(--color-primary);
    box-shadow: var(--ring);
}
.post-answer .btn { margin-top: 12px; }

/* ── Ask Question Form ── */
.ask-form {
    background: var(--color-card); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: 28px; max-width: 860px; box-shadow: var(--shadow);
}
.ask-form h1 { font-size: 26px; font-weight: 800; margin-bottom: 22px; letter-spacing: -.3px; }
.form-group { margin-bottom: 22px; }
.form-group label { display: block; font-weight: 700; margin-bottom: 6px; font-size: 15px; }
.form-group .hint { font-size: 13px; color: var(--color-muted); margin-bottom: 8px; }
.form-group input[type="text"],
.form-group textarea,
.form-group select {
    width: 100%; padding: 11px 14px;
    border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
    font-family: var(--font-sans); font-size: 14px;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form-group input:focus,
.form-group textarea:focus {
    outline: none; border-color: var(--color-primary);
    box-shadow: var(--ring);
}
.form-group textarea { min-height: 250px; resize: vertical; line-height: 1.6; }

/* ── Sidebar ── */
.sidebar { display: flex; flex-direction: column; gap: 16px; }
.sidebar-widget {
    background: var(--color-card); border: 1px solid var(--color-border);
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.widget-header {
    background: linear-gradient(135deg, var(--color-primary-dk) 0%, var(--color-primary) 100%);
    color: #fff; padding: 11px 16px; font-weight: 700; font-size: 14px;
    letter-spacing: .03em;
}
.widget-body { padding: 14px 16px; }
.widget-body p { font-size: 14px; line-height: 1.6; margin-bottom: 14px; color: var(--color-muted); }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }

.top-users-list { list-style: none; }
.top-users-list li {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 0; border-bottom: 1px solid var(--color-border); font-size: 13px;
}
.top-users-list li:last-child { border-bottom: none; }
.user-rank { font-weight: 700; color: var(--color-muted); width: 16px; }
.user-rep { margin-left: auto; color: var(--color-primary); font-size: 12px; font-weight: 600; }

/* ── Pagination ── */
.pagination { display: flex; justify-content: center; gap: 6px; padding: 20px 0; }
.pagination a, .pagination span {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm); font-size: 14px; font-weight: 600;
    transition: all var(--transition);
}
.pagination a { background: var(--color-card); }
.pagination a:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; box-shadow: var(--ring); }
.pagination .current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ── Notice / Alert ── */
.notice { padding: 13px 18px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 14px; }
.notice-info { background: var(--color-info-bg); border-left: 4px solid var(--color-info); }
.notice-login { background: #fff8e6; border-left: 4px solid #f59e0b; }

/* ── 404 / Empty states ── */
.empty-state { text-align: center; padding: 56px 20px; color: var(--color-muted); }
.empty-state h2 { font-size: 26px; margin-bottom: 10px; color: var(--color-text); font-weight: 800; }
.empty-state p { font-size: 16px; margin-bottom: 24px; }

/* ── Breadcrumbs ── */
.breadcrumbs { padding: 12px 0 4px; font-size: 13px; color: var(--color-muted); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.breadcrumbs li + li::before { content: '›'; margin-right: 4px; color: var(--color-muted); }
.breadcrumbs a { color: var(--color-accent); }
.breadcrumbs [aria-current="page"] { color: var(--color-muted); }

/* ── Screen reader only ── */
.screen-reader-text {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* ── Footer ── */
.site-footer { background: #0F1218; margin-top: 48px; }
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 48px 20px 24px; }
.footer-grid {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 36px; margin-bottom: 40px;
}
.footer-logo {
    font-size: 20px; font-weight: 800; color: #fff;
    display: flex; align-items: center; gap: 10px; margin-bottom: 12px; text-decoration: none;
}
.footer-logo:hover { text-decoration: none; color: #fff; }
.footer-logo svg { width: 30px; height: 30px; }
.footer-brand p { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.5); max-width: 260px; }
.footer-col h4 {
    color: rgba(255,255,255,.9); font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em; margin-bottom: 16px;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul a {
    color: rgba(255,255,255,.5); font-size: 13px;
    transition: color var(--transition);
}
.footer-col ul a:hover { color: rgba(255,255,255,.9); text-decoration: none; }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08); padding-top: 20px;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 12px; font-size: 12px; color: rgba(255,255,255,.35);
}
.footer-bottom a { color: rgba(255,255,255,.35); }
.footer-bottom a:hover { color: rgba(255,255,255,.7); text-decoration: none; }

.footer-social { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.footer-social-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 6px;
    color: rgba(255,255,255,.5);
    font-size: 11px; font-weight: 700; text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
}
.footer-social-link:hover {
    border-color: rgba(255,255,255,.4);
    color: #fff;
    background: rgba(255,255,255,.08);
    text-decoration: none;
}
/* Logo keeps its natural aspect ratio — a wide wordmark should render wide,
   not get squeezed into a square. Height-constrained, width follows. */
.site-logo-img { height: 28px; width: auto; max-width: 220px; object-fit: contain; display: block; }

/* ══════════════════════════════════════════
   AUTHOR PROFILE — v2 card
   ══════════════════════════════════════════ */
.author-profile-card-v2 {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
}
.apc-banner {
    height: 110px;
    background: linear-gradient(135deg, #0A1628 0%, #0D3B6B 55%, #0071E3 100%);
}
.apc-body { padding: 0 24px 24px; }
.apc-top-row {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-top: -48px; margin-bottom: 12px;
}
.apc-avatar-wrap {}
.apc-avatar {
    width: 96px !important; height: 96px !important;
    border-radius: 50% !important;
    border: 4px solid var(--color-card) !important;
    display: block !important;
}
.apc-edit-btn { font-size: 13px; padding: 6px 14px; }
.apc-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.apc-name { font-size: 22px; font-weight: 800; color: var(--color-text); }
.verified-badge {
    display: inline-flex; align-items: center; gap: 4px;
    background: #e6f4ea; color: #1a7f37;
    border: 1px solid #b7dfbf;
    border-radius: 20px;
    padding: 3px 10px; font-size: 12px; font-weight: 700;
    white-space: nowrap;
}
.apc-position { font-size: 14px; color: var(--color-muted); margin-top: 4px; }
.apc-bio { font-size: 14px; line-height: 1.7; color: var(--color-text); margin-top: 12px; max-width: 680px; }
.apc-interests { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.author-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.author-link {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: 20px;
    border: 1px solid var(--color-border);
    font-size: 13px; color: var(--color-muted);
    transition: border-color .15s, color .15s;
}
.author-link:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
.author-link-icon { font-size: 11px; font-weight: 700; }
.apc-stats {
    display: flex; gap: 28px; flex-wrap: wrap;
    margin-top: 18px; padding-top: 16px;
    border-top: 1px solid var(--color-border);
}
.apc-stat { text-align: center; min-width: 60px; }
.apc-stat-value { display: block; font-size: 20px; font-weight: 700; color: var(--color-primary); }
.apc-stat-label { font-size: 11px; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; }

/* Publications card */
.author-section-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
}
.author-section-title {
    font-size: 16px; font-weight: 700; color: var(--color-text);
    margin-bottom: 14px; padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
}
.pub-list { list-style: decimal; padding-left: 20px; }
.pub-item { padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.pub-item:last-child { border-bottom: none; }
.pub-title { font-size: 14px; font-weight: 600; line-height: 1.4; }
.pub-title a { color: var(--color-text); }
.pub-title a:hover { color: var(--color-accent); }
.pub-meta { font-size: 12px; color: var(--color-muted); margin-top: 3px; }

/* ══════════════════════════════════════════
   EDIT PROFILE PAGE
   ══════════════════════════════════════════ */
.ep-page { max-width: 800px; margin: 24px auto; }
.ep-page-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px; gap: 16px;
}
.ep-page-header h1 { font-size: 24px; font-weight: 800; }
.ep-page-sub { font-size: 13px; color: var(--color-muted); margin-top: 4px; }
.ep-page-sub a { color: var(--color-muted); }
.ep-page-sub a:hover { color: var(--color-accent); }
.ep-avatar { border-radius: 50% !important; flex-shrink: 0; }
.ep-notice {
    padding: 12px 16px; border-radius: var(--radius);
    font-size: 14px; font-weight: 500; margin-bottom: 16px;
}
.ep-notice-success { background: #e6f4ea; color: #1a7f37; border: 1px solid #b7dfbf; }
.ep-section {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 24px; margin-bottom: 14px;
    box-shadow: var(--shadow);
}
.ep-section h2 {
    font-size: 15px; font-weight: 700; color: var(--color-text);
    margin-bottom: 18px; padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
}
.ep-field { margin-bottom: 14px; }
.ep-field:last-child { margin-bottom: 0; }
.ep-field label {
    display: block; font-size: 13px; font-weight: 600;
    color: var(--color-text); margin-bottom: 6px;
}
.ep-field input[type="text"],
.ep-field input[type="url"],
.ep-field input[type="email"],
.ep-field textarea {
    width: 100%; padding: 9px 13px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 14px; font-family: var(--font-sans);
    color: var(--color-text); background: var(--color-bg);
    transition: border-color .15s, background .15s;
}
.ep-field input:focus, .ep-field textarea:focus {
    outline: none; border-color: var(--color-primary); background: var(--color-card);
}
.ep-hint { font-size: 12px; color: var(--color-muted); margin-top: 5px; }
.ep-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .ep-field-row { grid-template-columns: 1fr; } }

/* Publication rows */
.pub-row {
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    padding: 14px; margin-bottom: 10px; background: var(--color-bg);
}
.pub-row-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--color-text);
}
.pub-remove-btn {
    background: none; border: none; cursor: pointer;
    color: var(--color-muted); font-size: 12px; padding: 2px 6px;
    border-radius: 3px; transition: color .1s, background .1s;
}
.pub-remove-btn:hover { color: var(--color-accent); background: rgba(232,68,10,.06); }
.pub-add-btn {
    display: block; width: 100%;
    padding: 10px; border: 1.5px dashed var(--color-border);
    border-radius: var(--radius-sm); background: none;
    text-align: center; cursor: pointer;
    color: var(--color-muted); font-size: 14px; font-family: var(--font-sans);
    transition: border-color .15s, color .15s;
}
.pub-add-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.ep-actions { display: flex; gap: 12px; margin-top: 20px; padding-bottom: 32px; }

@media (max-width: 700px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* ── Responsive ── */
@media (max-width: 600px) {
    .question-title { font-size: 15px; }
    .header-search { display: none; }
    .header-nav { display: none; }
    .card-stats { display: none; }
    .hero-bar { padding: 22px; }
    .hero-text h1 { font-size: 22px; }
}

/* ══════════════════════════════════════════
   GLOBAL OVERFLOW GUARD
   ══════════════════════════════════════════ */

/* Prevent horizontal page scroll without breaking position:fixed/sticky */
html { overflow-x: hidden; }

/* Flex children must be able to shrink below their content width */
.answer-body, .card-body, .hero-text { min-width: 0; }

/* Content areas: break long words, never wider than their container */
.question-title        { overflow-wrap: break-word; word-break: break-word; }
.question-body-content,
.answer-body-content   {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Pre/code: scroll horizontally within their own box, never expand the page */
pre  { white-space: pre; overflow-x: auto; max-width: 100%; }
code { white-space: pre-wrap; } /* inline code wraps rather than overflowing */

/* ══════════════════════════════════════════
   RESPONSIVE — 768px  (tablets)
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
    .site-wrapper  { padding: 0 14px; }
    .content-area  { gap: 16px; padding: 12px 0; }
    .footer-inner  { padding: 32px 14px 20px; }
    .hero-bar      { padding: 24px 22px; }
    .hero-text h1  { font-size: 24px; }
}

/* ══════════════════════════════════════════
   RESPONSIVE — 600px  (phones — extends existing block)
   ══════════════════════════════════════════ */
@media (max-width: 600px) {
    /* Logo: hide text, show icon only */
    .site-logo span        { display: none; }
    .header-inner          { padding: 0 12px; gap: 8px; }
    .header-actions        { gap: 6px; }

    /* Vote columns — slim down */
    .question-full .vote-col,
    .answer-item .vote-col { width: 40px; min-width: 40px; }

    /* Question actions — wrap so author chip doesn't push off-screen */
    .question-actions          { flex-wrap: wrap; gap: 8px; padding: 8px 0; }
    .question-actions .card-meta {
        flex: 0 0 100%;
        margin-left: 0;
        padding-top: 8px;
        border-top: 1px solid var(--color-border);
    }

    /* Editor toolbar — wrap to second row on narrow screens */
    .editor-toolbar  { flex-wrap: wrap; }

    /* Answer + question form */
    .post-answer          { padding: 16px 14px; }
    .post-answer textarea { min-height: 140px; }

    /* Sort bar */
    .sort-bar   { padding: 6px 8px; }
    .sort-bar a { padding: 5px 10px; font-size: 13px; }

    /* Content area */
    .content-area { padding: 10px 0; }
}

/* ══════════════════════════════════════════
   RESPONSIVE — 480px  (small phones)
   ══════════════════════════════════════════ */
@media (max-width: 480px) {
    .site-wrapper  { padding: 0 10px; }

    /* Header */
    .header-inner       { height: 50px; gap: 6px; }
    .btn                { padding: 6px 12px; font-size: 13px; }

    /* Hero — stack button below text */
    .hero-bar           { padding: 16px 14px; border-radius: 8px; flex-direction: column; align-items: flex-start; }
    .hero-text h1       { font-size: 18px; }
    .hero-text p        { font-size: 14px; }
    .hero-bar .btn-ask  { align-self: stretch; justify-content: center; }

    /* Vote columns */
    .vote-col,
    .question-full .vote-col,
    .answer-item .vote-col { width: 36px; min-width: 36px; }
    .vote-btn              { font-size: 15px; padding: 4px; }
    .vote-count            { font-size: 12px; }

    /* Card & answer bodies */
    .card-body              { padding: 10px; }
    .question-full .card-body { padding: 14px 12px; }
    .answer-body            { padding: 14px 10px; }
    .answers-header         { padding: 10px 12px; font-size: 16px; }

    /* Post answer */
    .post-answer            { padding: 14px 10px; }
    .post-answer textarea   { min-height: 130px; }
    .post-answer h3         { font-size: 16px; }

    /* Tags */
    .tag { font-size: 11px; padding: 2px 7px; }

    /* Code blocks — smaller font on mobile */
    .question-body-content pre,
    .answer-body-content pre { padding: 10px; font-size: 12px; }
    .code-block-wrapper pre  { font-size: 12px; }

    /* Pagination */
    .pagination a,
    .pagination span { width: 32px; height: 32px; font-size: 13px; }

    /* Empty state */
    .empty-state    { padding: 32px 12px; }
    .empty-state h2 { font-size: 20px; }

    /* Breadcrumbs */
    .breadcrumbs { font-size: 12px; padding: 6px 0 2px; }
}

/* ══════════════════════════════════════════
   RESPONSIVE — 380px  (very small phones)
   ══════════════════════════════════════════ */
@media (max-width: 380px) {
    .site-wrapper { padding: 0 8px; }
    .header-inner { padding: 0 8px; }

    .question-full .vote-col,
    .answer-item .vote-col,
    .vote-col { width: 32px; min-width: 32px; }

    .card-body              { padding: 8px; }
    .question-full .card-body { padding: 10px 8px; }
    .answer-body            { padding: 10px 8px; }
    .post-answer            { padding: 12px 8px; }

    .btn         { padding: 5px 10px; font-size: 12px; }
    .toolbar-btn { padding: 3px 7px;  font-size: 11px; }
    .sort-bar a  { padding: 4px 8px;  font-size: 12px; }
}