/*
Theme Name: Poolax
Theme URI: https://themeholy.com/wordpress/poolax
Author: Themeholy
Author URI: https://themeforest.net/user/themeholy
Description: Poolax - Pool Cleaning & Services WordPress Theme
Version: 1.0.0
*/

/* ==========================================================
   ELIMINAR BREADCRUMB Y TÍTULO DE POOLAX
========================================================== */

#breadcumbwrap,
.breadcumb-wrapper,
.breadcumb-title,
.breadcumb-menu{
    display:none !important;
}

/* ==========================================================
   PISCINAS CHEVALIER
   PERSONALIZACIÓN HEADER
========================================================== */


/* ==========================================================
   FONDO DEL HEADER
========================================================== */

.header-layout1,
.header-layout2,
.th-header,
.main-header,
header {
    height: 220px;

    background:
        linear-gradient(
            rgba(0, 45, 70, 0.35),
            rgba(0, 45, 70, 0.35)
        ),
        url("http://piscinaschevalier.com/wp-content/uploads/2026/07/POOL-WATER.jpg")
        center center / cover no-repeat fixed;
}


/* ==========================================================
   ESTRUCTURA DEL HEADER
========================================================== */

.menu-area {
    position: relative;

    /* Sombra suave del contenedor blanco */
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.10);
}

/* La columna original del logo deja de ocupar espacio */
.menu-area > .row > .col-auto:first-child {
    width: 0 !important;
    flex: 0 0 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}


/* ==========================================================
   LOGO
========================================================== */

.header-logo {
    position: absolute;
    left: -50px;
    top: 50px;
    bottom: 0;

    display: flex;
    align-items: center;

    z-index: 1000;
}

.header-logo img {
    display: block;

    width: 160px !important;/*
Theme Name: Poolax
Theme URI: https://themeholy.com/wordpress/poolax
Author: Themeholy
Author URI: https://themeforest.net/user/themeholy
Description: Poolax - Pool Cleaning & Services WordPress Theme
Version: 1.0.0
*/

/* ==========================================================
   ELIMINAR BREADCRUMB Y TÍTULO DE POOLAX
========================================================== */

#breadcumbwrap,
.breadcumb-wrapper,
.breadcumb-title,
.breadcumb-menu{
    display:none !important;
}

/* ==========================================================
   PISCINAS CHEVALIER
   PERSONALIZACIÓN HEADER
========================================================== */


/* ==========================================================
   FONDO DEL HEADER
========================================================== */

.header-layout1,
.header-layout2,
.th-header,
.main-header,
header {
    height: 220px;

    background:
        linear-gradient(
            rgba(0, 45, 70, 0.35),
            rgba(0, 45, 70, 0.35)
        ),
        url("http://piscinaschevalier.com/wp-content/uploads/2026/07/POOL-WATER.jpg")
        center center / cover no-repeat fixed;
}


/* ==========================================================
   ESTRUCTURA DEL HEADER
========================================================== */

.menu-area {
    position: relative;

    /* Sombra suave del contenedor blanco */
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.10);
}

/* La columna original del logo deja de ocupar espacio */
.menu-area > .row > .col-auto:first-child {
    width: 0 !important;
    flex: 0 0 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}


/* ==========================================================
   LOGO
========================================================== */

.header-logo {
    position: absolute;
    left: -50px;
    top: 50px;
    bottom: 0;

    display: flex;
    align-items: center;

    z-index: 1000;
}

.header-logo img {
    display: block;/*
Theme Name: Poolax
Theme URI: https://themeholy.com/wordpress/poolax
Author: Themeholy
Author URI: https://themeforest.net/user/themeholy
Description: Poolax - Pool Cleaning & Services WordPress Theme
Version: 1.0.0
*/

/* ==========================================================
   ELIMINAR BREADCRUMB Y TÍTULO DE POOLAX
========================================================== */

#breadcumbwrap,
.breadcumb-wrapper,
.breadcumb-title,
.breadcumb-menu{
    display:none !important;
}

/* ==========================================================
   PISCINAS CHEVALIER
   PERSONALIZACIÓN HEADER
========================================================== */


/* ==========================================================
   FONDO DEL HEADER
========================================================== */

.header-layout1,
.header-layout2,
.th-header,
.main-header,
header {
    height: 220px;

    background:
        linear-gradient(
            rgba(0, 45, 70, 0.35),
            rgba(0, 45, 70, 0.35)
        ),
        url("http://piscinaschevalier.com/wp-content/uploads/2026/07/POOL-WATER.jpg")
        center center / cover no-repeat fixed;
}


/* ==========================================================
   ESTRUCTURA DEL HEADER
========================================================== */

.menu-area {
    position: relative;

    /* Sombra suave del contenedor blanco */
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.10);
}

/* La columna original del logo deja de ocupar espacio */
.menu-area > .row > .col-auto:first-child {
    width: 0 !important;
    flex: 0 0 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}


/* ==========================================================
   LOGO
========================================================== */

.header-logo {
    position: absolute;
    left: -50px;
    top: 50px;
    bottom: 0;

    display: flex;
    align-items: center;

    z-index: 1000;
}

.header-logo img {
    display: block;

    width: 160px !important;
    max-width: 160px !important;
    height: auto !important;

    /* Halo luminoso blanco */
    filter:
        drop-shadow(0 0 4px rgba(255, 255, 255, 0.90))
        drop-shadow(0 0 10px rgba(255, 255, 255, 0.45));

    transition:
        transform 0.25s ease,
        filter 0.25s ease;
}


    width: 160px !important;
    max-width: 160px !important;
    height: auto !important;

    /* Halo luminoso blanco */
    filter:
        drop-shadow(0 0 4px rgba(255, 255, 255, 0.90))
        drop-shadow(0 0 10px rgba(255, 255, 255, 0.45));

    transition:
        transform 0.25s ease,
        filter 0.25s ease;
}

    max-width: 160px !important;
    height: auto !important;

    /* Halo luminoso blanco */
    filter:
        drop-shadow(0 0 4px rgba(255, 255, 255, 0.90))
        drop-shadow(0 0 10px rgba(255, 255, 255, 0.45));

    transition:
        transform 0.25s ease,
        filter 0.25s ease;
}

/* Efecto luminoso al pasar el ratón */
.header-logo:hover img {
    transform: scale(1.04);

    filter:
        drop-shadow(0 0 6px rgba(255, 255, 255, 1))
        drop-shadow(0 0 14px rgba(255, 255, 255, 0.60));
}


/* ==========================================================
   MENÚ PRINCIPAL
========================================================== */

.main-menu {
    margin-left: 200px !important;
}


/* ==========================================================
   BREADCRUMB
========================================================== */

#breadcumbwrap {
    padding: 0 !important;
    min-height: 0 !important;
}

/* ==========================================================
   CORRECCIÓN HEADER INVISIBLE EN CHROME
========================================================== */

.elementor-widget-poolaxheader,
.elementor-widget-poolaxheader.animated,
.elementor-widget-poolaxheader .th-header,
.elementor-widget-poolaxheader .header-top,
.elementor-widget-poolaxheader .sticky-wrapper,
.elementor-widget-poolaxheader .menu-area {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
}

.elementor-widget-poolaxheader {
    position: relative !important;
    z-index: 999 !important;
}

.th-header {
    display: block !important;
}

/* ==========================================================
   HEADER FORMA PISCINA
========================================================== */

.th-header,
.header-layout1,
.header-layout2,
.main-header,
header{

    border-radius:
        0 0
        45% 45%
        /
        0 0
        80px 80px;

    overflow:hidden;
}

/* ==========================================================
   FOOTER COLOR
========================================================== */

.footer-wrapper,
.footer-layout1,
.footer-layout2,
.footer-top,
.footer-bottom,
.copyright-wrap,
.copyright-area{
    background:#094e8a !important;
}


/* ==========================================================
   LOGO CENTRADO SOLO EN MÓVIL
========================================================== */

@media screen and (max-width: 767px){

    /* Mantener la columna del logo fuera del flujo */
    .menu-area > .row > .col-auto:first-child{
        width: 0 !important;
        flex: 0 0 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    /* Centrar el mismo logo solamente en el header inicial */
    .header-logo{
        display: flex !important;
        position: absolute !important;

        left: 50% !important;
        top: 215px !important;
        right: auto !important;
        bottom: auto !important;

        transform: translate(-50%, -50%) !important;

        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;

        align-items: center !important;
        justify-content: center !important;

        z-index: 20 !important;
        pointer-events: none;
    }

    .header-logo img{
        display: block !important;
        width: 120px !important;
        max-width: 120px !important;
        height: auto !important;
    }

    /* Evitar que el logo acompañe al menú sticky al bajar */
    .sticky-wrapper.sticky .header-logo,
    .sticky-wrapper.sticky-active .header-logo,
    .sticky-wrapper.active .header-logo{
        display: none !important;
    }

    /* El menú móvil no hereda el desplazamiento del escritorio */
    .main-menu{
        margin-left: 0 !important;
    }
}