/* iOS Safe Area Global Styles */
/* This file ensures content doesn't appear behind status bar/notch on iOS devices */

/* Define custom properties for safe areas with fallbacks */
:root {
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --bottom-nav-height: 64px;
}

/* Legacy WebKit fallback */
@supports (padding: constant(safe-area-inset-top)) {
  :root {
    --safe-area-top: constant(safe-area-inset-top);
    --safe-area-bottom: constant(safe-area-inset-bottom);
    --safe-area-left: constant(safe-area-inset-left);
    --safe-area-right: constant(safe-area-inset-right);
  }
}

/* Apply safe area insets to body */
body {
  padding-top: var(--safe-area-top) !important;
  padding-left: var(--safe-area-left) !important;
  padding-right: var(--safe-area-right) !important;
  /* Add bottom padding for nav + safe area - this replaces hardcoded template values */
  padding-bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom)) !important;
}

/* For pages with their own padding, add safe area on top */
body.has-padding {
  padding-top: calc(20px + var(--safe-area-top)) !important;
  padding-left: calc(20px + var(--safe-area-left)) !important;
  padding-right: calc(20px + var(--safe-area-right)) !important;
  padding-bottom: calc(20px + var(--bottom-nav-height) + var(--safe-area-bottom)) !important;
}

/* Fixed headers should account for safe area */
header, .header, .top-header, .simple-header, .nav-header {
  padding-top: calc(15px + var(--safe-area-top)) !important;
  padding-left: calc(20px + var(--safe-area-left)) !important;
  padding-right: calc(20px + var(--safe-area-right)) !important;
}

/* Bottom navigation safe area - only add safe area to bottom padding */
.bottom-nav, .bottom-navigation, footer {
  padding-bottom: var(--safe-area-bottom) !important;
  padding-left: var(--safe-area-left) !important;
  padding-right: var(--safe-area-right) !important;
}

/* Fix modal touch target offset on iOS - Critical for iPhone 11 Pro Max and similar devices */
/* When modal is active, temporarily remove ALL body padding to align coordinate spaces */
body.modal-active {
  padding: 0 !important;
}

/* Apply safe area padding directly to modal overlay instead */
body.modal-active .modal {
  padding-top: calc(var(--safe-area-top) + 20px) !important;
  padding-left: calc(var(--safe-area-left) + 20px) !important;
  padding-right: calc(var(--safe-area-right) + 20px) !important;
  padding-bottom: calc(var(--safe-area-bottom) + 20px) !important;
}

/* Stabilize bottom nav during modal display - prevent shifting */
body.modal-active .bottom-nav,
body.modal-active .bottom-navigation {
  position: fixed !important;
  bottom: 0 !important;
  transform: none !important;
  -webkit-transform: none !important;
}