/*
 * INFORMACIÓN DEL TEMA CHILD
 * Theme Name:   Storefront Child - Nombre del tema hijo
 * Theme URI:    https://tudominio.com - URL del sitio web
 * Description:  Child theme de Storefront - Descripción del tema
 * Author:       DiegoGarro - Autor del tema
 * Author URI:   https://gpld.com - URL del autor
 * Template:     storefront - Tema padre del cual hereda
 * Version:      1.0 - Versión actual del tema
 * Text Domain:  storefront-child - Dominio de texto para traducciones
 */

/* =================================================================
   ESTILOS PARA LA IMAGEN HERO (IMAGEN PRINCIPAL DE LA PÁGINA)
   ================================================================= */

/* Contenedor principal de la imagen hero */
.hero-image-container {
    position: relative;        /* Posicionamiento relativo para elementos hijos absolutos */
    width: 100%;              /* Ocupa todo el ancho disponible */
    height: 100vh;            /* Altura igual a la ventana del navegador (viewport height) */
    overflow: hidden;         /* Oculta cualquier contenido que se desborde */
    z-index: 0;              /* Índice de apilamiento bajo para que otros elementos aparezcan encima */
    margin-top: 0;           /* Sin margen superior */
}

/* Estilos de la imagen hero */
.hero-image {
    width: 100%;             /* Ocupa todo el ancho del contenedor */
    height: 100%;            /* Ocupa toda la altura del contenedor */
    object-fit: contain;     /* Mantiene la proporción de la imagen ajustándola al contenedor */
    transition: all 2.5s ease-in-out; /* Transición suave de 0.5 segundos para todos los cambios */
    position: absolute;      /* Posicionamiento absoluto dentro del contenedor relativo */
    top: 0;                 /* Alineado al borde superior */
    left: 0;                /* Alineado al borde izquierdo */
}

/* Estilos de la imagen hero cuando se hace scroll (clase aplicada dinámicamente) */
.hero-image.scrolled {
    position: fixed;         /* Se fija en la pantalla al hacer scroll */
    opacity: 0.1;           /* Transparencia del 70% (30% visible) */
    filter: blur(8px);      /* Efecto de desenfoque de 8 píxeles */
    z-index: -1;            /* Se coloca detrás de otros elementos */
    object-fit: contain;      /* Cubre todo el espacio disponible manteniendo proporción */
    height: 100vh;          /* Mantiene la altura de toda la ventana */
}

/* =================================================================
   AJUSTES DEL HEADER/ENCABEZADO DEL SITIO
   ================================================================= */

/* Estilos del encabezado principal */
.site-header {
    position: relative;              /* Posicionamiento relativo */
    z-index: 10;                    /* Alto índice para aparecer sobre otros elementos */
    background-color: rgba(255,255,255,0.95); /* Fondo blanco semi-transparente (95% opacidad) */
}

/* =================================================================
   ESTILOS PARA ESCRITORIO (PANTALLAS DE 768PX EN ADELANTE)
   ================================================================= */

@media screen and (min-width: 768px) {
    
    /* LOGO DEL SITIO */
    /* Redimensiona la imagen del logo */
    #masthead .custom-logo-link img {
        width: auto;            /* Ancho automático para mantener proporción */
        height: 100px;          /* Altura fija de 100 píxeles */
    }
    
    /* Posiciona el logo de forma fija en la pantalla */
    #masthead .custom-logo-link {
        position: fixed;        /* Posición fija en la ventana */
        top: 0;                /* Pegado al borde superior */
        margin: 0;             /* Sin márgenes */
        padding: 0;            /* Sin relleno interno */
    }
    
    /* NAVEGACIÓN PRINCIPAL */
    /* Posiciona el menú de navegación */
    #masthead .main-navigation {
        text-align: right;      /* Alineación del texto a la derecha */
        position: fixed;        /* Posición fija en la pantalla */
        top: 0;                /* Pegado al borde superior */
        right: 500px;          /* 500px desde el borde derecho */
        padding: 0;            /* Sin relleno interno */
        width: auto;           /* Ancho automático según contenido */
    }
    
    /* CARRITO DE COMPRAS */
    /* Posiciona el icono/enlace del carrito */
    #masthead .site-header-cart {
        width: 14% !important;          /* Ancho del 14% (importante para sobrescribir otros estilos) */
        position: fixed !important;     /* Posición fija (importante) */
        top: 0;                        /* Pegado al borde superior */
        right: 12%;                    /* 12% desde el borde derecho */
        padding: 0;                    /* Sin relleno interno */
    }
    
    /* ENCABEZADO GENERAL */
    /* Aplica posición fija al encabezado completo */
    #masthead {
        position: fixed;        /* Posición fija en la pantalla */
        top: 0;                /* Pegado al borde superior */
        width: 100%;           /* Ocupa todo el ancho de la pantalla */
    }
    
    /* AJUSTES DE ESPACIADO Y MÁRGENES */
    /* Ajusta el relleno del contenido del carrito */
    #masthead .site-header-cart .cart-contents {
        padding: 2em 0;        /* Relleno vertical de 2em (arriba y abajo) */
    }
    
    /* Ajusta el relleno de los enlaces del menú */
    #masthead .main-navigation ul.menu>li>a, 
    #masthead .main-navigation ul.nav-menu>li>a {
        padding: 2em 1em;      /* Relleno: 2em arriba/abajo, 1em izquierda/derecha */
    }
    
    /* Ajusta el margen inferior del área de branding */
    #masthead .site-branding {
        margin-bottom: 4em;     /* Margen inferior de 4em */
    }
    
    /* OCULTAR ELEMENTOS NO DESEADOS */
    /* Oculta la barra de búsqueda en escritorio */
    #masthead .site-search {
        display: none;          /* No se muestra */
    }
    
    /* COMPENSACIONES POR HEADER FIJO */
    /* Compensa el espacio ocupado por el header fijo */
    body {
        padding-top: 120px;     /* Relleno superior para evitar que el contenido quede oculto */
    }
    
    /* Ajusta la posición del contenedor hero para compensar el header */
    .hero-image-container {
        margin-top: 0px;     /* Margen negativo para que la imagen llegue hasta arriba */
    }
    /* Estilos para hero-carousel en escritorio */
    .hero-carousel {
        margin: 40px auto;
        max-width: 1200px;
        width: 90%;
        padding: 0 20px;
        box-sizing: border-box;
    }

    /* Fuerza a que slick funcione correctamente */
    .hero-carousel .slick-slide {
        display: flex !important;
        justify-content: center;
    }

    .hero-carousel img {
       /* max-width: 600px;*/
	max-height: 750px;
        height: auto;
	margin: 0 auto;
        display: block;
	object-fit: contain; /* Para que mantenga proporción sin recortar */
    }

}

/* =================================================================
   ESTILOS PARA MÓVILES (PANTALLAS DE 767PX Y MENORES)
   ================================================================= */

@media (max-width: 767px) {
    
    /* POSICIONAMIENTO FIJO DEL HEADER EN MÓVILES */
    /* Fija el encabezado en la parte superior para que no se desplace */
    #masthead {
        position: fixed !important;     /* Posición fija para mantener el header visible */
        top: 0 !important;              /* Pegado al borde superior */
        width: 100% !important;         /* Ocupa todo el ancho */
        z-index: 100 !important;        /* Apilado por encima del contenido */
    }

    /* COMPENSACIÓN POR HEADER FIJO */
    /* Agrega espacio al principio del body para que el contenido no quede oculto */
    body {
        padding-top: 80px;              /* Ajusta según la altura real del header */
    }

    /* AJUSTES DEL CONTENEDOR HERO */
    /* Corrige la posición para que no haya salto visual */
    .hero-image-container {
        height: 100vh !important;       /* Altura completa de la ventana */
        margin-top: 120px !important;   /* Compensación para que inicie detrás del header  By Diego: 120px es el valor para que la imagen quede debajo del header de manera correcta */
        top: 0 !important;              /* Pegado al borde superior */
    }

    /* AJUSTES DEL HEADER */
    /* Elimina rellenos y márgenes innecesarios */
    .site-header {
        padding: 1em 0 !important;      /* Relleno vertical de 1em */
        margin: 0 !important;           /* Sin margen externo */
    }

    /* AJUSTES DE LA IMAGEN */
    /* Hace que la imagen cubra todo el espacio del contenedor */
    .hero-image {
        object-fit: cover !important;   /* Cubre sin distorsión */
        top: 0 !important;              /* Posición superior */
    }

    /* RESETEO DE NAVEGACIÓN */
    /* Ajusta la navegación para ocupar todo el ancho y alinearse a la izquierda */
    .main-navigation {
        text-align: left !important;    /* Alineación izquierda */
        width: 100% !important;         /* Ancho completo */
    }

    /* RESETEO DEL CARRITO */
    /* Quita posiciones absolutas del carrito en móviles */
    .site-header-cart {
        position: relative !important;  /* Posición normal */
        right: auto !important;         /* Posición derecha automática */
        width: auto !important;         /* Ancho automático */
    }

    /* ESTILOS DEL CARRUSEL EN MÓVILES */
    .hero-carousel {
        margin: 20px auto;
        max-width: 100%;
        width: 95%;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .hero-carousel .slick-slide {
        display: flex !important;
        justify-content: center;
    }

    .hero-carousel img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* ESTILOS DE MENÚ MÓVIL (OCULTO POR DEFECTO) */
    .main-navigation ul {
        display: none;
    }

    /* MUESTRA EL MENÚ CUANDO ESTÁ ACTIVADO */
    .main-navigation.toggled ul {
        display: block;
        background: white;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    /* ESTILO DE LOS ITEMS DEL MENÚ */
    .main-navigation.toggled ul li {
        border-bottom: 1px solid #ddd;
        padding: 1em;
    }

    /* BOTÓN HAMBURGUESA */
    .menu-toggle {
        display: inline-block;
        background-color: #0073aa;
        color: white;
        padding: 0.5em 1em;
        border: none;
        margin: 0.5em 0;
        cursor: pointer;
    }

    .menu-toggle:focus {
        outline: 2px solid #005177;
    }

}