@tailwind base;
@tailwind components;
@tailwind utilities;

/* Base responsive styles */
@layer base {
  html {
    font-size: 16px;
  }
  
  body {
    min-width: 320px;
    overflow-x: hidden;
  }
}

/* Mobile Navigation Styles */
@layer components {
  .mobile-menu {
    @apply hidden;
  }
  
  .mobile-menu.active {
    @apply block;
  }
  
  /* Responsive adjustments for calculator form */
  @media (max-width: 640px) {
    .conductor-row {
      @apply flex-wrap gap-2;
    }
    
    .conductor-row select {
      @apply w-full;
    }
    
    .conductor-row .wire-count {
      @apply flex-1 min-w-0;
    }
    
    .conductor-row button {
      @apply w-auto;
    }
    
    /* Stack grid columns on mobile */
    .grid {
      @apply gap-4;
    }
    
    /* Adjust canvas size for mobile */
    #fillDiagram {
      @apply max-h-64;
    }
    
    /* Improve touch targets */
    button, select, input {
      @apply min-h-[44px];
    }
    
    /* Navigation spacing */
    nav .space-x-4 {
      @apply space-x-2;
    }
    
    /* Hide desktop navigation on mobile */
    @media (max-width: 768px) {
      .desktop-nav {
        @apply hidden;
      }
      
      .mobile-nav-toggle {
        @apply block;
      }
    }
  }
  
  /* Improve text readability on mobile */
  @media (max-width: 640px) {
    h1 {
      @apply text-2xl;
    }
    
    h2 {
      @apply text-xl;
    }
    
    h3 {
      @apply text-lg;
    }
    
    .text-4xl {
      @apply text-2xl;
    }
    
    .text-3xl {
      @apply text-xl;
    }
    
    .text-2xl {
      @apply text-lg;
    }
    
    .text-xl {
      @apply text-base;
    }
    
    /* Adjust padding for mobile */
    .px-4 {
      @apply px-3;
    }
    
    .py-12 {
      @apply py-8;
    }
    
    .p-6 {
      @apply p-4;
    }
  }
  
  /* Ensure proper scrolling on mobile */
  html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Prevent horizontal scroll */
  body {
    overflow-x: hidden;
  }
  
  /* Improve form elements on mobile */
  select, input, button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    @apply text-base;
  }
  
  /* iOS specific fixes */
  @supports (-webkit-touch-callout: none) {
    input, select, textarea {
      font-size: 16px !important;
    }
  }
}