/*
  Walkje mobile fit final.
  Purpose: stop oversized mobile headings/forms and fix bottom app menu.
*/

:root{
  --wj-bg:#07130d;
  --wj-panel:rgba(255,255,255,.06);
  --wj-line:rgba(255,255,255,.13);
  --wj-green:#22c55e;
  --wj-dark:#05210f;
  --wj-text:#f5fff7;
  --wj-soft:#cfe8d5;
}

/* Desktop remains normal website. */
@media(min-width:901px){
  .bottom-menu{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  body{
    padding-bottom:0!important;
  }
}

/* Phone/tablet app mode. */
@media(max-width:900px){
  html{
    font-size:16px!important;
    overflow-x:hidden!important;
  }

  body{
    overflow-x:hidden!important;
    padding-bottom:96px!important;
    -webkit-text-size-adjust:100%!important;
  }

  main,
  .live-map-page,
  .group-community-page{
    width:100%!important;
    max-width:100%!important;
    padding:10px 10px 104px!important;
    margin:0!important;
  }

  .topbar{
    min-height:56px!important;
  }

  .topbar-inner{
    min-height:56px!important;
    padding:0 12px!important;
    justify-content:center!important;
  }

  .logo{
    font-size:22px!important;
    line-height:1!important;
  }

  .logo img{
    width:30px!important;
    height:30px!important;
  }

  .nav{
    display:none!important;
  }

  .hero,
  .live-map-hero,
  .group-community-hero,
  .live-map-grid,
  .group-search-layout,
  .grid,
  .grid2,
  .group-principles{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    margin:10px 0!important;
  }

  .hero-card,
  .card,
  .panel,
  .live-map-card,
  .group-card{
    border-radius:22px!important;
    padding:14px!important;
    min-height:0!important;
  }

  .kicker{
    font-size:12px!important;
    min-height:28px!important;
    padding:0 10px!important;
    margin-bottom:10px!important;
  }

  h1,
  .hero-card h1,
  .live-map-card h1,
  .group-card h1{
    font-size:clamp(38px,13vw,54px)!important;
    line-height:.9!important;
    letter-spacing:-.06em!important;
    margin:8px 0 12px!important;
    max-width:100%!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }

  h2,
  .live-map-card h2,
  .group-card h2{
    font-size:clamp(28px,9vw,38px)!important;
    line-height:1!important;
    letter-spacing:-.045em!important;
    margin:0 0 10px!important;
  }

  h3,
  .live-result h3,
  .community-walk-card h3{
    font-size:22px!important;
    line-height:1.05!important;
    letter-spacing:-.035em!important;
  }

  p,
  .lead,
  .live-map-card p,
  .group-card p,
  label{
    font-size:15px!important;
    line-height:1.38!important;
  }

  label{
    margin-top:10px!important;
    margin-bottom:5px!important;
  }

  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
  select,
  textarea,
  .live-map-search input,
  .live-map-search select,
  .group-card input,
  .group-card select,
  .group-card textarea{
    min-height:48px!important;
    height:auto!important;
    font-size:16px!important;
    line-height:1.2!important;
    border-radius:15px!important;
    padding:10px 12px!important;
  }

  textarea{
    min-height:84px!important;
  }

  button,
  .btn,
  input[type=submit],
  .group-actions a,
  .group-actions button,
  .live-map-search button{
    min-height:48px!important;
    font-size:14px!important;
    line-height:1!important;
    border-radius:999px!important;
    padding:0 12px!important;
  }

  .actions,
  .group-actions,
  .live-map-search,
  .group-form-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }

  .live-map-status,
  .group-note,
  .notice{
    font-size:14px!important;
    line-height:1.3!important;
    padding:10px 12px!important;
    border-radius:16px!important;
  }

  #walkjeLiveMap,
  .wj-lite-map,
  .group-map-preview,
  .map-shell{
    min-height:330px!important;
    border-radius:22px!important;
  }

  .live-result,
  .community-walk-card,
  .result-card,
  .icon-card{
    grid-template-columns:auto 1fr!important;
    gap:10px!important;
    padding:12px!important;
    border-radius:20px!important;
  }

  .live-action,
  .community-side-action{
    grid-column:1/-1!important;
  }

  .live-action a,
  .community-side-action a,
  .community-side-action button{
    width:100%!important;
    min-height:44px!important;
    font-size:14px!important;
  }

  .live-tag,
  .community-tag,
  .pill{
    min-height:28px!important;
    font-size:11px!important;
    padding:0 8px!important;
  }

  /* Final bottom app menu: no more giant words. */
  .bottom-menu{
    position:fixed!important;
    left:50%!important;
    right:auto!important;
    bottom:calc(8px + env(safe-area-inset-bottom))!important;
    transform:translateX(-50%)!important;
    z-index:999999!important;
    width:calc(100vw - 16px)!important;
    max-width:430px!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:4px!important;
    padding:6px!important;
    border-radius:22px!important;
    background:rgba(7,19,13,.97)!important;
    border:1px solid rgba(255,255,255,.16)!important;
    box-shadow:0 14px 48px rgba(0,0,0,.55)!important;
    backdrop-filter:blur(16px)!important;
    overflow:hidden!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  .bottom-menu a{
    min-width:0!important;
    min-height:54px!important;
    height:54px!important;
    border-radius:17px!important;
    padding:0 2px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    text-decoration:none!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    color:#d8ffe3!important;
    font-size:10.5px!important;
    line-height:1!important;
    font-weight:900!important;
    letter-spacing:0!important;
    text-transform:none!important;
  }

  .bottom-menu a span{
    display:block!important;
    font-size:20px!important;
    line-height:1!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
  }

  .bottom-menu a.active{
    background:var(--wj-green)!important;
    color:var(--wj-dark)!important;
  }

  .bottom-menu a.active span{
    color:var(--wj-dark)!important;
  }

  .footer{
    padding:28px 12px 110px!important;
    font-size:12px!important;
  }
}

/* Very small phones */
@media(max-width:390px){
  h1,
  .hero-card h1,
  .live-map-card h1,
  .group-card h1{
    font-size:clamp(34px,12vw,46px)!important;
  }

  h2,
  .live-map-card h2,
  .group-card h2{
    font-size:30px!important;
  }

  .bottom-menu{
    width:calc(100vw - 10px)!important;
    padding:5px!important;
    gap:3px!important;
    border-radius:20px!important;
  }

  .bottom-menu a{
    min-height:50px!important;
    height:50px!important;
    border-radius:15px!important;
    font-size:9.5px!important;
  }

  .bottom-menu a span{
    font-size:18px!important;
  }
}