/*
Theme Name: Astra Child - Chukabooks
Theme URI: https://chukabooks.com/
Description: Tema hijo de Astra para Chukabooks. Aquí van todos los ajustes de estilo y PHP personalizados para que sobrevivan a las actualizaciones del tema padre.
Author: Chukabooks
Author URI: https://chukabooks.com/
Template: astra
Version: 1.12.0
Text Domain: astra-child
*/

/* =========================================================================
   CHUKABOOKS — CSS personalizado
   ---------------------------------------------------------------------------
   Todas las reglas nuevas van aquí debajo. Las secciones están preparadas
   para que quede ordenado cuando empecemos a unificar colores, tipografía
   y botones. NO editar el tema padre (astra/).
   ========================================================================= */

/* --- 1. Variables de marca ------------------------------------------------ */
:root {
    /* Paleta general */
    --chuka-text:    #2b2b2b;
    --chuka-muted:   #6b6b6b;
    --chuka-bg:      #ffffff;

    /* Botones (pill beige + contorno/texto naranja). Cambiar aquí afecta
       a TODOS los botones del sitio gracias a la regla de la sección 3. */
    --chuka-btn-bg:         #f8e6d6;
    --chuka-btn-text:       #f47607;
    --chuka-btn-border:     #f47607;
    --chuka-btn-bg-hover:   #f47607;
    --chuka-btn-text-hover: #ffffff;
    --chuka-btn-radius:     9999px;
    --chuka-btn-padding:    10px 22px;
}

/* --- 2. Tipografía -------------------------------------------------------- */

/* TODOS los encabezados del sitio usan Lora (serif editorial).
   Cubre: H1-H6 genéricos, títulos de post/página de Astra, bloques Gutenberg,
   bloques Spectra (info-box, heading) y encabezados de WooCommerce. */
h1, h2, h3, h4, h5, h6,
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong,
.entry-title,
.ast-archive-title,
.ast-page-title,
.page-title,
.post-title,
.wp-block-heading,
.uagb-ifb-title,
.uagb-heading-text,
h1.product_title,
.woocommerce-products-header__title,
.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce-Tabs-panel h2 {
    font-family: 'Lora', Georgia, 'Times New Roman', serif !important;
    font-weight: 700 !important;
}
/* Los pesos ya declarados inline en bloques Gutenberg los respetamos */
h1[style*="font-weight"], h2[style*="font-weight"], h3[style*="font-weight"] {
    font-weight: inherit !important;
}

/* --- 3. Botones globales -------------------------------------------------- */

/* Estilo único Chukabooks: pill beige con contorno y texto naranjas.
   Cubre Gutenberg core, Spectra (UAGB), Astra, WooCommerce y SureForms.
   Los colores viven en las variables --chuka-btn-* de la sección 1. */

.wp-block-button__link,
.wp-element-button,
button.wp-element-button,
.uagb-button__link,
.uagb-buttons-repeater,
.uagb-buttons-repeater.wp-block-button__link,
.uagb-buttons-repeater.ast-outline-button,
a.ast-outline-button,
.ast-outline-button,
.srfm-submit-button,
button.srfm-submit-button,
.srfm-btn-frontend.srfm-button.srfm-submit-button,
.ast-button-wrap .ast-button,
.ast-custom-button,
a.ast-button,
button.ast-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce ul.products li.product .button,
.add_to_cart_button,
.single_add_to_cart_button,
.checkout-button,
.ast-on-card-button,
#place_order,
input[type="submit"],
button[type="submit"] {
    background-color: var(--chuka-btn-bg) !important;
    color: var(--chuka-btn-text) !important;
    border: 1.5px solid var(--chuka-btn-border) !important;
    border-width: 1.5px !important;
    border-radius: var(--chuka-btn-radius) !important;
    padding: var(--chuka-btn-padding) !important;
    font-family: inherit !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background-color .2s ease, color .2s ease, transform .1s ease !important;
    box-shadow: none !important;
    outline: none !important;
    display: inline-block;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    white-space: nowrap !important;
    text-align: center;
    vertical-align: middle;
}

/* Asegurar que el div interno que Spectra mete dentro del <a> no añade altura */
.uagb-button__link {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    white-space: nowrap !important;
}

/* Reset de los contenedores/wrappers de botones de Gutenberg y Spectra
   para que NO añadan fondo, borde, sombra ni fuerzen ancho. */
.wp-block-button,
.wp-block-uagb-buttons-child,
.wp-block-uagb-buttons-child.wp-block-button,
.uagb-buttons__outer-wrap,
.uagb-button__wrapper {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-width: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
.uagb-button__link:hover,
.uagb-buttons-repeater:hover,
.uagb-buttons-repeater.ast-outline-button:hover,
a.ast-outline-button:hover,
.ast-outline-button:hover,
.srfm-submit-button:hover,
button.srfm-submit-button:hover,
.ast-button-wrap .ast-button:hover,
.ast-custom-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.add_to_cart_button:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover,
.ast-on-card-button:hover,
#place_order:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
    background-color: var(--chuka-btn-bg-hover) !important;
    color: var(--chuka-btn-text-hover) !important;
    border-color: var(--chuka-btn-border) !important;
    transform: translateY(-1px);
}

.wp-block-button__link:active,
.srfm-submit-button:active,
.woocommerce a.button:active,
.add_to_cart_button:active,
input[type="submit"]:active,
button[type="submit"]:active {
    transform: translateY(0);
}

/* Override directo de las variables de SureForms para que hereden la marca.
   Esto afecta también a focos, bordes de input y estados intermedios. */
.srfm-form-container,
body .srfm-form-container,
.srfm-form,
body {
    --srfm-color-scheme-primary: var(--chuka-btn-border) !important;
    --srfm-color-scheme-text-on-primary: var(--chuka-btn-text-hover) !important;
    --srfm-btn-color-hover: var(--chuka-btn-bg-hover) !important;
}

/* Selector más específico para vencer a SureForms en cascada. */
.srfm-form-container .srfm-button,
.srfm-form-container .srfm-submit-button,
body.post-type-sureforms_form .is-root-container .srfm-submit-button {
    background: var(--chuka-btn-bg) !important;
    background-color: var(--chuka-btn-bg) !important;
    color: var(--chuka-btn-text) !important;
    border: 1.5px solid var(--chuka-btn-border) !important;
    border-radius: var(--chuka-btn-radius) !important;
}
.srfm-form-container .srfm-button:hover,
.srfm-form-container .srfm-submit-button:hover {
    background: var(--chuka-btn-bg-hover) !important;
    background-color: var(--chuka-btn-bg-hover) !important;
    color: var(--chuka-btn-text-hover) !important;
}

/* --- 4. WooCommerce ------------------------------------------------------- */

/* "Actualizar carrito" deshabilitado por defecto. Le damos el mismo look
   que los demás botones pero con opacidad reducida para mantener la señal
   visual de que está inactivo hasta cambiar cantidades. */
.woocommerce button.button:disabled,
.woocommerce button.button[disabled],
button[name="update_cart"]:disabled,
button[name="update_cart"][disabled] {
    background-color: var(--chuka-btn-bg) !important;
    color: var(--chuka-btn-text) !important;
    border: 1.5px solid var(--chuka-btn-border) !important;
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}

/* --- 4.b Responsive de imágenes y contenedores (desbordes en desktop) ---- */

/* Imágenes Spectra/UAGB con width fijo (p. ej. style="width:330px;height:450px"):
   respetar el tamaño de diseño pero NO permitir que superen el ancho del
   contenedor. Así la foto del stand Liber se mantiene en 330px habitualmente
   pero se encoge si el viewport/columna es menor. */
.wp-block-uagb-image img,
.wp-block-uagb-image__figure img,
figure.wp-block-image img,
figure.wp-block-image,
.wp-block-uagb-image,
.wp-block-uagb-image__figure {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
}
/* Permitir que los hijos flex de los contenedores Spectra se encojan cuando
   el viewport lo requiera (sin esto, objetos con width fijo desbordan). */
.wp-block-uagb-container > *,
.uagb-container-inner-blocks-wrap > * {
    min-width: 0;
}
/* Prevenir scroll horizontal en todo el sitio (no solo móvil). */
html, body {
    overflow-x: hidden;
}

/* --- 5. Ajustes puntuales (feedback del usuario) --------------------------- */

/* 5.1 Menú principal en UNA SOLA LÍNEA (solo desktop, no afecta a móvil) */
@media (min-width: 922px) {
    .main-header-bar .main-header-bar-navigation,
    .main-header-bar .main-header-menu,
    .main-header-menu,
    .main-header-bar-navigation .menu {
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
    }
    .main-header-menu > li,
    .main-header-bar-navigation .menu > li {
        white-space: nowrap !important;
    }
    .main-header-menu > li > a,
    .main-header-bar-navigation .menu > li > a {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* 5.1.b Color de los enlaces del menú: negro con hover naranja de marca.
   Aplica tanto al menú de desktop como al desplegable móvil. */
.main-header-menu > li > a,
.main-header-menu > li > a:link,
.main-header-menu > li > a:visited,
.main-header-bar-navigation .menu > li > a,
.main-header-menu .sub-menu > li > a,
.ast-header-break-point .main-header-bar-navigation .menu > li > a {
    color: var(--chuka-text) !important;
}
.main-header-menu > li > a:hover,
.main-header-menu > li > a:focus,
.main-header-menu > li.current-menu-item > a,
.main-header-bar-navigation .menu > li > a:hover {
    color: var(--chuka-btn-text) !important;
}

/* 5.2 Título H3 de secciones ("Cuentos para tus proyectos educativos" etc.)
   un poco más grande y negrita. */
h2.wp-block-heading.has-ast-global-color-2-color,
h3.wp-block-heading.has-ast-global-color-2-color,
h3.wp-block-heading[style*="font-weight:800"] {
    font-size: clamp(1.9rem, 3.8vw, 2.6rem) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

/* 5.3 Grid de libros/proyectos en wp-block-columns: alinear botones a la
   misma altura en todas las columnas. Hay columnas con párrafos vacíos
   residuales que rompían space-between, así que los ocultamos. */
.wp-block-columns.is-layout-flex {
    align-items: stretch !important;
}
.wp-block-columns.is-layout-flex > .wp-block-column,
.wp-block-columns.is-layout-flex > .wp-block-column.is-layout-flow {
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
}
/* Ocultar los <p> vacíos que deja Gutenberg y rompen el layout. */
.wp-block-columns.is-layout-flex > .wp-block-column > p:empty {
    display: none !important;
}
/* Galería/imagen de Spectra/WP: no crecer, pegarse arriba */
.wp-block-columns.is-layout-flex > .wp-block-column > figure.wp-block-gallery,
.wp-block-columns.is-layout-flex > .wp-block-column > .wp-block-gallery,
.wp-block-columns.is-layout-flex > .wp-block-column > .wp-block-uagb-image,
.wp-block-columns.is-layout-flex > .wp-block-column > figure.wp-block-image {
    flex: 0 0 auto !important;
    margin-bottom: 0 !important;
}
/* El grupo de botones: pegarse abajo con margin-top auto (funciona con
   cualquier número de items, al revés que space-between). */
.wp-block-columns.is-layout-flex > .wp-block-column > .wp-block-buttons {
    margin-top: auto !important;
    padding-top: 28px;
    padding-bottom: 24px;
    display: flex !important;
    justify-content: center !important;
}
/* Aire al final del bloque de columnas antes del siguiente bloque / footer. */
.wp-block-columns.is-layout-flex {
    margin-bottom: 32px;
}

/* 5.4 Carrito: ocultar dirección guardada y el link "Cambiar dirección".
   La dirección se recoge después en "Finalizar compra". */
.woocommerce-shipping-destination,
.woocommerce-shipping-calculator,
.shipping-calculator-button,
tr.shipping .woocommerce-shipping-destination {
    display: none !important;
}

/* 5.5 Móvil: en el hero, que el H1 y los botones vayan encima de la foto. */
@media (max-width: 767px) {
    .uagb-block-b45b75eb > .uagb-container-inner-blocks-wrap {
        display: flex !important;
        flex-direction: column !important;
    }
    .uagb-block-b45b75eb .uagb-block-d0d86f56 { order: 1 !important; }
    .uagb-block-b45b75eb .uagb-block-7ca96744 { order: 2 !important; }
    .uagb-block-b45b75eb .uagb-block-cdb291f5 { order: 3 !important; }
}

/* 5.6 Móvil: tipografía y centrado de páginas interiores
   (Talleres y cuenta cuentos, Ferias del libro, etc.) */
@media (max-width: 767px) {
    /* Títulos dentro del contenido: escalar a tamaño proporcional al viewport */
    .ast-container h1,
    .ast-container h2,
    .ast-container h3,
    .entry-content h1,
    .entry-content h2,
    .entry-content h3 {
        font-size: clamp(1.5rem, 5.5vw, 2.1rem) !important;
        line-height: 1.25 !important;
        text-align: center !important;
    }
    /* Párrafos y texto enriquecido: reducir el tamaño cuando haya
       font-size absoluto heredado de desktop, y centrar. */
    .entry-content p,
    .wp-block-uagb-container p,
    .uagb-container-inner-blocks-wrap p {
        font-size: clamp(0.95rem, 3.8vw, 1.1rem) !important;
        line-height: 1.55 !important;
    }
    /* Un poco de padding lateral para que el texto no roce el borde. */
    .ast-container,
    .wp-block-uagb-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Blockquotes: en móvil quitar el borde izquierdo y padding asimétrico
       que empujan el texto a la derecha, y dejarlos centrados. */
    blockquote,
    blockquote.wp-block-quote,
    .entry-content blockquote {
        border-left: none !important;
        padding-left: 1em !important;
        padding-right: 1em !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        max-width: 100% !important;
    }
    blockquote p,
    blockquote.wp-block-quote p {
        text-align: center !important;
    }

    /* Imágenes: nunca exceder el ancho del viewport en móvil. */
    img, figure, .wp-block-image img {
        max-width: 100% !important;
        height: auto !important;
    }
    /* Evitar desbordamiento horizontal de cualquier cosa. */
    body {
        overflow-x: hidden;
    }
}