/* =======================
   Console Green Theme
   ======================= */

/* Theme variables */
:root{
  --bg: #0b0f0c;        /* near-black with a slight green bias */
  --fg: #00ff66;        /* terminal green */
  --fg-soft: #66ff99;   /* hover/secondary */
  --bar: #1a1a1a;       /* top bar background */
  --bar-border: #242424;
}

/* Reset / Base */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth;
    background-color: var(--bg);
    min-height: 100%;
}
body{
  background: var(--bg);
  color: var(--fg);
  /* Traditional console font stack (per-OS) */
  font-family:
    Consolas, "Liberation Mono", Menlo, "DejaVu Sans Mono",
    "Source Code Pro", "Courier New", monospace;
  line-height: 1.6;
  letter-spacing: 0.02em;
  /* subtle phosphor glow; keep tame for readability */
  text-shadow: 0 0 6px rgba(0,255,102,0.30);
  min-height: 100vh;
}

/* Top Bar */
.topbar{
  position: fixed; top: 0; left: 0; right: 0; height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bar);
  border-bottom: 1px solid var(--bar-border);
  padding: 0 20px;
  z-index: 1000;
}

/* Keep nav crisp and readable */
.topbar, .topbar a{
  font-weight: 400;     /* ensure no fake bolding */
  letter-spacing: 0;    /* normalize spacing in nav */
  text-shadow: none;    /* avoid glow in nav for crisp text */
  color: var(--fg);
}

/* Brand */
.logo{
  font-weight: 600;
  letter-spacing: 0.04em;
  text-shadow: 0 0 8px rgba(0,255,102,0.4);
}

/* Nav layout */
.main-nav ul{
  list-style: none;
  display: flex;
  align-items: center;
  gap: 20px;
}

.main-nav a{
  display: inline-block;
  white-space: nowrap;
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  color: var(--fg);
}

.main-nav a:hover,
.main-nav a:focus{
  color: var(--fg-soft);
  outline: none;
  text-shadow: 0 0 6px rgba(102,255,153,0.45);
}

.main-nav a.active{
  border-bottom-color: var(--fg);
}

/* Content */
.content{
  max-width: 1300px;
  margin: 0 auto;
  padding: 96px 20px 40px; /* account for fixed header */
}

section{
  scroll-margin-top: 76px;
  margin-bottom: 40px;
}

h1, h2{
  margin-bottom: 10px;
  text-shadow: 0 0 8px rgba(0,255,102,0.45);
}

.hero{
  font-size: clamp(28px, 5vw, 44px);
  letter-spacing: 0.02em;
}

.list{
  list-style: square;
  padding-left: 20px;
}

a{ color: var(--fg); }
a:hover{ color: var(--fg-soft); }

/* Optional CRT scanlines overlay (comment out if not desired) */


/* === Scanlines Overlay (visible & above everything) === */
html::before {
  content: "";
  position: fixed;
  inset: 0;                 /* top:0; right:0; bottom:0; left:0 */
  pointer-events: none;     /* don’t block clicks */
  z-index: 2147483647;      /* above nav and all content */
  /* Slight green-tinted lines for a CRT feel */
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 255, 102, 0.08), /* line color & opacity */
    rgba(0, 255, 102, 0.08) 1px,
    rgba(0, 0, 0, 0)         1px,
    rgba(0, 0, 0, 0)         3px
  );
  /* Remove blend mode so it always shows */
  /* mix-blend-mode: lighten;  <-- intentionally omitted */
  will-change: opacity;
}