/* ============================================================
   SEC4CHECK — ARTICLE / LIGHT · LIGHT BLUE
   Reading theme for blog posts. Redefines the legacy CSS
   tokens to the light-blue palette + base layout + nav.
   Article component styles (highlight-box, code-block, …)
   live inline in each post and inherit these tokens.
   ============================================================ */

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }

:root{
  /* legacy token names remapped to light-blue palette */
  --primary-color:   #2f6dfc;
  --secondary-color: #d6324a;
  --accent-color:    #1d52e0;
  --bg-primary:      #ffffff;
  --bg-secondary:    #ffffff;
  --bg-tertiary:     #f3f7fd;
  --text-primary:    #0d1b2e;
  --text-secondary:  #46586e;
  --text-accent:     #8696ab;
  --border-color:    rgba(13,27,46,.10);
  --gradient-primary:linear-gradient(135deg,#2f6dfc,#4aa8ff);
  --shadow-primary:  0 16px 40px -18px rgba(31,82,224,.28);
  --transition-fast: .25s cubic-bezier(.4,0,.2,1);
  --transition-normal:.4s cubic-bezier(.4,0,.2,1);

  --d: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --m: 'JetBrains Mono', ui-monospace, monospace;
  --b: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --sky:#4aa8ff; --paper-2:#f3f7fd; --line:rgba(13,27,46,.10);
}

html{ scroll-behavior:smooth; }
body{ font-family:var(--b); background:var(--paper-2); color:var(--text-primary); line-height:1.7; -webkit-font-smoothing:antialiased; }
::selection{ background:var(--primary-color); color:#fff; }
a{ color:var(--accent-color); }
.container{ max-width:1180px; margin:0 auto; padding:0 1.6rem; }

/* ---------- Nav (matches light homepage) ---------- */
.navbar{ position:fixed; top:0; left:0; width:100%; z-index:1000; background:rgba(255,255,255,.86); backdrop-filter:blur(16px) saturate(150%); border-bottom:1px solid var(--line); transition:var(--transition-fast); }
.nav-container{ max-width:1180px; margin:0 auto; padding:1.05rem 1.6rem; display:flex; align-items:center; justify-content:space-between; }
.nav-brand{ display:flex; align-items:center; text-decoration:none; }
.nav-logo-svg{ height:28px; width:auto; }
.nav-menu{ display:flex; align-items:center; gap:2rem; }
.nav-link{ font-size:.92rem; font-weight:500; color:var(--text-secondary); text-decoration:none; transition:var(--transition-fast); position:relative; }
.nav-link::after{ content:''; position:absolute; left:0; bottom:-5px; width:0; height:2px; background:var(--primary-color); transition:var(--transition-fast); }
.nav-link:hover, .nav-link.active{ color:var(--text-primary); }
.nav-link:hover::after, .nav-link.active::after{ width:100%; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; cursor:pointer; padding:6px; }
.nav-toggle span{ width:24px; height:2px; background:var(--text-primary); transition:var(--transition-fast); }

/* ---------- Article shell ---------- */
.blog-container{ background:#fff!important; border:1px solid var(--line); box-shadow:var(--shadow-primary); max-width:920px!important; padding:3rem 3.4rem!important; }
.back-to-blog{ font-family:var(--m); font-size:.84rem; }
.blog-title{ font-family:var(--d)!important; letter-spacing:-.02em; }
.blog-meta{ font-family:var(--m); font-size:.82rem!important; }
.blog-excerpt{ color:var(--text-secondary); font-size:1.15rem!important; }
.blog-content{ font-size:1.06rem!important; }
.blog-content h2{ font-family:var(--d)!important; letter-spacing:-.015em; color:var(--text-primary)!important; font-size:1.75rem!important; margin-top:3rem!important; margin-bottom:1.1rem!important; }
.blog-content h3{ font-family:var(--d)!important; font-size:1.32rem!important; }
.blog-content h4{ font-family:var(--d)!important; }
.blog-content p, .blog-content li{ color:var(--text-secondary)!important; text-align:left!important; }
.blog-content p{ margin-bottom:1.35rem!important; }
.blog-content strong{ color:var(--text-primary); }

/* inline code chips */
.blog-content code{ font-family:var(--m); font-size:.85em; background:var(--paper-2); border:1px solid var(--line); color:var(--accent-color); padding:.1rem .4rem; border-radius:5px; }
.code-block code{ background:none; border:none; padding:0; color:inherit; }

/* code block: light theme to match the article */
.code-block{ background:#f4f7fc!important; border:1px solid var(--line)!important; color:#2b3b52!important; border-radius:10px!important; }
.code-block .comment{ color:#8a97a8; }
.code-block .keyword{ color:#1d52e0; }
.code-block .string{ color:#0a7d52; }
.code-block .function{ color:#b3541e; }

/* article images: always full color */
.blog-image img{ border:1px solid var(--line)!important; box-shadow:var(--shadow-primary)!important; }
.image-caption{ font-family:var(--b); }

/* tables */
.vuln-table, .timeline-table{ box-shadow:var(--shadow-primary); border-radius:10px; overflow:hidden; background:#fff; }
.vuln-table th, .timeline-table th{ font-family:var(--m); font-size:.82rem; }

/* badges / cards */
.severity-badge{ background:linear-gradient(135deg,#e0364f,#b51e36)!important; }
.threat-card h4{ font-family:var(--d); }
.article-card h4{ font-family:var(--d); }
.cta-section h3{ font-family:var(--d); color:var(--text-primary)!important; }
.cta-button{ font-family:var(--b)!important; background:var(--text-primary)!important; color:#fff!important; box-shadow:0 6px 18px -10px rgba(13,27,46,.5)!important; border-radius:10px!important; }
.cta-button:hover{ background:#1a2c45!important; transform:translateY(-2px); }

/* ---------- mobile nav ---------- */
@media (max-width:768px){
  .blog-container{ padding:1.5rem 1.25rem!important; max-width:100%!important; }
  .blog-content{ font-size:1rem!important; }
  .nav-menu{ position:fixed; inset:0 0 0 auto; width:80%; max-width:330px; height:100vh; height:100dvh; background:#fff; border-left:1px solid var(--line); flex-direction:column; justify-content:center; align-items:flex-start; gap:2rem; transform:translateX(100%); transition:transform var(--transition-fast); padding:2.4rem; z-index:999; box-shadow:var(--shadow-primary); }
  .nav-menu.active{ transform:none; }
  .nav-link{ font-size:1.05rem; }
  .nav-toggle{ display:flex; z-index:1001; }
  .nav-toggle.active span:nth-child(1){ transform:rotate(45deg) translate(5px,5px); }
  .nav-toggle.active span:nth-child(2){ opacity:0; }
  .nav-toggle.active span:nth-child(3){ transform:rotate(-45deg) translate(5px,-5px); }
}