/**
 * Core Navbar Styling System
 * This is the SINGLE SOURCE OF TRUTH for all navbar styling
 * No other CSS or JavaScript should modify these properties
 */

:root {
  /* Core Variables */
  --navbar-height: 90px;
  --navbar-height-mobile: 80px;
  --navbar-background: rgba(15, 2, 32, 0.95); /* Dark purple - correct color */
  --navbar-link-color: rgba(255, 255, 255, 0.9);
  --navbar-link-hover-color: #ffffff;
  --dropdown-background: rgba(15, 2, 32, 0.95);
  --dropdown-item-hover: rgba(255, 255, 255, 0.1);
}

/* Base Navbar Styling */
.navbar {
  z-index: 1100 !important; /* Ensure navbar stays above everything */
  background-color: var(--navbar-background) !important;
  min-height: var(--navbar-height) !important;
  padding-top: 15px !important;
  padding-bottom: 15px !important;
  border: none !important;
  border-bottom: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
}

/* Navbar Brand & Logo */
.navbar-brand {
  padding: 5px 0 !important;
}

.navbar-brand img.logo-img {
  max-height: 60px !important;
  height: auto !important;
}

/* Navbar Navigation Links */
.navbar-nav .nav-item {
  margin: 0 2px !important;
}

.navbar-nav .nav-link {
  color: var(--navbar-link-color) !important;
  padding: 0.5rem 1rem !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--navbar-link-hover-color) !important;
}

/* Dropdown Menus */
.dropdown-menu {
  background-color: var(--dropdown-background) !important;
  border: none !important;
  border-radius: 0.25rem !important;
  margin-top: 0.5rem !important;
  box-shadow: none !important;
}

.dropdown-item {
  color: var(--navbar-link-color) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--dropdown-item-hover) !important;
  color: var(--navbar-link-hover-color) !important;
}

/* Mobile Toggle Button */
.navbar-toggler {
  border: none !important;
  padding: 0.5rem !important;
  outline: none !important;
}

.navbar-toggler:focus {
  box-shadow: none !important;
}

/* Mobile Menu */
@media (max-width: 991.98px) {
  .navbar {
    min-height: var(--navbar-height-mobile) !important;
  }

  .navbar-collapse {
    position: absolute !important;
    top: var(--navbar-height-mobile) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background-color: var(--navbar-background) !important;
    padding: 1rem !important;
    z-index: 1000 !important;
    box-shadow: none !important;
    border: none !important;
  }

  .navbar-nav .dropdown-menu {
    background-color: var(--dropdown-background) !important;
    border: none !important;
    margin-top: 0 !important;
    padding: 0.5rem 0 !important;
  }

  .navbar-nav .nav-item {
    margin: 0.5rem 0 !important;
  }
}

/* Page-Specific Adjustments */
/* Only make these adjustments through CSS variables, not by overriding the core styles */

/* Home Page */
body.home-page {
  --navbar-height: 100px;
  --navbar-height-mobile: 90px;
}

/* Thank You Pages */
body.thank-you {
  --navbar-height: 90px;
  --navbar-height-mobile: 80px;
}

/* Override any specific Bootstrap classes */
.navbar.navbar-expand-lg,
.navbar.navbar-dark,
.navbar.navbar-light,
.navbar.bg-dark,
.navbar.bg-light,
.navbar.fixed-top {
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}