/*
Theme Name: Girl-band
Theme URI: https://girlband.com.mx/
Description: Tema Hijo de Storefront para personalizaciones.
Author: Tu Nombre
Author URI: https://tusitio.com/
Template: storefront
Version: 1.0.12
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: storefront-mi-tienda
*/

body{
  font-family: "Exo", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

header{
  background-color: #f1a2a2;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.woocommerce-products-header, .entry-header{
    background-color: #FFF;
    text-align: center;
    display: block;
}

#primary{
    width: 90%;
    margin: 0 5%;
}

.home .site-content{
  background-color: #f1a2a2;
}

.logo{
  width: 6rem;
}

.site-main {
    width: 90%;
    margin: 0 5%;
}

.site-header{
    margin-bottom: 0;
    background-color: #f1a2a2;
}

/* Estilos Generales para Escritorio */
.main-navigation {
    display: block; /* Asegura que el menú sea visible por defecto en escritorio */
}

.main-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right; /* Alinea los ítems a la derecha */
}

.main-menu li {
    display: inline-block; /* Ítems del menú uno al lado del otro */
    margin-left: 20px;
    position: relative;
}

.main-menu a {
    text-decoration: none;
    color: #333;
    padding: 10px 0;
    display: block;
}

/* Ocultar el botón de toggle en escritorio */
.menu-toggle {
    display: none;
}

/* ------------------------------------------- */
/* Estilos para Submenús (Dropdowns) */
.main-menu ul {
    display: none; /* Oculta los submenús por defecto */
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid #eee;
    z-index: 999;
    padding: 10px 0;
}

.main-menu li:hover > ul {
    display: block; /* Muestra el submenú al pasar el ratón */
}

.main-menu ul li {
    display: block; /* Los ítems del submenú son bloques */
    margin: 0;
}
.main-menu ul a {
    padding: 8px 15px;
}

/* ------------------------------------------- */
/* Estilos Responsivos (Medios Pequeños / Móviles) */

@media (max-width: 768px) {

  header{
    display: block;
  }

  .logo {
    width: 5rem;
    margin-left: 24px;
    float: left;
  }

  .site-header{
    display: block;
    margin: 0 !important;
  }
    
    /* Mostrar el botón de toggle */
    button.menu-toggle {
        display: block;
        background-color: #FFF;
        border: none;
        font-size: 1em;
        padding: 10px;
        cursor: pointer;
        float: right;
        margin: 1rem 24px 5px 0;
        padding: 0.5rem 0.8rem;
    }
    
    /* Ocultar el menú por defecto en móvil */
    .main-navigation {
        display: none;
        width: 100%; /* Ocupa todo el ancho */
        clear: both; /* Limpia después del botón toggle */
        background: #f8f8f8; /* Fondo para el menú desplegado */
    }
    
    /* Mostrar el menú cuando tenga la clase 'toggled' */
    .toggled .main-navigation {
        display: block;
        width: 90%;
        margin: 0 5%;
    }

    /* Ítems del menú en móvil (apilados) */
    .main-menu li {
        display: block;
        margin: 0;
        border-bottom: 1px solid #eee;
        text-align: left;
    }

    .main-menu a {
        padding: 15px 20px;
    }
    
    /* Submenús en móvil */
    .main-menu ul {
        position: static; /* Los submenús se muestran en línea con el contenido */
        border: none;
        background: #e9e9e9;
        padding-left: 20px;
    }
    
    .main-navigation ul li a{
      padding: 10px 15px;
    }

    button.menu-toggle::before, button.menu-toggle::after, button.menu-toggle span::before {
    display: none;
    }

}