/* Dark Mode Theme: Black & Blue palette for Techfolio */

/* Use Open Sans as the default sans serif font. */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700|Source+Code+Pro:300,400,500,700");

/* Root variables for dark mode */
:root {
  --bs-font-sans-serif: "Open Sans", sans-serif;
  --bs-link-color: #4fc3f7;         /* Bright blue for links */
  --bs-link-hover-color: #82b1ff;   /* Lighter blue on hover */
  --tf-pill-bg: #232a34;            /* Pill dark blue/gray */
  --tf-icon-fill: #4fc3f7;          /* Bright blue for icons */
  --tf-icon-hover: #82b1ff;         /* Lighter blue for icon hover */
  --tf-page-bg-color: #181a1b;      /* Deep black/blue background from dark reader */
  --tf-footer-bg-color: #181a1b;    /* Slightly lighter footer */
  --tf-projects-bg-color: #181a1b;  /* Project section dark blue */
  --tf-cards-bg-color: #1f2937;
  --bs-white: #181a1b;              /* Redefine white as dark for Bootstrap-based classes */
  --bs-gray: #232a34;
  --bs-gray-100: #232a34;
  --bs-gray-200: #181c24;
  --bs-gray-500: #4fc3f7;
  --bs-blue: #4fc3f7;
}

/* Format social media icons */
.tf-social {
  display: inline-block;
  fill: var(--tf-icon-fill);
  height: 1.5em;
  vertical-align: -.1em;
  width: 1.5em;
  transition: 0.2s;
}

.tf-social:hover {
  fill: var(--tf-icon-hover);
}

body {
  background-color: var(--tf-page-bg-color);
  color: #e3eafc; /* Light blueish text */
}

a {
  color: var(--bs-link-color);
  text-decoration: none;
}

a:hover {
  color: var(--bs-link-hover-color);
}

/* Navbar adjustments for improved contrast */
.navbar, .navbar-brand, .navbar-brand-mobile {
  background: var(--tf-page-bg-color);
  color: #e3eafc;
}

/* Card footer dark background */
.card-footer {
  background-color: var(--tf-footer-bg-color);
  border-top-color: var(--tf-footer-bg-color);
}

/* Fix for light-colored cards in dark mode. */
.card {
  background-color: var(--tf-cards-bg-color);
}

.card-header, .card-footer {
  border-color: var(--tf-footer-bg-color);
}

.jumbotron {
  background-color: var(--tf-projects-bg-color);
}

/* Target text-muted within cards (existing rule) */
.card .text-muted {
  color: #adb5bd !important;
}

/* Specifically target the date class within cards */
.card .date {
  color: #adb5bd !important; /* Ensure consistency with text-muted */
}

/* Optional: Target small elements with date class */
.card small.date {
  color: #adb5bd !important;
}

/* Code block styles */
pre code.language-plaintext,
pre code.language-markdown {
  color: #c9d1d9;
  background-color: #1a1a1a;
  border-left: 0.25rem solid #4fc3f7;
}