/* Estilos generales para el contenedor principal de la navegación */
.main-nav {
  background-color: var(--secondary-black); /* Fondo de la barra de navegación: Negro */
  padding: 10px 20px;    /* Espaciado interno superior/inferior de 10px y lateral de 20px */
  display: flex;         /* Usa Flexbox para organizar los elementos hijos (logo, botón, lista) */
  justify-content: flex-start; /* Alinea los elementos al inicio (izquierda) del contenedor flex */
  align-items: center;   /* Alinea los elementos verticalmente al centro del contenedor */
  flex-wrap: wrap;       /* Permite que los elementos se envuelvan a la siguiente línea si no hay espacio */
  position: relative;    /* Establece un contexto de posicionamiento para posibles elementos absolutos */
}

/* Estilos del contenedor del logo */
.logo-container {
  margin-right: 20px; /* Agrega un margen de 20px a la derecha del logo para separarlo */
  display: flex;       /* Usa Flexbox para el contenedor del logo (por si se necesita centrar el img) */
  align-items: center; /* Alinea el contenido (la imagen) verticalmente al centro */
}

/* Estilos de la imagen del logo */
.logo-img {
  max-height: 50px; /* Altura máxima del logo para pantallas de escritorio (más grandes) */
  width: auto;     /* Ajusta el ancho automáticamente para mantener la proporción de la imagen */
  display: block;  /* Asegura que la imagen se comporte como un bloque para evitar espacios extra */
  transition: max-height 0.3s ease; /* Transición suave cuando cambie la altura (por ejemplo, en móvil) */
}

/* Estilos de la lista de enlaces de navegación */
.nav-list {
  list-style: none; /* Quita los puntos/viñetas predeterminados de la lista */
  margin: 0;        /* Elimina el margen externo predeterminado de la lista */
  padding: 0;       /* Elimina el relleno interno predeterminado de la lista */
  display: flex;    /* Por defecto, muestra los elementos de la lista horizontalmente para escritorio */
  transition: all 0.3s ease-in-out; /* Transición suave para cambios en la lista (como el despliegue) */
  flex-grow: 1;     /* Permite que la lista de navegación ocupe todo el espacio disponible,
                       empujando el botón de hamburguesa hacia la derecha en escritorio */
}

/* Estilos para cada elemento de enlace dentro de la lista */
.nav-list li a {
  display: block;           /* Hace que el enlace ocupe todo el espacio de su 'li' para facilitar el clic */
  color: var(--text-color-light); /* Color del texto del enlace: Blanco */
  text-decoration: none;    /* Quita el subrayado predeterminado de los enlaces */
  padding: 15px 20px;       /* Espaciado interno para cada enlace */
  transition: background-color 0.3s ease; /* Transición suave para el cambio de color de fondo al pasar el ratón */
  border-radius: 5px; /*Genera un borde suabe a los botones*/
}

/* Estilos al pasar el ratón o enfocar un enlace */
.nav-list li a:hover,
.nav-list li a:focus {
  background-color: var(--darker-black); /* Fondo más oscuro al pasar el ratón: Negro más intenso */
}

/* Estilos para el botón del menú de hamburguesa (solo visible en móvil) */
.menu-toggle {
  display: none;     /* Oculto por defecto en pantallas de escritorio */
  background: none;  /* Sin fondo */
  border: none;      /* Sin borde */
  cursor: pointer;   /* Muestra un cursor de "mano" al pasar sobre él */
  padding: 10px;     /* Espaciado interno para el botón */
  position: relative; /* Establece contexto para la animación de las líneas de hamburguesa */
  z-index: 100;      /* Asegura que el botón esté por encima de otros elementos */
  margin-left: auto; /* Empuja el botón a la derecha en pantallas de escritorio,
                        ya que el nav-list tiene flex-grow: 1 */
}

/* Estilos para cada línea individual de la hamburguesa */
.hamburger {
  display: block;         /* Cada línea se comporta como un bloque */
  width: 25px;            /* Ancho de la línea */
  height: 3px;            /* Altura de la línea */
  background-color: var(--primary-yellow); /* Color de las líneas: Amarillo */
  margin: 5px 0;          /* Margen superior/inferior de 5px entre líneas */
  transition: all 0.3s ease-in-out; /* Transición suave para las animaciones */
}

/* Animación del botón de hamburguesa cuando el menú está abierto (clase 'open' agregada por JS) */
.menu-toggle.open .hamburger:nth-child(1) {
  transform: translateY(8px) rotate(45deg);  /* Mueve la primera línea y la rota */
  background-color: var(--accent-red); /* La primera línea se vuelve roja al abrir */
}

.menu-toggle.open .hamburger:nth-child(2) {
  opacity: 0; /* Hace que la segunda línea sea invisible */
}

.menu-toggle.open .hamburger:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg); /* Mueve la tercera línea y la rota */
  background-color: var(--accent-red); /* La tercera línea se vuelve roja al abrir */
}

/* Estilo para el enlace activo (la página actual) */
.nav-list li a.active {
  background-color: var(--primary-yellow); /* Fondo del enlace activo: Amarillo primario */
  color: var(--secondary-black);           /* Texto del enlace activo: Negro secundario */
  /* Eliminado border-radius para bordes rectos */
}

/* Estilo al pasar el ratón o enfocar el enlace activo */
.nav-list li a.active:hover,
.nav-list li a.active:focus {
  background-color: var(--darker-yellow); /* Tono un poco más oscuro de amarillo al pasar el ratón sobre el enlace activo */
}

/* Media Queries para responsividad - Se aplican cuando el ancho de la pantalla es de 768px o menos */
@media (max-width: 768px) {
  .main-nav {
    flex-direction: row;     /* Mantiene los elementos en una fila (logo y botón de hamburguesa) */
    justify-content: space-between; /* Distribuye el logo (izquierda) y el botón (derecha) en los extremos */
    flex-wrap: wrap;         /* Es crucial para que la lista desplegable se coloque debajo */
  }

  .logo-container {
    margin-right: 0; /* Elimina el margen derecho del logo para mejor ajuste en móvil */
    order: 0;        /* Establece el orden del logo como el primer elemento en el flujo flex */
  }

  .logo-img {
    max-height: 35px; /* Altura más pequeña del logo para dispositivos móviles */
  }

  .menu-toggle {
    display: block;     /* Muestra el botón de hamburguesa en pantallas móviles */
    margin-left: 0;     /* Elimina el margen automático que lo empujaba a la derecha en escritorio */
    order: 1;           /* El botón de hamburguesa va después del logo */
  }

  .nav-list {
    flex-direction: column; /* Cambia la lista de navegación a una columna para el menú desplegable */
    width: 100%;            /* La lista ocupa todo el ancho disponible */
    max-height: 0;          /* Oculta la lista por defecto (la altura es 0) */
    overflow: hidden;       /* Oculta cualquier contenido que se desborde (mientras max-height es 0) */
    background-color: var(--secondary-black); /* Color de fondo para el menú desplegable: Negro */
    order: 2;               /* La lista desplegable va al final (debajo del logo y el botón) */
    flex-basis: 100%;       /* Asegura que la lista ocupe toda la fila cuando se despliega */
  }

  /* Cuando la clase 'active' se agrega a nav-list por JS */
  .nav-list.active {
    max-height: 300px; /* Aumenta la altura máxima para mostrar el menú desplegable (ajusta según tus necesidades) */
  }

  .nav-list li {
    width: 100%; /* Cada elemento de la lista ocupa todo el ancho del menú desplegable */
  }

  .nav-list li a {
    padding: 15px 30px;         /* Espaciado interno de los enlaces en el menú desplegable */
    border-bottom: 1px solid var(--darker-black); /* Un borde inferior como separador entre los enlaces: Negro más intenso */
  }

  /* Elimina el borde inferior del último elemento de la lista para una apariencia limpia */
  .nav-list li:last-child a {
    border-bottom: none;
  }

  /* Estilo específico para el enlace activo en móvil */
  .nav-list li a.active {
    background-color: var(--primary-yellow); /* Color de fondo para el enlace activo en móvil: Amarillo */
    color: var(--secondary-black);              /* Color de texto negro */
    border-bottom: 1px solid var(--darker-yellow); /* Borde inferior para el enlace activo en móvil: Amarillo más oscuro */
  }
}