/* css/styles.css - main styles for NeuroCore MCP blog post */
:root{
  --nc-bg:#ffffff;
  --nc-foreground:#111827;
  --nc-primary:#3080ff;
  --nc-primary-600:#155dfc;
  --nc-accent:#8d54ff;
  --nc-muted:#6a7282;
  --nc-border:#e5e7eb;
  --nc-surface:#f9fafb;
  --nc-white:#ffffff;
  --chart-1:#3080ff;
  --chart-2:#8d54ff;
  --chart-3:#00c758;
  --chart-4:#ffb020;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fs-base:16px;
  --leading:1.6;
  --space-1:8px; --space-2:12px; --space-3:16px; --space-4:24px; --space-5:32px; --space-6:48px;
  --content-max-width:760px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.08);
  --transition-fast: 160ms cubic-bezier(.4,0,.2,1);
}
*,:before,:after{box-sizing:border-box}
html{font-size:var(--fs-base); -webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);color:var(--nc-foreground);background:var(--nc-bg);line-height:var(--leading);-webkit-font-smoothing:antialiased}
a{color:var(--nc-primary);text-decoration:none;transition:color var(--transition-fast)}
a:hover,a:focus{color:var(--nc-primary-600);outline:none}
img{max-width:100%;height:auto;display:block}
.container{width:calc(100% - 32px);max-width:var(--content-max-width);margin-left:auto;margin-right:auto}
:focus{outline:3px solid rgba(48,128,255,0.14);outline-offset:2px}

/* Typography */
h1{font-size:2rem;line-height:1.15;margin-bottom:var(--space-3);font-weight:700}
h2{font-size:1.5rem;line-height:1.25;margin-top:var(--space-4);margin-bottom:var(--space-2);font-weight:600}
h3{font-size:1.125rem;margin-top:var(--space-3);margin-bottom:var(--space-2);font-weight:600}
p{margin:0 0 var(--space-3) 0;color:var(--nc-foreground);font-size:1rem}
.lead{font-size:1.0625rem;color:var(--nc-muted);margin-bottom:var(--space-3)}
.small{font-size:0.875rem;color:var(--nc-muted)}
blockquote{border-left:4px solid var(--nc-border);padding-left:var(--space-3);color:var(--nc-muted);margin:var(--space-3) 0}

/* Header / Navbar */
.site-header{background:var(--nc-white);box-shadow:var(--shadow-md);position:sticky;top:0;z-index:40}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{display:block;max-height:48px;width:auto}
.brand .brand-title{font-weight:600;color:var(--nc-foreground);font-size:1rem}
.nav{display:flex;align-items:center;gap:16px}
.nav a{color:var(--nc-foreground);padding:8px 12px;border-radius:6px}
.nav a:hover,.nav a:focus{background:var(--nc-surface)}

/* Main article */
main.article{padding:var(--space-5) 0}
.article-body{background:transparent}
.article-header{margin-bottom:var(--space-4)}
.article-meta{color:var(--nc-muted);font-size:0.95rem;margin-bottom:var(--space-3)}

/* Tables */
.table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;margin-bottom:var(--space-4)}
caption{text-align:left;font-weight:600;margin-bottom:var(--space-2)}
thead th{text-align:left;font-weight:600;padding:12px 10px;border-bottom:2px solid var(--nc-border)}
tbody td{padding:12px 10px;border-bottom:1px solid var(--nc-border)}
@media (max-width:420px){thead{display:none}tbody td{display:block;width:100%;box-sizing:border-box}tbody td::before{content:attr(data-label);display:block;font-weight:600;margin-bottom:6px}.table-wrapper{padding-bottom:var(--space-2)}}

/* Charts */
.chart-wrap{margin:var(--space-4) 0;background:transparent}
.canvas-container{width:100%;max-width:100%;height:auto}
.canvas-container canvas{width:100% !important;height:auto !important;display:block}
.chart-summary{font-size:0.95rem;color:var(--nc-muted);margin-top:8px}

/* Footer */
.site-footer{background:transparent;padding:var(--space-3) 0;text-align:center;color:var(--nc-muted);font-size:0.95rem}

/* Buttons */
.button{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;background:var(--nc-primary);color:var(--nc-white);border:none;cursor:pointer;font-weight:600}
.button:hover{background:var(--nc-primary-600);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.button:focus{outline:3px solid rgba(48,128,255,0.14)}

/* Utilities */
.u-center{text-align:center}.u-muted{color:var(--nc-muted)}.u-mb{margin-bottom:var(--space-3)}.u-small{font-size:0.875rem}

/* Responsive adjustments */
@media (min-width:600px){:root{--content-max-width:760px}.brand img{max-height:56px}}
@media (min-width:900px){:root{--content-max-width:880px}.site-header .container{height:72px}}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){.section,.button{transition:none !important}}