/* Dark Rose Theme: black background, dark gray surfaces, white text, pink accents */
/* Fonts */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700|Source+Code+Pro:300,400,500,700");
@import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,700");

/* =========================
   Palette & Bootstrap variable overrides
   ========================= */
:root {
  /* Core palette */
  --tf-bg: #0b0b0c;           /* page background (near-black) */
  --tf-surface: #1a1a1d;      /* cards/nav/footer */
  --tf-surface-2: #242429;    /* inputs, secondary panels */
  --tf-border: #2e2e34;       /* subtle borders/dividers */
  --tf-text: #f5f5f7;         /* primary text (white-ish) */
  --tf-muted: #b8b8bf;        /* secondary text */
  --tf-pink: #f5bada;         /* accent (soft pink) */
  --tf-pink-2: #ff99b8;       /* hover/active */
  --tf-focus: rgba(255, 122, 162, 0.35); /* focus ring */

  /* Typography */
--bs-font-sans-serif: "Lato", sans-serif;

  /* Bootstrap globals */
  --bs-body-bg: var(--tf-bg);
  --bs-body-color: var(--tf-text);
  --bs-link-color: var(--tf-pink);
  --bs-link-hover-color: var(--tf-pink-2);
  --bs-border-color: var(--tf-border);
  --bs-heading-color: var(--tf-text);
  --bs-secondary-color: var(--tf-muted);

  /* Disable Bootstrap gradients globally */
  --bs-gradient: none;

  /* Custom tokens */
  --tf-pill-bg: var(--tf-pink);
  --tf-icon-fill: var(--tf-text);
  --tf-icon-hover: var(--tf-pink);
  --tf-page-bg-color: var(--tf-bg);
  --tf-footer-bg-color: var(--tf-surface);
  --tf-projects-bg-color: var(--tf-surface);
}

/* =========================
   Base
   ========================= */
/* Typography overrides */
body {
  font-family: "Lato", sans-serif;   /* body = Lato */
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Playfair Display", serif;  /* headings = Playfair */
  font-weight: 600; /* makes headings bold but elegant */
}

/* Links */
a {
  color: var(--bs-link-color);
  text-decoration: none;
}
a:hover, a:focus {
  color: var(--bs-link-hover-color);
  text-decoration: none;
  outline: none;
}

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--tf-pink);
  outline-offset: 2px;
}

/* =========================
   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); }

/* =========================
   Navbar / Footer
   ========================= */
.navbar, .navbar-nav .dropdown-menu {
  background-color: var(--tf-surface) !important;
  background-image: none !important;
}
.navbar .nav-link { color: var(--tf-text) !important; }
.navbar .nav-link:hover { color: var(--tf-pink-2) !important; }

footer, .site-footer {
  background-color: var(--tf-footer-bg-color);
  background-image: none !important;
  color: var(--tf-muted);
  border-top: 1px solid var(--tf-border);
}


/* =========================
   Cards & common surfaces
   ========================= */
.card, .list-group-item, .dropdown-menu, .modal-content,
.offcanvas, .toast {
  background-color: var(--tf-surface);
  background-image: none !important;
  color: var(--tf-text);
  border: 1px solid var(--tf-border);
}
.card .card-subtitle, .list-group-item small { color: var(--tf-muted); }

/* Remove any lingering “overlay” gradients */
.card, .card-header, .card-footer {
  background-image: none !important;
  background-color: var(--tf-surface) !important;
}

/* Rule */
hr { border-top: 1px solid var(--tf-border); opacity: 1; }

/* =========================
   Forms
   ========================= */
.form-control, .form-select, .input-group-text, .form-check-input {
  background-color: var(--tf-surface-2);
  color: var(--tf-text);
  border: 1px solid var(--tf-border);
  background-image: none !important;
  box-shadow: none;
}
.form-control::placeholder { color: var(--tf-muted); }
.form-control:focus, .form-select:focus {
  background-color: var(--tf-surface-2);
  color: var(--tf-text);
  border-color: var(--tf-pink);
  box-shadow: 0 0 0 .25rem var(--tf-focus);
}
.form-check-input:checked {
  background-color: var(--tf-pink);
  border-color: var(--tf-pink);
}


/* =========================
   Buttons
   ========================= */
/* Remove gradients/shadows on all buttons */
.btn, .btn:focus {
  background-image: none !important;
  box-shadow: none;
}

/* Primary stays pink (for CTAs) */
.btn-primary {
  background-color: var(--tf-pink);
  border-color: var(--tf-pink);
  color: #0b0b0c;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--tf-pink-2);
  border-color: var(--tf-pink-2);
  color: #0b0b0c;
}

/* “Read more” style: white by default, pink on hover
   (common variants used by Techfolios cards) */
.btn-secondary,
.btn-outline-secondary,
.btn-light,
.btn-outline-light {
  background-color: #ffffff;
  color: #0b0b0c;
  border-color: #ffffff;
}
.btn-secondary:hover, .btn-secondary:focus,
.btn-outline-secondary:hover, .btn-outline-secondary:focus,
.btn-light:hover, .btn-light:focus,
.btn-outline-light:hover, .btn-outline-light:focus {
  background-color: var(--tf-pink);
  border-color: var(--tf-pink);
  color: #0b0b0c;
}

/* If “Read more” uses .btn-link, make it a real pill button */
.btn-link {
  color: #0b0b0c;
  background-color: #ffffff;
  border: 1px solid #ffffff;
  padding: .375rem .75rem;
  border-radius: .375rem;
  text-decoration: none;
}
.btn-link:hover, .btn-link:focus {
  color: #0b0b0c;
  background-color: var(--tf-pink);
  border-color: var(--tf-pink);
  text-decoration: none;
}

/* Outline primary for optional usage */
.btn-outline-primary {
  color: var(--tf-pink);
  border-color: var(--tf-pink);
  background: transparent;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  color: #0b0b0c;
  background-color: var(--tf-pink);
  border-color: var(--tf-pink);
}

/* Extra contrast for borders on dark bg */
.btn, .card, .form-control {
  border-color: var(--tf-border);
}

/* =========================
   Badges / Pills
   ========================= */
.badge, .nav-pills .nav-link.active {
  background-color: var(--tf-pill-bg);
  color: #0b0b0c;
}

/* =========================
   Tables
   ========================= */
.table {
  --bs-table-bg: var(--tf-surface);
  --bs-table-color: var(--tf-text);
  --bs-table-border-color: var(--tf-border);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: var(--tf-surface-2);
}

/* =========================
   Images
   ========================= */
.rounded-circle {
  border-color: var(--tf-pink);
  border-style: solid;
  border-width: 1px;
}

/* =========================
   Code blocks
   ========================= */
pre, code, kbd, samp {
  color: var(--tf-text);
}
pre, code {
  background-color: var(--tf-surface-2);
  border: 1px solid var(--tf-border);
}

/* =========================
   Kill gradients everywhere (belt & suspenders)
   ========================= */
.bg-gradient,
.btn,
.navbar,
.card,
footer,
.site-footer {
  background-image: none !important;
}

/* =========================
   Mobile tweaks
   ========================= */
@media (max-width: 500px) {
  .navbar-brand { display: none; }
  .navbar-brand-mobile { display: inline; }
}

/* Read More button overrides */
.btn-outline-dark {
  background-color: #575757;       /* white background */
  color: #ffffff;                  /* dark text */
  border: 1px solid #ffffff;
  background-image: none !important;
}

.btn-outline-dark:hover,
.btn-outline-dark:focus {
  background-color: var(--tf-pink);   /* pink hover */
  border-color: var(--tf-pink);
  color: #0b0b0c;                     /* readable on pink */
  background-image: none !important;
}

/* ==== HARD OVERRIDES FOR NAVBAR USING .navbar-light .bg-light ==== */
/* Force dark background and white text */
.navbar.navbar-light.bg-light {
  background-color: var(--tf-surface) !important;
  color: var(--tf-text) !important;
  background-image: none !important;
}

/* Brand (site title): white -> pink hover */
.navbar-light .navbar-brand {
  color: #ffffff !important;
  text-decoration: none;
}
.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:focus {
  color: var(--tf-pink) !important;
  text-decoration: none;
}

/* Nav links: white -> pink hover/active */
.navbar-light .navbar-nav .nav-link {
  color: #ffffff !important;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: var(--tf-pink-2) !important;
}
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show > .nav-link {
  color: var(--tf-pink) !important;
}

/* Also neutralize any global .bg-light elsewhere */
.bg-light {
  background-color: var(--tf-surface) !important;
  color: var(--tf-text) !important;
  background-image: none !important;
}

/* Toggler (hamburger) visible on dark bg */
.navbar .navbar-toggler { border-color: var(--tf-border) !important; }
.navbar .navbar-toggler-icon { filter: invert(1) !important; }

/* Only the inner container dark */
html body #essays {
  background-image: none !important;
}
html body #essays > .container {
  background-color: var(--tf-surface) !important;
  color: var(--tf-text);
  border: 1px solid var(--tf-border);
  border-radius: .5rem;
  padding: 1rem;
}

.text-muted {
  --bs-text-opacity: 1;
  color: #d3d3d3 !important; /* light grey */
}

small.text-muted {
  color: #d3d3d3 !important; /* ensures <small> tags are also caught */
}