/* ============================================
   TOUCH TARGETS
   Touch-specific sizing and optimization
   ============================================ */

:root {
  /* Touch target sizes */
  --touch-minimum: 44px; /* WCAG minimum */
  --touch-comfortable: 48px; /* Recommended */
  --touch-spacious: 52px; /* Large targets */
  --touch-thumb: 56px; /* Thumb zone */

  /* Touch spacing */
  --touch-spacing-tight: 8px;
  --touch-spacing-normal: 12px;
  --touch-spacing-spacious: 16px;
}

/* ============================================
   TOUCH DEVICE DETECTION
   ============================================ */

/* All touch devices */
@media (pointer: coarse) {
  :root {
    --touch-active: var(--touch-comfortable);
    --touch-spacing: var(--touch-spacing-normal);
  }
}

/* Touch-only devices (no hover) */
@media (pointer: coarse) and (hover: none) {
  :root {
    --touch-active: calc(var(--touch-comfortable) + 4px);
    --touch-spacing: var(--touch-spacing-spacious);
  }
}

/* Hybrid devices (touch + mouse) */
@media (pointer: coarse) and (hover: hover) {
  :root {
    --touch-active: var(--touch-comfortable);
    --touch-spacing: var(--touch-spacing-normal);
  }
}

/* Mouse-only devices */
@media (pointer: fine) {
  :root {
    --touch-active: 40px; /* Smaller for precision */
    --touch-spacing: var(--touch-spacing-tight);
  }
}

/* ============================================
   UNIVERSAL TOUCH TARGETS
   ============================================ */

@media (pointer: coarse) {
  /* Buttons */
  .btn,
  .btn-primary,
  .btn-outline,
  button {
    min-height: var(--touch-active) !important;
    min-width: var(--touch-active) !important;
    /* Better touch feedback */
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* Touch feedback */
  .btn:active,
  button:active {
    -webkit-tap-highlight-color: transparent;

    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  /* Form elements */
  input,
  textarea,
  select {
    min-height: var(--touch-active) !important;
    padding: 16px !important;
    border-radius: 12px !important;
    touch-action: manipulation;
  }

  /* Links and clickable elements */
  a,
  .clickable,
  [role="button"] {
    min-height: var(--touch-minimum) !important;
    min-width: var(--touch-minimum) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    -webkit-tap-highlight-color: transparent;
  }

  /* Navigation */
  nav a,
  .nav-link,
  .menu-item {
    min-height: var(--touch-active) !important;
    min-width: var(--touch-active) !important;
    padding: 12px 16px !important;
  }

  /* Interactive elements */
  [onclick],
  [role="button"],
  .tab,
  .accordion-header {
    -webkit-tap-highlight-color: transparent;

    min-height: var(--touch-active) !important;
    min-width: var(--touch-active) !important;
    cursor: pointer;
  }
}

/* ============================================
   DEVICE-SPECIFIC TOUCH TARGETS
   ============================================ */

/* Small touch devices (phones) */
@media (pointer: coarse) and (max-width: 480px) {
  .btn,
  .btn-primary,
  .btn-outline,
  button {
    -webkit-tap-highlight-color: transparent;

    min-height: var(--touch-comfortable) !important;
    min-width: var(--touch-comfortable) !important;
  }

  input,
  textarea,
  select {
    min-height: var(--touch-comfortable) !important;
  }

  nav a,
  .nav-link {
    min-height: 48px !important;
    min-width: 48px !important;
  }
}

/* Large touch devices (tablets) */
@media (pointer: coarse) and (min-width: 481px) and (max-width: 1024px) {
  .btn,
  .btn-primary,
  .btn-outline,
  button {
    -webkit-tap-highlight-color: transparent;

    min-height: var(--touch-spacious) !important;
    min-width: var(--touch-spacious) !important;
  }

  input,
  textarea,
  select {
    min-height: calc(var(--touch-spacious) - 4px) !important;
  }

  nav a,
  .nav-link {
    min-height: var(--touch-spacious) !important;
    min-width: var(--touch-spacious) !important;
  }
}

/* ============================================
   ZONE-BASED TOUCH TARGETS
   ============================================ */

/* Thumb zone (bottom of screen - easiest) */
@media (pointer: coarse) and (max-width: 1024px) {
  .thumb-zone .btn,
  .thumb-zone button,
  .thumb-zone .touch-target {
    -webkit-tap-highlight-color: transparent;

    min-height: var(--touch-thumb) !important;
    min-width: var(--touch-thumb) !important;
    /* Extra visual feedback */
    transform: scale(1.02);
  }

  .thumb-zone .btn:hover,
  .thumb-zone .btn:focus {
    -webkit-tap-highlight-color: transparent;

    transform: scale(1.05);
  }
}

/* Stretch zone (top of screen - hard to reach) */
@media (pointer: coarse) and (max-width: 1024px) {
  .stretch-zone .btn,
  .stretch-zone button,
  .stretch-zone .touch-target {
    -webkit-tap-highlight-color: transparent;

    min-height: var(--touch-minimum) !important;
    min-width: var(--touch-minimum) !important;
    /* Smaller but still usable */
  }
}

/* ============================================
   SPECIAL TOUCH ELEMENTS
   ============================================ */

/* Floating action buttons */
.fab,
.floating-action-btn {
  -webkit-tap-highlight-color: transparent;

  min-height: 60px !important;
  min-width: 60px !important;
  border-radius: 50% !important;
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 1000 !important;
}

/* Bottom navigation */
.mobile-bottom-nav a {
  min-height: 56px !important;
  min-width: 56px !important;
  padding: 8px 12px !important;
}

/* Tab bars */
.tab-bar .tab {
  min-height: 48px !important;
  min-width: 48px !important;
  padding: 12px 16px !important;
}

/* Accordions */
.accordion-header {
  min-height: var(--touch-active) !important;
  padding: 16px !important;
  cursor: pointer;
}

/* Checkboxes and radio buttons */
input[type="checkbox"],
input[type="radio"] {
  -webkit-tap-highlight-color: transparent;

  min-height: 20px !important;
  min-width: 20px !important;
  transform: scale(1.5);
  margin: 8px !important;
}

/* File inputs */
input[type="file"] {
  min-height: var(--touch-active) !important;
  padding: 16px !important;
}

/* Range sliders */
input[type="range"] {
  min-height: 40px !important;
  padding: 8px 0 !important;
}

/* ============================================
   TOUCH FEEDBACK
   ============================================ */

@media (pointer: coarse) {
  /* Touch feedback classes */
  .touch-feedback {
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease;
  }

  .touch-feedback:active {
    transform: scale(0.98);
  }

  /* Enhanced touch targets */
  .touch-enhanced {
    min-height: calc(var(--touch-active) + 8px) !important;
    min-width: calc(var(--touch-active) + 8px) !important;
  }

  /* Compact touch targets (where space is limited) */
  .touch-compact {
    min-height: var(--touch-minimum) !important;
    min-width: var(--touch-minimum) !important;
  }
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* Reduced motor skills */
@media (pointer: coarse) and (prefers-reduced-motion: reduce) {
  .btn,
  button {
    -webkit-tap-highlight-color: transparent;

    transition: none !important;
    transform: none !important;
  }

  .btn:hover,
  .btn:focus {
    -webkit-tap-highlight-color: transparent;

    transform: none !important;
  }
}

/* High contrast mode */
@media (pointer: coarse) and (prefers-contrast: high) {
  .btn,
  button {
    -webkit-tap-highlight-color: transparent;

    min-height: calc(var(--touch-active) + 8px) !important;
    min-width: calc(var(--touch-active) + 8px) !important;
    border-width: 3px !important;
    font-weight: 700 !important;
  }

  input,
  textarea,
  select {
    border-width: 3px !important;
  }
}

/* Large text preferences */
@media (pointer: coarse) and (min-resolution: 120dpi) {
  .btn,
  button {
    -webkit-tap-highlight-color: transparent;

    min-height: calc(var(--touch-active) + 4px) !important;
    min-width: calc(var(--touch-active) + 4px) !important;
  }
}