/*
  Basic styling for the limited‑edition trainers website.
  The design emphasises readability and clean presentation while
  highlighting key product information. Feel free to adjust colours
  and fonts to match your brand identity.
*/

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  /* Dark background evokes premium feel */
  background: #111111;
  color: #ffffff;
}

/* Hero section with background image and overlay text */
/* Hero section with dark backdrop */
.hero {
  position: relative;
  text-align: center;
  color: #ffffff;
  background: #111111;
  overflow: hidden;
}
/* Container for multiple hero images */
.hero-images {
  display: flex;
  width: 100%;
  height: 60vh;
  overflow: hidden;
}

/* Each image fills half the hero section and is subtly muted */
.hero-images img {
  flex: 1;
  width: 50%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

/* Brand logo styling within the hero text */
/* Large logo in the hero section */
.logo {
  width: 180px;
  margin-bottom: 1rem;
}

/* Inline logo used in headings and footer */
/* Increase the size for better legibility and adjust spacing to sit after text */
.logo-inline {
  width: 36px;
  height: 36px;
  vertical-align: middle;
  /* When the logo appears after heading text, space it on the left */
  margin-left: 0.5rem;
  margin-right: 0;
}

.hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hero-text h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.hero-text p {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

/* Call to action button uses accent colour */
.cta-button {
  display: inline-block;
  background: #D7263D;
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.cta-button:hover {
  background: #a81d2f;
}

/* Product section layout */
/* Featured product section */
.product-section {
  display: flex;
  flex-wrap: wrap;
  padding: 2rem;
  background: #1a1a1a;
  border-top: 1px solid #222;
  border-bottom: 1px solid #222;
}

.product-image {
  flex: 1 1 350px;
  text-align: center;
}

.product-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.product-info {
  flex: 1 1 350px;
  padding: 1rem 2rem;
}

.product-info h2 {
  margin-top: 0;
}

/* Price uses accent colour */
.price {
  font-size: 1.5rem;
  color: #D7263D;
  margin-top: 0.5rem;
}

.features {
  list-style-type: square;
  padding-left: 1.5rem;
}

.inventory {
  font-weight: bold;
  margin: 1rem 0;
}

/* Buy button inherits accent colour */
.buy-button {
  display: inline-block;
  background: #D7263D;
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.buy-button:hover {
  background: #a81d2f;
}

/* PayPal button styling to match the buy button */
.paypal-form {
  margin-top: 1rem;
}

.paypal-button {
  display: inline-block;
  background: #D7263D;
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.3s ease;
}

.paypal-button:hover {
  background: #a81d2f;
}

/* Product gallery grid showing available drops */
.product-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  padding: 2rem;
  background: #111111;
  border-bottom: 1px solid #222222;
}

.product-card {
  background: #222222;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s ease;
  color: #ffffff;
  text-decoration: none;
}

.product-card img {
  width: 100%;
  display: block;
  height: 280px;
  object-fit: cover;
}

/* Hide text visually while keeping it accessible to screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.product-card h3 {
  padding: 0.75rem;
  font-size: 1rem;
  color: #ffffff;
}

.product-card:hover {
  transform: translateY(-4px);
}

/* Style the size selection label and dropdown within the PayPal form */
.paypal-form label {
  display: block;
  margin-top: 1rem;
  color: #ffffff;
  font-size: 0.9rem;
}

.paypal-form select {
  margin-top: 0.5rem;
  padding: 0.5rem;
  border-radius: 4px;
  border: 1px solid #333333;
  background: #222222;
  color: #ffffff;
  width: 100%;
  max-width: 200px;
  box-sizing: border-box;
}

/* Informational sections */
/* Informational sections dark background */
.about-section,
.contact-section {
  padding: 2rem;
  background: #111111;
  border-bottom: 1px solid #222;
}

footer {
  background: #111111;
  color: #777777;
  text-align: center;
  padding: 1rem 0;
  font-size: 0.9rem;
  border-top: 1px solid #222;
}


@media (max-width: 768px) {
  .card-container {
    flex-direction: column;
    align-items: center;
  }
  .product-card {
    width: 90%;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-image {
    height: 40vh;
  }
  .product-section {
    flex-direction: column;
  }
  .product-info {
    padding: 1rem 1rem;
  }
  .hero-text h1 {
    font-size: 2rem;
  }
}