/*
  Liquid Nectar Stylesheet
  This stylesheet defines the dark theme, gold/orange accents and clean layout
  for the Liquid Nectar Mobile Detailing website.
*/

/* Global variables for theming */
:root {
  --bg-color: #111317;        /* main dark background */
  --section-bg: #181b20;       /* dark section backgrounds */
  --card-bg: #1f232a;          /* cards background */
  --text-color: #f5f5f5;       /* light text color */
  /* Update accent colours to match the vibrant orange found on the
     original Liquid Nectar website. The primary is a rich burnt orange and
     the secondary is a slightly lighter hue for hover states. */
  /*
    Accent colours updated to match the original Liquid Nectar Mobile Detailing
    branding. The primary accent is a vibrant tangerine (#f7941d) and the
    secondary shade is a slightly lighter hue used for hover states and
    highlights. These colours are pulled from the original site for brand
    consistency.
  */
  --accent-color: #f7941d;
  --accent-secondary: #fbb24f;
  --border-radius: 6px;
  --transition-speed: 0.3s;
  font-family: 'Montserrat', sans-serif;
}

/* Reset & base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  line-height: 1.6;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Navigation */
header {
  background-color: var(--section-bg);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 0;
}

/* Logo container holds the dripping fruit logo and the company name */
.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* The image portion of the logo */
.logo-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

/* The text portion of the logo */
.logo-text {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-color);
  white-space: nowrap;
}

/* Navigation links display horizontally by default. We do not wrap
   the items across multiple lines; instead on small screens the
   entire list is hidden and replaced by a hamburger menu. */
.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  white-space: nowrap;
}

.nav-links a {
  color: var(--text-color);
  text-decoration: none;
  font-weight: 500;
  position: relative;
  transition: color var(--transition-speed) ease;
}

/* Active page indicator */
.nav-links a.active-page {
  color: var(--accent-color);
}
.nav-links a.active-page::after {
  width: 100%;
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background-color: var(--accent-color);
  transition: width var(--transition-speed) ease;
}

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

.nav-links a:hover::after {
  width: 100%;
}

/* Hero Section */
/* Hero Section */
.hero {
  /* Use the hero image as a full‑bleed background with a dark overlay */
  background: url('assets/hero.jpg') center/cover no-repeat;
  position: relative;
  padding: 6rem 0;
  text-align: center;
  color: var(--text-color);
}

/* Dark overlay for readability */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Increase the darkness of the overlay to improve text readability on
     top of the background image. A slightly darker overlay provides
     greater contrast for the white and gold text. */
  background: rgba(0, 0, 0, 0.7);
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
}

.hero h1 {
  font-size: 2.8rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.hero .hero-subtitle {
  font-size: 1.1rem;
  font-weight: 500;
  color: #e0e6f0;
  margin-bottom: 1rem;
  letter-spacing: 1px;
}

.hero p {
  font-size: 1.05rem;
  margin-bottom: 2rem;
  color: #d1d7e0;
  line-height: 1.6;
}

/* Hero call‑to‑action buttons container */
.hero-cta {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--border-radius);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-speed) ease,
    color var(--transition-speed) ease;
}

.btn-primary {
  background-color: var(--accent-color);
  color: #111317;
}

.btn-primary:hover {
  background-color: var(--accent-secondary);
}

.btn-secondary {
  background-color: #2a2e36;
  color: var(--accent-color);
  border: 1px solid var(--accent-color);
}

.btn-secondary:hover {
  background-color: var(--accent-color);
  color: #111317;
}

/* Section base styles */
.section {
  padding: 4rem 0;
  background-color: var(--section-bg);
}

.section h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 1.8rem;
  color: var(--accent-color);
}

.section-intro {
  text-align: center;
  margin-bottom: 2rem;
  color: #c1c7d0;
}

/* Services page hero */
.services-hero {
  text-align: center;
  padding: 5rem 0 3rem;
  background-color: var(--section-bg);
}

.services-hero h1 {
  font-size: 2.3rem;
  margin-bottom: 1rem;
  color: var(--accent-color);
}

.services-hero .section-intro {
  max-width: 800px;
  margin: 0 auto;
  color: #c1c7d0;
}

/* About section styling */
.about p {
  margin-bottom: 1rem;
  max-width: 750px;
}

/* About section grid layout */
.about-grid {
  display: grid;
  /* On wider screens divide the about section into two equal columns. The
     balanced layout conveys a modern, professional aesthetic. On smaller
     screens it collapses to a single column for better readability. */
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  align-items: center;
}

/* Increase the breakpoint for the collapsible navigation so that
   devices up to 900px wide (including many smartphones in landscape)
   show the hamburger menu instead of forcing horizontal scrolling. */
@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
}

.about-text h2 {
  text-align: left;
  margin-bottom: 1rem;
  font-size: 1.8rem;
  color: var(--accent-color);
}

.about-text p {
  margin-bottom: 1rem;
  color: #d1d5de;
}

.about-image img {
  width: 100%;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
  /* Force a wide aspect ratio on desktop to prevent tall images from
     dominating the layout. The image will be clipped to a 16:9
     ratio and centred within its container using object-fit. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* On small screens, remove the enforced aspect ratio on the About
   image so the full portrait can be seen without cropping. */
@media (max-width: 768px) {
  .about-image img {
    aspect-ratio: auto;
    height: auto;
    object-fit: cover;
  }
}
/* Ensure the image appears after the text on larger screens. On smaller
   screens the order remains natural (image appears before text) to reduce
   vertical scrolling. */
@media (min-width: 769px) {
  .about-image {
    order: 2;
  }
  .about-text {
    order: 1;
  }
}

/* Services Tabs */
.service-tabs {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.tab-btn {
  padding: 0.6rem 1rem;
  background-color: #2a2e36;
  border: none;
  border-radius: var(--border-radius);
  color: var(--text-color);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--transition-speed) ease;
}

.tab-btn.active,
.tab-btn:hover {
  background-color: var(--accent-color);
  color: #111317;
}

/* Service Panels */
.service-panel {
  margin-top: 2rem;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.card {
  background-color: var(--card-bg);
  padding: 1.5rem;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.card h3 {
  color: var(--accent-color);
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

.card ul {
  list-style: none;
  margin-bottom: 1rem;
}

.card ul li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
}

.card ul li::before {
  content: '\2022'; /* bullet symbol */
  position: absolute;
  left: 0;
  color: var(--accent-color);
}

.card .price {
  font-weight: 500;
  color: #b6b9c3;
  margin-bottom: 1rem;
}

/* Quote Form */
.quote {
  background-color: var(--bg-color);
}

#quote-form {
  margin-top: 2rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group.full-width {
  grid-column: 1/-1;
}

/* Service selection group spans the full grid width so that the chip
   checkboxes can wrap nicely across the form. */
.services-group {
  grid-column: 1/-1;
}

.form-group label {
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--accent-color);
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 0.75rem;
  border: 1px solid #2f3440;
  border-radius: var(--border-radius);
  background-color: #1e222a;
  color: var(--text-color);
  resize: vertical;
  font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent-color);
}

#form-status {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--accent-color);
}

/* Footer */
.footer {
  background-color: #0b0d11;
  padding: 3rem 0;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}

.footer-section h4 {
  color: var(--accent-color);
  margin-bottom: 1rem;
}

.footer-section a {
  color: #b6b9c3;
  text-decoration: none;
  transition: color var(--transition-speed) ease;
}

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

.footer .areas li {
  margin-bottom: 0.25rem;
}

/* Testimonials Section */
.testimonials h2 {
  margin-bottom: 2rem;
  font-size: 1.8rem;
  color: var(--accent-color);
  text-align: center;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.testimonial-card {
  background-color: var(--card-bg);
  padding: 1.5rem;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.testimonial-card .quote {
  font-style: italic;
  margin-bottom: 1rem;
  color: #d1d5de;
  line-height: 1.5;
}

.testimonial-card .stars {
  color: var(--accent-color);
  /* Increase size so Unicode star characters are clearly visible. */
  font-size: 1.2rem;
  margin: 0.5rem 0;
}

.testimonial-card .author {
  font-weight: 500;
  color: var(--accent-color);
  margin-top: auto;
}

/* On larger screens, display testimonials in a horizontal scrollable row. This
   allows visitors to swipe or scroll through multiple reviews without the
   section growing excessively tall. Each card snaps into place for a smooth
   scrolling experience. */
@media (min-width: 769px) {
  .testimonial-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .testimonial-card {
    flex: 0 0 320px;
    margin-right: 1rem;
    scroll-snap-align: start;
  }
  .testimonial-grid::-webkit-scrollbar {
    height: 6px;
  }
  .testimonial-grid::-webkit-scrollbar-thumb {
    background-color: var(--accent-color);
    border-radius: 3px;
  }
  .testimonial-grid::-webkit-scrollbar-track {
    background-color: #1f232a;
  }
}

/* On small screens hide testimonials beyond the first two to keep the
   layout concise. Only the first two cards remain visible; the rest
   are not rendered. */
@media (max-width: 768px) {
  .testimonial-grid .testimonial-card:nth-of-type(n+3) {
    display: none;
  }
}

/* FAQ Section */
.faq h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 1.8rem;
  color: var(--accent-color);
}

.faq-item {
  margin-bottom: 2rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.faq-item h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--accent-color);
}

.faq-item p {
  color: #d1d5de;
  line-height: 1.5;
}

/* Map Section */
.map h2 {
  text-align: center;
  margin-bottom: 1rem;
  font-size: 1.8rem;
  color: var(--accent-color);
}

.map .section-intro {
  text-align: center;
  margin-bottom: 2rem;
  color: #c1c7d0;
}

/* Map container styles for Leaflet. The inline styles in index.html set the
   size, but we also define border radius and box shadow here for
   consistency across breakpoints. */
/* Styles for the embedded service area map. */
#service-map {
  border-radius: var(--border-radius);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
}

/* Service area list styles */
.service-area-list {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
  padding: 0;
}

.service-area-list li {
  padding: 0.4rem 0.8rem;
  background-color: #2a2e36;
  border: 1px solid var(--accent-color);
  border-radius: var(--border-radius);
  color: var(--accent-color);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

/* Highlight service area chips on hover */
.service-area-list li:hover {
  background-color: var(--accent-color);
  color: #111317;
}

/* Grid layout for checkbox selections on the quote form */
/* The service selection on the quote form uses chip‑style checkboxes. To
   reduce vertical space and improve alignment, we lay the labels out in a
   flexible row that wraps onto new lines. Each label acts as a pill with
   consistent styling. */
/* Service selection chips. Use a responsive grid instead of a flex row to avoid
   a long vertical list when many services are available. Each label acts as a
   pill that spans a minimum width and wraps gracefully onto new lines. */
.checkbox-grid {
  display: grid;
  /* Arrange service options in two columns by default. This prevents the
     checkboxes from sprawling across the form and keeps them aligned. On
     narrower screens, the columns collapse into one. */
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  margin-top: 0.5rem;
}
@media (max-width: 500px) {
  .checkbox-grid {
    grid-template-columns: 1fr;
  }
}
.checkbox-grid label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 0.45rem 0.65rem;
  background-color: #2a2e36;
  border: 1px solid var(--accent-color);
  border-radius: var(--border-radius);
  color: var(--accent-color);
  transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}
.checkbox-grid label:hover {
  background-color: var(--accent-color);
  color: #111317;
}
.checkbox-grid input[type='checkbox'] {
  accent-color: var(--accent-color);
}

/* Increase the size of service option chips on small screens to improve tap
   targets. */
@media (max-width: 600px) {
  .checkbox-grid label {
    font-size: 1.1rem;
    padding: 0.7rem 1rem;
  }
}

/* On very small screens, reduce the logo font size and allow the company
   name to wrap onto multiple lines. This prevents horizontal scrolling
   caused by the long business name on mobile phones. */
@media (max-width: 500px) {
  .logo-text {
    font-size: 1.2rem;
    white-space: normal;
    line-height: 1.2;
  }
}

/* Gallery page styles */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.gallery-item {
  background-color: var(--card-bg);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  transition: transform var(--transition-speed) ease;
}

.gallery-item:hover {
  transform: translateY(-4px);
}

.gallery-item img {
  width: 100%;
  display: block;
  height: 200px;
  object-fit: cover;
}

/* Ensure gallery videos mirror the sizing and aspect ratio of images. Videos
   are muted and autoplayed in the gallery to create looping GIF‑like
   previews without sound. */
.gallery-item video {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  background-color: #000;
  border: none;
}

.gallery-caption {
  padding: 1rem;
  color: #d1d7e0;
  font-size: 0.9rem;
}

/* Blog page styles */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.blog-post {
  background-color: var(--card-bg);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-speed) ease;
}

.blog-post:hover {
  transform: translateY(-4px);
}

.blog-post img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.blog-content {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.blog-content h3 {
  margin-bottom: 0.6rem;
  font-size: 1.2rem;
  color: var(--accent-color);
}

.blog-content p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #d1d7e0;
  margin-bottom: 1rem;
}

.blog-content a {
  align-self: flex-start;
  color: var(--accent-color);
  text-decoration: underline;
  font-weight: 500;
  transition: color var(--transition-speed) ease;
}

.blog-content a:hover {
  color: var(--accent-secondary);
}

/* Info icon styling for the photo upload tooltip. It aligns with the label
   text and adopts the accent colour. When hovered or focused, we subtly
   lighten the colour to draw attention. */
/* Info icon styling for the photo upload tooltip. It aligns with the label
   text and adopts the accent colour. The nested .tooltip element is hidden
   by default and displayed when the parent is hovered or focused. */
.info-icon {
  position: relative;
  display: inline-block;
  margin-left: 0.4rem;
  /* Increase the info icon size for better visibility, particularly on mobile. */
  font-size: 1.3rem;
  color: var(--accent-color);
  cursor: pointer;
  user-select: none;
  transition: color var(--transition-speed) ease;
}
.info-icon:hover,
.info-icon:focus {
  color: var(--accent-secondary);
}

/* Tooltip styling */
.info-icon .tooltip {
  visibility: hidden;
  opacity: 0;
  width: 240px;
  background-color: #2a2e36;
  color: #f5f5f5;
  text-align: left;
  border-radius: var(--border-radius);
  padding: 0.8rem;
  position: absolute;
  z-index: 10;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
  transition: opacity var(--transition-speed) ease;
  font-size: 0.8rem;
  line-height: 1.3;
}
.info-icon .tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #2a2e36 transparent transparent transparent;
}
.info-icon:hover .tooltip,
.info-icon:focus .tooltip {
  visibility: visible;
  opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .hero h1 {
    font-size: 1.7rem;
  }
  .hero p {
    font-size: 0.9rem;
  }

  /* On small screens, simplify the About section by centring the text and
     hiding secondary paragraphs. This keeps the section concise and easy
     to read on mobile devices. */
  .about-text {
    text-align: center;
  }
  .about-text p:nth-of-type(n+2) {
    display: none;
  }
  /* Increase the size of service category buttons on mobile for easier tapping */
  .service-tabs .tab-btn {
    padding: 1rem 1.6rem;
    font-size: 1.05rem;
    flex: 1 1 45%;
  }
}

/* Map wrapper styles. The fallback image is always visible until
   the interactive Leaflet map loads. Once loaded, script.js hides
   the fallback. */
.map-wrapper {
  position: relative;
  width: 100%;
  height: 450px;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
}
.map-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#service-map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Mobile navigation styles */
/* The nav toggle button is hidden by default and displayed on screens below 768px.
   When active, it toggles the `open` class on the nav links to show or hide them. */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  /* Use the accent colour for the hamburger icon to make it stand out
     against the dark header. Increase the size for better tap targets. */
  color: var(--accent-color);
  font-size: 2rem;
  cursor: pointer;
}

/* On screens below 900px, hide the navigation links and show a
   hamburger menu.  When the user taps the toggle, the menu slides
   down from the header. */
@media (max-width: 900px) {
  .navbar {
    position: relative;
  }
  .nav-links {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--section-bg);
    flex-direction: column;
    padding: 0.75rem 1rem;
    gap: 0.5rem;
    border-radius: var(--border-radius);
    display: none;
    width: 200px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
    z-index: 1000;
  }
  .nav-links.open {
    display: flex;
  }
  .nav-toggle {
    display: block;
  }
  /* Reduce the font size of the logo text and allow it to wrap
     onto multiple lines on very small screens to prevent horizontal
     scrolling. */
  .logo-text {
    font-size: 1.2rem;
    white-space: normal;
  }
}