/* ------------------------------------------------------
   Font Imports - Keep at the very top
------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Open+Sans&display=swap');

/* ------------------------------------------------------
   Cyborg Theme - Base Styles
------------------------------------------------------ */
body {
  background-color: #060606;
  color: #cccccc; /* Improved contrast */
  font-family: 'Open Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color: #fff;
  font-family: 'Open Sans', sans-serif;
}

a {
  color: #2a9fd6;
  font-family: 'Open Sans', sans-serif;
}

a:visited {
  color: #8ac7ea; /* Maintain contrast for visited links */
}

a:hover {
  color: #66ccff;
  transition: color 0.3s ease;
}

a:focus-visible {
  outline: 2px dashed #2a9fd6;
  outline-offset: 2px;
}

/* ------------------------------------------------------
   Navbar
------------------------------------------------------ */
.navbar {
  background-color: #222;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.navbar a {
  color: #ccc;
  font-family: 'Open Sans', sans-serif;
}

.navbar a:hover {
  color: #66ccff;
}

.navbar a.active {
  color: #2a9fd6;
}

/* ------------------------------------------------------
   Code Blocks
------------------------------------------------------ */
pre, code {
  background-color: #1a1a1a; /* Darker bg for contrast */
  color: #e6e6e6;
  font-family: 'Roboto Mono', monospace;
}

pre {
  padding: 0.8rem 1rem;
  border-radius: 6px;
  overflow-x: auto;
  line-height: 1.45;
}

/* ------------------------------------------------------
   Unified Non-Code Fonts
------------------------------------------------------ */
p, li, ul, ol, div, span, small, .subtitle, .post-content,
a:hover, a:visited, .navbar-brand, blockquote {
  font-family: 'Open Sans', sans-serif;
}

/* ------------------------------------------------------
   Accessibility/Mode Toggle - Light Mode Overrides
------------------------------------------------------ */
body.light-mode {
  background-color: #f8f9fa;
  color: #212529;
}

body.light-mode a {
  color: #0056b3;
}

body.light-mode h1, body.light-mode h2, body.light-mode h3,
body.light-mode h4, body.light-mode h5, body.light-mode h6 {
  color: #003366;
}

body.light-mode .navbar {
  background-color: #343a40;
}

body.light-mode .navbar a {
  color: #ffffff;
}

body.light-mode pre, body.light-mode code {
  background-color: #e0e0e0;
  color: #111;
}

/* ------------------------------------------------------
   Auto Dark Mode Based on System Preference
------------------------------------------------------ */
@media (prefers-color-scheme: light) {
  body:not(.light-mode) {
    background-color: #f8f9fa;
    color: #212529;
  }
}

/* Ensure headings don't hide under a fixed navbar when linked */
h2, h3, h4 {
  scroll-margin-top: 80px; /* adjust if your navbar is taller */
}

/* ===== High-contrast navbar overrides (append to end) ===== */

/* Base (dark mode by default in your theme) */
.navbar,
.navbar.navbar-default,
.navbar.navbar-inverse {
  background-color: #0b1020 !important;      /* deeper than #222 for contrast */
  border-bottom: 1px solid #1f2937 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

/* Brand (your name, top-left) + nav links (top-right) */
.navbar .navbar-brand,
.navbar-brand,
.navbar .nav > li > a,
.navbar .navbar-nav > li > a,
.navbar a.nav-link {
  color: #f3f4f6 !important;                  /* near-white on dark bg */
  font-weight: 600;
  text-shadow: none !important;
}

/* Hover / focus / active */
.navbar .nav > li > a:hover,
.navbar .navbar-nav > li > a:hover,
.navbar a.nav-link:hover,
.navbar .nav > li > a:focus,
.navbar .navbar-nav > li > a:focus {
  color: #93c5fd !important;                  /* visible hover */
  text-decoration: underline;
}

.navbar .nav > li.active > a,
.navbar .navbar-nav > li.active > a,
.navbar .nav > li > a:active {
  color: #bfdbfe !important;
  font-weight: 700;
}

/* Ensure the LinkedIn icon follows link color */
.navbar .fa,
.navbar [class*="fa-"],
.navbar svg {
  color: currentColor !important;
  fill: currentColor !important;
}

/* Keyboard focus ring for a11y */
.navbar a:focus-visible {
  outline: 2px dashed #93c5fd !important;
  outline-offset: 2px;
}

/* ===== Light mode specifics ===== */
body.light-mode .navbar,
@media (prefers-color-scheme: light) {
  body:not(.light-mode) .navbar /* fallback if system is light */ {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
  }
}

body.light-mode .navbar .navbar-brand,
body.light-mode .navbar .nav > li > a,
body.light-mode .navbar .navbar-nav > li > a,
@media (prefers-color-scheme: light) {
  body:not(.light-mode) .navbar .navbar-brand,
  body:not(.light-mode) .navbar .nav > li > a,
  body:not(.light-mode) .navbar .navbar-nav > li > a {
    color: #0f172a !important;                /* near-black on white */
  }
}

body.light-mode .navbar .nav > li > a:hover,
@media (prefers-color-scheme: light) {
  body:not(.light-mode) .navbar .nav > li > a:hover {
    color: #1d4ed8 !important;                /* accessible hover */
    text-decoration: underline;
  }
}

body.light-mode .navbar .fa,
body.light-mode .navbar svg,
@media (prefers-color-scheme: light) {
  body:not(.light-mode) .navbar .fa,
  body:not(.light-mode) .navbar svg {
    color: currentColor !important;
    fill: currentColor !important;
  }
}

/* Optional: slightly larger clickable area */
.navbar .navbar-nav > li > a,
.navbar .navbar-brand {
  padding-top: 14px;
  padding-bottom: 14px;
  letter-spacing: .2px;
}

/* Everything after this is the new stylistic change */
/* ===== Pro polish: tokens ===== */
:root {
  --bg: #060606;
  --fg: #e5e7eb;
  --muted: #9ca3af;
  --link: #93c5fd;
  --link-hover: #bfdbfe;
  --border: rgba(255,255,255,.08);
  --surface: #0b1020;             /* elevated surfaces */
  --radius: 14px;                  /* consistent rounding */
  --shadow: 0 8px 24px rgba(0,0,0,.35);
  --gap-1: .5rem; --gap-2: .75rem; --gap-3: 1rem; --gap-4: 1.5rem; --gap-5: 2rem;
}

body.light-mode {
  --bg: #ffffff;
  --fg: #0f172a;
  --muted: #475569;
  --link: #1d4ed8;
  --link-hover: #2563eb;
  --border: #e5e7eb;
  --surface: #ffffff;
  --shadow: 0 10px 24px rgba(2,6,23,.08);
}

/* Base rhythm */
body { color: var(--fg); line-height: 1.65; }

/* Constrain readable width for posts */
.container, .post-content { max-width: 880px; }

/* Headings: scale + spacing */
h1 { font-weight: 800; letter-spacing: -.01em; margin: var(--gap-5) 0 var(--gap-3); }
h2 { font-weight: 700; letter-spacing: -.005em; margin: var(--gap-4) 0 var(--gap-2); }
h3 { font-weight: 700; margin: var(--gap-3) 0 var(--gap-2); }
.post-content p + h2, .post-content p + h3 { margin-top: var(--gap-5); }

/* Paragraph spacing */
.post-content p { margin: 0 0 var(--gap-3); }

/* Lists: tighter, professional look */
.post-content ul, .post-content ol { margin: 0 0 var(--gap-3) 1.25rem; }
.post-content li { margin: .2rem 0; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
a:focus-visible {
  outline: 2px dashed var(--link);
  outline-offset: 2px;
  border-radius: 6px;
}

.card, .project, .post-preview, .well {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--gap-4);
}
.card:hover, .post-preview:hover {
  transform: translateY(-2px);
  transition: transform .18s ease, box-shadow .18s ease;
}

.btn, .btn-primary, .btn-default {
  display:inline-block; font-weight:700; border-radius: 9999px;
  padding: .6rem 1rem; border: 1px solid transparent;
}
.btn-primary, .btn.btn-primary {
  background: var(--link); color: #fff;
}
.btn-primary:hover { background: var(--link-hover); }
.btn-outline {
  background: transparent; border-color: var(--border); color: var(--fg);
}
.btn-outline:hover { border-color: var(--link); color: var(--link); }

.post-content img {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display:block; margin: var(--gap-4) auto;
  max-width:100%; height:auto;
}
figure { margin: var(--gap-4) 0; }
figcaption { color: var(--muted); font-size: .9rem; margin-top: .5rem; text-align: center; }

pre, code { border-radius: 10px; }
pre { border: 1px solid var(--border); }

table { border-collapse: collapse; width: 100%; margin: var(--gap-3) 0; }
th, td { border-bottom: 1px solid var(--border); padding: .55rem .75rem; }
th { text-align: left; font-weight: 700; }

.section-header {
  display:flex; align-items:baseline; gap:.6rem; margin: var(--gap-5) 0 var(--gap-3);
}
.section-header .rule {
  flex:1; height:1px; background: var(--border);
  transform: translateY(-.35rem);
}

.navbar { padding: .35rem 0; }
.navbar .navbar-brand { font-weight: 800; letter-spacing: .2px; }
.navbar .navbar-nav > li > a { padding: 14px 12px; }
@media (max-width: 991px){
  .navbar .navbar-nav > li > a { padding: 12px 10px; }
}

.site-footer, footer {
  background: transparent;
  border-top: 1px solid var(--border);
  margin-top: var(--gap-5);
  padding: var(--gap-4) 0;
  color: var(--muted);
}
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--link); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}