/* Dark Neon theme overrides for Bootstrap */

:root {
  --neon-primary: #7dd3fc;
  --neon-accent: #a78bfa;
  --bg-900: #0b1020;
  --bg-800: #0f172a;
  --fg-100: #e5e7eb;
  --fg-400: #94a3b8;
  /* Bootstrap runtime variables for dark text on dark bg */
  color-scheme: dark;
  --bs-body-bg: var(--bg-900);
  --bs-body-color: var(--fg-100);
  --bs-heading-color: var(--fg-100);
  --bs-link-color: #a5c7ff;
  --bs-link-hover-color: #dbe8ff;
  --bs-border-color: rgba(148,163,184,.18);
  --bs-card-bg: rgba(255,255,255,.04);
  --bs-card-color: var(--fg-100);
}

html, body { height: 100%; background: radial-gradient(1200px 600px at 10% -10%, rgba(125,211,252,.12), transparent 60%), radial-gradient(900px 500px at 90% 0%, rgba(167,139,250,.10), transparent 50%), var(--bg-900); color: var(--fg-100); }

.bg-opacity { background-color: rgba(2,6,23,.6); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid rgba(148,163,184,.18); }

.hero { padding: 120px 0 80px; background: linear-gradient(180deg, rgba(148,163,184,.08), rgba(148,163,184,0)); }
.hero-logo { filter: drop-shadow(0 12px 30px rgba(2,6,23,.6)); max-height: 220px; }

.section-pad { padding: 72px 0; }
.alt { background: rgba(255,255,255,0.02); }

.card.glass { background: rgba(255,255,255,.04); border: 1px solid rgba(148,163,184,.18); box-shadow: 0 10px 30px rgba(2,6,23,.4); }
/* Ensure readable text inside cards */
.card.glass, .card.glass .card-body, .card.glass h1, .card.glass h2, .card.glass h3, .card.glass h4, .card.glass h5, .card.glass h6, .card.glass p, .card.glass li { color: var(--fg-100); }

.navbar-dark .navbar-brand, .navbar-dark .nav-link { color: var(--fg-100); }
.navbar-dark .nav-link.active, .navbar-dark .nav-link:focus, .navbar-dark .nav-link:hover { color: white; text-shadow: 0 0 8px rgba(125,211,252,.5); }

.btn-primary { --bs-btn-bg: linear-gradient(90deg, var(--neon-primary), var(--neon-accent)); --bs-btn-border-color: transparent; --bs-btn-hover-bg: linear-gradient(90deg, var(--neon-accent), var(--neon-primary)); --bs-btn-hover-border-color: transparent; box-shadow: 0 10px 30px rgba(2,6,23,.5); }
.btn-outline-light { --bs-btn-color: var(--fg-100); --bs-btn-border-color: rgba(148,163,184,.4); --bs-btn-hover-bg: rgba(255,255,255,.08); --bs-btn-hover-border-color: rgba(255,255,255,.5); }

.text-secondary { color: var(--fg-400) !important; }
.text-muted { color: #8b9bb0 !important; }

/* Global heading color safety */
h1, h2, h3, h4, h5, h6 { color: var(--fg-100); }
p, li { color: var(--fg-100); }

.link-neon { color: #a5c7ff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.link-neon:hover { color: #dbe8ff; text-shadow: 0 0 8px rgba(125,211,252,.6); }

/* Scroll padding for anchor targets with fixed navbar */
section[id], header#home { scroll-margin-top: 88px; }

/* Improve focus ring */
:focus-visible { outline: 2px solid var(--neon-primary); outline-offset: 2px; border-radius: 6px; }

body {
    padding-left: 0px;
    padding-right: 0px;
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
}

p {
    padding: 0px;
    margin: 0px;
}

.section {
    border-top: 1px solid #BBB;
    margin-top: 15px;
    margin-left: 5%;
    margin-right: 5%;
    padding: 5px;
    padding-bottom: 0px;
    background-color: white;
}

.section ul {
    list-style: none;
    margin-top: 5px;
}

.section ul li {
    display: inline;
}

.section ul a {
    background-color: #ECECEC;
    border: 1px solid #999999;
    padding: 5px 5px 10px;
    display: block;
    float: left;
    margin: 5px;
}

.section ul a:hover {
    background-color: #FFFFFF;
    border: 1px solid #333333;
}

.section ul a img {
    border: 1px solid #999999;
}

.section ul a.lightbox-enabled img {
    border: 1px dotted #999999;
}

.section span.code {
    font-family: "Courier New", Courier, monospace;
    margin-left: 10px;
    padding-left: 10px;
    font-size: 11px;
    border-left: 1px solid #000;
}

.section .link {
    font-size: 12px;
    font-style: italic;
    padding-left: 10px;
    margin-left: 10px;
}

.section .important {
    text-decoration: underline;
}

.section .title {
    font-weight: bold;
    font-size: 16px;
}

.clear {
    clear: left;
}

.section.header {
    text-align: center;
    font-size: 12px;
    padding-top: 10px;
    border-top: none;
}

.section.footer {
    text-align: center;
    font-size: 12px;
    padding-top: 10px;
}