/* ================================================
   WEDDING WEBSITE - NAVIGATION STYLES
   ================================================
   
   This file contains all navigation-related styles including:
   - Navbar basic styling and colors
   - Navigation links and branding
   - Mobile responsive navigation
   - Navbar toggler and collapse behavior
   - Mobile compact navigation styles
   
   Dependencies: Requires CSS variables from base.css
   ================================================ */

/* ================================================
   NAVBAR BASE STYLES
   ================================================ */

/* Override Bootstrap navbar with primary-blue background */
.navbar {
  background-color: var(--primary-blue) !important;
  border-bottom: 2px solid var(--dark-blue);
  padding-top: 0.25rem !important;   /* Further reduce top padding */
  padding-bottom: 0.25rem !important; /* Further reduce bottom padding */
  margin-bottom: 0 !important;        /* Remove bottom margin (overrides mb-4) */
  z-index: 1040; /* Higher than info-secondary-nav (1020) */
}



/* Navbar brand styling */
.navbar-brand {
  color: white !important;
  font-family: var(--fancy-font);
  font-size: 4rem;
  font-weight: 400;
  line-height: 0.9 !important;  /* Tighter line spacing */
  margin-bottom: 0 !important;  /* Remove any bottom margin */
}

.navbar-brand:hover,
.navbar-brand:focus {
  color: var(--cream) !important;
}

/* Navigation links */
.navbar-nav .nav-link {
  color: white !important;
  font-family: var(--font-decorative);
  font-weight: 500;
  padding: 0.5rem 1rem;
  transition: all 0.3s ease;
}

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

.navbar-nav .nav-link.active {
  color: var(--cream) !important;
  font-weight: 600;
}

/* ================================================
   DROPDOWN STYLES
   ================================================ */

/* Dropdown toggle */
.navbar-nav .dropdown-toggle {
  color: white !important;
}

.navbar-nav .dropdown-toggle:hover,
.navbar-nav .dropdown-toggle:focus {
  color: var(--cream) !important;
}

.navbar-nav .dropdown-toggle::after {
  border-top-color: white;
}

/* Dropdown menu */
.navbar-nav .dropdown-menu {
  background-color: white;
  border: 1px solid var(--light-blue);
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.navbar-nav .dropdown-item {
  color: var(--dark-blue);
  font-family: var(--font-body);
  padding: 0.5rem 1rem;
  transition: all 0.3s ease;
}

.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-item:focus {
  background-color: var(--light-blue);
  color: var(--dark-blue);
}

/* ================================================
   MOBILE NAVBAR TOGGLER
   ================================================ */

/* Navbar toggler (hamburger menu) */
.navbar-toggler {
  border: 2px solid white;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.3);
}

/* Custom hamburger icon for dark background */
.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%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ================================================
   MOBILE RESPONSIVE STYLES
   ================================================ */

/* Mobile navbar collapse */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background-color: var(--primary-blue);
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .navbar-nav {
    text-align: center;
  }

  .navbar-nav .nav-item {
    margin-bottom: 0.5rem;
  }

  .navbar-nav .nav-link {
    padding: 0.8rem 1.5rem;
    border-radius: 6px;
    margin: 0.2rem 0;
  }

  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link:focus {
    background-color: rgba(255, 255, 255, 0.15);
  }

  .navbar-nav .nav-link.active {
    background-color: rgba(255, 255, 255, 0.25);
  }

  /* Dropdown in mobile */
  .navbar-nav .dropdown-menu {
    background-color: rgba(255, 255, 255, 0.95);
    border: none;
    margin-top: 0.5rem;
  }

  .navbar-nav .dropdown-item {
    text-align: center;
    padding: 0.6rem 1rem;
  }
}

/* ================================================
   COMPACT MOBILE STYLES
   ================================================ */

@media (max-width: 576px) {
  /* Reduce navbar padding on small screens */
  .navbar {
    padding: 0.5rem 0;
  }

  .navbar .container {
    padding: 0 1rem;
  }

  .navbar-brand {
    font-size: 1.5rem;
  }

  .navbar-nav .nav-link {
    font-size: 0.95rem;
    padding: 0.7rem 1rem;
  }

  .navbar-collapse {
    margin-top: 0.8rem;
    padding: 0.8rem;
  }
}

/* ================================================
   ACCESSIBILITY & FOCUS STATES
   ================================================ */

/* Enhanced focus states for accessibility */
.navbar-nav .nav-link:focus,
.navbar-brand:focus,
.navbar-toggler:focus {
  outline: 2px solid var(--cream);
  outline-offset: 2px;
}

/* Ensure dropdown items are accessible */
.navbar-nav .dropdown-item:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: -2px;
}

/* ================================================
   SECONDARY NAVIGATION (Information Page)
   ================================================ */

#info-secondary-nav {
  position: sticky;
  top: 70px; /* Height of main navbar + padding (adjust based on actual navbar height) */
  z-index: 1020;
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
}

#info-secondary-nav .nav-link {
  color: var(--dark-blue);
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.6rem 0.8rem;
  transition: all 0.3s ease;
  border-radius: 6px;
}

#info-secondary-nav .nav-link:hover {
  background-color: var(--light-blue);
  color: var(--dark-blue);
}

#info-secondary-nav .nav-link:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: -2px;
}

@media (max-width: 768px) {
  #info-secondary-nav .nav {
    flex-wrap: wrap;
  }
  
  #info-secondary-nav .nav-link {
    font-size: 0.85rem;
    padding: 0.5rem 0.4rem;
  }
}