/* BuddySocial v10.77 - Guest mobile/tablet/PWA menu unification
   Applies ONLY to visitors who are not logged in and ONLY <= 1100px.
   Desktop remains untouched. */

@media (max-width:1100px){
  /* Keep the public/guest header tidy: the login choices live in the mobile menu. */
  body.guest-body .retro-top .retro-topin{
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  body.guest-body .retro-top .retro-brand{
    min-width:0 !important;
    max-width:100% !important;
  }
  body.guest-body .retro-top .account-mini{
    display:none !important;
  }

  /* Same blue BuddySocial menu shell as logged-in mobile/tablet. */
  body.guest-body .retro-nav{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
    background:linear-gradient(180deg,#2f78b0,#28699f) !important;
  }
  body.guest-body .retro-nav .retro-navin{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    padding:8px !important;
    box-sizing:border-box !important;
  }
  body.guest-body .retro-nav .nav-toggle{
    width:100% !important;
    min-height:48px !important;
    margin:0 !important;
    padding:0 14px !important;
    box-sizing:border-box !important;
    border:1px solid #1f5c8b !important;
    border-radius:10px !important;
    background:linear-gradient(180deg,#4b91c8,#3478b0) !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    font-size:17px !important;
    font-weight:900 !important;
    text-shadow:0 1px 2px rgba(0,0,0,.25) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 2px 6px rgba(0,0,0,.12) !important;
  }

  /* Do NOT force display here; app.js remains in control of open/closed state. */
  body.guest-body .retro-nav #main-nav-links{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    max-height:calc(100dvh - 135px) !important;
    margin:7px 0 0 !important;
    padding:7px !important;
    box-sizing:border-box !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    border:1px solid #1f5c8b !important;
    border-radius:10px !important;
    background:#28699f !important;
    box-shadow:0 8px 24px rgba(20,50,75,.20) !important;
  }

  body.guest-body .retro-nav #main-nav-links > .nav-guest-spacer{
    display:none !important;
  }

  /* Guest links receive exactly the same card feeling as the member menu. */
  body.guest-body .retro-nav #main-nav-links > a{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:7px !important;
    width:100% !important;
    min-width:0 !important;
    min-height:42px !important;
    height:auto !important;
    margin:0 0 6px !important;
    padding:8px 10px !important;
    box-sizing:border-box !important;
    border:1px solid #6ba6d0 !important;
    border-radius:8px !important;
    background:linear-gradient(180deg,#4a8dc2,#3477ae) !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    font-size:13px !important;
    font-weight:800 !important;
    line-height:1.15 !important;
    text-decoration:none !important;
    text-align:left !important;
    text-shadow:0 1px 1px rgba(0,0,0,.20) !important;
    box-shadow:none !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }
  body.guest-body .retro-nav #main-nav-links > a:last-child{
    margin-bottom:0 !important;
  }
  body.guest-body .retro-nav #main-nav-links > a.active,
  body.guest-body .retro-nav #main-nav-links > a:hover,
  body.guest-body .retro-nav #main-nav-links > a:focus-visible{
    background:linear-gradient(180deg,#f7ad2b,#e68b08) !important;
    border-color:#ffd17c !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    outline:none !important;
  }

  /* Login/register stand out but remain part of the same visual system. */
  body.guest-body .retro-nav #main-nav-links > .nav-login-link{
    margin-top:7px !important;
    border-color:#87b9dc !important;
    background:linear-gradient(180deg,#3e85bb,#286da5) !important;
  }
  body.guest-body .retro-nav #main-nav-links > .nav-register-link{
    border-color:#ffd17c !important;
    background:linear-gradient(180deg,#f7ad2b,#e68b08) !important;
  }

  /* Guest bottom bar: same dimensions and safe-area behavior as BuddySocial mobile UI. */
  body.guest-body .guest-mobilebar{
    box-sizing:border-box !important;
    max-width:100vw !important;
    padding-bottom:env(safe-area-inset-bottom,0px) !important;
  }
  body.guest-body .guest-mobilebar > a{
    min-width:0 !important;
    overflow:hidden !important;
  }
  body.guest-body .guest-mobilebar .mobilebar-label{
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
}

@media (max-width:600px){
  body.guest-body .retro-nav .retro-navin{padding:7px !important;}
  body.guest-body .retro-nav .nav-toggle{
    min-height:46px !important;
    border-radius:9px !important;
    font-size:16px !important;
  }
  body.guest-body .retro-nav #main-nav-links{
    padding:7px !important;
    border-radius:10px !important;
  }
  body.guest-body .retro-nav #main-nav-links > a{
    min-height:42px !important;
    padding:8px 10px !important;
    font-size:13px !important;
    border-radius:7px !important;
  }
}

@media (display-mode:standalone) and (max-width:1100px){
  body.guest-body .retro-nav{padding-top:env(safe-area-inset-top,0px) !important;}
  body.guest-body .retro-nav #main-nav-links{
    max-height:calc(100dvh - 150px - env(safe-area-inset-top,0px)) !important;
  }
}