/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Ensure all buttons and submit inputs have pointer cursor */
button,
input[type="submit"],
input[type="button"] {
  cursor: pointer;
}

/* Enhanced touch interactions */
@media (hover: none) and (pointer: coarse) {
  /* Touch devices - increase tap targets */
  button,
  input[type="submit"],
  input[type="button"],
  a,
  [role="button"] {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  
  /* Improve touch scrolling */
  textarea,
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }
  
  /* Better input focus for touch */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea {
    font-size: 16px !important; /* Prevents zoom on iOS */
  }
}

/* Tablet optimizations */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Tablet portrait and landscape */
  .tablet-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Better spacing for tablet */
  .tablet-padding {
    padding: 1.5rem;
  }
  
  /* Optimize text sizes for tablet */
  .tablet-text {
    font-size: 1.125rem;
    line-height: 1.6;
  }
}

/* Enhanced code blocks for mobile */
pre, code {
  -webkit-overflow-scrolling: touch;
}

/* Smooth scrolling for better UX */
html {
  scroll-behavior: smooth;
}

/* Better focus indicators for accessibility */
*:focus {
  outline: 2px solid #3B82F6;
  outline-offset: 2px;
}

/* Remove default focus styles for mouse users */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Restore focus styles for keyboard users */
*:focus-visible {
  outline: 2px solid #3B82F6;
  outline-offset: 2px;
}

/* Landscape orientation optimizations */
@media screen and (orientation: landscape) and (max-height: 600px) {
  /* Reduce header size in landscape mobile */
  .landscape-compact {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  
  /* Smaller text in landscape mobile */
  .landscape-text {
    font-size: 0.875rem !important;
  }
}

/* Additional responsive improvements for content sections */
@media (max-width: 640px) {
  /* Prevent code overflow on small screens */
  pre {
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
    word-break: break-all;
    white-space: pre-wrap;
  }
  
  /* Better section spacing on mobile */
  .prose section {
    margin-bottom: 2rem;
  }
  
  /* Smaller headers on mobile */
  h1 {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
  }
  
  h2 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }
  
  h3 {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
  }
  
  /* Better button spacing */
  .inline-flex {
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
  }
}

/* Fix horizontal scroll on very small screens */
@media (max-width: 375px) {
  body {
    overflow-x: hidden;
  }
  
  pre, code {
    max-width: 100%;
    overflow-x: auto;
    font-size: 0.7rem !important;
  }
  
  /* Ensure containers don't overflow */
  .max-w-4xl,
  .max-w-6xl,
  .max-w-7xl {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}