/*
 * Stylesheet for Stenson Auto Mods static website.
 *
 * This file defines a clean, dark themed aesthetic using modern CSS
 * properties like Flexbox and responsive typography. All pages in this
 * template reference this stylesheet for layout and styling.
 */

/* Root-level variables for easy colour and font management */
:root {
  --color-bg: #0a0a0a;       /* dark background */
  --color-bg-secondary: #1c1c1c; /* slightly lighter dark for sections */
  --color-primary: #ffffff;  /* primary text colour */
  /* Updated accent colour: pure white to match black & white theme */
  --color-accent: #ffffff;
  --color-muted: #aaaaaa;    /* muted text colour */
  --font-family: 'Arial', sans-serif;
}

/* Base styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  background-color: var(--color-bg);
  color: var(--color-primary);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-accent);
}

header {
  background-color: var(--color-bg-secondary);
  padding: 20px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
}

/* Logo image sizing */
/* Logo image sizing */
.logo img,
.logo-img {
  height: 120px; /* doubled per requirement */
  width: auto;
}

/* Mobile hamburger button (hidden on desktop) */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--color-primary);
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
}

.nav-toggle i {
  font-size: 18px;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 20px;
}

.nav-links li {
  position: relative;
}

/* Dropdown menus */
.nav-links li > ul {
  display: none;
  position: absolute;
  background-color: var(--color-bg-secondary);
  padding: 10px 0;
  list-style: none;
  margin-top: 8px;
  border: 1px solid #333;
  z-index: 200;
  min-width: 180px;
}

/* Display dropdown on hover */
.nav-links li:hover > ul {
  display: block;
}

/* Style dropdown links */
.nav-links li ul li {
  width: 100%;
}

.nav-links li ul li a {
  display: block;
  padding: 8px 16px;
  color: var(--color-primary);
  white-space: nowrap;
}

.nav-links li ul li a:hover {
  background-color: var(--color-bg);
  color: var(--color-muted);
}

/* Nested dropdown (second level) */
.nav-links li ul li {
  position: relative;
}

.nav-links li ul li > ul {
  top: 0;
  left: 100%;
}

.nav-links a {
  padding: 8px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.nav-links a:hover {
  background-color: var(--color-bg);
  color: var(--color-accent);
}

main {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

footer {
  background-color: var(--color-bg-secondary);
  padding: 40px 20px;
  color: var(--color-muted);
  font-size: 0.9rem;
}

footer .footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

footer .footer-column h4 {
  margin-bottom: 10px;
  font-size: 1rem;
  color: var(--color-primary);
}

footer .footer-column ul {
  list-style: none;
  padding: 0;
}

footer .footer-column ul li {
  margin-bottom: 6px;
}

footer .footer-column ul li a {
  color: var(--color-muted);
  transition: color 0.2s ease;
}

footer .footer-column ul li a:hover {
  color: var(--color-primary);
}

footer .footer-logo {
  width: 120px;
  margin-bottom: 10px;
}

footer .social-icons a {
  margin-right: 10px;
  font-size: 1.4rem;
  color: var(--color-muted);
  transition: color 0.2s ease;
}

footer .social-icons a:hover {
  color: var(--color-primary);
}

/* WhatsApp button in footer */
footer .whatsapp-button {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 16px;
  background-color: var(--color-primary);
  color: var(--color-bg);
  border-radius: 4px;
  font-weight: bold;
}

footer .whatsapp-button:hover {
  background-color: var(--color-muted);
  color: var(--color-bg);
}

/* Hero section layout.  Video backgrounds are handled within the
   .video-wrapper element. */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  min-height: 70vh;
  padding: 60px 20px;
  border-radius: 8px;
  margin-bottom: 40px;
  color: var(--color-primary);
  overflow: hidden;
}

/* Dark overlay on top of videos for text readability */
.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

/* Video wrapper fills the hero and sits behind content */
.hero .video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -2;
}

/* Individual videos fill the wrapper */
.hero .video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

/* Hero heading and text styles */
.hero h1 {
  font-size: 2.8rem;
  margin-bottom: 20px;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 40px;
  color: var(--color-muted);
}

/* Button style: white background with dark text to fit the monochrome scheme */
.btn {
  display: inline-block;
  padding: 12px 24px;
  background-color: var(--color-primary);
  color: var(--color-bg);
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Home page CTA button spacing */
.cta-buttons {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.btn:hover {
  background-color: var(--color-muted);
  color: var(--color-bg);
}

/* Section titles */
section {
  margin-bottom: 60px;
}

section h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  position: relative;
}

section h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 80px;
  height: 3px;
  background-color: var(--color-accent);
}

/* Product cards */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.product-card {
  background-color: var(--color-bg-secondary);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-card img {
  width: 100%;
  height: 180px;
  /* Show entire image without cropping inside product cards */
  object-fit: contain;
}

/* For servicing cards on the pricing page, we revert to cover to avoid large letterboxed gaps.
   This keeps headings closer to the image by cropping the image instead of showing black bars. */
.pricing-page .servicing-grid .product-card img {
  object-fit: cover;
  /* Reduce image height in servicing cards to reduce gap above headings */
  height: 130px;
}

.product-card .info {
  /* Eliminate top padding on card info section to bring heading immediately below the image */
  padding: 0 16px 16px;
}

.product-card h3 {
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.product-card p {
  font-size: 0.9rem;
  color: var(--color-muted);
  margin-bottom: 12px;
}

.product-card .price {
  font-weight: bold;
  margin-bottom: 12px;
}

.product-card .btn {
  margin: 0 16px 16px;
  align-self: flex-start;
}

/* Style lists inside product cards for service details */
.product-card ul {
  margin: 0 0 12px 20px;
  padding: 0;
}

.product-card ul li {
  list-style: disc;
  margin-left: 20px;
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Ensure the Includes label stands out */
.product-card p strong {
  color: var(--color-primary);
}

/* Footnote styling */
.footnote {
  font-style: italic;
}

/* Hide honeypot fields used by Netlify forms */
.hidden {
  display: none;
}

/* Make date/time picker icons white on dark backgrounds */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  /* invert icon colour to ensure visibility on dark backgrounds */
  /* use brightness to make the white icon stand out */
  filter: invert(1) brightness(2);
}

/* Cookie banner styling */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--color-bg-secondary);
  color: var(--color-primary);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 1000;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.5);
  font-size: 0.9rem;
}

.cookie-banner p {
  margin: 0;
  text-align: center;
}

.cookie-banner .cookie-buttons {
  display: flex;
  gap: 10px;
}

.cookie-banner .cookie-buttons .btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}

.cookie-banner .cookie-buttons .btn.accept {
  background-color: #007bff;
  color: #fff;
}

.cookie-banner .cookie-buttons .btn.decline {
  background-color: #444;
  color: #fff;
}

/* Pricing page adjustments: ensure all product cards on the pricing
   page have a consistent width similar to the servicing boxes and
   are centered within their grid area. */
/* For pricing page, align product cards left on larger screens but keep them centered on smaller screens.
   We remove the centering and use flex-start by default. Card width is limited to 300px as before. */
.pricing-page .product-grid {
  /* Always start alignment from the left to avoid huge gaps on rows with fewer items */
  justify-content: flex-start;
  /* Create columns with a fixed minimum width to prevent overly wide cards when there are only one or two items */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Limit pricing cards to a smaller width on desktop so four servicing cards fit comfortably in a single row */
.pricing-page .product-card {
  max-width: 280px;
  justify-self: flex-start;
}

/* Servicing section: force four equal-width columns on larger screens.  Cards fill their grid cell. */
.pricing-page .servicing-grid {
  grid-template-columns: repeat(4, 1fr);
}

.pricing-page .servicing-grid .product-card {
  max-width: none;
}

/* On small screens, allow servicing cards to wrap naturally like other pricing cards */
@media (max-width: 768px) {
  .pricing-page .servicing-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
  .pricing-page .servicing-grid .product-card {
    max-width: 280px;
  }
}

/* On mobile, center the product cards within their grid */
@media (max-width: 768px) {
  .pricing-page .product-grid {
    justify-content: center;
  }
  .pricing-page .product-card {
    justify-self: center;
  }
}

/* Cart icon styling in the navigation */
.cart-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.cart-icon button {
  background: none;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  font-size: 1.4rem;
  position: relative;
  padding: 4px;
}

/* Badge showing the number of items in the cart */
.cart-icon .snipcart-items-count {
  position: absolute;
  top: -6px;
  right: -10px;
  background-color: var(--color-primary);
  color: var(--color-bg);
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 0.7rem;
  font-weight: bold;
}

/* Service list */
.services-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.service-card {
  background-color: var(--color-bg-secondary);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  /* Ensure service cards align uniformly by stretching to equal height */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.service-card h3 {
  margin-bottom: 10px;
}

.service-card p {
  font-size: 0.9rem;
  color: var(--color-muted);
  margin-bottom: 10px;
}

.service-card .btn {
  margin-top: 10px;
}

/* Forms */
form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 600px;
  margin: 0 auto;
}

form label {
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
}

form input,
form select,
form textarea {
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #333;
  background-color: var(--color-bg);
  color: var(--color-primary);
}

form button {
  align-self: flex-start;
}

/* Blog posts */
.blog-post {
  background-color: var(--color-bg-secondary);
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.blog-post h3 {
  margin-bottom: 10px;
}

.blog-post p {
  font-size: 0.9rem;
  color: var(--color-muted);
}

/* Product detail layout */
.product-detail {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 30px;
  align-items: start;
}

.product-gallery {
  background-color: var(--color-bg-secondary);
  border: 1px solid #333;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.product-gallery img {
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: cover;
  display: block;
}

.gallery-controls {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  pointer-events: none;
}

.gallery-controls a {
  pointer-events: auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--color-primary);
  text-decoration: none;
}

.product-meta {
  background-color: var(--color-bg-secondary);
  border: 1px solid #333;
  border-radius: 8px;
  padding: 20px;
}

.product-meta h2 {
  margin-bottom: 10px;
}

.product-meta label {
  display: block;
  margin: 16px 0 8px;
  color: var(--color-muted);
  font-size: 0.95rem;
}

.product-meta select {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #333;
  background-color: #0d0d0d;
  color: var(--color-primary);
}

.product-meta .price-note {
  color: var(--color-muted);
  font-size: 0.9rem;
  margin-top: 10px;
}

/* Responsive adjustments for mobile screens */
@media (max-width: 768px) {
  .product-detail {
    grid-template-columns: 1fr;
  }

  /* Mobile navigation: hamburger + full-width dropdown */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--color-bg-secondary);
    padding: 10px 0;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid #333;
    max-height: 80vh;
    overflow-y: auto;
    z-index: 300;
  }

  nav {
    position: relative;
  }

  .nav-links.nav-open {
    display: flex;
  }

  .nav-links li {
    width: 100%;
  }

  .nav-links a {
    display: block;
    width: 100%;
    padding: 12px 16px;
    font-size: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  /* Disable hover dropdown behaviour on mobile; use click-to-expand instead */
  .nav-links li:hover > ul {
    display: none;
  }

  .nav-links li > ul {
    position: static;
    border: none;
    margin-top: 0;
    padding: 0;
    min-width: 0;
    background-color: transparent;
  }

  .nav-links li.has-submenu > a::after {
    content: "\25BE";
    float: right;
    opacity: 0.8;
  }

  .nav-links li.submenu-open > ul {
    display: block;
  }

  .nav-links li > ul a {
    padding-left: 28px;
    font-size: 0.95rem;
  }

  /* Third level (Retrofits submenu) */
  .nav-links li > ul li > ul a {
    padding-left: 42px;
    font-size: 0.95rem;
  }

  /* Cart icon row spacing */
  .nav-links .cart-icon {
    padding: 10px 16px;
  }

  /* Adjust hero sizing on small screens */
  .hero {
    min-height: 60vh;
    padding: 40px 10px;
  }
  .hero h1 {
    font-size: 2rem;
  }
  .hero p {
    font-size: 1rem;
    margin-bottom: 20px;
  }
  /* Stack product and service cards gracefully */
  .product-grid,
  .services-list {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  /* Logo sizing on mobile (still larger than original) */
  .logo img,
  .logo-img {
    height: 80px;
  }
}

/* Value strip on home page */
.value-strip {
  background-color: #e5e5e5;
  color: #333;
  font-weight: 500;
  font-size: 1rem;
  padding: 8px 10px;
  text-align: center;
  overflow: hidden;
  width: 100%;
}

.value-strip .scrolling-text {
  display: inline-block;
}

/* On mobile, animate the value strip text horizontally to ensure full visibility */
@media (max-width: 768px) {
  .value-strip .scrolling-text {
    white-space: nowrap;
    animation: marquee 15s linear infinite;
  }

  /* Duplicate the message on mobile by using ::after and the data-text attribute. The extra spacing
     ensures a gap between repeated segments, creating a seamless marquee loop. */
  .value-strip .scrolling-text::after {
    content: attr(data-text);
    margin-left: 2rem;
  }
}

@keyframes marquee {
  /* Create a continuous scrolling effect by sliding the duplicated content by half its width.
     Because the content inside .scrolling-text is duplicated back to back, translating
     by -50% shifts one full copy out of view and brings the second copy into view,
     creating a seamless loop without an initial blank gap. */
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-50%);
  }
}