/*
 * Mobile-specific styles for iOS and Android apps
 * Ensures touch targets meet accessibility guidelines (44x44pt minimum)
 */

@media (max-width: 768px) {
  /* Larger tap targets for buttons */
  .btn-primary,
  .btn-secondary,
  .btn-small {
    min-height: 44px !important;
    padding: 12px 20px !important;
    font-size: 16px !important;
  }

  /* Word buttons in reading sessions need larger tap targets */
  .word-button {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 12px !important;
    margin: 4px !important;
  }

  /* Larger passage text for easier reading on mobile */
  .passage {
    font-size: 20px !important;
    line-height: 1.8 !important;
  }

  /* Comprehension question buttons */
  .star-button {
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 24px !important;
  }

  /* Navigation and action links */
  .child-actions a,
  .child-actions button {
    min-height: 44px !important;
    padding: 10px 16px !important;
  }

  /* Form inputs */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  select,
  textarea {
    min-height: 44px !important;
    font-size: 16px !important; /* Prevents zoom on iOS */
    padding: 12px !important;
  }

  /* Prevent text selection on buttons (better mobile UX) */
  button,
  .btn-primary,
  .btn-secondary,
  .word-button {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* Better spacing on mobile */
  .dashboard,
  .reading-session,
  .skills-page {
    padding: 16px !important;
  }

  /* Larger headings on mobile */
  h1 {
    font-size: 28px !important;
  }

  h2 {
    font-size: 24px !important;
  }

  h3 {
    font-size: 20px !important;
  }

  /* Card spacing */
  .child-card {
    padding: 20px !important;
    margin-bottom: 16px !important;
  }

  /* Skills grid on mobile */
  .skills-grid {
    grid-template-columns: 1fr !important;
  }

  /* History cards */
  .session-card {
    padding: 16px !important;
  }
}

/* iOS-specific styles */
@supports (-webkit-touch-callout: none) {
  /* Disable callout on long press */
  * {
    -webkit-touch-callout: none;
  }

  /* Safe area insets for notched devices */
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Prevent bounce scrolling on fixed elements */
  .header {
    position: sticky;
    top: env(safe-area-inset-top);
  }
}

/* Android-specific styles */
@media (hover: none) and (pointer: coarse) {
  /* Increase hit areas for touch devices */
  a,
  button {
    padding: 8px;
    margin: 4px;
  }
}

/* Landscape mode */
@media (max-width: 768px) and (orientation: landscape) {
  /* Reduce vertical padding in landscape */
  .dashboard,
  .reading-session {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}