/* ESTES PARK SHUTTLE MOBILE MASTER
   Loaded only on phone-sized screens by site-layout.php. */

.mobile-site{display:none}

@media (max-width: 800px){
  html,body{
    margin:0!important;
    min-height:100%;
    background:#9aa9ae;
  }

  /* Desktop artwork/content is completely replaced on mobile. */
  .stage,.columns{display:none!important}
  .mobile-site{
    display:block;
    position:relative;
    min-height:100svh;
    overflow-x:hidden;
    background-image:
      linear-gradient(rgba(6,31,39,.16),rgba(6,31,39,.16)),
      var(--mobile-bg);
    background-size:cover;
    background-position:center center;
    background-attachment:scroll;
  }

  /* Mild readability treatment without altering the supplied artwork. */
  .mobile-interface-wrap{
    position:relative;
    width:min(100%,941px);
    margin:0 auto;
    filter:drop-shadow(0 7px 9px rgba(0,0,0,.34));
  }
  .mobile-interface{
    display:block;
    width:100%;
    height:auto;
    user-select:none;
    -webkit-user-drag:none;
  }
  .mobile-hotspot{
    position:absolute;
    display:block;
    z-index:20;
    background:transparent;
    -webkit-tap-highlight-color:rgba(255,255,255,.12);
  }
  .mobile-hotspot:focus-visible{
    outline:3px solid rgba(255,255,255,.95);
    outline-offset:-3px;
  }

  /* Page-specific text continues below the supplied mobile artwork. */
  .mobile-page-content{
    width:min(calc(100% - 28px),900px);
    margin:-1px auto 0;
    padding:26px 24px 70px;
    color:#f6f0e5;
    background:rgba(7,47,56,.91);
    border:1px solid rgba(255,255,255,.45);
    border-radius:18px 18px 0 0;
    box-shadow:0 -4px 18px rgba(0,0,0,.24);
    font-family:Arial,Helvetica,sans-serif;
  }
  .mobile-page-content h1,
  .mobile-page-content h2,
  .mobile-page-content h3{
    color:#fff;
  }
  .mobile-page-content a{color:#fff}
}

/* Keep the mobile replacement out of desktop/tablet layouts. */
@media (min-width:801px){
  .mobile-site{display:none!important}
}