/* Responsive adjustments for index.html and produ.html */

/* Sticky footer styles */

/* Mobile adjustments */
@media (max-width: 640px) {
  /* Disable parallax on mobile for better performance */

 /* .parallax-bg {
    background-attachment: scroll !important;
  }

  /* Hide video on mobile and show background image */
  .hero-video {
    display: none !important;
  }

  .hero-section {
    background-image: url('../media/local.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  /* Adjust hero text size */

  /* Adjust navbar padding */
  .navbar-container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Adjust categories grid for better mobile layout */
  .categories-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Adjust offers grid */
  .offers-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  /* Adjust footer padding */
  .footer-content {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Adjust products grid for mobile */
  .products-grid {
    gap: 0.5rem !important;
    grid-template-columns: repeat(3, 1fr) !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }

  /* Adjust product cards for mobile */
  .product-card {
    padding: 0.5rem !important;
    min-width: auto !important;
    border-radius: 0.75rem !important;
  }

  .product-card img {
    height: 4.5rem !important;
    border-radius: 0.5rem !important;
  }

  .product-card h4 {
    font-size: 0.85rem !important;
  }

  .product-card p {
    font-size: 0.65rem !important;
  }

  /* Adjust details summary for mobile */
  details summary {
    padding: 0.5rem !important;
    font-size: 0.875rem !important;
  }

  details summary img {
    width: 2rem !important;
    height: 2rem !important;
  }

  /* Mobile menu adjustments */
  #mobile-menu {
    padding: 1rem !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 60px) !important;
  }

  #mobile-menu a {
    padding: 0.5rem 0 !important;
    font-size: 1rem !important;
  }
}

/* Tablet adjustments */
@media (min-width: 641px) and (max-width: 1024px) {
  .categories-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .offers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Adjust products grid for tablet */
  .products-grid {
    gap: 1.5rem !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .product-card {
    padding: 1.25rem !important;
  }

  .product-card img {
    height: 7rem !important;
  }

  /* Adjust details summary for tablet */
  details summary {
    padding: 1.5rem !important;
  }

  details summary img {
    width: 4rem !important;
    height: 4rem !important;
  }
}

/* Large screens */
@media (min-width: 1025px) {
  .categories-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  /* Products grid remains as is for large screens */
}

/* Extra large screens (1440px and above) */
@media (min-width: 1440px) {
  /* Increase hero title size */
  .hero-title {
    font-size: 4rem !important;
  }

  /* Increase navbar padding */
  .navbar-container {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }

  /* Increase categories grid spacing */
  .categories-grid {
    gap: 2rem !important;
  }

  /* Increase offers grid spacing */
  .offers-grid {
    gap: 2rem !important;
  }

  /* Increase footer padding */
  .footer-content {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }

  /* Increase products grid spacing and columns */
  .products-grid {
    gap: 2rem !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  /* Increase product card sizes */
  .product-card {
    padding: 2rem !important;
  }

  .product-card img {
    height: 10rem !important;
  }

  .product-card h4 {
    font-size: 1.5rem !important;
  }

  .product-card p {
    font-size: 1.125rem !important;
  }

  /* Increase details summary sizes */
  details summary {
    padding: 2rem !important;
    font-size: 1.25rem !important;
  }

  details summary img {
    width: 5rem !important;
    height: 5rem !important;
  }

  /* Increase mobile menu sizes (though less relevant for large screens) */
  #mobile-menu {
    padding: 2rem !important;
  }

  #mobile-menu a {
    padding: 1rem 0 !important;
    font-size: 1.25rem !important;
  }
}

/* Parallax background for static image */
.parallax-bg {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Disable parallax on mobile for performance */
@media (max-width: 640px) {
  .parallax-bg {
    background-attachment: scroll !important;
  }
}