/* Mobile Touch & Optimization Styles */

/* Prevent text selection on interactive elements on touch devices */
@media (hover: none) and (pointer: coarse) {
  button,
  a,
  input,
  select,
  textarea {
    -webkit-touch-callout: none;
    user-select: none;
  }

  /* Make interactive elements larger for touch */
  button,
  a[href],
  input[type="button"],
  input[type="submit"],
  .nav-item,
  .calendar-day {
    min-height: 44px;
    min-width: 44px;
  }

  /* Improve tap feedback */
  a,
  button {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  }
}

/* Optimize font sizes for readability on mobile */
@media (max-width: 480px) {
  body {
    font-size: 16px; /* Prevents auto-zoom on input focus in iOS */
  }

  input,
  textarea,
  select {
    font-size: 16px !important; /* iOS doesn't zoom if font is at least 16px */
  }
}

/* Prevent horizontal scroll on mobile */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
    width: 100%;
  }

  * {
    max-width: 100%;
  }
}

/* Optimize images for mobile */
@media (max-width: 768px) {
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  video {
    max-width: 100%;
    height: auto;
  }
}

/* Improve spacing on mobile devices */
@media (max-width: 480px) {
  /* Reduce padding on small elements */
  button,
  input,
  textarea,
  select {
    padding: 1rem 0.5rem !important;
  }

  /* Ensure proper spacing between clickable elements */
  .nav-item,
  .calendar-day {
    margin: 0.25rem !important;
  }
}

/* Safe area support for notched/notchless devices */
@supports (padding: max(0px)) {
  body {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  header {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  footer {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
}

/* Improve form inputs on mobile */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="phone"],
  input[type="date"],
  textarea,
  select {
    width: 100% !important;
    box-sizing: border-box;
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #ddd;
  }

  input:focus,
  textarea:focus,
  select:focus {
    outline: none;
    border-color: #22a9db;
    box-shadow: 0 0 0 3px rgba(34, 169, 219, 0.1);
  }
}

/* Touch-friendly spacing */
@media (max-width: 768px) {
  .nav-item {
    padding: 1rem !important;
    margin: 0.25rem 0 !important;
  }

  .nav-item a {
    display: block;
    width: 100%;
  }

  button {
    padding: 1rem !important;
    margin: 0.5rem !important;
  }
}

/* Improve readability on mobile */
@media (max-width: 768px) {
  body {
    line-height: 1.6;
  }

  p {
    line-height: 1.6;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    word-break: break-word;
    overflow-wrap: break-word;
  }
}

/* Optimize loading performance */
@media (max-width: 768px) {
  /* Reduce animation complexity */
  @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;
    }
  }

  /* Lazy load images */
  img {
    loading: lazy;
  }
}

/* Accessible color contrasts for mobile */
@media (max-width: 768px) {
  a {
    text-decoration: underline;
  }

  button {
    color: white;
    background: linear-gradient(90deg, #22a9db, #22a9db);
  }

  button:active {
    opacity: 0.8;
  }
}

/* Prevent zoom on double-tap */
@media (max-width: 768px) {
  button,
  input,
  a {
    touch-action: manipulation;
  }
}