/* BBSlink 2026 rewrite — Bootstrap-first, with a subtle ANSI/terminal vibe.
   Theme system:
   - Palettes:   body.palette-ansi (default) or body.palette-amber
   - CRT mode:   body.crt-on (optional, subtle scanlines + glow)
*/

:root{
  /* Neutrals (high contrast) */
  --bbs-bg: #0b0d10;
  --bbs-bg-2: #07090c;
  --bbs-panel: rgba(255,255,255,.045);
  --bbs-panel-2: rgba(255,255,255,.070);
  --bbs-border: rgba(255,255,255,.12);

  /* Text */
  --bbs-text: #e5e7eb;   /* main copy */
  --bbs-head: #f9fafb;   /* headings */
  --bbs-muted: #9ca3af;  /* secondary text */

  /* Accent defaults (overridden by palettes below) */
  --bbs-accent: #ffff00;
  --bbs-accent-soft: rgba(255,255,0,.18);
  --bbs-link: #ffff00;

  /* Shadows */
  --bbs-shadow: 0 12px 40px rgba(0,0,0,.40);
}

/* Palette: pure ANSI yellow */
body.palette-ansi{
  --bbs-accent: #ffff00;
  --bbs-accent-soft: rgba(255,255,0,.18);
  --bbs-link: #ffff00;
}

/* Palette: softer amber (still ANSI-ish, less eye-searing) */
body.palette-amber{
  --bbs-accent: #ffcc66;
  --bbs-accent-soft: rgba(255,204,102,.18);
  --bbs-link: #ffd27a;
}

/* Default palette if none set */
body:not(.palette-ansi):not(.palette-amber){
  --bbs-accent: #ffff00;
  --bbs-accent-soft: rgba(255,255,0,.18);
  --bbs-link: #ffff00;
}

body{
  background:
    radial-gradient(1200px 600px at 20% 0%, var(--bbs-accent-soft), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(255,255,255,.06), transparent 55%),
    linear-gradient(to bottom, var(--bbs-bg-2), var(--bbs-bg));
  color: var(--bbs-text);
}

/* Readability helpers */
p, li, dd{ color: var(--bbs-text); line-height: 1.65; }
.text-muted, small{ color: var(--bbs-muted) !important; }

/* Accessibility */
.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem;
  background:#111827; color:#fff; border:1px solid var(--bbs-border); border-radius:.75rem;
  z-index:9999;
}

/* Header / Nav */
.site-header .navbar{
  background: rgba(11,13,16,.68);
  border-bottom: 1px solid var(--bbs-border);
  backdrop-filter: blur(10px);
}

.brand-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px; height:34px;
  border-radius:12px;
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  border: 1px solid var(--bbs-border);
  color: var(--bbs-accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 800;
}

.brand-text{
  letter-spacing:.2px;
  font-weight: 800;
  color: var(--bbs-head);
}

.navbar .nav-link{
  color: rgba(249,250,251,.82);
}
.navbar .nav-link:hover{ color: #fff; }
.navbar .nav-link.active{
  color: #fff;
  text-decoration: underline;
  text-underline-offset: .35em;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--bbs-accent);
}

/* Accent button */
.btn-accent{
  background: var(--bbs-accent);
  border: 0;
  color: #000;
  font-weight: 800;
}
.btn-accent:hover{ filter: brightness(1.03); color:#000; }

/* Theme dropdown niceties */
.theme-chip{
  border: 1px solid var(--bbs-border);
  background: rgba(255,255,255,.04);
  color: var(--bbs-text);
  border-radius: 999px;
  padding: .25rem .6rem;
  font-size: .85rem;
}
.theme-chip:hover{ background: rgba(255,255,255,.06); }

/* Hero */
.hero{
  padding: 3.5rem 0 2.5rem;
}
.hero .kicker{
  display:inline-flex;
  gap:.5rem;
  padding:.35rem .65rem;
  border: 1px solid var(--bbs-border);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  color: var(--bbs-muted);
  font-size: .95rem;
}
.hero h1{
  margin-top: .9rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--bbs-head);
}
.hero p.lead{
  color: var(--bbs-text);
  opacity: .92;
  max-width: 60ch;
}

/* Cards / sections */
.card-glass{
  background: var(--bbs-panel);
  border: 1px solid var(--bbs-border);
  border-radius: 1.25rem;
  box-shadow: var(--bbs-shadow);
}
.section-title{
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--bbs-head);
}

a{ color: var(--bbs-link); }
a:hover{ color: #fff; text-decoration: underline; text-underline-offset: .2em; }

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.badge-ansi{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--bbs-text);
}
.badge-ansi strong{ color: var(--bbs-accent); }

.hr-soft{
  border-top: 1px solid var(--bbs-border);
  opacity: 1;
}

/* Footer */
.site-footer{
  border-top: 1px solid var(--bbs-border);
  background: rgba(0,0,0,.25);
}
.footer-link{
  color: rgba(229,231,235,.80);
  text-decoration: none;
}
.footer-link:hover{ color:#fff; text-decoration: underline; text-underline-offset:.25em; }

/* Prism blocks */
pre[class*="language-"]{
  border-radius: 1rem !important;
  border: 1px solid var(--bbs-border);
}

/* Tables (Bootstrap variables) */
.table{
  --bs-table-bg: transparent;
  --bs-table-color: var(--bbs-text);
  --bs-table-border-color: var(--bbs-border);
}
.table thead th{
  color: var(--bbs-head);
}

/* Forms (make fields legible on dark background) */
.form-control, .form-select{
  background-color: rgba(0,0,0,.22);
  border-color: var(--bbs-border);
  color: var(--bbs-text);
}
.form-control:focus, .form-select:focus{
  border-color: var(--bbs-accent);
  box-shadow: 0 0 0 .25rem rgba(255,255,0,.18);
}
body.palette-amber .form-control:focus,
body.palette-amber .form-select:focus{
  box-shadow: 0 0 0 .25rem rgba(255,204,102,.18);
}
.form-control::placeholder{ color: rgba(229,231,235,.55); }

/* --- Optional CRT mode -------------------------------------------------- */
/* Subtle: scanlines + vignette + a little glow. Keep it tasteful. */
body.crt-on{
  text-shadow: 0 0 10px rgba(255,255,0,.08);
}
body.palette-amber.crt-on{
  text-shadow: 0 0 10px rgba(255,204,102,.08);
}

body.crt-on::before{
  content:"";
  pointer-events:none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  background:
    /* scanlines */
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.04) 0px,
      rgba(255,255,255,.04) 1px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 4px
    );
  mix-blend-mode: overlay;
  opacity: .18;
}

body.crt-on::after{
  content:"";
  pointer-events:none;
  position: fixed;
  inset: 0;
  z-index: 9997;
  background:
    radial-gradient(1200px 700px at 50% 0%, rgba(255,255,255,.05), transparent 55%),
    radial-gradient(900px 500px at 50% 100%, rgba(0,0,0,.45), transparent 60%),
    radial-gradient(circle at 50% 50%, transparent 55%, rgba(0,0,0,.45) 100%);
  opacity: .55;
}

/* Respect reduced-motion preferences (we don't animate by default, but keep future-proof) */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
}

/* Ensure dropdown menus look good in dark header */
.dropdown-menu{
  background: rgba(11,13,16,.96);
  border: 1px solid var(--bbs-border);
}
.dropdown-item{ color: var(--bbs-text); }
.dropdown-item:hover{ background: rgba(255,255,255,.06); color: #fff; }
.dropdown-divider{ border-top-color: var(--bbs-border); }