/* Layout styles for header and footer */

/* Header styles */
#header {
  background: transparent;
  border-bottom: none;
  transition: all 0.3s ease;
}

#header.scrolled {
  background: rgba(26, 31, 46, 0.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgb(31, 41, 55);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Navigation links */
.nav-link {
  position: relative;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(209, 213, 219);
  transition: color 0.2s;
}

.nav-link:hover {
  color: rgb(96, 165, 250);
}

.nav-link.active {
  color: rgb(96, 165, 250);
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  height: 2px;
  width: 0;
  background-color: rgb(59, 130, 246);
  transition: width 0.3s ease;
}

.nav-link.active::after {
  width: 100%;
}

.nav-link:hover::after {
  width: 100%;
}

/* Mobile navigation links */
.mobile-nav-link {
  display: block;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(209, 213, 219);
  transition: all 0.2s;
}

.mobile-nav-link:hover {
  background-color: rgb(31, 41, 55);
}

.mobile-nav-link.active {
  background-color: rgb(37, 99, 235);
  color: white;
}

/* Dropdown menu */
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: rgb(209, 213, 219);
  transition: all 0.2s;
  cursor: pointer;
}

.dropdown-item:hover {
  background-color: rgb(31, 41, 55);
  color: white;
}

/* Mobile menu animation */
@keyframes slideDownMenu {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 1000px;
  }
}

@keyframes slideUpMenu {
  from {
    opacity: 1;
    max-height: 1000px;
  }
  to {
    opacity: 0;
    max-height: 0;
  }
}

#mobileMenu.show {
  display: block;
  animation: slideDownMenu 0.3s ease-out forwards;
}

#mobileMenu.hide {
  animation: slideUpMenu 0.3s ease-out forwards;
}

/* Footer styles */
footer a {
  transition: color 0.2s;
}

footer a:hover {
  color: rgb(96, 165, 250);
}

/* Modal Animations */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.7);
  transition: opacity 0.2s ease-out;
}

.modal-enter {
  opacity: 1;
}

.modal-exit {
  opacity: 0;
}

.modal-enter-content {
  animation: modalSlideUp 0.3s ease-out forwards;
}

.modal-exit-content {
  animation: modalSlideDown 0.2s ease-in forwards;
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes modalSlideDown {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
}