/* APRA Cattle Co. - Universal Responsive Fix */
/* Ensures perfect display on ALL screen sizes: 320px phones to 100+ inch displays */

/* ========================================
   LARGE SCREEN FIXES (70+ inch displays)
   ======================================== */

/* Ensure all main containers are perfectly centered on huge screens */
body {
  width: 100%;
  overflow-x: hidden;
  margin: 0 auto;
}

/* Nav - Perfect centering on all screens */
.nav {
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

/* Sections - Proper centering with responsive padding */
section {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

/* Product Grid - Dynamic responsive layout that works on ALL screens */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 320px));
  gap: 30px;
  justify-content: center; /* Centers on large screens */
  align-items: start;
  width: 100%;
  max-width: 100%;
  margin: 50px auto 0;
  padding: 0;
}

/* Product Cards - Ensure consistent sizing */
.product-card {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Hero - Perfect centering */
.hero {
  width: 100%;
  margin: 0;
  padding-left: max(20px, calc((100vw - 1600px) / 2));
  padding-right: max(20px, calc((100vw - 1600px) / 2));
}

.hero-content {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* Footer - Perfect centering */
.footer {
  width: 100%;
  box-sizing: border-box;
}

.footer-content {
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

/* Cart Items - Responsive grid */
.cart-items {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* About Content - Responsive on all screens */
.about-content {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* Team Grid - Centered on large screens */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 40px;
  justify-content: center;
  max-width: 1400px;
  margin: 50px auto 0;
}

/* Contact Form - Always centered */
.contact-form {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ========================================
   EXTRA LARGE SCREENS (1920px+)
   ======================================== */

@media (min-width: 1920px) {
  /* Increase max content width slightly for very large screens */
  .nav,
  section,
  .footer-content {
    max-width: 1800px;
  }

  /* Product grid can show more columns on huge screens */
  .product-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 320px));
    max-width: 1800px;
  }

  /* Ensure proper spacing */
  section {
    padding: 0 80px;
  }

  .footer {
    padding-left: 80px;
    padding-right: 80px;
  }
}

@media (min-width: 2560px) {
  /* 4K and ultra-wide displays */
  .nav,
  section,
  .footer-content {
    max-width: 2200px;
  }

  .product-grid {
    max-width: 2200px;
  }

  section {
    padding: 0 100px;
  }

  .footer {
    padding-left: 100px;
    padding-right: 100px;
  }

  /* Scale up fonts slightly for readability on huge screens */
  .hero h1 {
    font-size: 7.5rem;
  }

  .section-title h2 {
    font-size: 5rem;
  }
}

/* ========================================
   TABLET LANDSCAPE (1024px - 1366px)
   ======================================== */

@media (min-width: 1024px) and (max-width: 1366px) {
  .product-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 320px));
  }

  section {
    padding: 0 40px;
  }
}

/* ========================================
   TABLET PORTRAIT (768px - 1023px)
   ======================================== */

@media (min-width: 768px) and (max-width: 1023px) {
  .product-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    max-width: 100%;
  }

  .product-card {
    max-width: 100%;
  }

  section {
    padding: 0 30px;
  }

  .hero h1 {
    font-size: 4rem;
  }
}

/* ========================================
   MOBILE (320px - 767px)
   ======================================== */

@media (max-width: 767px) {
  /* Full width on mobile */
  .product-grid {
    grid-template-columns: 1fr !important;
    padding: 0 !important;
    gap: 25px !important;
  }

  .product-card {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Override inline styles on sections with !important */
  section {
    padding: 80px 20px 40px 20px !important;
    margin: 40px auto !important;
  }

  /* Override large inline font sizes */
  section h1 {
    font-size: 2.8rem !important;
    letter-spacing: 3px !important;
    padding: 0 10px !important;
  }

  section p {
    font-size: 1.2rem !important;
  }

  .nav {
    padding: 15px 20px !important;
  }

  .footer {
    padding: 60px 20px 30px !important;
  }

  /* Stack elements vertically */
  .about-content {
    grid-template-columns: 1fr !important;
  }

  .cart-item {
    grid-template-columns: 1fr !important;
  }

  /* Adjust hero for mobile */
  .hero {
    padding: 100px 20px 40px !important;
    min-height: 70vh !important;
  }

  .hero h1 {
    font-size: 2.5rem !important;
    letter-spacing: 4px !important;
  }

  .hero p {
    font-size: 1.1rem !important;
  }

  /* Mobile navigation - make it wrap properly */
  .nav {
    flex-wrap: wrap !important;
  }

  .nav-links {
    gap: 10px !important;
    font-size: 0.85rem !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .nav-links li {
    margin: 0 !important;
  }

  .logo-text {
    font-size: 1.2rem !important;
  }

  .logo-img {
    height: 60px !important;
  }

  /* Fix category buttons on mobile */
  .category-btn {
    font-size: 0.9rem !important;
    padding: 10px 20px !important;
  }

  /* Ensure forms are mobile-friendly */
  .form-group input,
  .form-group select,
  .form-group textarea {
    width: 100% !important;
    font-size: 16px !important; /* Prevents zoom on iOS */
  }

  .product-options select {
    font-size: 16px !important; /* Prevents zoom on iOS */
  }

  /* Make buttons mobile-friendly */
  .btn {
    padding: 15px 30px !important;
    font-size: 1rem !important;
    width: auto !important;
  }

  /* Fix product info on mobile */
  .product-info {
    padding: 20px 15px !important;
  }

  /* Fix cart on mobile */
  .cart-summary {
    width: 100% !important;
  }
}

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

@media (max-width: 480px) {
  /* Even smaller text for tiny phones */
  .hero h1 {
    font-size: 2rem !important;
    letter-spacing: 2px !important;
  }

  section h1 {
    font-size: 2.2rem !important;
    letter-spacing: 2px !important;
  }

  .section-title h2 {
    font-size: 2.5rem !important;
  }

  .btn {
    padding: 12px 25px !important;
    font-size: 0.95rem !important;
  }

  .product-info {
    padding: 15px !important;
  }

  .contact-form {
    padding: 25px 15px !important;
  }

  /* Smaller logo on tiny phones */
  .logo-img {
    height: 50px !important;
  }

  .logo-text {
    font-size: 1rem !important;
  }

  .logo-text span {
    font-size: 0.7rem !important;
  }

  /* Compact navigation */
  .nav-links {
    font-size: 0.8rem !important;
    gap: 8px !important;
  }

  .cart-count {
    font-size: 0.7rem !important;
  }

  /* Reduce padding on sections */
  section {
    padding: 60px 15px 30px 15px !important;
  }

  /* Make product cards more compact */
  .product-card {
    margin-bottom: 20px !important;
  }

  .product-price {
    font-size: 1.3rem !important;
  }
}

/* ========================================
   ENSURE NO HORIZONTAL SCROLL & PERFECT CENTERING
   ======================================== */

html, body {
  max-width: 100vw;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

/* Force all containers to center */
body > * {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Fix header to full width but centered content */
.header {
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
}

.header .nav {
  max-width: 1600px !important;
  margin: 0 auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Ensure all sections are centered */
section {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Fix any potential overflow issues */
img {
  max-width: 100%;
  height: auto;
}

/* Center all grids */
.product-grid,
.team-grid,
.stats-grid {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ========================================
   ASPECT RATIO FIXES
   ======================================== */

/* Ultra-wide monitors (21:9, 32:9) */
@media (min-aspect-ratio: 21/9) {
  .hero {
    min-height: 80vh;
  }

  section {
    max-width: 2000px;
  }
}

/* Vertical/portrait displays */
@media (max-aspect-ratio: 1/1) {
  .hero {
    min-height: 60vh;
  }

  .hero h1 {
    font-size: 3rem;
  }
}

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

@media print {
  .header,
  .footer,
  .btn,
  .cart-icon {
    display: none;
  }

  body {
    background: white;
    color: black;
  }

  section {
    max-width: 100%;
    padding: 20px;
  }
}