/* 
==============================================
THEME FIXES - CENTIMANE
==============================================

This file contains explicit image and color settings for light/dark modes.
Each scenario needs its own specific image with appropriate coloring.
*/

/* 
==============================================
LOGO SPECIFICATIONS FOR ALL CONTEXTS
==============================================
*/

/* LIGHT MODE */
/* Navbar logo in light mode (black on white/transparent) */
#navbar .logo img {
  content: url('../assets/images/logo/BNC.png');
}

/* Hero section logo in light mode (white on black background) */
#hero .hero-logo img {
  content: url('../assets/images/logo/WCropped.png');
}

/* Footer logo in light mode (white on black background) */
footer .footer-logo img {
  content: url('../assets/images/logo/WCropped.png');
}

/* DARK MODE */
/* Navbar logo in dark mode (white on dark background) */
[data-theme="dark"] #navbar .logo img {
  content: url('../assets/images/logo/WNC.png');
}

/* Hero section logo in dark mode (still white on black) */
[data-theme="dark"] #hero .hero-logo img {
  content: url('../assets/images/logo/BCropped.png');
}

/* Footer logo in dark mode (black on light background) */
[data-theme="dark"] footer .footer-logo img {
  content: url('../assets/images/logo/BCropped.png');
}

/* Scrolled navbar logo in light mode */
#navbar.scrolled .logo img {
  content: url('../assets/images/logo/BNC.png');
}

/* Scrolled navbar logo in dark mode */
[data-theme="dark"] #navbar.scrolled .logo img {
  content: url('../assets/images/logo/WNC.png');
}

/* 
==============================================
NAVBAR TEXT COLORS
==============================================
*/

/* Light mode: navbar on transparent/hero - text should be white for visibility on dark hero */
#navbar .nav-links li a {
  color: var(--light);
}

#navbar .nav-links li a::after {
  background-color: var(--light);
}

/* Light mode: scrolled navbar - text should be black */
#navbar.scrolled .nav-links li a {
  color: var(--dark);
}

#navbar.scrolled .nav-links li a::after {
  background-color: var(--primary);
}

/* Dark mode: navbar on transparent/hero - text should be white for visibility on dark hero */
[data-theme="dark"] #navbar .nav-links li a {
  color: var(--light);
}

[data-theme="dark"] #navbar .nav-links li a::after {
  background-color: var(--light);
}

/* Dark mode: scrolled navbar - text should remain white for contrast against dark background */
[data-theme="dark"] #navbar.scrolled .nav-links li a {
  color: var(--light);
}

[data-theme="dark"] #navbar.scrolled .nav-links li a::after {
  background-color: var(--light);
}

/* Mobile menu button colors */
.mobile-menu-btn {
  color: var(--light);
}

#navbar.scrolled .mobile-menu-btn {
  color: var(--dark);
}

[data-theme="dark"] #navbar.scrolled .mobile-menu-btn {
  color: var(--light);
}

/* 
==============================================
OTHER COLOR FIXES
==============================================
*/

/* Tech-tag colors with better contrast */
.tech-tag {
  background-color: #f0f0f0;
  color: #111111 !important;
}

[data-theme="dark"] .tech-tag {
  background-color: #333333;
  color: #cccccc !important;
}

/* Dark mode footer with light background and dark text */
[data-theme="dark"] footer {
  background-color: #f5f5f5;
  color: #000000;
}

[data-theme="dark"] footer h1,
[data-theme="dark"] footer h2,
[data-theme="dark"] footer h3,
[data-theme="dark"] footer h4,
[data-theme="dark"] footer h5,
[data-theme="dark"] footer h6,
[data-theme="dark"] footer p,
[data-theme="dark"] footer span,
[data-theme="dark"] footer div,
[data-theme="dark"] .footer-title,
[data-theme="dark"] .footer-desc {
  color: #000000;
}

/* Footer links in dark mode */
[data-theme="dark"] .footer-links li a {
  color: #000000;
}

[data-theme="dark"] .footer-links li a:hover {
  color: #333333;
}

/* Social icons in dark mode footer */
[data-theme="dark"] .social-icon {
  color: #000000;
  background-color: rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .social-icon:hover {
  background-color: rgba(0, 0, 0, 0.2);
  color: #000000;
}

/* 
==============================================
CASE STUDY VISUALIZATIONS - DARK MODE INVERSION
==============================================
*/

/* Invert case study visualizations in dark mode for better contrast */
[data-theme="dark"] .case-interactive {
  filter: invert(1) hue-rotate(180deg) brightness(1.3) contrast(0.9);
  background-color: #f0f0f0;
}

/* Target visualization labels and make them lighter in dark mode */
[data-theme="dark"] .case-interactive text,
[data-theme="dark"] .case-interactive tspan,
[data-theme="dark"] .case-interactive .label,
[data-theme="dark"] .case-interactive .legend-item,
[data-theme="dark"] .case-interactive .title,
[data-theme="dark"] .case-interactive .axis-label,
[data-theme="dark"] .case-interactive .tick text {
  fill: #ffffff !important;
  color: #ffffff !important;
  opacity: 0.9 !important;
}

/* Additional direct targeting for specific visualization labels */
[data-theme="dark"] #project-management-viz text,
[data-theme="dark"] #financial-reporting-viz text,
[data-theme="dark"] #supply-chain-viz text {
  fill: white !important;
  font-weight: 500 !important;
  text-shadow: 0 0 2px rgba(0,0,0,0.3) !important;
}

/* Also adjust case study cards and stats for dark mode */
[data-theme="dark"] .case-card {
  background-color: #f5f5f5;
}

[data-theme="dark"] .case-header {
  background-color: #e0e0e0;
}

/* Light mode case study title */
.case-study-title {
  color: #000000;
}

/* Dark mode case study title - white */
[data-theme="dark"] .case-study-title {
  color: #ffffff;
}

[data-theme="dark"] .case-title,
[data-theme="dark"] .case-icon,
[data-theme="dark"] .case-stat-value {
  color: #000000;
}

[data-theme="dark"] .case-desc,
[data-theme="dark"] .case-stat-label,
[data-theme="dark"] .case-study-description p,
[data-theme="dark"] .case-study-client,
[data-theme="dark"] .metric-label {
  color: #cccccc;
}

[data-theme="dark"] .metric-value {
  color: #ffffff;
}