/**
 * responsive.css - Comprehensive responsive utilities for D&H Engraving website
 * 
 * Purpose: Ensure optimal display on ALL viewports from 320px and up
 * Dependencies: Should be loaded LAST after all other CSS files
 * 
 * Breakpoint Strategy (Mobile-First):
 * - 320px (20rem): Minimum supported width
 * - 480px (30rem): Small phones
 * - 600px (37.5rem): Large phones
 * - 768px (48rem): Tablets
 * - 900px (56.25rem): Small desktop
 * - 1200px (75rem): Large desktop
 * 
 * All measurements use rem units for accessibility
 * rem values based on 16px browser default
 */

/* ============================================
   VIEWPORT OPTIMIZATIONS
   ============================================ */

/* Prevent horizontal scrolling on all viewports */
html {
  overflow-x: hidden; /* Prevent horizontal scroll */
  width: 100%; /* Full width */
}

/* Ensure all containers respect viewport width */
body {
  overflow-x: hidden; /* Prevent body overflow */
  width: 100%; /* Full viewport width */
  min-width: 0; /* Allow shrinking to any size */
  position: relative; /* For absolute positioned children */
}

/* Force all images to be responsive */
img {
  max-width: 100%; /* Never exceed container width */
  height: auto; /* Maintain aspect ratio */
}

/* Prevent tables from breaking layout */
table {
  max-width: 100%; /* Contain within viewport */
  overflow-x: auto; /* Allow horizontal scroll if needed */
  display: block; /* Enable overflow control */
}

/* Prevent iframes from breaking layout */
iframe {
  max-width: 100%; /* Contain within viewport */
}

/* ============================================
   TEXT OVERFLOW PREVENTION
   ============================================ */

/* Prevent long words from breaking layout */
p, h1, h2, h3, h4, h5, h6, li, td, th, span, a, div {
  word-wrap: normal; /* Keep words intact, wrap to next line */
  overflow-wrap: normal; /* Don't break words in the middle */
  hyphens: none; /* Disable hyphenation completely */
  -webkit-hyphens: none; /* Safari - no hyphenation */
  -ms-hyphens: none; /* IE/Edge - no hyphenation */
  word-break: normal; /* Keep words together, wrap at spaces */
}

/* Prevent code blocks from breaking layout */
pre, code {
  overflow-x: auto; /* Allow horizontal scroll */
  max-width: 100%; /* Contain within viewport */
  white-space: pre-wrap; /* Wrap long lines */
  word-break: break-all; /* Break anywhere if needed */
}

/* ============================================
   FLEXIBLE CONTAINER WIDTHS
   ============================================ */

/* Ensure all containers are flexible */
.container, 
.header-container, 
.footer-content,
.main-content,
.contact-container,
.reviews-container,
.timeline,
.coupon-container,
.privacy-content,
.trusted-by-container,
.logo-slider {
  max-width: 100%; /* Never exceed viewport */
  width: 100%; /* Use available width */
  box-sizing: border-box; /* Include padding in width */
  overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Ensure quadrants don't cause overflow */
.quadrant {
  box-sizing: border-box; /* Include padding in width */
  overflow-wrap: normal; /* Keep words intact */
  word-break: normal; /* Don't break words, wrap at spaces */
}

/* Ensure all flex containers wrap properly */
.flex-container,
.order-buttons,
.main-nav ul,
.services-container {
  flex-wrap: wrap; /* Allow wrapping on small screens */
}

/* ============================================
   GRID RESPONSIVENESS
   ============================================ */

/* Make all grids responsive - except quadrant-layout which has specific rules */
.grid,
.service-grid,
.review-platforms {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); /* Responsive grid */
}

/* ============================================
   ULTRA-SMALL SCREENS (320px)
   ============================================ */

@media (max-width: 20rem) {
  /* Force single column layouts */
  .grid,
  .quadrant-layout,
  .service-grid,
  .review-platforms {
    grid-template-columns: 1fr !important; /* Single column */
    gap: var(--spacing-sm); /* Smaller gaps */
  }
  
  /* Logo carousel specific fixes at 320px */
  .logo-track {
    /* Ensure track doesn't get compressed */
    min-width: max-content !important;
    flex-wrap: nowrap !important;
  }
  
  /* Ensure quadrant content doesn't overflow */
  .quadrant {
    padding: var(--spacing-sm); /* Reduce padding */
    width: 100%; /* Full width */
    box-sizing: border-box; /* Include padding in width */
  }
  
  /* Stack all flex items vertically */
  .flex-container,
  .order-buttons,
  nav ul,
  .services-container {
    flex-direction: column !important; /* Vertical stacking */
    align-items: stretch !important; /* Full width items */
  }
  
  /* Navigation specific fixes */
  nav {
    width: 100%; /* Full width */
  }
  
  nav ul {
    padding: 0; /* Remove padding */
    width: 100%; /* Full width */
  }
  
  nav li {
    width: 100%; /* Full width items */
    text-align: center; /* Center text */
  }
  
  nav a {
    display: block; /* Full width clickable area */
    padding: var(--spacing-sm); /* Adequate padding for touch */
  }
  
  /* Services list adjustments */
  .services-list {
    width: 100% !important; /* Full width */
    margin-bottom: var(--spacing-sm); /* Space between lists */
  }
  
  .services-list li {
    font-size: 0.875rem; /* Smaller text on small screens */
  }
  
  /* Ensure minimum touch targets */
  button, a, input, select, textarea {
    min-height: 2.5rem; /* 40px minimum for touch */
    min-width: 2.5rem; /* 40px minimum for touch targets */
  }
  
  /* Prevent horizontal overflow on smallest screens */
  body {
    padding: 0; /* Remove body padding */
  }
  
  main, section, div {
    max-width: 100vw; /* Never exceed viewport width */
    overflow-x: hidden; /* Prevent horizontal scroll */
  }
}

/* ============================================
   SMALL PHONES (320px - 480px)
   ============================================ */

@media (min-width: 20rem) and (max-width: 30rem) {
  /* Slightly larger touch targets */
  button, a, input, select, textarea {
    min-height: 2.75rem; /* 44px - iOS recommendation */
  }
  
  /* Allow 2-column grids where space permits */
  .service-grid {
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); /* 144px min */
  }
}

/* ============================================
   TABLETS (600px - 768px)
   ============================================ */

@media (max-width: 48rem) {
  /* Services container stacks on tablets */
  .services-container {
    flex-direction: column; /* Stack vertically */
    gap: var(--spacing-md); /* Smaller gap */
  }
  
  .services-list {
    width: 100%; /* Full width */
  }
  
  /* Ensure product image doesn't overflow */
  .product-image {
    max-width: 100%; /* Don't exceed container */
    height: auto; /* Maintain aspect ratio */
  }
}

/* ============================================
   LANDSCAPE PHONE ORIENTATION
   ============================================ */

@media (max-width: 48rem) and (orientation: landscape) {
  /* Reduce vertical spacing in landscape */
  .hero-section {
    height: 60vh; /* Use viewport height */
    min-height: 15rem; /* 240px minimum */
  }
  
  header {
    position: sticky; /* Keep header visible */
    top: 0;
    z-index: 1000;
    background: white; /* Ensure background */
  }
  
  /* Reduce section spacing */
  section {
    margin-bottom: var(--spacing-lg); /* Less vertical space */
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  /* Hide navigation and non-essential elements */
  header, 
  footer, 
  .main-nav,
  .cta-button,
  .hero-section {
    display: none !important;
  }
  
  /* Ensure content uses full width */
  main {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Prevent page breaks in important content */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }
  
  p, li {
    page-break-inside: avoid;
  }
}

/* ============================================
   HIGH DPI SCREENS
   ============================================ */

@media (-webkit-min-device-pixel-ratio: 2), 
       (min-resolution: 192dpi) {
  /* Ensure crisp text on retina displays */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /* Use higher quality images if available */
  .logo-item img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */

/* Ensure focus states are visible on all viewports */
*:focus {
  outline: 0.125rem solid var(--color-primary);
  outline-offset: 0.125rem;
}

/* Skip to content link for screen readers */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary);
  color: white;
  padding: var(--spacing-sm);
  z-index: 100;
  text-decoration: none;
}

.skip-to-content:focus {
  top: 0;
}

/* ============================================
   UTILITY CLASSES FOR RESPONSIVE BEHAVIOR
   ============================================ */

/* Hide on mobile */
@media (max-width: 48rem) {
  .hide-mobile {
    display: none !important;
  }
}

/* Hide on desktop */
@media (min-width: 48.0625rem) {
  .hide-desktop {
    display: none !important;
  }
}

/* Show only on smallest screens */
@media (min-width: 20.0625rem) {
  .show-320-only {
    display: none !important;
  }
}

/* Stack on mobile */
@media (max-width: 48rem) {
  .stack-mobile {
    flex-direction: column !important;
    display: flex !important;
  }
  
  .stack-mobile > * {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Full width on mobile */
@media (max-width: 48rem) {
  .full-mobile {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ============================================
   DEBUGGING HELPERS (Remove in production)
   ============================================ */

/* Uncomment to visualize element boundaries during development */
/*
* {
  border: 1px solid rgba(255, 0, 0, 0.1);
}
*/

/* Show current breakpoint (development only) */
/*
body::after {
  content: "320px+";
  position: fixed;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  z-index: 9999;
  display: block;
}

@media (min-width: 30rem) {
  body::after { content: "480px+"; }
}
@media (min-width: 37.5rem) {
  body::after { content: "600px+"; }
}
@media (min-width: 48rem) {
  body::after { content: "768px+"; }
}
@media (min-width: 56.25rem) {
  body::after { content: "900px+"; }
}
@media (min-width: 75rem) {
  body::after { content: "1200px+"; }
}
*/