/**
Theme Name: Clínica Carolina
Author: Origami Soluciones
Author URI: https://origamisoluciones.com/
Description: Tema hijo para la firma Clínica Carolina. 
Version: 1.0.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: clinica-carolina
Template: astra
*/

/* ==========================================================================
   ÍNDICE
   1. Botón Latepoint
   2. Logo (cabecera principal y off canvas)
   3. Submenú escritorio (posicionamiento, colores y puente invisible)
   4. Menú fuera de lienzo — estructura y elementos
   5. Formularios WPForms
   ========================================================================== */


/* ==========================================================================
   1. BOTÓN LATEPOINT SECUESTRADO (Clases reales + Fix de línea)
   ========================================================================== */

/* 1a. Estilos visuales exactos apuntando a la clase ORIGINAL del botón */
html body a.latepoint-book-button.os_trigger_booking.wp-block-button__link,
html body .os-btn.latepoint-book-button,
.contenedor-boton-secuestrado .latepoint-book-button {
    background-color: #E5B4D4 !important;
    color: #000000 !important;
    font-size: 1rem !important;
    padding: 1.25em 1.75em !important;
    border-radius: 1rem !important;
    box-shadow: none !important;
    border: none !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    display: inline-block !important;
    transition: background-color 0.3s ease !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

/* 1b. Hover visual original */
html body a.latepoint-book-button.os_trigger_booking.wp-block-button__link:hover,
html body .os-btn.latepoint-book-button:hover,
.contenedor-boton-secuestrado .latepoint-book-button:hover {
    background-color: #F861C4 !important;
    color: #000000 !important;
}

/* 1c. Blindaje del contenedor para obligar a que estén en la misma fila */
.contenedor-boton-secuestrado {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important; /* Prohibido saltar a la línea de abajo */
    white-space: nowrap !important;
    gap: 15px !important;
    vertical-align: middle !important;
}

/* 1d. Aseguramos que el texto sanitario se comporte bien a su lado */
.contenedor-boton-secuestrado span {
    display: inline-block !important;
    margin: 0 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}


/* ==========================================================================
   2. LOGO
   ========================================================================== */

/* 2a. Logo cabecera principal */
#masthead .site-logo-img img.custom-logo,
#masthead .ast-builder-layout-element .site-logo-img img,
header#masthead .site-logo-img .custom-logo-link img {
    width: 300px !important;
    min-width: 160px !important;
    max-width: 400px !important;
    height: auto !important;
    padding: 0 16px !important;
}

/* 2b. Logo Off Canvas — cabecera fija */
div.ast-builder-layout-element.ast-flex.site-header-focus-item.ast-header-html-1 {
    position: fixed !important;
    top: -15px !important;
    left: 16px !important;
    z-index: 99999 !important;
    padding: 0 !important;
}

div.ast-builder-layout-element.ast-flex.site-header-focus-item.ast-header-html-1 img {
    width: 65px !important;
    height: auto !important;
}


/* ==========================================================================
   3. SUBMENÚ ESCRITORIO — POSICIONAMIENTO, COLORES Y PUENTE INVISIBLE
      (Solo activo sin menú hamburguesa, min-width: 921px)
   ========================================================================== */

@media (min-width: 921px) {

    /* 3a. Posicionamiento y estilos del submenú */
    html body .main-header-menu .sub-menu,
    html body .ast-desktop .main-header-menu .sub-menu {
        margin-top: -1rem !important;
        top: 100% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        padding: 0.75rem !important;
        background-color: #FDFEF9 !important;
        border-radius: 1rem !important;
        box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.1) !important;
    }

    /* 3b. Estilos de los enlaces del submenú */
    html body .main-header-menu .sub-menu a {
        color: #000000 !important;
        padding: 0.75rem 1.5rem !important;
        display: block !important;
        transition: all 0.2s ease !important;
        border-radius: 1rem !important;
    }

    /* 3c. Hover en enlaces del submenú */
    html body .main-header-menu .sub-menu a:hover {
        background-color: #FCEEF5 !important;
        color: #CE0989 !important;
    }

    /* 3d. Puente invisible (evita que el submenú se cierre al pasar al cursor) */
    html body .main-header-menu .menu-item-has-children {
        position: relative !important;
    }

    html body .main-header-menu .menu-item-has-children:hover > .sub-menu::before {
        content: '';
        position: absolute;
        top: 0 !important;
        left: 0;
        right: 0;
        height: 0 !important;
        display: block;
    }
}


/* ==========================================================================
   4. MENÚ FUERA DE LIENZO
   ========================================================================== */

/* 4a. Margen superior del contenedor */
div.ast-mobile-popup-content {
    margin-top: -2rem !important;
    padding-top: 0rem !important;
}

/* 4b. Border-radius en elementos principales */
.ast-mobile-popup-drawer .main-header-menu .menu-item > a,
.ast-offcanvas-menu .main-header-menu .menu-item > a {
    border-radius: 1rem !important;
}

/* 4c. Border-radius en subelementos */
.ast-mobile-popup-drawer .main-header-menu .sub-menu .menu-item > a,
.ast-offcanvas-menu .main-header-menu .sub-menu .menu-item > a {
    border-radius: 1rem !important;
}

/* 4d. Submenú expandido por defecto */
.ast-mobile-popup-drawer .main-header-menu .sub-menu,
.ast-offcanvas-menu .main-header-menu .sub-menu {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 4e. Ocultar el botón toggle (flecha) ya que no hace falta */
.ast-mobile-popup-drawer .main-header-menu .ast-menu-toggle,
.ast-offcanvas-menu .main-header-menu .ast-menu-toggle {
    display: none !important;
}

/* 4f. Ocultar flechas residuales del submenú */
.ast-mobile-popup-drawer .main-header-menu .sub-menu li > a .ast-menu-toggle,
.ast-mobile-popup-drawer .main-header-menu .sub-menu > li > a::before,
.ast-mobile-popup-drawer .main-header-menu .sub-menu > li > a .nav-link-arrow,
.ast-mobile-popup-drawer .main-header-menu .sub-menu > li::before {
    display: none !important;
    content: none !important;
}

/* 4g. Por si la flecha es un icono SVG inline */
.ast-mobile-popup-drawer .main-header-menu .sub-menu li > a svg {
    display: none !important;
}

/* 4h. Hover: neutraliza el resaltado heredado en el elemento padre
        cuando el cursor está sobre un subelemento */
.ast-offcanvas-menu li.menu-item-has-children:has(.sub-menu li:hover) > a.menu-link,
.ast-offcanvas-menu li.menu-item-has-children:has(.sub-menu li:focus-within) > a.menu-link,
.ast-mobile-popup-content li.menu-item-has-children:has(.sub-menu li:hover) > a.menu-link,
.ast-mobile-popup-content li.menu-item-has-children:has(.sub-menu li:focus-within) > a.menu-link {
    color: inherit !important;
    background-color: transparent !important;
    border-radius: 0 !important;
}

/* 4i. Hover aplicado únicamente al subelemento activo */
.ast-offcanvas-menu .sub-menu li:hover > a,
.ast-mobile-popup-content .sub-menu li:hover > a {
    color: #e879a0 !important;
    background-color: #fce7f3 !important;
    border-radius: 4px !important;
}


/* ==========================================================================
   5. FORMULARIOS WPFORMS
   ========================================================================== */

/* 5a. Layout en cuadrícula de dos columnas */
.wpforms-field-container {
    display: grid;
    grid-template-columns: 45% 45%;
    gap: 16px 4%;
    justify-content: left;
}

/* 5b. Campos que ocupan el ancho completo */
.wpforms-field-textarea,
.wpforms-field-checkbox,
.wpforms-submit-container,
.campoAncho {
    grid-column: 1 / -1;
}

/* 5c. Inputs a ancho completo dentro de su celda */
.wpforms-field-container input[type="text"],
.wpforms-field-container input[type="number"],
.wpforms-field-container input[type="email"],
.wpforms-field-container select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 5d. Box-sizing en campos de formulario */
.wpforms-field-name,
.wpforms-field-number,
.wpforms-field-text,
.wpforms-field-email,
.wpforms-field-select {
    box-sizing: border-box !important;
}

/* 5e. Botón de envío alineado a la izquierda */
.wpforms-submit-container {
    grid-column: 1 / -1;
    padding-left: 0 !important;
}

.wpforms-render-modern .wpforms-submit-container button {
    margin-left: 0 !important;
}

/* 5f. Adaptación a móviles — una sola columna */
@media (max-width: 767px) {
    .wpforms-field-container {
        grid-template-columns: 1fr;
    }
}