/**
 * iOS Adapter CSS
 * Specific styles to enhance compatibility with iOS devices
 */

/* Variables for Safe Areas */
:root {
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
  --vh: 1vh; /* This will be updated by JS to fix 100vh issues on iOS */
}

/* iOS specific styles */
.ios-device {
  /* Remove highlight effect on taps */
  -webkit-tap-highlight-color: transparent;
  /* Prevent iOS text size adjustment */
  -webkit-text-size-adjust: 100%;
  /* Optimize interactions */
  touch-action: manipulation;
}

/* Fix for iOS full-height content */
.ios-device main.container {
  min-height: calc(100 * var(--vh) - 70px); /* Account for header and footer */
  padding-bottom: var(--safe-area-inset-bottom);
}

/* Fix navbar spacing on iOS (notch compatibility) */
.ios-device .navbar {
  padding-top: calc(10px + var(--safe-area-inset-top));
}

/* Fix footer spacing on iOS */
.ios-device .footer {
  padding-bottom: calc(20px + var(--safe-area-inset-bottom));
}

/* Remove webkit appearance from form elements */
.ios-device input,
.ios-device textarea,
.ios-device select,
.ios-device button {
  -webkit-appearance: none;
  border-radius: 4px;
}

/* Fix for input focus behavior */
.ios-device.input-focused {
  position: relative;
}

/* Add to Home Screen prompt styling */
.add-to-home-hint {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(21, 21, 48, 0.9);
  color: white;
  padding: 12px;
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 9999;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-bottom: calc(12px + var(--safe-area-inset-bottom));
}

.add-to-home-hint.visible {
  transform: translateY(0);
}

.hint-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.hint-dismiss {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  padding: 5px;
}

/* Standalone mode adjustments */
.ios-device.standalone-app {
  /* Full-screen experience when added to home screen */
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

/* Improved touch experience */
.ios-device a:active,
.ios-device button:active,
.ios-device .clickable:active,
.touch-active {
  opacity: 0.7;
  transition: opacity 0.1s ease;
}

/* Fix for iOS sticky positioning */
.ios-device .sticky-element {
  position: -webkit-sticky;
  position: sticky;
}

/* Smoother animations on iOS */
.ios-device .animated-element {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Fix for iOS momentum scrolling */
.ios-device .scroll-container {
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

/* Safari audio/video element fixes */
.ios-device audio,
.ios-device video {
  width: 100%;
  max-width: 100%;
}

/* iOS-specific media queries for different devices */
@supports (-webkit-touch-callout: none) {
  /* iPhone X, XS, 11 Pro */
  @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3),
         only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
    .ios-device .notch-aware {
      padding-top: var(--safe-area-inset-top);
    }
  }
  
  /* Fix for disappearing fixed elements during scroll on iOS */
  .ios-device .fixed-element {
    transform: translateZ(0);
  }
}

/* iPhone landscape orientation fixes */
@media (orientation: landscape) {
  .ios-device .landscape-adjustments {
    padding-left: var(--safe-area-inset-left);
    padding-right: var(--safe-area-inset-right);
  }
}