/* Menú inferior tipo app — template-parts/mobile-nav.php. Única navegación
   mobile/tablet en todo el sitio (<1200px, ver display:none en ese
   breakpoint más abajo). Sustituye al CTA del site-navbar de arriba, que se
   oculta a esos mismos anchos (ver .site-navbar__cta en navbar.css) para no
   duplicar la misma acción dos veces en pantalla a la vez. */
.menu-mobile-navbar {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    background-color: var(--wp--preset--color--cream);
    border-block-start: 1px solid var(--wp--preset--color--line);
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 400;
    padding: 0.8rem 1.2rem calc(0.8rem + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 16px rgba(43, 38, 32, 0.08);
}
.menu-mobile-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    flex: 1;
    padding: 0.6rem 0.4rem;
    background: none;
    border: none;
    color: var(--wp--preset--color--ink-soft);
    font-family: var(--wp--preset--font-family--body);
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}
.menu-mobile-navbar .menu-mobile-icon {
    color: var(--wp--preset--color--ink-soft);
    font-size: 2rem;
}
/* Sin esto, el <span> del label hereda el `span { color: pine; font-size:
   1.4rem }` global de css/main.css (mismo problema que .pet-field span en
   css/apartments.css) — el texto del menú salía en verde y con un tamaño
   que no era el que se pedía aquí. */
.menu-mobile-link span {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}
/* Mismo tratamiento visual (sin fondo ni pill, solo color/peso + acento fino
   debajo, igual que site-navbar__pill--active o las tabs de
   apartments-section) para dos casos distintos:
   - .menu-mobile-link--cta: acción principal (ej. "Reservar" en la ficha de
     apartamento, ver data-open-booking en template-parts/mobile-nav.php).
   - .menu-mobile-link--active: marca la página real en la que estamos
     (Inicio/Apartamentos) — nunca "Contacto", que es un ancla repetida en
     todos los footers y no una página (ver comentario en mobile-nav.php). */
.menu-mobile-link--cta,
.menu-mobile-link--active {
    position: relative;
    color: var(--wp--preset--color--clay-deep);
    font-weight: 700;
}
.menu-mobile-link--cta .menu-mobile-icon,
.menu-mobile-link--active .menu-mobile-icon {
    color: var(--wp--preset--color--clay-deep);
}
.menu-mobile-link--cta::after,
.menu-mobile-link--active::after {
    content: "";
    position: absolute;
    bottom: 0.3rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2.2rem;
    height: 2px;
    border-radius: 999px;
    background: var(--wp--preset--color--clay-deep);
}
.menu-mobile-link--cta:active,
.menu-mobile-link--active:active {
    color: var(--wp--preset--color--clay);
}
.menu-mobile-link--cta:active .menu-mobile-icon,
.menu-mobile-link--active:active .menu-mobile-icon {
    color: var(--wp--preset--color--clay);
}
@media (width>=1200px) {
    .menu-mobile-navbar {
        display: none;
    }
}