/* WildLink public mobile overrides. Admin pages intentionally do not load this file. */

html{
  overflow-x:hidden;
}

body{
  overflow-x:hidden;
}

img,
video,
canvas,
iframe{
  max-width:100%;
}

input,
select,
textarea,
button{
  max-width:100%;
}

@media(max-width:900px){
  body{
    min-width:0;
  }

  #nav-container{
    position:sticky;
    top:0;
    z-index:10000;
    display:block !important;
    background:rgba(255,255,255,.96);
    border-bottom:1px solid rgba(0,0,0,.06);
  }

  .main-nav{
    display:flex !important;
    justify-content:space-between;
    align-items:center;
    min-height:76px;
    height:auto;
    padding:10px 16px !important;
    gap:12px;
  }

  .menu-wrapper{
    display:flex !important;
    align-items:center;
    gap:6px;
    position:relative;
    margin-left:auto;
  }

  .logo img,
  header .logo img{
    height:66px !important;
    max-width:190px;
    object-fit:contain;
  }

  .menu-btn{
    min-height:44px;
    padding:10px 13px !important;
    font-size:15px !important;
    white-space:nowrap;
  }

  .dropdown{
    position:absolute;
    top:calc(100% + 8px) !important;
    right:0;
    left:auto;
    width:min(88vw,320px);
    max-height:calc(100vh - 96px);
    overflow:auto;
    border-radius:12px !important;
    z-index:9999;
  }

  .dropdown a{
    padding:13px 15px !important;
    font-size:14px;
    line-height:1.25;
  }

  .page,
  .page-wrapper,
  main,
  section{
    max-width:100%;
  }

  .page,
  .page-wrapper{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .hero,
  .club-hero,
  .content-grid,
  .dashboard-grid,
  .member-grid,
  .crm-grid,
  .layout,
  .grid,
  .profile-grid,
  .settings-grid,
  .form-grid,
  .split,
  .two-column,
  .three-column,
  .cards,
  .posts-list,
  .events-grid,
  .stats-grid,
  .search-grid,
  .toolbar{
    grid-template-columns:1fr !important;
  }

  .header,
  .topbar,
  .top-bar,
  .hero-actions,
  .header-actions,
  .btn-row,
  .actions,
  .event-actions,
  .section-header{
    flex-wrap:wrap;
  }

  h1,
  .hero h1,
  .page-title h1{
    font-size:clamp(30px,9vw,42px) !important;
    line-height:1.08 !important;
  }

  h2,
  .section-title{
    font-size:clamp(22px,7vw,30px) !important;
    line-height:1.15 !important;
  }

  p{
    overflow-wrap:anywhere;
  }

  .card,
  .post-card,
  .member-card,
  .event-card,
  .stat-card,
  .panel,
  .widget,
  .form-card,
  .empty,
  .empty-state{
    border-radius:12px !important;
  }

  .btn,
  .search-btn,
  .view-btn,
  button,
  input,
  select,
  textarea{
    min-height:44px;
  }

  .btn,
  .search-btn,
  .view-btn{
    width:100%;
    justify-content:center;
  }

  table{
    min-width:720px;
  }

  .table-wrap,
  .member-table-wrap,
  .report-table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .hero-image,
  .club-profile-image,
  .post-image,
  .event-banner,
  .card-image{
    max-height:360px;
  }

  .dashboard-layout .right-sidebar #nearbyWidget{
    display:none !important;
  }
}

@media(max-width:640px){
  .page,
  .page-wrapper{
    padding-bottom:42px;
  }

  .main-nav{
    align-items:center;
  }

  .logo img,
  header .logo img{
    height:58px !important;
    max-width:165px;
  }

  .dropdown{
    width:calc(100vw - 28px);
  }

  .form-grid,
  .stats-grid,
  .pipeline,
  .cards,
  .photo-feed-grid{
    gap:12px !important;
  }

  .card,
  .panel,
  .widget,
  .post-content,
  .event-content{
    padding:16px !important;
  }

  .hero-image{
    min-height:260px !important;
  }

  .post-image,
  .card-image,
  .event-banner{
    height:auto !important;
    aspect-ratio:16 / 10;
    object-fit:cover;
  }
}

@media(max-width:768px){
  .dashboard-layout{
    padding-bottom:78px;
  }

  .dashboard-layout .left-sidebar{
    position:fixed !important;
    left:0;
    right:0;
    bottom:0;
    top:auto;
    z-index:10000;
    display:flex !important;
    align-items:center;
    gap:6px;
    width:100%;
    height:auto !important;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom)) !important;
    overflow-x:auto;
    overflow-y:hidden;
    border-right:0 !important;
    border-top:1px solid var(--wl-color-border-strong,#e5e2da);
    background:rgba(255,255,255,.96) !important;
    box-shadow:0 -10px 30px rgba(0,0,0,.08);
  }

  .dashboard-layout .left-sidebar .logo,
  .dashboard-layout .left-sidebar .copyright,
  .dashboard-layout .left-sidebar .sidebar-divider{
    display:none !important;
  }

  .dashboard-layout .left-sidebar .nav-section{
    display:flex !important;
    flex-direction:row !important;
    gap:6px !important;
    align-items:center;
    min-width:max-content;
  }

  .dashboard-layout .left-sidebar .sidebar-link{
    flex:0 0 auto;
    min-width:72px;
    padding:9px 10px !important;
    border-radius:12px !important;
    flex-direction:column;
    justify-content:center;
    gap:4px !important;
    font-size:11px !important;
    line-height:1.1;
    text-align:center;
  }

  .dashboard-layout .left-sidebar .sidebar-link i{
    width:auto !important;
    font-size:17px;
  }

  .dashboard-layout .left-sidebar .sidebar-link span{
    display:block !important;
    max-width:76px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

}