/**
 * Mobile UX Improvements
 * Comprehensive mobile experience enhancements for touch interactions
 */

/* ===== MOBILE UX ENHANCEMENTS ===== */

@media (max-width: 768px) {

  /* Ensure all buttons meet minimum touch target size (48x48px) */
  .btn,
  button:not(.unstyled):not(.recipe-section-toggle):not(.ai-chat-toggle):not(.modal-close),
  a.btn,
  input[type="submit"],
  input[type="button"] {
    min-height: 48px !important;
    padding: 14px 20px;
    font-size: 16px;
    /* Prevents iOS zoom on focus */
  }

  .btn-small {
    min-height: 44px !important;
    padding: 12px 16px;
    font-size: 15px;
  }

  /* Improve form input touch targets */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    min-height: 48px;
    font-size: 16px;
    /* Prevents iOS zoom */
    padding: 12px 16px;
  }

  /* Improve clickable area for checkboxes and radios */
  input[type="checkbox"],
  input[type="radio"] {
    min-width: 24px;
    min-height: 24px;
    cursor: pointer;
  }

  /* Add proper spacing for checkbox/radio labels */
  label:has(input[type="checkbox"]),
  label:has(input[type="radio"]) {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    cursor: pointer;
  }

  /* Prevent text size adjustment on orientation change */
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* Improve tap highlight - use brand color */
  * {
    -webkit-tap-highlight-color: rgba(45, 106, 79, 0.15);
  }

  /* Remove button tap delay for instant feedback */
  a,
  button,
  input,
  select,
  textarea,
  label {
    touch-action: manipulation;
  }

  /* Improve link spacing for easier tapping */
  a:not(.btn):not(.card) {
    padding: 8px 4px;
    margin: -8px -4px;
  }

  /* Make icon buttons easier to tap */
  button.icon-btn,
  a.icon-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Improve scrollable containers on mobile */
  .scrollable-x {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  /* Add visual feedback for active states */
  button:active:not(:disabled),
  a:active {
    transform: scale(0.98);
    opacity: 0.9;
  }

  /* Prevent double-tap zoom on buttons */
  button,
  a.btn {
    -webkit-user-select: none;
    user-select: none;
  }

  /* Improve focus states for keyboard navigation */
  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 3px solid rgba(45, 106, 79, 0.5);
    outline-offset: 2px;
  }

  /* Stack action buttons vertically for better mobile UX */
  .action-buttons,
  .button-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .action-buttons>*,
  .button-group>* {
    width: 100%;
  }

  /* Improve dropdown/select appearance on mobile */
  select {
    appearance: none;
    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='%232d6a4f' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
  }

  /* Improve table scrolling on mobile */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* Improve spacing for better readability */
  h1,
  h2,
  h3 {
    margin-top: 1.5em;
    margin-bottom: 0.75em;
    line-height: 1.3;
  }

  p {
    line-height: 1.7;
    margin-bottom: 1.25em;
  }

  /* Improve list spacing */
  ul,
  ol {
    padding-left: 1.5em;
  }

  li {
    margin-bottom: 0.75em;
    line-height: 1.6;
  }

  /* Add safe area insets for notched devices */
  body {
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
  }

  /* Improve modal/overlay close buttons */
  .modal-close,
  .overlay-close,
  [aria-label*="close"],
  [aria-label*="Close"] {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ===== TABLET OPTIMIZATIONS (768px - 1024px) ===== */

@media (min-width: 769px) and (max-width: 1024px) {

  /* Slightly smaller touch targets for tablets */
  .btn {
    min-height: 44px;
    padding: 12px 18px;
  }

  /* Two-column button layouts on tablets */
  .button-group {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .button-group>* {
    flex: 1 1 calc(50% - 6px);
    min-width: 150px;
  }
}

/* ===== LANDSCAPE MODE OPTIMIZATIONS ===== */

@media (max-width: 896px) and (orientation: landscape) {

  /* Reduce vertical spacing in landscape */
  .modal-dialog {
    max-height: 85vh;
  }

  .modal-header,
  .modal-footer {
    padding: 12px 20px;
  }

  .modal-body {
    padding: 16px 20px;
  }

  /* Compact navigation in landscape */
  .bottom-nav {
    height: 52px;
  }

  .mobile-header {
    height: 48px;
  }
}

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

/* Improve touch targets for users with motor impairments */
@media (pointer: coarse) {

  button,
  a.btn,
  input,
  select {
    min-height: 48px;
  }

  /* Larger tap areas for primary actions */
  .btn-primary,
  .btn-secondary {
    min-height: 52px;
    padding: 16px 24px;
  }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}