/* Mobile Responsive CSS Override */

/* Ensure proper viewport on all mobile devices */
@media screen and (max-width: 768px) {
  /* Reset and base styles */
  * {
    box-sizing: border-box !important;
  }
  
  html, body {
    width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Container width fixes */
  .max-w-7xl {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Navigation fixes */
  nav {
    width: 100% !important;
  }
  
  nav .flex {
    flex-wrap: nowrap !important;
  }
  
  /* Hide desktop nav items on mobile */
  nav .space-x-4 {
    display: none !important;
  }
  
  /* Show mobile menu button */
  #mobileMenuBtn {
    display: block !important;
  }
  
  /* Logo text adjustment */
  nav span.text-xl {
    font-size: 1rem !important;
  }
  
  /* Hero section adjustments */
  h1 {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
    padding: 0 1rem !important;
  }
  
  .text-xl {
    font-size: 1rem !important;
    line-height: 1.5rem !important;
  }
  
  /* Form adjustments */
  .conductor-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  
  .conductor-row select,
  .conductor-row input {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important; /* Prevents zoom on iOS */
  }
  
  .conductor-row .flex {
    display: flex !important;
    gap: 0.5rem !important;
  }
  
  .conductor-row .wire-count {
    flex: 1 !important;
  }
  
  /* Button adjustments */
  button {
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 0.75rem 1rem !important;
  }
  
  /* Results section */
  .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .grid-cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }
  
  /* Canvas diagram */
  #fillDiagram {
    max-width: 100% !important;
    height: auto !important;
    max-height: 250px !important;
  }
  
  /* Text size adjustments */
  h2 {
    font-size: 1.25rem !important;
  }
  
  h3 {
    font-size: 1.125rem !important;
  }
  
  p {
    font-size: 0.875rem !important;
  }
  
  /* Padding adjustments */
  .p-6 {
    padding: 1rem !important;
  }
  
  .py-12 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  .px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Footer adjustments */
  footer .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
  
  /* Prevent horizontal scroll */
  section {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  
  /* Mobile menu styles */
  #mobileMenu {
    background: white !important;
    border-top: 1px solid #e5e7eb !important;
    padding: 0.5rem 0 !important;
  }
  
  #mobileMenu a {
    display: block !important;
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
  }
}

/* Extra small devices */
@media screen and (max-width: 375px) {
  h1 {
    font-size: 1.25rem !important;
  }
  
  .text-xl {
    font-size: 0.875rem !important;
  }
  
  nav span {
    font-size: 0.875rem !important;
  }
  
  .px-4, .px-3 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

/* iOS specific fixes */
@supports (-webkit-touch-callout: none) {
  /* iOS only styles */
  select, input, textarea, button {
    -webkit-appearance: none !important;
    border-radius: 0 !important;
    font-size: 16px !important;
  }
  
  /* Prevent zoom on focus */
  input:focus, select:focus, textarea:focus {
    font-size: 16px !important;
  }
}