/* =========================================
   1. CUSTOM SCROLLBAR
   ========================================= */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #08080a;
}
::-webkit-scrollbar-thumb {
  background: #23232b;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #d4af37;
}

html:not(.dark) ::-webkit-scrollbar-track {
  background: #f8f9fa;
}
html:not(.dark) ::-webkit-scrollbar-thumb {
  background: #d1d5db;
}

/* =========================================
   2. UTILITIES
   ========================================= */
.vertical-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.nav-link.active {
  color: #d4af37 !important;
}
.nav-link.active span {
  width: 100%;
}

/* =========================================
   3. HERO SECTION BACKGROUND (DARK MODE)
   ========================================= */
.hero-bg-img {
  filter: brightness(1.15) contrast(1.1);
}

.hero-gradient-overlay {
  background: linear-gradient(
    to right, 
    #08080a 0%, 
    rgba(8, 8, 10, 0.85) 30%, 
    rgba(8, 8, 10, 0.2) 70%, 
    transparent 100%
  );
}

@media (max-width: 767px) {
  .hero-gradient-overlay {
    background: linear-gradient(
      to top, 
      #08080a 0%, 
      rgba(8, 8, 10, 0.8) 40%, 
      transparent 100%
    );
  }
}

/* =========================================
   4. LIGHT MODE OVERRIDES (THE FIX)
   ========================================= */
/* When 'dark' class is removed, apply these colors */

html:not(.dark) body {
  background-color: #f8f9fa !important;
  color: #111827 !important;
}

/* Main Section Backgrounds */
html:not(.dark) section,
html:not(.dark) footer,
html:not(.dark) header {
  background-color: #f8f9fa !important;
  border-color: #e5e7eb !important;
}

html:not(.dark) .bg-\[\#0b0b0f\],
html:not(.dark) .bg-\[\#121217\],
html:not(.dark) .bg-\[\#050507\],
html:not(.dark) .bg-\[\#111116\] {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
}

/* Text Colors */
html:not(.dark) .text-white,
html:not(.dark) .text-gray-200,
html:not(.dark) .text-gray-300 {
  color: #111827 !important;
}

html:not(.dark) .text-gray-400,
html:not(.dark) .text-gray-500 {
  color: #4b5563 !important;
}

/* Borders & UI Elements */
html:not(.dark) .border-white\/5,
html:not(.dark) .border-white\/10,
html:not(.dark) .border-white\/20 {
  border-color: #e5e7eb !important;
}

html:not(.dark) .bg-white\/5,
html:not(.dark) .bg-white\/10,
html:not(.dark) .bg-white\/\[0\.02\],
html:not(.dark) .bg-white\/\[0\.04\] {
  background-color: #f3f4f6 !important;
}

/* Fix Inputs */
html:not(.dark) input,
html:not(.dark) textarea,
html:not(.dark) select {
  background-color: #f9fafb !important;
  color: #111827 !important;
  border-color: #d1d5db !important;
}

/* Fix Hero Gradient for Light Mode */
html:not(.dark) .hero-gradient-overlay {
  background: linear-gradient(
    to right, 
    #f8f9fa 0%, 
    rgba(248, 249, 250, 0.85) 30%, 
    rgba(248, 249, 250, 0.2) 70%, 
    transparent 100%
  ) !important;
}

@media (max-width: 767px) {
  html:not(.dark) .hero-gradient-overlay {
    background: linear-gradient(
      to top, 
      #f8f9fa 0%, 
      rgba(248, 249, 250, 0.8) 40%, 
      transparent 100%
    ) !important;
  }
}

/* Fix Logo text for Light Mode */
html:not(.dark) header span {
  color: #111827 !important;
}
html:not(.dark) header .text-\[\#d4af37\] {
  color: #c59b27 !important;
}