/**
 * Apple App Review Guideline 4 (Design) fix: on iPhones/iPads with a notch
 * or Dynamic Island, page headers/navs were rendering under the status bar
 * (clock, wifi, battery, Dynamic Island), making their content and buttons
 * hard to read/tap. Every page sets viewport-fit=cover, which is required
 * for env(safe-area-inset-*) to apply, but most pages' <nav>/<header>
 * elements never used it.
 *
 * Strategy:
 *  1. body gets a top padding equal to the safe-area height so ALL pages
 *     start their content below the status bar by default.
 *  2. Sticky navs/headers pull themselves UP by that same amount (negative
 *     margin-top) so their background still covers the status bar area,
 *     while their own padding-top pushes their content/buttons below it.
 *  3. Full-screen slide-in panels get the same treatment on their header row.
 */

/* 1. Universal safe-area gap at the top of every page */
body {
  padding-top: env(safe-area-inset-top, 0px) !important;
}


/* 2a. .mobile-nav is already defined in shared.css with the right padding-top.
       Pull it up so its background covers the status-bar zone while its
       content stays below it. */
.mobile-nav {
  margin-top: calc(-1 * env(safe-area-inset-top, 0px)) !important;
}

/* 2b. All other <nav> / <header> elements that are sticky at the top.
       Excludes:
         - .mobile-nav (handled above)
         - elements with "bottom-0" in their class (bottom tab bars) */
nav:not(.mobile-nav):not([class*="bottom-0"]),
header:not(.mobile-nav):not([class*="bottom-0"]) {
  position: sticky !important;
  top: 0 !important;
  margin-top: calc(-1 * env(safe-area-inset-top, 0px)) !important;
  padding-top: calc(1rem + env(safe-area-inset-top)) !important;
}

/* 3. Full-screen slide-in panels (notification, mobile menu, orders, etc.)
      are fixed at top:0 — their first child (the header bar) needs the same
      safe-area inset padding so content clears the status bar / Dynamic Island. */
#notificationPanel > div:first-child,
#mobileMenuPanel > div:first-child,
#ordersPanel > div:first-child,
#menuPanel > div:first-child,
#cartSidebar > div:first-child {
  padding-top: calc(1rem + env(safe-area-inset-top)) !important;
}