/* light mode */
.light > * {
  background-color: var(--background-color) !important;
  color: var(--text-color) !important;
}

/* Fix for background color in test */
body.light {
  background-color: var(--background-color) !important;
}

body.dark {
  background-color: var(--background-color-dark) !important;
}

.light > #footer-socialNetworks-github-svg-path {
  fill: none;
}

/* Fix for social icons in dark/light modes */
/* Footer SVG icons */
body.light footer svg path,
body.light footer svg rect,
body.light footer svg circle {
  fill: #333;
}

body.light footer .px-1 a[aria-label="linkedin"] svg rect {
  fill: #0077b5; /* Keep LinkedIn's background blue */
}

body.light footer .px-1 a[aria-label="linkedin"] svg path,
body.light footer .px-1 a[aria-label="linkedin"] svg circle {
  fill: #fff; /* Keep LinkedIn's icons white */
}

/* Hero Font Awesome icons */
body.light #hero .social-icon {
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

body.dark #hero .social-icon {
  color: var(--primary-color-dark) !important;
  border-color: var(--primary-color-dark) !important;
}

/* dark mode */
.dark {
  --background-color: var(--background-color-dark) !important;
  --secondary-background-color: var(
    --secondary-background-color-dark
  ) !important;
  --text-color: var(--text-color-dark) !important;
  --text-secondary-color: var(--text-secondary-color-dark) !important;
  --text-link-color: var(--text-link-color-dark) !important;
  --primary-color: var(--primary-color-dark);
  --secondary-color: var(--secondary-color-dark);
}

/* Apply dark mode styles more forcefully */
.dark > * {
  /* background-color: var(--background-color) !important; */
  color: var(--text-color) !important;
}

/* Specific elements that need styling in dark mode */
body.dark .navbar,
body.dark .navbar-brand,
body.dark .nav-link,
body.dark .navbar-text,
body.dark #hero,
body.dark footer,
body.dark .card,
body.dark .card-body {
  /* background-color: var(--background-color) !important; */
  color: var(--text-color) !important;
}

body.dark h1,
body.dark h2,
body.dark h3,
body.dark p,
body.dark a:not(.btn) {
  color: var(--text-color) !important;
}

body.dark .text-secondary {
  color: var(--text-secondary-color) !important;
}

.dark #footer-socialNetworks-github-svg-path {
  fill: #ffffff;
}

.text-secondary {
  color: var(--text-secondary-color) !important;
}

#theme-toggle:focus {
  outline: 0;
}

#theme-toggle svg {
  height: 18px;
}

button#theme-toggle {
  border: none;
  font-size: 26px;
  margin: auto 4px;
}

body.dark #moon {
  vertical-align: middle;
  display: none;
}

body:not(.dark) #sun {
  display: none;
}

body *::selection {
  color: var(--text-color) !important;
  background-color: var(--primary-color) !important;
}

/* Add spacing between images in a figure */
figure img {
  margin: 5px; /* Adjust pixel value as needed */
  vertical-align: middle; /* Optional: Helps align images if they have different heights */
}

/* === Custom Portfolio Card Background Consistency (Dark Mode Override) === */
body.dark #projects .work-container.work-grid.card,
body.dark #projects .work-container.work-grid.card .card-body {
    background-color: var(--secondary-color-dark) !important;
    /* The theme's main rule body.dark .card-body sets 'color: var(--text-color) !important;' which correctly resolves to --text-color-dark */
}

body.dark #projects .work-container.work-grid.card .card-body > *,
body.dark #projects .work-container.work-grid.card .card-body * * { /* Grandchildren and beyond */
    background-color: transparent !important;
}

body.dark #projects .work-container.work-grid.card .card-body .card-title a,
body.dark #projects .work-container.work-grid.card .card-body .card-title a:hover {
    color: var(--text-color-dark) !important;
}
/* === End Custom Portfolio Card Background Consistency === */