/* ============================================================================
   RichMallorca — Menu movil como panel lateral
   ----------------------------------------------------------------------------
   Se carga DESPUES de staycreative_20200826.css y sobreescribe el menu
   hamburguesa antiguo, que al abrirse tapaba la pantalla entera.

   Ahora sale un panel pegado a la derecha (debajo del boton MENU) y el resto
   de la pagina queda oscurecido. Tocar fuera del panel lo cierra: eso lo hace
   el script que hay al final de fronts/partials/nav.blade.php.

   PARA CAMBIAR EL ANCHO: la variable --rm-menu-w de aqui abajo.
     80vw  = 80% del ancho de la pantalla
     320px = tope, para que en tablet no se haga enorme
   En un movil, un tercio de pantalla son unos 130px y no cabe
   "Alquiler de larga estancia"; por eso no baja de ahi.

   Si se toca este fichero, subir el ?v= en fronts/partials/head.blade.php.
   ========================================================================== */

@media (max-width: 959px) {

  .uk-navbar-nav#main-menu {
    --rm-menu-w: min(80vw, 320px);

    /* fixed y no absolute: asi ocupa siempre el alto de la pantalla, aunque
       se abra con la pagina a medio bajar y la cabecera ya no este arriba */
    position: fixed;
    top: 0;
    left: auto;
    right: 0;
    width: var(--rm-menu-w);
    box-sizing: border-box;
    padding: 90px 24px 32px;
    margin-right: 0;
    box-shadow: -12px 0 40px rgba(34, 34, 34, .12);
  }

  .uk-navbar-nav#main-menu.visible-flex {
    height: 100vh;
    height: 100dvh;
    animation: rm-menu-in .22s ease;
  }

  /* Velo sobre el resto de la pagina. Cubre solo lo que queda a la izquierda
     del panel, asi no oscurece el fondo del propio menu. Va dentro del panel,
     por eso aparece con su mismo fundido. */
  .uk-navbar-nav#main-menu.visible-flex::before {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: var(--rm-menu-w);
    background: rgba(34, 34, 34, .45);
  }

  /* Con el menu abierto el logo pasa por debajo del velo; si no, quedaba
     medio encima del panel. La clase la pone el script de nav.blade.php. */
  .uk-navbar-container.rm-menu-open .uk-navbar-left { z-index: 0; }

  /* Un poco mas compacto: en un panel estrecho sobraba aire */
  .uk-navbar-nav#main-menu li a { padding: 16px 4px; }
  .uk-navbar-nav#main-menu .uk-nav-sub { padding-left: 14px; }
  .uk-navbar-nav#main-menu .uk-nav-sub li a { padding: 10px 4px; font-weight: 500; }

  /* Entrada con fundido y no deslizando: mover el panel desde fuera de la
     pantalla (o con transform) provoca scroll horizontal un instante y
     descoloca el velo, que es position: fixed. */
  @keyframes rm-menu-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

@media (max-width: 959px) and (prefers-reduced-motion: reduce) {
  .uk-navbar-nav#main-menu.visible-flex { animation: none; }
}