/* Friendoza — Mobile layout lock (prevents horizontal shifting)
   Goal: no page should move sideways on mobile, especially Home after login.
   Safe: only activates on small screens.
*/

:root{
  --fz-safe-top: env(safe-area-inset-top, 0px);
  --fz-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Global safety net */
html, body{
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

*, *::before, *::after{ box-sizing: border-box; }

img, video, canvas, svg{
  max-width: 100%;
  height: auto;
}

/* Avoid 100vw overflow quirks on iOS */
.full-bleed,
.navbar,
.page-container,
.page{
  width: 100%;
  max-width: 100%;
}

@media (max-width: 768px){
  /* Fix header width & safe-area */
  .navbar{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 0;

    padding-top: calc(10px + var(--fz-safe-top));
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 10px;

    overflow-x: hidden; /* header itself should not create sideways scroll */
    z-index: 9999;
  }

  /* Container below fixed header */
  .page-container{
    padding-left: 12px;
    padding-right: 12px;
    padding-top: calc(86px + var(--fz-safe-top));
    min-height: calc(100vh - 86px);
    overflow-x: clip;
  }

  /* Pages must not add extra horizontal padding */
  .page{ padding-left: 0 !important; padding-right: 0 !important; }

  /* Any grids/cards should not overflow */
  .stats-grid,
  .fz-grid,
  .posts-grid,
  .activities-grid,
  .friends-grid,
  .people-grid{
    width: 100%;
    max-width: 100%;
  }

  /* HOME redesign offenders: photos are absolutely positioned; contain them */
  #homePage.fz-home .fz-hero{
    overflow: hidden;
  }

  #homePage.fz-home .fz-hero__inner{
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  /* Prevent absolute photos from extending layout width (they can still visually overflow inside hero) */
  #homePage.fz-home .fz-visual,
  #homePage.fz-home .fz-photos{
    overflow: hidden;
  }

  /* Modals: always fit viewport */
  .modal,
  .modal-content,
  .post-details-modal .modal-content,
  .create-post-modal .modal-content,
  .modal-body{
    max-width: 100vw;
    overflow-x: hidden;
  }

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