/* Slate-navy dark theme with light text.
   Loaded after custom-style.css on public pages only; the /Tools pages do not link it.
   Palette */
:root {
  --sh-bg: #1e2a3a;
  --sh-card: #283a50;
  --sh-line: #3b4f68;
  --sh-fg: #eef2f7;
  --sh-muted: #b8c4d3;
  --sh-accent: #6db8f2;
  --sh-on-accent: #0f1b2a;
}

/* ---- Surfaces ---- */
html, body, .c-offcanvas-content-wrap, #content, .content, main, section, .container, .row,
[class*="col-"], .header, .sticky-inner, .below-menu-search, .bg-light, .bg-white, .section,
.jumbotron, .navbar, .footer, .footer-inner, .footer-top, .footer-bottom, .modal-content, .table {
  background-color: var(--sh-bg) !important;
  color: var(--sh-fg) !important;
  border-color: var(--sh-line) !important;
}

.card, .well, .dropdown-menu, .form-control, .list-group-item, .list-group-item *,
.jumbotron, .modal-content {
  background-color: var(--sh-card) !important;
  border-color: var(--sh-line) !important;
}

hr, .border, .border-top, .border-bottom { border-color: var(--sh-line) !important; }

/* ---- Text: light and thin ---- */
body, p, li, span, small, td, th, label, div, a, .btn, .nav-link, .form-control {
  color: var(--sh-fg) !important;
  font-family: "Open Sans", Arial, sans-serif;
  font-weight: 300 !important;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .card-title,
.hero-title, .font-weight-bold, .btn, .nav-link, .header-slogan {
  color: var(--sh-fg) !important;
  font-weight: 400 !important;
}

strong, b, th { font-weight: 700 !important; }

.text-muted, small, .small { color: var(--sh-muted) !important; }

/* ---- Accent: links, nav, icons ---- */
a, a *, .nav-link, .navbar-nav a, .text-primary, #messagetitle,
.fa, .fas, .far, .fab, i {
  color: var(--sh-accent) !important;
}

.fa, .fas { font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important; }
.far      { font-family: "Font Awesome 5 Free" !important; font-weight: 400 !important; }
.fab      { font-family: "Font Awesome 5 Brands" !important; font-weight: 400 !important; }

/* ---- Logo ---- */
.header .header-brand-text .site-logo,
.header .header-brand-text .site-logo span {
  font-family: "Open Sans", Arial, sans-serif !important;
  font-weight: 400 !important;
}
.header .header-brand-text .site-logo { color: var(--sh-accent) !important; }
.header .header-brand-text .site-logo span { color: var(--sh-fg) !important; }

/* ---- Buttons ---- */
.btn-primary, .btn-primary:hover, .btn-primary:focus,
.bg-primary, .badge-primary {
  background-color: var(--sh-accent) !important;
  border-color: var(--sh-accent) !important;
  color: var(--sh-on-accent) !important;
}
.btn-primary *, .bg-primary *, .badge-primary * { color: var(--sh-on-accent) !important; }

.btn-outline-primary, .btn-outline-secondary, .btn-secondary, .btn-default {
  background-color: transparent !important;
  border: 1px solid var(--sh-accent) !important;
  color: var(--sh-accent) !important;
}
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-secondary:hover {
  background-color: var(--sh-accent) !important;
  color: var(--sh-on-accent) !important;
}

/* ---- Form fields ---- */
.form-control, input, textarea, select {
  color: var(--sh-fg) !important;
  background-color: var(--sh-card) !important;
  border-color: var(--sh-line) !important;
}
::placeholder { color: var(--sh-muted) !important; opacity: 1; }

/* ---- Alerts (AI chat bubbles use these) ---- */
.alert, .alert * { color: var(--sh-fg) !important; }
.alert { border: 1px solid var(--sh-line) !important; }
.alert-primary { background-color: #25496b !important; border-color: #3a6d9a !important; }
.alert-light   { background-color: var(--sh-card) !important; }
.alert-info    { background-color: #234a5e !important; border-color: #3a7590 !important; }
.alert-success { background-color: #1f4a3a !important; border-color: #3b7a62 !important; }
.alert-warning { background-color: #5a4a1c !important; border-color: #8c7330 !important; }
.alert-danger  { background-color: #5a2a33 !important; border-color: #8c4553 !important; }

/* ---- AI toast (Interview Assistant) ---- */
.shcom-toast {
  background-color: var(--sh-card) !important;
  border: 1px solid var(--sh-line);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
}
.shcom-toast .shcom-toast-header,
.shcom-toast .shcom-toast-header *,
.shcom-toast .shcom-toast-header .shcom-toast-btn {
  background-color: transparent !important;
  color: var(--sh-on-accent) !important;
}
.shcom-toast .shcom-toast-header { background-color: var(--sh-accent) !important; }
.shcom-toast .shcom-toast-header strong { font-weight: 600 !important; }
.shcom-toast-header:focus-visible { outline-color: var(--sh-fg); }
.shcom-toast #chat-messages { background-color: var(--sh-bg) !important; }
.shcom-toast .bg-white { background-color: var(--sh-card) !important; }
.shcom-toast .shcom-toast-qq {
  background-color: transparent !important;
  border: 1px solid var(--sh-accent) !important;
  color: var(--sh-accent) !important;
}
.shcom-toast .shcom-toast-qq * { color: inherit !important; }
.shcom-toast .shcom-toast-qq:hover {
  background-color: var(--sh-accent) !important;
  color: var(--sh-on-accent) !important;
}
#gpu-waiting, #gpu-waiting * { color: var(--sh-fg) !important; }

/* ---- Theme leftovers found while checking pages ---- */
.title-divider span, .title-divider small, .title-divider > * {
  background-color: var(--sh-bg) !important;
  color: var(--sh-fg) !important;
}
.title-divider:before, .title-divider:after { border-color: var(--sh-line) !important; background-color: var(--sh-line) !important; }

.text-grey-dark, .text-grey, .text-secondary, .text-dark, .text-black, .text-body, .text-gray {
  color: var(--sh-muted) !important;
}

.dropdown-item, .dropdown-menu a, .dropdown-menu li {
  background-color: var(--sh-card) !important;
  color: var(--sh-accent) !important;
}
.dropdown-item:hover, .dropdown-menu a:hover { background-color: var(--sh-line) !important; }

.js-offcanvas, .c-offcanvas, .navbar-offcanvas, #nvmenu-clone, .c-offcanvas--right, .c-offcanvas--left {
  background-color: var(--sh-card) !important;
}

/* Project timeline cards (light grey in the base theme) */
.timeline-item {
  background-color: var(--sh-card) !important;
  border-color: var(--sh-line) !important;
}
.timeline-item:before, .timeline-item:after { border-color: transparent var(--sh-card) transparent transparent !important; }
.timeline-item.right:before, .timeline-item.right:after { border-color: transparent transparent transparent var(--sh-card) !important; }

/* ---- Navigation: hover/open state and leftover red accents ---- */
.navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus,
.navbar-nav .show > .nav-link, .navbar-nav .nav-item:hover > .nav-link {
  background-color: var(--sh-card) !important;
  border-top-color: var(--sh-accent) !important;
  color: var(--sh-fg) !important;
}
.dropdown-menu { border-bottom-color: var(--sh-accent) !important; }
.dropdown-menu .dropdown-item { border-bottom-color: var(--sh-line) !important; }
.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-submenu:hover > .dropdown-item {
  background-color: var(--sh-line) !important;
  color: var(--sh-fg) !important;
}
.dropdown-menu .dropdown-toggle::after { border-bottom-color: var(--sh-accent) !important; }

/* ---- Beat colour-red-dark.css, which sets its reds with !important on long selectors ---- */
body .header .navbar .navbar-main.collapse .dropdown-menu {
  border-bottom-color: var(--sh-accent) !important;
}
body .header .navbar .navbar-main.collapse .dropdown-menu .dropdown-submenu .dropdown-item:after {
  border-bottom-color: var(--sh-accent) !important;
}
body .header .navbar .navbar-main.collapse .dropdown-menu .dropdown-item:before,
body .header .navbar .navbar-main.collapse .dropdown-menu .dropdown-item:hover:before,
body .header .navbar .navbar-main.collapse .dropdown-menu .dropdown-item:focus:before,
body .header .navbar .navbar-main.collapse .dropdown-menu .active > .dropdown-item:before {
  color: var(--sh-accent) !important;
}
body .header .navbar .navbar-main .navbar-nav .nav-link:hover,
body .header .navbar .navbar-main .navbar-nav .show > .dropdown-toggle,
body .header .navbar .navbar-main .navbar-nav .nav-link-dd-effect:hover {
  border-top-color: var(--sh-accent) !important;
  border-left-color: var(--sh-line) !important;
  border-right-color: var(--sh-line) !important;
  background-color: var(--sh-card) !important;
}
body .header { border-bottom-color: var(--sh-line); }
.timeline-item { border-bottom-color: var(--sh-accent) !important; }

/* Blog date tiles: light-grey box in the base theme, so the light day number vanished */
.date-wrapper { background-color: var(--sh-card) !important; border-color: var(--sh-line) !important; }
.date-wrapper .date-d { color: var(--sh-fg) !important; font-weight: 400 !important; }

/* Blog code: <pre> blocks and inline <code>, with highlight.js token colours.
   The ID selector outranks the blanket span/div colour rules above. */
#blogentrytext pre {
  background-color: #141d29 !important;
  border: 1px solid var(--sh-line) !important;
  border-radius: 4px;
  padding: 0.85rem 1rem;
  margin: 1rem 0;
  overflow-x: auto;
}
#blogentrytext pre, #blogentrytext pre code, #blogentrytext code {
  font-family: Consolas, "Courier New", monospace !important;
  font-size: 0.9rem;
  font-weight: 400 !important;
  white-space: pre;
  color: #dfe7f1 !important;
}
#blogentrytext code {
  background-color: #141d29 !important;
  border-radius: 3px;
  padding: 0.1rem 0.35rem;
  white-space: normal;
}
#blogentrytext pre code { background: none !important; padding: 0; white-space: pre; }
#blogentrytext pre span.hljs-keyword, #blogentrytext pre span.hljs-selector-tag, #blogentrytext pre span.hljs-literal { color: #ff9e64 !important; }
#blogentrytext pre span.hljs-string, #blogentrytext pre span.hljs-regexp { color: #9ece6a !important; }
#blogentrytext pre span.hljs-number, #blogentrytext pre span.hljs-attr, #blogentrytext pre span.hljs-attribute { color: #e0af68 !important; }
#blogentrytext pre span.hljs-comment { color: #7f8ea3 !important; font-style: italic; }
#blogentrytext pre span.hljs-title, #blogentrytext pre span.hljs-built_in, #blogentrytext pre span.hljs-name, #blogentrytext pre span.hljs-function { color: #7dcfff !important; }
#blogentrytext pre span.hljs-variable, #blogentrytext pre span.hljs-params, #blogentrytext pre span.hljs-type { color: #bb9af7 !important; }