/*
Theme Name: Pensar Verde
Theme URI: https://pensarverde.com.co
Author: Antigravity
Author URI: 
Description: Tema de bloques personalizado para Pensar Verde, compatible con Kadence Blocks y WooCommerce.
Requires at least: 6.2
Tested up to: 6.4
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: pensar-verde
Tags: custom-colors, custom-menu, block-patterns, full-site-editing, e-commerce, two-columns
*/

/* ==========================================================================
   Sticky Header & Animations
   ========================================================================== */

/* Fix para FSE themes donde wp-site-blocks tiene overflow: hidden que rompe el position: sticky */
html, body {
    overflow-x: clip;
}

body .wp-site-blocks {
    overflow-x: visible;
}

/*
 * Catálogo WooCommerce: el <main> debe coincidir con page.html (sin clase pv-shop-layout en main).
 * Evita overflow en ancestros del header sticky y mantiene header/footer alineados con el resto del sitio.
 */
main.wp-block-group .wp-block-group.pv-shop-layout {
    overflow-x: visible;
    overflow-y: visible;
    width: 100%;
    max-width: 100%;
}

/* Permitir que el header se quede pegado */
header.wp-block-template-part {
    position: sticky;
    top: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    background-color: #ffffff;
}

.site-header-sticky {
    position: sticky;
    top: 0;
    z-index: 9999;
    box-shadow: 0 0 0 rgba(0,0,0,0);
    /* Set transitions for when we add the scroll class */
    transition: padding 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out;
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1400px;
}

.site-header-sticky > nav {
    margin: 0 !important;
}

.site-header-sticky > div {
    margin: 0 !important;
}

.wp-block-site-logo {
    margin: 0 !important;
}

/* Base logo transition */
.site-header-sticky .wp-block-site-logo img {
    transition: max-width 0.3s ease-in-out, height 0.3s ease-in-out;
    max-width: 110px; /* Tamaño del logo normal */
    height: auto;
}

/* Scrolled state */
.site-header-sticky.is-scrolled {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.site-header-sticky.is-scrolled .wp-block-site-logo img {
    max-width: 60px !important; /* Tamaño del logo cuando hace scroll */
}

/* ==========================================================================
   Navigation Menu Hover & Active State
   ========================================================================== */

.site-header-sticky .wp-block-navigation .wp-block-navigation-item > a {
    position: relative;
    padding-bottom: 5px; /* Spacio entre el texto y la linea */
    text-decoration: none;
    color: #00a99d !important; /* Fuerza el color principal sobre defaults */
}

/* Crear la linea con un seudoelemento y 0 de ancho inicial */
.site-header-sticky .wp-block-navigation .wp-block-navigation-item > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); /* Start at center to center the line dynamically */
    width: 0; /* Start hidden */
    height: 3px;
    background-color: #ece12f; /* Color de la linea */
    transition: width 0.3s ease-in-out;
    border-radius: 2px;
}

/* Al pasar el mouse (hover) o al estar activo en esa pagina */
.site-header-sticky .wp-block-navigation .wp-block-navigation-item:hover > a::after,
.site-header-sticky .wp-block-navigation .current-menu-item > a::after {
    width: 90%; 
}

/*
 * Iconos en header/footer (no global: rompería imágenes de productos y del catálogo Woo).
 */
.site-header-sticky .wp-block-image img,
footer.wp-block-template-part .wp-block-image img {
    height: 2rem !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain;
}

/* ==========================================================================
   Vitrina Custom Header Button
   ========================================================================== */

.vitrina-btn {
    margin: 0;
}

.vitrina-btn a {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #00a99d !important;
    text-decoration: none;
    font-size: 0.9em; /* Un poquito más pequeño */
    font-weight: 400; /* Regular */
    gap: 4px; /* Espaciado entre la imagen y el texto */
}

/* Pseudo-elemento para el icono en SVG */
.vitrina-btn a::before {
    content: "";
    display: block;
    width: 48px;
    height: 48px;
    background-image: url('./assets/vitrina.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.vitrina-btn a:hover {
    opacity: 0.8;
}

.pv-slide-overlay {
    display: none !important;
    opacity: 0 !important;
}

.wp-block-breadcrumbs {
    display: none !important;
}

.pv-shop-layout, .woocommerce div.product, main.wp-block-group .wp-block-group.pv-shop-layout, main[data-block-name="woocommerce/page-content-wrapper"], div[data-block-name="woocommerce/checkout"] {
    max-width: 1100px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    margin: 0 auto;
}

.mapa {
    height: 100vh;
    min-height: 500px;
    max-height: 880px;
}

.pv-single-product__columns {
    gap: 3rem !important;
}

.pv-catalog-product-title {
    font-size: 1.5rem !important;
    margin-top: 0.4rem !important;
}

.pv-catalog-conoce-mas a {
    width: 180px;
    border-radius: 3rem;
}

.wc-block-components-checkout-place-order-button, .wc-block-cart__submit-container a {
    border-radius: 3rem !important;
}

div[data-block-name="woocommerce/add-to-cart-form"], .pv-single-product__purchase  {
    max-width: 100% !important;
}

.woocommerce-variation-add-to-cart {
    max-width: 220px !important;
}

.pv-simple-hero-slide {
    min-height: 560px !important;
    height: 50vh !important;
    max-height: 800px !important;
}

.pv-slide-content {
    min-height: 530px !important;
    height: 50vh !important;
    max-height: 800px !important;
}

.pv-slide-next img {
    opacity: 0.7;
}

.pv-simple-hero-arrow img {
    opacity: 0;
    display: none !important;
}

.pv-products-arrow img {
    opacity: 0.7;
}

.pv-products-arrow:disabled {
    opacity: 0 !important;
}

.pv-slide-title, .pv-slide-subtitle {
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6);
}

footer a {
    text-decoration: none !important;
}

/* ==========================================================================
   Shop Gate
   - body.pv-shop-off oculta automáticamente el botón Vitrina y cualquier
     elemento con clase utilitaria .pv-shop-only.
   - Marca visual en el editor para bloques con pvShopGated activo.
   ========================================================================== */

body.pv-shop-off .vitrina-btn,
body.pv-shop-off .pv-shop-only {
    display: none !important;
}

.pv-it-arrow:disabled {
    display: none !important;
    opacity: 0 !important;
}

/* Marca discreta en el editor: línea naranja a la izquierda del bloque marcado. */
.pv-shop-gated-editor {
    position: relative;
}

.pv-shop-gated-editor::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: repeating-linear-gradient(
        45deg,
        #dc2626,
        #dc2626 4px,
        transparent 4px,
        transparent 8px
    );
    border-radius: 2px;
    pointer-events: none;
}