/**
 * SP Menu Responsive Styles
 */

/* Estilos básicos necesarios para el funcionamiento */
.sp-menu-responsive-container {
  width: 100%;
  display: block;
  margin: 0 0 1em 0;
}

/* Estilos para la etiqueta del menú */
.sp-menu-responsive-container .sp-menu-label {
  color: #fff;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  background: none;
  border: none;
  text-align: left;
  cursor: default;
  font-family: 'Work Sans', sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  margin-bottom: 1em;
  position: relative;
}

.sp-menu-responsive-container .sp-menu-label::after {
  color: #fff;
  content: "▼";
  margin-left: 8px;
  font-size: 14px;
  transition: transform 0.3s ease;
  display: none;
}

.sp-menu-responsive-container .sp-menu-label.active::after {
  transform: rotate(180deg);
}

/* Estilos para el contenedor móvil */
.sp-menu-responsive-container .sp-menu-mobile-wrapper {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  margin: 0;
  padding: 0;
  height: auto;
}

.sp-menu-responsive-container .sp-menu-mobile-wrapper.open {
  max-height: 1000px;
  margin-top: 0.5em;
}

/* Estilos para los elementos del menú móvil */
.sp-menu-responsive-container .sp-menu-mobile-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sp-menu-responsive-container .sp-menu-mobile-items li {
  margin: 0 0 20px 0;
  padding: 0;
  position: relative;
}

.sp-menu-responsive-container .sp-menu-mobile-items a {
  position: relative;
  padding-left: 0;
}

.sp-menu-responsive-container .sp-menu-mobile-items .sp-menu-item-slug {
  position: relative;
  display: inline-block;
  margin-left: 19px;
  color: #FFFFFF;
}

.sp-menu-responsive-container .sp-menu-mobile-items .sp-menu-item-slug::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  background-color: #FFFFFF;
  border-radius: 50%;
  left: -19px;
  top: 0.55em;
}

/* Estilos para los elementos del menú desktop */
.sp-menu-responsive-container .sp-menu-desktop {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-left: 0;
}

/* Añadir color blanco a todos los enlaces del menú */
.sp-menu-responsive-container .sp-menu-desktop a,
.sp-menu-responsive-container .sp-menu-mobile-items a {
  color: #FFFFFF;
  text-decoration: none;
  display: block;
  padding: 0;
  margin: 0;
  font-family: 'Work Sans', sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
}

/* Estilos para las descripciones de los elementos del menú */
.sp-menu-responsive-container .sp-menu-item-description {
  display: block;
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #E5E7EB;
  margin-top: 3px;
  margin-left: 0;
  text-indent: 0;
  padding-left: 0;
}

/* Orientación horizontal (por defecto) */
.sp-menu-responsive-container[data-orientation="horizontal"] .sp-menu-desktop {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

/* Separadores para menú horizontal */
.sp-menu-responsive-container[data-orientation="horizontal"] .sp-menu-desktop li {
  position: relative;
  margin-right: 30px;
}

.sp-menu-responsive-container[data-orientation="horizontal"] .sp-menu-desktop li:not(:last-child)::after {
  content: attr(data-separator);
  position: absolute;
  right: -15px;
  top: 0;
  color: #FFFFFF;
}

.sp-menu-responsive-container[data-orientation="horizontal"][data-separator=""] .sp-menu-desktop li::after {
  display: none;
}

.sp-menu-responsive-container[data-orientation="horizontal"] .sp-menu-desktop li:last-child {
  margin-right: 0;
}

/* Orientación vertical */
.sp-menu-responsive-container[data-orientation="vertical"] .sp-menu-desktop {
  display: flex;
  flex-direction: column;
}

/* Columnas para menú vertical */
.sp-menu-responsive-container[data-orientation="vertical"][data-columns="2"] .sp-menu-desktop,
.sp-menu-responsive-container[data-orientation="vertical"][data-columns="3"] .sp-menu-desktop,
.sp-menu-responsive-container[data-orientation="vertical"][data-columns="4"] .sp-menu-desktop {
  flex-direction: row;
  flex-wrap: wrap;
}

.sp-menu-responsive-container[data-orientation="vertical"][data-columns="2"] .sp-menu-desktop li {
  width: 50%;
}

.sp-menu-responsive-container[data-orientation="vertical"][data-columns="3"] .sp-menu-desktop li {
  width: 33.333%;
}

.sp-menu-responsive-container[data-orientation="vertical"][data-columns="4"] .sp-menu-desktop li {
  width: 25%;
}

/* Asegurar que el menú vertical con columnas se vea bien en móvil */
@media screen and (max-width: 768px) {
  .sp-menu-responsive-container[data-orientation="vertical"][data-columns] .sp-menu-desktop li {
    width: 100%;
  }
}

.sp-menu-responsive-container .sp-menu-desktop li {
  position: relative;
  margin: 0 0 20px 0;
  padding: 0;
}

/* Estilo para el contenedor del enlace */
.sp-menu-responsive-container .sp-menu-desktop a {
  padding-left: 0;
  position: relative;
}

/* Estilo para el slug del ítem */
.sp-menu-responsive-container .sp-menu-item-slug {
  position: relative;
  display: inline-block !important;
  color: #FFFFFF;
  margin-left: 19px;
  visibility: visible !important;
}

/* Ocultar etiqueta del menú cuando se especifica */
.sp-menu-responsive-container[data-ocultar-slug="si"] .sp-menu-desktop-label {
  display: none !important;
}

/* Dot solo para el slug */
.sp-menu-responsive-container .sp-menu-item-slug::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  background-color: #FFFFFF;
  border-radius: 50%;
  left: -19px;
  top: 0.55em;
}

/* Estilo para el enlace del menú */
.sp-menu-responsive-container .sp-menu-desktop a,
.sp-menu-responsive-container .sp-menu-mobile-items a {
  display: block;
}



/* Estilo para el título del menú */
.sp-menu-responsive-container .sp-menu-label {
  color: #FFFFFF;
}

/* Estilo para el texto del menú (título y descripción) */
.sp-menu-responsive-container .sp-menu-item-description {
  color: #E5E7EB;
  display: block;
  margin-left: 0;
  padding-left: 0;
  text-indent: 0;
}

/* Estilos para el contenedor desktop */
.sp-menu-responsive-container .sp-menu-responsive-desktop {
  display: block;
}

/* Estilos para la etiqueta del menú en escritorio */
.sp-menu-responsive-container .sp-menu-desktop-label {
  color: #00ad91;
  font-family: 'Work Sans', sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  margin-bottom: 1em;
  display: block;
}

/* Media queries */
@media screen and (max-width: 768px) {
  .sp-menu-responsive-container .sp-menu-responsive-desktop {
    display: none;
  }

  .sp-menu-responsive-container .sp-menu-desktop-label {
    display: none;
  }

  .sp-menu-responsive-container .sp-menu-label {
    cursor: pointer;
  }

  .sp-menu-responsive-container .sp-menu-label::after {
    display: inline;
  }
}

/* Asegurar que el slug es visible en escritorio */
@media screen and (min-width: 769px) {
  .sp-menu-responsive-container .sp-menu-desktop .sp-menu-item-slug {
    display: inline-block;
    color: #FFFFFF !important;
    visibility: visible;
  }
}

/* Eliminar padding izquierdo excesivo del menú */
.sp-menu-responsive-container .sp-menu-desktop {
  padding-left: 0;
}

/* ------------------------------------------------------------ */
/* ESTILOS PERSONALIZABLES - Modifica estos según tus necesidades */
/* ------------------------------------------------------------ */

/*
 * Aquí puedes añadir tus propios estilos para personalizar el menú.
 * Estos estilos no afectan la funcionalidad básica del plugin.
 */

/* Ocultar el label móvil en la versión de escritorio */
@media screen and (min-width: 769px) {
  .sp-menu-responsive-container .sp-menu-label {
    display: none;
  }
  
  .sp-menu-responsive-container .sp-menu-desktop-label {
    display: block;
  }
}

/* Ejemplo: Estilo para los elementos del menú en escritorio */
/*
.sp-menu-responsive-container .sp-menu-desktop a {
    color: #333;
    text-decoration: none;
    padding: 5px 10px;
    display: block;
}

.sp-menu-responsive-container .sp-menu-desktop a:hover {
    background-color: #f5f5f5;
}
*/

/* Ejemplo: Estilo para los elementos del menú móvil */
/*
.sp-menu-responsive-container .sp-menu-mobile-items a {
    color: #333;
    text-decoration: none;
    display: block;
}
*/