/* Mobile Safe Zone CSS - Include this in all HTML pages */
/* This ensures proper spacing for devices with notches (iPhone X and newer) */

/* Body setup - account for fixed navbar */
body {
  margin: 0 !important;
  min-height: 100vh;
  /* Add margin to account for fixed navbar */
  margin-top: calc(env(safe-area-inset-top, 0px) + 3.25rem) !important;
  /* Prevent any horizontal scrolling */
  overflow-x: hidden !important;
}

/* Safe area handling for mobile devices */
@supports (padding: env(safe-area-inset-top)) {
  /* Add safe area padding to body */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* iOS specific adjustments */
@supports (-webkit-touch-callout: none) {
  /* iOS Safari specific safe area handling */
  body {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* Fallback for older devices without safe area support */
@supports not (padding: env(safe-area-inset-top)) {
  body {
    margin-top: 3.25rem !important; /* Just navbar height for older devices */
  }
}

/* Ensure proper display in standalone mode */
@media (display-mode: standalone) {
  body {
    /* Margin for standalone apps - navbar height + safe area */
    margin-top: calc(env(safe-area-inset-top, 0px) + 3.25rem) !important;
  }
}

/* Mobile menu adjustments */
@media (max-width: 768px) {
  body {
    /* Account for mobile navbar height when menu is closed */
    margin-top: calc(env(safe-area-inset-top, 0px) + 4rem) !important;
  }
  
  /* When mobile menu is open, push content down further */
  body.mobile-menu-open {
    margin-top: calc(env(safe-area-inset-top, 0px) + 8rem) !important;
  }
}