/* Touch-friendly enhancements for Moscow Ballet */

/* ==========================================================================
   Touch-friendly improvements
   ========================================================================== */

/* Buttons and interactive elements */
.btn,
button,
[type="button"],
[type="submit"],
[type="reset"],
a.btn {
  min-height: 44px; /* Minimum touch target size */
  padding: 10px 20px;
  touch-action: manipulation; /* Remove 300ms delay on some mobile browsers */
}

/* Make form elements more touch-friendly */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea,
select {
  min-height: 44px; /* Minimum touch target size */
  padding: 8px 12px;
  font-size: 16px; /* Prevent iOS auto-zoom on focus */
}

/* Improve touch targets for navigation */
.main-navigation ul li a {
  padding: 15px 12px;
}

/* Enhance touch experiences */
a, button, input, select, textarea, [role="button"] {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.2); /* Custom tap highlight */
}

/* Touch-friendly card and grid items */
.event-card,
.gallery-item,
.nearby-event-card {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

/* Touch feedback for card elements */
.event-card:active,
.gallery-item:active,
.nearby-event-card:active {
  transform: scale(0.98);
}

/* Scrollable areas with momentum scrolling */
.primary-menu-container,
.events-list,
.gallery-grid {
  -webkit-overflow-scrolling: touch;
}

/* Touch-optimized sliders */
.events-slider,
.content-slider {
  touch-action: pan-y;
}

/* Prevent pull-to-refresh in iOS on certain elements */
.fullwidth-cta,
.hero-banner,
.content-slider {
  overscroll-behavior-y: contain;
}

/* Focus styles that work with both keyboard and touch */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 3px solid rgba(0, 123, 255, 0.5);
  outline-offset: 2px;
}

/* ==========================================================================
   Specific Mobile Touch Enhancements
   ========================================================================== */

@media (max-width: 767px) {
  /* More spacing between touch targets on mobile */
  .main-navigation ul li {
    margin-bottom: 5px;
  }
  
  /* Event items for easier touch on mobile */
  .event-item {
    padding: 15px;
  }
  
  /* Close button more visible */
  .close-menu {
    padding: 10px;
  }
  
  /* Make slider controls bigger on touch devices */
  .event-navigation button,
  .slider-navigation button,
  #content-slider-controls button {
    min-width: 44px;
    min-height: 44px;
  }
}