/* Proplo — installed-PWA (standalone) safe-area handling
 * =======================================================
 * Loaded on every page. The rules below ONLY apply when the site is launched
 * as an installed app (Add to Home Screen) — display-mode: standalone /
 * fullscreen / minimal-ui. In a normal mobile/desktop browser these media
 * queries don't match, so the browser layout is completely unchanged.
 *
 * Why: in standalone mode there's no browser address bar, so a position:fixed
 * top nav slides up under the phone status bar / notch. We pad the nav down by
 * the device's safe-area inset and brand-fill the strip behind the status bar.
 * Requires <meta name="viewport" ... viewport-fit=cover> for env() to be set.
 */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  /* Fill the status-bar strip with the brand navy so it blends with the nav. */
  html { background: #0B1D3A; }

  /* Homepage / marketing pages use a bare <nav> with a fixed height. */
  nav {
    height: auto;
    min-height: 72px;
    padding-top: env(safe-area-inset-top);
  }

  /* Compare pages (and any .nav) keep their own 20px top padding + inset. */
  .nav {
    padding-top: calc(20px + env(safe-area-inset-top));
  }

  /* Respect left/right insets in landscape (notch side). */
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* Keep the bottom of scrollable content clear of the home-indicator. */
  footer {
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
  }
}