/* SITE NAVBAR — fijo, global, vive fuera de .site-header/.header (ver
   header-front.php / header.php) para no depender de un position:fixed
   anidado dentro de un contenedor con overflow/isolation propios.

   Dos estados:
   - Home (sin .site-navbar--solid): arranca transparente sobre el hero,
     pasa a sólido con la clase .is-scrolled que togglea js/main.js.
   - Resto de páginas (.site-navbar--solid): sólido desde el primer frame,
     no hay hero detrás que justifique la transparencia inicial. */

.site-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    padding-block: 1.2rem;
    /* Mismo padding-inline que hero/apartments-section/surroundings-section
       — ver --laiguana-block-padding-inline en css/main.css — así el logo
       y el CTA quedan alineados con el resto de bloques de la home. */
    padding-inline: var(--laiguana-block-padding-inline);
    background-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.site-navbar.is-scrolled,
.site-navbar--solid {
    background-color: rgba(243, 239, 230, 0.92); /* cream con alpha */
    backdrop-filter: blur(8px);
    box-shadow: 0 1px 0 var(--wp--preset--color--line);
}

/* ---- Logo ---- */
.site-navbar__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.site-navbar__logo-img {
    display: block;
    height: 3.6rem;
    width: auto;
}

.site-navbar__logo-text {
    font-family: var(--wp--preset--font-family--heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--wp--preset--color--cream);
    transition: color 0.25s ease;
}

.site-navbar.is-scrolled .site-navbar__logo-text,
.site-navbar--solid .site-navbar__logo-text {
    color: var(--wp--preset--color--ink);
}

/* ---- Menu (pills) — oculto en mobile/tablet; a esos anchos la navegación
   la resuelve el menú inferior tipo app (ver template-parts/mobile-nav.php
   y css/components/mobile-nav.css). ---- */
.site-navbar__menu {
    display: none;
}

@media (min-width: 1024px) {
    .site-navbar__menu {
        display: flex;
        gap: 0.4rem;
        background: rgba(255, 253, 249, 0.14);
        border-radius: var(--wp--custom--border-radius--full);
        padding: 0.5rem;
        transition: background-color 0.25s ease;
    }

    .site-navbar.is-scrolled .site-navbar__menu,
    .site-navbar--solid .site-navbar__menu {
        background: var(--wp--preset--color--cream-card);
    }
}

.site-navbar__pill {
    display: inline-flex;
    align-items: center;
    padding: 0.8rem 1.6rem;
    border-radius: var(--wp--custom--border-radius--full);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 500;
    color: var(--wp--preset--color--cream);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.site-navbar.is-scrolled .site-navbar__pill,
.site-navbar--solid .site-navbar__pill {
    color: var(--wp--preset--color--ink-soft);
}

.site-navbar__pill:hover {
    background: rgba(255, 253, 249, 0.2);
}

.site-navbar.is-scrolled .site-navbar__pill:hover,
.site-navbar--solid .site-navbar__pill:hover {
    background: var(--wp--preset--color--white);
    color: var(--wp--preset--color--ink);
}

/* ---- CTA — siempre sólido, funciona igual sobre el hero que sobre la
   barra sólida. ---- */
.site-navbar__cta {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 1rem 1.8rem;
    background: var(--wp--preset--color--clay-deep);
    color: var(--wp--preset--color--white);
    border-radius: var(--wp--custom--border-radius--full);
    font-size: var(--wp--preset--font-size--button);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

.site-navbar__cta:hover {
    background: var(--wp--preset--color--clay);
}

/* <1200px ya tiene el menú inferior tipo app (ver template-parts/mobile-nav.php
   y css/components/mobile-nav.css) con su propia acción "Reservar"/"Contacto"
   — el CTA de aquí arriba se oculta en todas las páginas para no duplicar la
   misma acción dos veces en pantalla a la vez. */
@media (max-width: 1199.98px) {
    .site-navbar__cta {
        display: none;
    }
}

@media (min-width: 768px) {
    .site-navbar {
        padding-block: 1.6rem;
    }
}

/* Páginas sin hero (.site-navbar--solid): compensar la altura del navbar
   fijo con padding-top en el body, para que el contenido no arranque
   tapado debajo de la barra. body.home no lo necesita — ahí el hero ya
   ocupa 100svh y el navbar flota transparente sobre él. */
body:not(.home) {
    padding-top: 6.8rem;
}

@media (min-width: 768px) {
    body:not(.home) {
        padding-top: 8.2rem;
    }
}

/* Todas las secciones navegables desde el navbar (pills de home y de la
   ficha de apartamento) necesitan scroll-margin-top — si no, el navbar
   fijo pisa el principio de la sección al saltar por ancla. Mínimo 4rem. */
#apartmentsSection,
#entorno,
#reservar,
#grid-images,
#services,
#equipment,
#location,
#prices,
#booking-form {
    scroll-margin-top: 8rem;
}

@media (min-width: 768px) {

    #apartmentsSection,
    #entorno,
    #reservar {
      scroll-margin-top: 5rem;
    }

    #grid-images,
    #services,
    #equipment,
    #location,
    #prices,
    #booking-form {
        scroll-margin-top: 10rem;
    }
}