/**
 * Mobile Touch Target Optimization
 * WCAG 2.1 Level AA Compliant - 48x48px minimum touch targets
 * Prevents iOS auto-zoom with 16px font-size on inputs
 */

/* Form Inputs - Touch Optimized */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
select,
textarea {
  min-height: 48px;
  font-size: 16px !important; /* Prevents iOS zoom */
  padding: 12px 16px;
  -webkit-appearance: none;
  appearance: none;
}

/* Ensure textarea has sufficient height but respects rows */
textarea {
  min-height: 80px;
}

/* All Buttons - Touch Optimized */
button,
.button,
a.button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  min-height: 48px;
  min-width: 48px;
  padding: 12px 24px;
  font-size: 16px;
  cursor: pointer;
}

/* Navigation Links - Touch Optimized */
nav a,
.nav-link,
.menu-link {
  min-height: 48px;
  padding: 12px 16px;
  display: inline-flex;
  align-items: center;
}

/* Touch Spacing - Adequate gaps between interactive elements */
.form-field + .form-field {
  margin-top: 24px;
}

button + button,
.button + .button {
  margin-left: 12px;
}

/* Radio and Checkbox - Touch Optimized */
input[type="radio"],
input[type="checkbox"] {
  min-width: 24px;
  min-height: 24px;
  margin-right: 12px;
}

/* Labels for radio/checkbox - clickable area */
input[type="radio"] + label,
input[type="checkbox"] + label {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 12px 8px;
  cursor: pointer;
}

/* Touch-friendly dropdown selects */
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='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

/* Touch-friendly file inputs */
input[type="file"] {
  min-height: 48px;
  padding: 12px;
}

/* Card/clickable containers - Touch Optimized */
.card-link,
.clickable-card,
a.card {
  min-height: 80px;
  padding: 16px;
  display: flex;
  align-items: center;
}

/* Modal close buttons - larger touch target */
.modal-close,
.close-button,
button[aria-label*="close"],
button[aria-label*="Close"] {
  min-width: 48px;
  min-height: 48px;
  padding: 12px;
}

/* Hamburger menu - Touch Optimized */
.hamburger,
.menu-toggle,
.mobile-menu-button {
  min-width: 48px;
  min-height: 48px;
  padding: 12px;
}

/* Tabs - Touch Optimized */
.tab,
.tab-button,
[role="tab"] {
  min-height: 48px;
  padding: 12px 20px;
}

/* Pagination - Touch Optimized */
.pagination a,
.pagination button,
.page-link {
  min-width: 48px;
  min-height: 48px;
  padding: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Icon buttons - ensure minimum size */
.icon-button,
button.icon-only,
a.icon-only {
  min-width: 48px;
  min-height: 48px;
  padding: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Social media links - Touch Optimized */
.social-link,
a.social-icon {
  min-width: 48px;
  min-height: 48px;
  padding: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Accordion/Collapse triggers - Touch Optimized */
.accordion-button,
.collapse-trigger,
[aria-expanded] {
  min-height: 48px;
  padding: 12px 16px;
}

/* Search button - Touch Optimized */
.search-button,
button[type="search"] {
  min-width: 48px;
  min-height: 48px;
}

/* Touch feedback - visual indication */
@media (hover: none) and (pointer: coarse) {
  /* Mobile devices only */
  button:active,
  .button:active,
  a.button:active,
  .nav-link:active {
    opacity: 0.7;
    transform: scale(0.98);
    transition: transform 0.1s ease, opacity 0.1s ease;
  }

  /* Ensure inputs don't zoom on iOS */
  input,
  select,
  textarea {
    font-size: max(16px, 1rem);
  }
}

/* Focus states - keyboard accessibility */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 2px;
}

/* Remove default focus for mouse users */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
  outline: none;
}

/* Prevent double-tap zoom on specific elements */
a,
button,
input,
select,
textarea {
  touch-action: manipulation;
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
  /* Increase touch targets slightly on smaller screens */
  button,
  .button,
  a.button {
    min-height: 52px;
    padding: 14px 24px;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  select {
    min-height: 52px;
  }

  /* More spacing between form fields on mobile */
  .form-field + .form-field {
    margin-top: 28px;
  }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Keep standard 48px targets on tablets */
  button,
  .button,
  input,
  select {
    min-height: 48px;
  }
}