.mobile-app-bar,
.mobile-nav-backdrop{display:none}

@media (max-width: 820px){
  html,body{max-width:100%;overflow-x:hidden}
  body{padding-top:58px}
  body.mobile-nav-open{overflow:hidden}

  .utility-bar{display:none!important}

  .mobile-app-bar{
    position:fixed;z-index:1200;top:0;left:0;right:0;height:58px;
    display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:8px;
    padding:0 12px;background:linear-gradient(90deg,#0a4e83,#073563);
    color:#fff;box-shadow:0 2px 8px rgba(7,42,82,.18)
  }
  .mobile-menu-button,.install-app-button{
    border:0;border-radius:5px;background:rgba(255,255,255,.12);color:#fff;
    font-family:Arial,Helvetica,sans-serif;font-weight:700;cursor:pointer
  }
  .mobile-menu-button{width:42px;height:40px;font-size:25px;line-height:1}
  .install-app-button{padding:9px 12px;font-size:13px}
  .mobile-app-brand{display:flex;align-items:center;gap:10px;min-width:0;font-family:Georgia,"Times New Roman",serif}
  .mobile-app-brand strong{font-size:24px}
  .mobile-app-brand span{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .mobile-nav-backdrop{
    position:fixed;display:block;z-index:1090;inset:58px 0 0 0;background:rgba(3,22,42,.48)
  }
  .mobile-nav-backdrop[hidden]{display:none}

  .app-shell{display:block!important;min-height:calc(100vh - 58px)!important}
  .side-nav{
    position:fixed!important;z-index:1100;top:58px;bottom:0;left:0;
    width:min(82vw,310px);min-height:0!important;overflow-y:auto;
    transform:translateX(-102%);transition:transform .22s ease;
    box-shadow:4px 0 18px rgba(0,0,0,.22)
  }
  .side-nav.mobile-open{transform:translateX(0)}
  .side-menu{padding-top:8px}
  .side-menu a{padding:12px 18px;font-size:15px}
  .side-tagline{padding:22px 16px}

  .workspace{width:100%;min-width:0}
  .reference-banner{height:150px!important;background-position:center center!important}
  .content-area{width:100%;max-width:none!important;padding:12px!important}

  .dashboard-grid,.two,.member-grid,.admin-grid,.resource-grid{grid-template-columns:1fr!important}
  .span-2,.row-span-2{grid-column:auto!important;grid-row:auto!important}
  .values-row{grid-template-columns:repeat(2,1fr)!important}
  .latest-study,.empty-state{grid-template-columns:1fr!important}
  .bible-art{height:135px}
  .member-preview-grid{grid-template-columns:1fr!important}

  .section-head,.page-title{align-items:flex-start!important;flex-direction:column!important;gap:10px!important}
  .section-head .btn,.page-title .btn{width:100%}
  .page-card{padding:16px!important;min-height:0!important}
  .panel,.card-form{padding:16px!important}

  .searchbar{flex-direction:column!important}
  .searchbar .btn{width:100%}
  .reset-form{grid-template-columns:1fr!important}

  .table-wrap{width:100%;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  table{min-width:720px}

  input,textarea,select{font-size:16px!important}
  .btn,.primary-button{min-height:44px}

  .site-footer{
    height:auto!important;min-height:90px;grid-template-columns:1fr!important;gap:8px;
    text-align:center;padding:16px 12px!important
  }
  .footer-brand{justify-content:center}
  .footer-motto{text-align:center!important}
  .footer-links{order:3}
}

@media (max-width: 480px){
  .mobile-app-brand span{font-size:14px}
  .reference-banner{height:115px!important}
  .values-row{grid-template-columns:1fr!important}
  .welcome-card h1,.page-title h1,.page-card h1{font-size:27px!important}
  .weekly-card,.latest-card,.quick-card,.events-card,.prayer-preview,.directory-preview{padding:12px!important}
}

/* Bible Access is a phone-app navigation item only. */
.mobile-bible-access{display:none!important}
@media (max-width: 820px){
  .side-menu a.mobile-bible-access{display:flex!important}
}