/**
 * Responsive Design & Media Queries
 */

/* === TABLET (768px and up) === */
@media (min-width: 768px) {
  .menu-container {
    gap: var(--spacing-lg);
  }

  .menu-header {
    margin-bottom: var(--spacing-2xl);
  }

  .modal-content {
    padding: var(--spacing-2xl);
  }
}

/* === SMALL DEVICES (max-width 600px) === */
@media (max-width: 600px) {
  .menu-header {
    margin-bottom: var(--spacing-lg);
  }

  .menu-items {
    gap: var(--spacing-sm);
    padding: 0 var(--spacing-sm);
  }

  .button {
    min-height: 50px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
  }

  .button-sm {
    min-height: 40px;
  }

  .modal-content {
    padding: var(--spacing-lg);
    margin: var(--spacing-md);
  }

  .modal-header {
    font-size: var(--font-size-xl);
  }

  .button-icon {
    width: 20px;
    height: 20px;
  }

  .input-hint {
    display: none;
  }
}

/* === LANDSCAPE MODE (small height) === */
@media (orientation: landscape) and (max-height: 600px) {
  .menu-container {
    gap: var(--spacing-sm);
  }

  .menu-header {
    margin-bottom: var(--spacing-md);
    font-size: clamp(1.2rem, 4vw, 1.8rem);
  }

  .button {
    min-height: 45px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
  }

  .input-hint {
    display: none;
  }
}

/* === EXTRA LARGE SCREENS (1200px and up) === */
@media (min-width: 1200px) {
  .menu-container {
    max-width: 700px;
    gap: var(--spacing-xl);
  }

  .button {
    min-height: 70px;
    padding: var(--spacing-lg) var(--spacing-2xl);
    font-size: var(--font-size-xl);
  }

  .button-icon {
    width: 28px;
    height: 28px;
  }
}

/* === PRINT STYLES === */
@media print {
  .no-print {
    display: none !important;
  }

  .button {
    border: 1px solid #000;
    background-color: transparent;
  }
}

/* === TOUCH DEVICE OPTIMIZATION === */
@media (hover: none) and (pointer: coarse) {
  /* Increase hit targets on touch devices */
  .button {
    min-height: 56px;
    min-width: 56px;
  }

  /* Remove hover effects on touch devices */
  .button:hover:not(.button-disabled) {
    transform: none;
  }

  .button:active:not(.button-disabled) {
    background-color: var(--primary-color);
    transform: scale(0.98);
  }
}

/* === HIGH CONTRAST MODE === */
@media (prefers-contrast: more) {
  .button {
    border-width: 3px;
  }

  .modal-content {
    border-width: 3px;
  }
}

/* === DARK MODE (explicit) === */
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #0a0e27;
    --surface-color: #1a1f3a;
    --text-color: #ffffff;
    --text-secondary: #b0b8d4;
  }
}

/* === LIGHT MODE (explicit) === */
@media (prefers-color-scheme: light) {
  :root {
    --background-color: #f5f7fa;
    --surface-color: #ffffff;
    --text-color: #1a1a2e;
    --text-secondary: #666;
  }
}