/* ===============================================
   HEADER.CSS - Navigation & Header Styling
   =============================================== */

/* Navigation Bar Enhancements */
.navbar {
  background: linear-gradient(135deg, var(--color-blue-darkest), var(--color-blue-darker));
  border-bottom: 3px solid var(--color-blue-medium);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: var(--space-xs) 0;
}

.navbar-brand {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 400;
  font-style: oblique;
  font-size: 1.5rem;
  color: var(--color-yellow-light);
  text-shadow: 1px 1px 2px rgba(6, 41, 67, 0.8);
  transition: all var(--transition-normal);
  padding: var(--space-xs) var(--space-sm);
  margin-right: var(--space-md);
}

.navbar-brand:hover {
  color: var(--color-yellow-medium);
  transform: scale(1.05);
  text-shadow: 1px 1px 3px rgba(6, 41, 67, 0.9);
}

/* Navigation Links */
.navbar-nav .nav-link {
  color: var(--color-blue-light);
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 1.25rem;
  padding: var(--space-xs) var(--space-sm);
  margin: 0 var(--space-xxs);
  border-radius: var(--border-radius-sm);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.navbar-nav .nav-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(117, 148, 172, 0.2), transparent);
  transition: left 0.5s ease;
}

.navbar-nav .nav-link:hover::before {
  left: 100%;
}

.navbar-nav .nav-link:hover {
  color: var(--color-yellow-light);
  background-color: rgba(117, 148, 172, 0.1);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.navbar-nav .nav-link.active {
  color: var(--color-yellow-medium);
  background-color: rgba(222, 173, 108, 0.2);
  border: 1px solid var(--color-yellow-medium);
}

/* Search Button - Desktop */
.btn-outline-light {
  color: var(--color-blue-light);
  border-color: var(--color-blue-medium);
  background: linear-gradient(135deg, rgba(117, 148, 172, 0.1), rgba(74, 113, 143, 0.1));
  transition: all var(--transition-normal);
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 1rem;
  border-radius: var(--border-radius-md);
  padding: var(--space-xs) var(--space-sm);
  margin-left: var(--space-md);
}

.btn-outline-light:hover {
  color: var(--color-yellow-light);
  border-color: var(--color-yellow-medium);
  background: linear-gradient(135deg, rgba(117, 148, 172, 0.1), rgba(74, 152, 119, 0.1));
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-outline-light i {
  margin-right: 0.5rem;
  transition: transform 0.3s ease;
}

.btn-outline-light:hover i {
  transform: scale(1.1);
}

/* Navbar Toggler */
.navbar-toggler {
  border: 2px solid var(--color-blue-medium);
  border-radius: var(--border-radius-sm);
  padding: var(--space-xs);
  margin-left: var(--space-sm);
  transition: all var(--transition-normal);
  z-index: 1052; /* Highest z-index for toggler */
  position: relative;
}

.navbar-toggler:hover {
  border-color: var(--color-yellow-medium);
  background-color: rgba(222, 173, 108, 0.1);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(117, 148, 172, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

/* Mobile Navigation */
@media (max-width: 991.98px) {
  .navbar {
    z-index: 1050; /* Higher than animation container */
  }
  
  .navbar-collapse {
    background: linear-gradient(135deg, var(--color-blue-darkest), var(--color-blue-darker));
    border-radius: 0 0 12px 12px;
    border: 1px solid var(--color-blue-medium);
    border-top: none;
    box-shadow: 0 4px 20px rgba(6, 41, 67, 0.4);
    margin-top: var(--space-sm);
    padding: var(--space-sm) 0 var(--space-lg) 0; /* Extra bottom padding for search button */
    z-index: 1051; /* Even higher for collapsed menu */
    position: relative;
    max-height: 90vh; /* Ensure it doesn't exceed viewport */
    overflow-y: auto; /* Allow scrolling if content is too tall */
  }

  .navbar-nav {
    text-align: center;
    padding: var(--space-xs) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--space-sm); /* Space before search button */
  }

  .navbar-nav .nav-link {
    margin: var(--space-xxs) 0;
    padding: var(--space-sm) var(--space-sm);
    border-radius: var(--border-radius-md);
  }

  .navbar-nav .nav-link:hover {
    transform: translateX(5px);
  }

  /* Mobile Search Button Container - Fixed positioning */
  .navbar-collapse .nav-item:last-child {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: var(--space-md);
    padding: var(--space-sm) var(--space-lg) var(--space-sm) var(--space-lg);
    position: sticky;
    bottom: 0;
    background: transparent; /* Remove gradient background */
    border-top: none; /* Remove border */
    z-index: 1052; /* Ensure search button stays on top */
  }

  /* Mobile Search Button Alignment */
  .navbar-collapse .btn-outline-light {
    margin-left: 0 !important;
    margin-top: 0;
    align-self: center;
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    padding: var(--space-sm) var(--space-md);
    position: relative;
    z-index: 1053; /* Highest z-index for search button */
    /* Match nav-link styling for consistency */
    color: var(--color-blue-light);
    border-color: var(--color-blue-medium);
    background: linear-gradient(135deg, rgba(117, 148, 172, 0.1), rgba(74, 113, 143, 0.1));
    border-radius: var(--border-radius-md);
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.25rem; /* Match nav-link font size */
    transition: all var(--transition-normal);
  }

  /* Mobile Search Button Hover - Match nav-link hover */
  .navbar-collapse .btn-outline-light:hover {
    color: var(--color-yellow-light);
    border-color: var(--color-yellow-medium);
    background: linear-gradient(135deg, rgba(117, 148, 172, 0.1), rgba(74, 152, 119, 0.1));
    transform: translateX(5px); /* Match nav-link hover transform */
    box-shadow: var(--shadow-md);
  }
}

/* Extra small screens - additional spacing */
@media (max-width: 576px) {
  .navbar-collapse .nav-item:last-child {
    padding: 0 var(--space-md);
  }
  
  .navbar-collapse .btn-outline-light {
    min-width: 100px;
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.9rem;
  }
}

/* Focus States for Accessibility */
.navbar-brand:focus,
.navbar-nav .nav-link:focus,
.btn-outline-light:focus {
  outline: 2px solid var(--color-yellow-medium);
  outline-offset: 3px;
}

/* Loading State */
.navbar.loading {
  opacity: 0.8;
}

.navbar.loading .navbar-brand,
.navbar.loading .nav-link,
.navbar.loading .btn {
  pointer-events: none;
}

/* Animation Classes */
.navbar.fade-in {
  animation: fadeInDown 0.6s ease-out;
}

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

/* Sticky Navigation */
.navbar.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1030;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Scroll Indicator */
.scroll-indicator {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--color-yellow-medium), var(--color-blue-medium), var(--color-green-medium));
  transform-origin: left;
  z-index: 1031;
}

/* Typography rules are handled by typography.css */
/* This section removed to avoid redundancy and follow CSS Guidelines */