/**
 * Way2Better - Dynamic Navbar Theme Styles
 * Smooth 500ms light/dark theme transition for fixed/sticky floating navbar.
 */

/* Base Navbar (Dark Theme Default) */
.navbar,
header.navbar,
header.fixed {
  transition: background-color 0.5s ease,
              border-color 0.5s ease,
              box-shadow 0.5s ease,
              padding 0.4s ease,
              top 0.4s ease;
}

/* Nav links & interactive elements transition */
.navbar a,
.navbar button,
.navbar span:not(.text-gradient-premium),
.navbar nav a,
.navbar nav a span,
.navbar i {
  transition: color 0.5s ease,
              background-color 0.5s ease,
              border-color 0.5s ease,
              opacity 0.5s ease,
              transform 0.3s ease,
              box-shadow 0.5s ease;
}

/* Base Dark Theme (Over Dark Sections) */
.navbar {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}

.navbar.scrolled {
  background: rgba(5, 8, 5, 0.85);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* Light Theme Overrides (Over Light/White Sections) */
.navbar.light-nav,
header.fixed.light-nav {
  background: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.08) !important;
}

.navbar.scrolled.light-nav {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(15, 23, 42, 0.18) !important;
  box-shadow: 0 10px 35px -5px rgba(15, 23, 42, 0.12) !important;
}

/* Logo Text in Light Theme */
.navbar.light-nav a.group > span:first-of-type,
.navbar.light-nav a > span.text-slate-900 {
  color: #0f172a !important;
}

/* Navigation Links in Light Theme */
.navbar.light-nav nav a {
  color: #334155 !important; /* text-slate-700 */
}

.navbar.light-nav nav a:hover {
  color: #16382D !important;
  text-shadow: none !important;
}

/* Active Link & Active Indicator Underline in Light Theme */
.navbar.light-nav nav a.text-primary-300,
.navbar.light-nav nav a.font-black,
.navbar.light-nav nav a.active {
  color: #16382D !important;
}

.navbar.light-nav nav a span.bg-primary-300,
.navbar.light-nav nav a span.bg-primary-400 {
  background-color: #16382D !important;
}

/* Log In Link in Light Theme */
.navbar.light-nav a[href*="login"],
.navbar.light-nav .text-slate-400 {
  color: #334155 !important;
}

.navbar.light-nav a[href*="login"]:hover,
.navbar.light-nav .text-slate-400:hover {
  color: #0f172a !important;
  background-color: rgba(15, 23, 42, 0.05) !important;
}

/* Get Started CTA Button in Light Theme */
.navbar.light-nav .nav-btn-white,
.navbar.light-nav a[href*="register"] {
  background-color: #16382D !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(22, 56, 45, 0.25) !important;
}

.navbar.light-nav .nav-btn-white:hover,
.navbar.light-nav a[href*="register"]:hover {
  background-color: #0f271f !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(22, 56, 45, 0.35) !important;
}

/* Mobile Menu Toggle Button & Icon in Light Theme */
.navbar.light-nav #menu-toggle,
.navbar.light-nav button {
  color: #0f172a !important;
}

.navbar.light-nav #menu-toggle:hover,
.navbar.light-nav button:hover {
  background-color: rgba(15, 23, 42, 0.06) !important;
}