/* Navbar Custom Styles */

/* Mega dropdown styling */
.mega-dropdown {
  min-width: 600px;
  padding: 1.25rem;
}

/* Add more spacing between mega-dropdown columns */
.mega-dropdown .col-md-6 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

@media (max-width: 768px) {
  .mega-dropdown {
    min-width: auto;
  }

  .mega-dropdown .border-end {
    border-right: none !important;
  }
}

/* Dropdown item states */
.dropdown-item:hover {
  background-color: var(--surface-light);
}

.dropdown-item:active,
.dropdown-item:focus {
  background-color: var(--color-navy-deep);
  color: var(--text-inverse);
}

/* Prevent nav links flashing white on click — gold flash on active */
header#header .navbar-nav .nav-link:active,
#header .navbar-nav .nav-link:active,
#header.scrolled .navbar-nav .nav-link:active,
header#header.scrolled .navbar-nav .nav-link:active {
  color: var(--color-gold) !important;
  transition: none !important;
}

/* Navbar spacing */
.navbar-nav .nav-link {
  padding: 0.5rem 1rem;
}

.navbar-nav .dropdown-menu {
  margin-top: 0.5rem;
}

/* Active link styling */
.navbar-nav .nav-link.active {
  color: var(--color-navy-light) !important;
  font-weight: var(--font-weight-medium);
}

/* Dropdown header styling */
.dropdown-header {
  font-size: 0.875rem;
  font-weight: 600;
  color: #6c757d;
  padding: 0.5rem 1rem;
}

/* Button in navbar - vertically aligned with nav links */
.navbar-nav .btn {
  margin-top: 0;
  margin-bottom: 0;
  align-self: center;
}

/* Ensure all nav items are vertically centered */
.navbar-nav {
  align-items: center;
}

@media (max-width: 768px) {
  .navbar-nav .btn {
    margin-top: 1rem;
    width: 100%;
  }
}

/* ========== Navbar Scroll States ========== */

/* Initial state: Fully transparent, no blur, white text */
#header {
  background-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
  transition: backdrop-filter 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  position: fixed !important; /* Force fixed positioning */
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000; /* Ensure navbar stays on top of gradient */
  width: 100% !important;
}

/* Hamburger icon - white when navbar is transparent */
#header .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  transition: background-image 0.3s ease;
}

/* iOS-style gradient bottom edge (hidden initially) */
#header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Landing page state: Dark navy background with white text */
#header.landing-page-nav {
  background-color: var(--color-navy-deep) !important;
  box-shadow: var(--shadow-navbar) !important;
  backdrop-filter: none;
}

#header.landing-page-nav::after {
  opacity: 0;
}

/* Landing page navbar - white text and logo */
#header.landing-page-nav .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 1) !important;
  text-shadow: none !important;
}

#header.landing-page-nav .navbar-nav .nav-link:hover {
  color: rgba(255, 255, 255, 0.8) !important;
}

#header.landing-page-nav .navbar-brand .logo-white {
  display: block !important;
  opacity: 1 !important;
}

#header.landing-page-nav .navbar-brand .logo-black {
  display: none !important;
  opacity: 0 !important;
}

/* Landing page hamburger - white icon on dark background */
#header.landing-page-nav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Scrolled state: Glass effect with blur - VISIBLE CHANGE FOR DEBUGGING */
#header.scrolled {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background-color: rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
  border-bottom: 2px solid rgba(0, 29, 61, 0.1) !important; /* DEBUG: Visual indicator */
}

#header.scrolled::after {
  opacity: 1;
}

/* Hamburger icon - dark grey when navbar has white background */
#header.scrolled .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(52, 58, 64, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Initial state: White text for visibility on gradient */
header#header .navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link,
#header .nav-link {
  color: var(--text-inverse) !important;
  transition: color var(--transition-slow) !important;
  font-weight: var(--font-weight-medium) !important;
}

header#header .navbar-nav .nav-link:hover,
header#header .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: var(--text-inverse) !important;
}

/* Scrolled state: Dark text on white background */
header#header.scrolled.navbar .navbar-light .navbar-nav .nav-link,
#header.scrolled .navbar-nav .nav-link,
.navbar.scrolled .nav-link {
  color: var(--color-navy-deep) !important;
  transition: color var(--transition-slow);
}

header#header.scrolled.navbar .navbar-light .navbar-nav .nav-link:hover,
header#header.scrolled.navbar .navbar-light .navbar-nav .nav-link:focus,
#header.scrolled .navbar-nav .nav-link:hover,
#header.scrolled .navbar-nav .nav-link:focus {
  color: var(--text-primary) !important;
}

/* Logo swap on scroll */
.navbar-brand .logo-white {
  display: block;
  opacity: 1;
  transition: opacity 0.4s ease;
}

.navbar-brand .logo-black {
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

header#header.scrolled .navbar-brand .logo-white {
  display: none;
  opacity: 0;
}

header#header.scrolled .navbar-brand .logo-black {
  display: block;
  opacity: 1;
}

/* Dropdown menus stay white background */
.dropdown-menu {
  background-color: #ffffff;
}

.dropdown-item {
  color: var(--color-navy-deep);
}

/* Navbar button styling */
.navbar .btn-primary {
  background-color: var(--color-yellow) !important;
  border-color: var(--color-yellow) !important;
  color: var(--color-navy-deep) !important;
  transition: transform var(--transition-normal);
}

.navbar .btn-primary:hover {
  transform: translateY(-1px);
}

/* No body padding - hero goes full, navbar overlays */
body {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Ensure main content starts at absolute top for navbar overlay */
main#content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ========== Stripe-like Navbar Animations ========== */
/* Desktop only - let Bootstrap handle mobile accordion naturally */

@media (min-width: 769px) {
  /* Smooth transitions for dropdown menus */
  .navbar-nav .dropdown-menu {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, width 0.3s ease, height 0.3s ease;
    pointer-events: none;
    display: block !important; /* Keep in DOM for transitions */
  }

  .navbar-nav .dropdown-menu.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Triangle/arrow indicator pointing to parent */
  .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -8px;
    left: var(--triangle-position, 20px);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #fff;
    filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.05));
    transition: left 0.3s ease, right 0.3s ease;
    z-index: 1001;
  }

  /* Position triangle for right-aligned dropdowns (uses dynamic positioning from right) */
  .dropdown-menu-end::before {
    left: auto;
    right: var(--triangle-position-right, 20px);
  }

  /* Smooth content transitions */
  .dropdown-menu .dropdown-item,
  .dropdown-menu .dropdown-header {
    transition: background-color 0.15s ease, padding 0.15s ease;
  }

  /* Hover state with smooth transition */
  .dropdown-item:hover {
    background-color: #f8f9fa;
    padding-left: 1.25rem;
  }

  /* Active dropdown parent indicator */
  .nav-item.dropdown:hover > .nav-link,
  .nav-item.dropdown.show > .nav-link {
    color: var(--color-navy-light);
    transition: color var(--transition-normal);
  }

  /* Ensure smooth height transitions for mega dropdown */
  .mega-dropdown .row {
    transition: opacity 0.2s ease;
  }

  /* Animation for dropdown content fade */
  .dropdown-menu.show .dropdown-item,
  .dropdown-menu.show .dropdown-header {
    animation: fadeInUp 0.3s ease forwards;
    opacity: 0;
  }

  .dropdown-menu.show .dropdown-item:nth-child(1),
  .dropdown-menu.show .dropdown-header:nth-child(1) { animation-delay: 0.05s; }
  .dropdown-menu.show .dropdown-item:nth-child(2),
  .dropdown-menu.show .dropdown-header:nth-child(2) { animation-delay: 0.08s; }
  .dropdown-menu.show .dropdown-item:nth-child(3) { animation-delay: 0.11s; }
  .dropdown-menu.show .dropdown-item:nth-child(4) { animation-delay: 0.14s; }
  .dropdown-menu.show .dropdown-item:nth-child(5) { animation-delay: 0.17s; }
  .dropdown-menu.show .dropdown-item:nth-child(6) { animation-delay: 0.20s; }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(-5px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* ========== Critical Override for Fixed Navbar Overlay ========== */
/* Prevent Bootstrap from adding padding-top to body with .fixed-top navbar */
body.has-navbar-fixed-top,
body {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Ensure hero section starts at absolute top of viewport */
.hero-section:first-child,
main > .hero-section:first-child,
#content > .hero-section:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Make sure navbar is truly overlaying, not pushing content */
.navbar.fixed-top {
  position: fixed !important;
  top: 0 !important;
  z-index: 1000 !important;
}