/* ===============================================
   iOS & iPAD DEVICE-SPECIFIC FIXES
   Created: November 30, 2025

   Target Devices:
   - iPhone SE (375px)
   - iPhone 12/13/14 (390px)
   - iPhone Pro Max (428px)
   - iPad Mini (768px)
   - iPad Air (820px)
   - iPad Pro 11" (834px)
   - iPad Pro 12.9" (1024px)
=============================================== */

/* ===============================================
   1. iOS SAFARI BASE FIXES
=============================================== */

/* Prevent iOS auto-zoom on input focus - ONLY on touch devices */
@media (hover: none) and (pointer: coarse) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* Disable iOS tap highlight - ONLY on touch devices */
@media (hover: none) and (pointer: coarse) {
  * {
    -webkit-tap-highlight-color: transparent;
  }
}

/* Smooth momentum scrolling */
.scroll-container,
.overflow-y-auto,
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}

/* Fix iOS Safari 100vh issue */
.full-height {
  height: 100vh;
  height: -webkit-fill-available;
}

/* ===============================================
   2. SAFE AREA INSETS (Notch Support) - ONLY touch devices
=============================================== */

/* Apply safe area padding for notch devices */
@media (hover: none) and (pointer: coarse) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* Header safe area - ONLY on touch devices */
@media (hover: none) and (pointer: coarse) {
  .header,
  #main-header {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  /* Footer safe area */
  .footer,
  footer {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

/* Fixed bottom elements - ONLY on touch devices */
@media (hover: none) and (pointer: coarse) {
  .scroll-to-top,
  .darshan-floating-collapse-btn {
    bottom: max(1rem, calc(env(safe-area-inset-bottom) + 1rem));
  }

  /* Mobile menu safe area */
  .mobile-menu,
  .mobile-menu-nav {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ===============================================
   3. IPHONE SE (375px) - Smallest iPhone
=============================================== */

@media (max-width: 375px) {
  /* Reduce font sizes for small screens */
  .header-title-main {
    font-size: 1.1rem !important;
  }

  .header-title-sub {
    font-size: 0.75rem !important;
  }

  /* Quote section compact */
  #quote-container {
    padding: 1rem !important;
    min-height: 350px !important;
  }

  #quote-text {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }

  /* Profile cards smaller */
  .profile-card {
    min-width: 42% !important;
    max-width: 45% !important;
  }

  .profile-card img {
    max-height: 180px !important;
  }

  .profile-name-highlight {
    font-size: 14px !important;
    padding: 0.1em 0.2em !important;
  }

  /* Darshan section compact */
  #darshanList button {
    font-size: 0.8rem !important;
    padding: 0.4rem !important;
  }

  /* Menu links */
  .menu-link {
    font-size: 1.1rem !important;
    padding: 0.6rem 1rem !important;
  }

  /* Buttons */
  .preview-expand-btn {
    font-size: 0.85rem !important;
    padding: 0.6rem 1rem !important;
  }
}

/* ===============================================
   4. IPHONE 12/13/14 (390px)
=============================================== */

@media (min-width: 376px) and (max-width: 393px) {
  #quote-container {
    min-height: 380px !important;
  }

  .profile-card {
    min-width: 44% !important;
    max-width: 47% !important;
  }

  .profile-card img {
    max-height: 200px !important;
  }

  .profile-name-highlight {
    font-size: 16px !important;
  }
}

/* ===============================================
   5. IPHONE PRO MAX (428px)
=============================================== */

@media (min-width: 394px) and (max-width: 430px) {
  #quote-container {
    min-height: 360px !important;
  }

  .profile-card {
    min-width: 45% !important;
    max-width: 48% !important;
  }

  .profile-card img {
    max-height: 220px !important;
  }

  .profile-name-highlight {
    font-size: 18px !important;
  }

  /* Larger touch targets for bigger phones */
  .menu-link {
    padding: 0.85rem 1.25rem !important;
  }
}

/* ===============================================
   6. TOUCH TARGET ENFORCEMENT
=============================================== */

/* Ensure all interactive elements meet 44px minimum */
@media (hover: none) and (pointer: coarse) {
  a,
  button,
  .menu-link,
  .lang-toggle,
  .quote-nav,
  .hamburger-btn,
  input[type="checkbox"],
  input[type="radio"],
  select,
  .icon-option {
    min-height: 44px;
    min-width: 44px;
  }

  /* Increase spacing between clickable items */
  .menu-link {
    margin: 0.5rem 0 !important;
  }

  /* Navigation arrows */
  .quote-nav {
    width: 44px !important;
    height: 44px !important;
  }

  /* Darshan buttons */
  #darshanList button {
    min-height: 44px !important;
  }

  /* Form elements */
  input,
  select,
  textarea {
    min-height: 44px;
    padding: 12px !important;
  }

  /* Checkbox/radio labels */
  label {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 8px 0;
  }
}

/* ===============================================
   7. IPAD MINI (768px) - Portrait - Only touch devices
=============================================== */

@media (min-width: 768px) and (max-width: 820px) and (hover: none) and (pointer: coarse) {
  /* Two-column layouts */
  .grid.md\:grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Profile cards */
  .profile-card {
    min-width: 180px !important;
    max-width: 220px !important;
  }

  .profile-card img {
    max-height: 280px !important;
  }

  /* Quote section */
  #quote-container {
    max-width: 90% !important;
    min-height: 300px !important;
  }

  /* Better use of horizontal space */
  section {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Show desktop-style nav on iPad Mini landscape */
  @media (orientation: landscape) {
    .header {
      display: none !important;
    }

    #main-header {
      display: flex !important;
    }
  }
}

/* ===============================================
   8. IPAD AIR (820px) & IPAD PRO 11" (834px) - Only touch devices
=============================================== */

@media (min-width: 821px) and (max-width: 900px) and (hover: none) and (pointer: coarse) {
  /* Three-column grids */
  .grid.md\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
  }

  /* Profile cards larger */
  .profile-card {
    min-width: 200px !important;
    max-width: 280px !important;
  }

  .profile-card img {
    max-height: 320px !important;
  }

  /* Quote section */
  #quote-container {
    max-width: 85% !important;
    min-height: 280px !important;
  }

  /* Better section padding */
  section {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* ===============================================
   9. IPAD PRO 12.9" (1024px) - Only for touch devices
=============================================== */

@media (min-width: 1024px) and (max-width: 1112px) and (hover: none) and (pointer: coarse) {
  /* Show desktop navigation */
  .header {
    display: none !important;
  }

  #main-header {
    display: flex !important;
  }

  /* Optimize for larger tablet */
  .profile-card {
    min-width: 280px !important;
    max-width: 380px !important;
  }

  .profile-card img {
    max-height: 400px !important;
  }

  /* Quote section */
  #quote-container {
    max-width: 80% !important;
    min-height: 260px !important;
  }

  /* Content sections */
  section {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
}

/* ===============================================
   9B. DESKTOP OVERRIDE (1113px+) - Restore full sizes
=============================================== */

@media (min-width: 1113px) {
  /* Ensure profile cards display at full size on desktop */
  .profile-card {
    min-width: unset !important;
    max-width: unset !important;
  }

  .profile-card img {
    max-height: unset !important;
  }

  /* Restore section padding */
  section {
    padding-left: unset !important;
    padding-right: unset !important;
  }

  #quote-container {
    max-width: unset !important;
  }
}

/* ===============================================
   10. IPAD LANDSCAPE MODE - Only touch devices
=============================================== */

@media (min-width: 1024px) and (max-height: 800px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  /* Reduce vertical spacing in landscape */
  section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* Profile cards side by side with reduced height */
  .profile-card img {
    max-height: 300px !important;
  }

  /* Quote section compact */
  #quote-container {
    min-height: 220px !important;
  }

  /* Darshan section compact */
  .darshan-container {
    padding: 1.5rem !important;
  }
}

/* ===============================================
   11. IOS FORM FIXES - ONLY on touch devices
=============================================== */

@media (hover: none) and (pointer: coarse) {
  /* Prevent zoom on focus */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px !important;
    border-radius: 8px;
  }

  /* Better iOS form styling */
  input, select, textarea {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 8px;
  }

  /* iOS select dropdown fix */
  select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px !important;
  }
}

/* ===============================================
   12. IOS MODAL/POPUP FIXES
=============================================== */

/* Full screen modals on iOS */
@media (max-width: 767px) {
  .modal.active,
  .popup-overlay.active {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    height: -webkit-fill-available;
  }

  /* Modal content scrolling */
  .modal .overflow-y-auto {
    max-height: calc(100vh - 80px);
    max-height: calc(-webkit-fill-available - 80px);
    -webkit-overflow-scrolling: touch;
  }
}

/* ===============================================
   13. IOS RUBBER BAND SCROLLING
=============================================== */

/* Allow pull-to-refresh while preventing horizontal overscroll */
html, body {
  overscroll-behavior-y: auto;
  overscroll-behavior-x: none;
}

/* Allow bounce in scrollable areas */
.scroll-container,
.mobile-menu-nav,
.darshan-expanded-content {
  overscroll-behavior: auto;
}

/* ===============================================
   14. IOS-SPECIFIC ANIMATION FIXES
=============================================== */

/* Use transform3d for hardware acceleration */
.menu-link,
.quote-nav,
.profile-card,
.activity-card {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Note: Removed preserve-3d as it breaks position:fixed elements */

/* ===============================================
   15. IOS BUTTON/LINK FIXES - ONLY on touch devices
=============================================== */

@media (hover: none) and (pointer: coarse) {
  /* Remove iOS button styling */
  button {
    -webkit-appearance: none;
    appearance: none;
  }

  /* Ensure touch callout is disabled for UI elements */
  .hamburger-btn,
  .menu-link,
  .quote-nav,
  .scroll-to-top {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
}

/* Fix iOS link color on tap - safe for all devices */
a {
  -webkit-text-decoration-skip: objects;
}

/* ===============================================
   16. DARK MODE SUPPORT (iOS 13+)
=============================================== */

@media (prefers-color-scheme: dark) {
  /* Add dark mode styles if needed in future */
  /* Currently keeping light theme */
}

/* ===============================================
   17. REDUCED MOTION SUPPORT
=============================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}