/* Friendoza — mobile fixes (iOS safe-area + better header sizing)
   Scope: global, but only layout/safe-area; should not affect desktop.
*/

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

/* Prevent unexpected zooming on orientation change */
html{ -webkit-text-size-adjust: 100%; }

/* Stop horizontal scroll / layout overflow */
html, body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Ensure layout boxes don't exceed viewport width */
*, *::before, *::after{ box-sizing: border-box; }

/* Common offenders: images/videos/canvas */
img, video, canvas, svg{ max-width: 100%; height: auto; }

/* Prevent 100vw from creating overflow due to scrollbar/safe-area quirks */
.navbar{ width: 100%; }


@media (max-width: 768px){
  /* Make top header full-width and fixed on mobile */
  .navbar{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;

    padding-left: 12px;
    padding-right: 12px;
    padding-top: calc(10px + var(--fz-safe-top));
    padding-bottom: 10px;
    gap: 10px;
    z-index: 9999;
  }

  /* Navigation content: smaller and fits in one line */
  .nav-brand .logo-text{ display:none; }
  .logo-image-nav{ height: 22px; }

  .nav-menu{
    display:flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-menu::-webkit-scrollbar{ display:none; }

  .nav-link{
    padding: 8px 10px;
    gap: 6px;
    border-radius: 10px;
    font-size: 12px;
    white-space: nowrap;
  }
  .nav-link i{ font-size: 14px; }

  .nav-actions .btn-icon{
    width: 34px;
    height: 34px;
  }

  /* Content should start 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 themselves: remove extra horizontal padding */
  .page{ padding-left: 0; padding-right: 0; }

  /* Bigger mobile typography (requested) */
  #homePage.fz-home .fz-title{ font-size: clamp(28px, 7vw, 40px); }
  #homePage.fz-home .fz-subtitle{ font-size: 16px; line-height: 1.4; }
  #homePage.fz-home .fz-kicker{ font-size: 13px; }

  /* Bottom navigation (if fixed) should respect safe area */
  .bottom-nav,
  .navbar.bottom,
  .navbar-bottom{
    padding-bottom: calc(10px + var(--fz-safe-bottom));
  }
}