/* ============================================
   HEADER DESKTOP - SHA THEME 2025
   ============================================ */

/* --- 1. Estado Base (Transparente por defecto) --- */
.site-header-desktop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1015;
    /* Por encima de todos los bloques del menú (1002, 1001, 1000) pero debajo de la promo bar (1020) */
    background-color: transparent;
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, top 0.3s ease-in-out, transform 0.3s ease-in-out;
    border-bottom: 1px solid transparent;
    /* Para la transición cuando se vuelve blanco */
}

/* Ajuste del header cuando hay promo bar */
body:has(.promo-bar) .site-header-desktop {
    top: 40px;
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, top 0.3s ease-in-out, transform 0.3s ease-in-out;
}

body:has(.promo-bar).logged-in .site-header-desktop {
    top: 72px;
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, top 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Desktop (>=1024): header fijo visible; el efecto ocultar/mostrar al scroll solo en mobile (header.js + mobile CSS) */

/* Ajuste del off-canvas menu cuando hay promo bar */
body:has(.promo-bar) .off-canvas-menu {
    top: calc(40px + var(--site-header-height-desktop));
    /* promo bar + header desktop */
}

body:has(.promo-bar).logged-in .off-canvas-menu {
    top: calc(72px + var(--site-header-height-desktop));
}

/* Elementos en estado transparente */
.site-header-desktop .hamburger-line {
    background-color: #fff;
}

.site-header-desktop .logo .logo-white {
    display: block;
}

.site-header-desktop .logo .logo-black {
    display: none;
}

.site-header-desktop .cta-book,
.site-header-desktop .cta-contact,
.site-header-desktop .header-right a.cta-book:link,
.site-header-desktop .header-right a.cta-book:visited,
.site-header-desktop .header-right a.cta-contact:link,
.site-header-desktop .header-right a.cta-contact:visited {
    color: #fff;
    border-color: #fff;
    background-color: transparent;
}

/* Header transparente: igual que bookings-dropdown; blanco forzado (contacto = mismo aspecto que reservar) */
body:not(.off-canvas-open):not(.no-home):not(.lang-menu-open) .site-header-desktop:not(.is-scrolled) .cta-book,
body:not(.off-canvas-open):not(.no-home):not(.lang-menu-open) .site-header-desktop:not(.is-scrolled) .cta-contact,
body:not(.off-canvas-open):not(.no-home):not(.lang-menu-open) .site-header-desktop:not(.is-scrolled) .header-right a.cta-book:link,
body:not(.off-canvas-open):not(.no-home):not(.lang-menu-open) .site-header-desktop:not(.is-scrolled) .header-right a.cta-book:visited,
body:not(.off-canvas-open):not(.no-home):not(.lang-menu-open) .site-header-desktop:not(.is-scrolled) .header-right a.cta-contact:link,
body:not(.off-canvas-open):not(.no-home):not(.lang-menu-open) .site-header-desktop:not(.is-scrolled) .header-right a.cta-contact:visited,
body:not(.off-canvas-open):not(.no-home):not(.lang-menu-open) .site-header-desktop:not(.is-scrolled) .cta-book:hover,
body:not(.off-canvas-open):not(.no-home):not(.lang-menu-open) .site-header-desktop:not(.is-scrolled) .cta-contact:hover,
body:not(.off-canvas-open):not(.no-home):not(.lang-menu-open) .site-header-desktop:not(.is-scrolled) .header-right a.cta-book:hover,
body:not(.off-canvas-open):not(.no-home):not(.lang-menu-open) .site-header-desktop:not(.is-scrolled) .header-right a.cta-contact:hover,
body:not(.off-canvas-open):not(.no-home):not(.lang-menu-open) .site-header-desktop:not(.is-scrolled) .cta-book:active,
body:not(.off-canvas-open):not(.no-home):not(.lang-menu-open) .site-header-desktop:not(.is-scrolled) .cta-contact:active,
body:not(.off-canvas-open):not(.no-home):not(.lang-menu-open) .site-header-desktop:not(.is-scrolled) .header-right a.cta-book:active,
body:not(.off-canvas-open):not(.no-home):not(.lang-menu-open) .site-header-desktop:not(.is-scrolled) .header-right a.cta-contact:active,
body:not(.off-canvas-open):not(.no-home):not(.lang-menu-open) .site-header-desktop:not(.is-scrolled) .cta-book:focus,
body:not(.off-canvas-open):not(.no-home):not(.lang-menu-open) .site-header-desktop:not(.is-scrolled) .cta-contact:focus,
body:not(.off-canvas-open):not(.no-home):not(.lang-menu-open) .site-header-desktop:not(.is-scrolled) .header-right a.cta-book:focus,
body:not(.off-canvas-open):not(.no-home):not(.lang-menu-open) .site-header-desktop:not(.is-scrolled) .header-right a.cta-contact:focus {
    color: #ffffff !important;
    border-color: #ffffff !important;
    background: transparent !important;
}

/* --- 2. Estado Activo (Fondo Blanco) --- */
/* Se activa con scroll, al abrir el menú o al abrir el selector de idiomas */
.site-header-desktop.is-scrolled,
body.no-home .site-header-desktop,
body.off-canvas-open .site-header-desktop,
body.lang-menu-open .site-header-desktop {
    background-color: #ffffff;
    border-bottom: 1px solid #e5e5e5;
    /* Mismo estilo que los bordes laterales de los submenús */
}

/* Elementos en estado activo (fondo blanco) */
.site-header-desktop.is-scrolled .hamburger-line,
body.no-home .site-header-desktop .hamburger-line,
body.off-canvas-open .site-header-desktop .hamburger-line,
body.lang-menu-open .site-header-desktop .hamburger-line {
    background-color: #000;
}

.site-header-desktop.is-scrolled .logo .logo-white,
body.no-home .site-header-desktop .logo .logo-white,
body.off-canvas-open .site-header-desktop .logo .logo-white,
body.lang-menu-open .site-header-desktop .logo .logo-white {
    display: none;
}

.site-header-desktop.is-scrolled .logo .logo-black,
body.no-home .site-header-desktop .logo .logo-black,
body.off-canvas-open .site-header-desktop .logo .logo-black,
body.lang-menu-open .site-header-desktop .logo .logo-black {
    display: block;
}

.site-header-desktop.is-scrolled .cta-book,
.site-header-desktop.is-scrolled .header-right a.cta-book:link,
.site-header-desktop.is-scrolled .header-right a.cta-book:visited,
body.no-home .site-header-desktop .cta-book,
body.no-home .site-header-desktop .header-right a.cta-book:link,
body.no-home .site-header-desktop .header-right a.cta-book:visited,
body.off-canvas-open .site-header-desktop .cta-book,
body.off-canvas-open .site-header-desktop .header-right a.cta-book:link,
body.off-canvas-open .site-header-desktop .header-right a.cta-book:visited,
body.lang-menu-open .site-header-desktop .cta-book,
body.lang-menu-open .site-header-desktop .header-right a.cta-book:link,
body.lang-menu-open .site-header-desktop .header-right a.cta-book:visited {
    background: var(--clickable-color);
    color: #ffffff !important;
    border: solid 1px var(--clickable-color);
}

.site-header-desktop.is-scrolled .cta-contact,
.site-header-desktop.is-scrolled .header-right a.cta-contact:link,
.site-header-desktop.is-scrolled .header-right a.cta-contact:visited,
body.no-home .site-header-desktop .cta-contact,
body.no-home .site-header-desktop .header-right a.cta-contact:link,
body.no-home .site-header-desktop .header-right a.cta-contact:visited,
body.off-canvas-open .site-header-desktop .cta-contact,
body.off-canvas-open .site-header-desktop .header-right a.cta-contact:link,
body.off-canvas-open .site-header-desktop .header-right a.cta-contact:visited,
body.lang-menu-open .site-header-desktop .cta-contact,
body.lang-menu-open .site-header-desktop .header-right a.cta-contact:link,
body.lang-menu-open .site-header-desktop .header-right a.cta-contact:visited {
    background: transparent !important;
    color: #000000 !important;
    border: solid 1px #000000;
}

.site-header-desktop.is-scrolled .cta-book:hover,
.site-header-desktop.is-scrolled .header-right a.cta-book:hover,
body.no-home .site-header-desktop .cta-book:hover,
body.no-home .site-header-desktop .header-right a.cta-book:hover,
body.off-canvas-open .site-header-desktop .cta-book:hover,
body.off-canvas-open .site-header-desktop .header-right a.cta-book:hover,
body.lang-menu-open .site-header-desktop .cta-book:hover,
body.lang-menu-open .site-header-desktop .header-right a.cta-book:hover {
    background: #555555;
    border: solid 1px #555555;
    color: #ffffff;
}

.site-header-desktop.is-scrolled .cta-contact:hover,
.site-header-desktop.is-scrolled .header-right a.cta-contact:hover,
body.no-home .site-header-desktop .cta-contact:hover,
body.no-home .site-header-desktop .header-right a.cta-contact:hover,
body.off-canvas-open .site-header-desktop .cta-contact:hover,
body.off-canvas-open .site-header-desktop .header-right a.cta-contact:hover,
body.lang-menu-open .site-header-desktop .cta-contact:hover,
body.lang-menu-open .site-header-desktop .header-right a.cta-contact:hover {
    background: transparent !important;
    border: solid 1px #555555;
    color: #555555 !important;
}

.site-header-desktop.is-scrolled .cta-book:active,
.site-header-desktop.is-scrolled .header-right a.cta-book:active,
body.no-home .site-header-desktop .cta-book:active,
body.no-home .site-header-desktop .header-right a.cta-book:active,
body.off-canvas-open .site-header-desktop .cta-book:active,
body.off-canvas-open .site-header-desktop .header-right a.cta-book:active,
body.lang-menu-open .site-header-desktop .cta-book:active,
body.lang-menu-open .site-header-desktop .header-right a.cta-book:active {
    background: #2c2c2c;
    border: solid 1px #2c2c2c;
    color: #ffffff;
}

.site-header-desktop.is-scrolled .cta-contact:active,
.site-header-desktop.is-scrolled .header-right a.cta-contact:active,
body.no-home .site-header-desktop .cta-contact:active,
body.no-home .site-header-desktop .header-right a.cta-contact:active,
body.off-canvas-open .site-header-desktop .cta-contact:active,
body.off-canvas-open .site-header-desktop .header-right a.cta-contact:active,
body.lang-menu-open .site-header-desktop .cta-contact:active,
body.lang-menu-open .site-header-desktop .header-right a.cta-contact:active {
    background: transparent !important;
    border: solid 1px #000000;
    color: #000000 !important;
}

/* --- 3. Contenedor y Layout ---
   Grid 1fr / auto / 1fr: columnas laterales igual anchura útil → logo centrado en viewport (flex + flex:1 falla por min-width del contenido) */
.site-header-desktop .contenedor {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    padding-top: var(--site-header-padding-y-desktop, 8px);
    padding-bottom: var(--site-header-padding-y-desktop, 8px);
    box-sizing: border-box;
    height: auto;
}

.site-header-desktop .header-left {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 0;
    justify-self: start;
    min-width: 0;
}

.site-header-desktop .header-center {
    justify-self: center;
}

.site-header-desktop .header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    justify-self: end;
    min-width: 0;
}

/* Logo: sin inline-block (hueco vertical por baseline del texto) */
.site-header-desktop .header-center .logo {
    line-height: 0;
}

.site-header-desktop .header-center .logo a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 130px !important;
    line-height: 0;
    text-decoration: none;
}

.site-header-desktop .header-center .logo img {
    width: 130px !important;
    height: auto;
    /* Sin display aquí: este selector img ganaba a .logo-black { display: none } */
}

/* CTAs header: tipografía en botones.css; aquí solo ajustes de contexto */
.cta-book,
a.cta-book,
.cta-contact,
a.cta-contact {
    text-transform: uppercase;
    text-decoration: none;
    box-sizing: border-box;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    vertical-align: middle;
}

/* Mostrar/ocultar elementos según dispositivo */
.solo-desktop {
    display: block !important;
}

.solo-movil {
    display: none !important;
}