/*
  Michuzo Motors – Site styles
  This stylesheet sets a dark, luxurious tone inspired by the original
  Michuzo brand. Gold accents and generous spacing promote a premium
  feeling while keeping the focus on the vehicles.
*/

/* CSS Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: #0c0c0d; /* nearly black background */
  color: #f5f5f5;            /* off‑white text for contrast */
  line-height: 1.6;
}

/* Utilities */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 0;
}

/* Hero section */
.hero {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url('https://images.unsplash.com/photo-1502877338535-766e1452684a?auto=format&fit=crop&w=1350&q=80');
  background-size: cover;
  background-position: center;
  padding: 6rem 0;
  text-align: center;
  position: relative;
  color: #f5f5f5;
  margin-top: 56px; /* offset for sticky nav */
}

.hero .site-title {
  font-size: 2.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #f9d880; /* warm gold accent */
  margin-bottom: 1rem;
}

.hero .tagline {
  font-size: 1.25rem;
  margin-bottom: 2.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  color: #d0d0d0;
}

.hero .cta-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  color: #0c0c0d;
  background-color: #f9d880;
  border-radius: 3px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.hero .cta-button:hover {
  background-color: #e6c56c;
}

/* Contact bar within hero */
.contact-bar {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.phone-number {
  font-size: 1rem;
  font-weight: 500;
  color: #f9d880;
}

.whatsapp-button {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: #25d366; /* WhatsApp green */
  color: #0c0c0d;
  border-radius: 4px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.whatsapp-button:hover {
  background-color: #20ba5a;
  color: #0c0c0d;
}

/* Listings section */
.listings-section {
  padding-top: 3rem;
}

/* About section */
.about {
  margin-bottom: 2.5rem;
  padding: 1.5rem;
  background-color: #141416;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.about h2 {
  font-size: 1.75rem;
  color: #f9d880;
  margin-bottom: 1rem;
}

.about p {
  font-size: 0.95rem;
  color: #d0d0d0;
  line-height: 1.5;
}

/* Services section */
.services {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.service-item {
  flex: 1 1 280px;
  background-color: #141416;
  border-radius: 6px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.service-item h3 {
  font-size: 1.4rem;
  color: #f9d880;
  margin-bottom: 0.75rem;
}

.service-item p {
  font-size: 0.9rem;
  color: #c7c7c7;
  line-height: 1.5;
}

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

/*
  Responsive adjustments for smaller screens
  When the viewport width drops below 600px, stack navigation items vertically,
  reduce hero text sizes and show vehicles in a single column. These
  refinements make the site more legible and user‑friendly on phones.
*/
@media (max-width: 600px) {
  /* Stack the nav contents to avoid cramped horizontal layout */
  .nav-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .nav-left, .nav-right {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  /* Reduce hero heading and tagline sizes */
  .hero .site-title {
    font-size: 2rem;
    line-height: 1.2;
  }
  .hero .tagline {
    font-size: 1rem;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  .hero .cta-button {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
  }
  /* Show only one card per row on small screens */
  .grid {
    grid-template-columns: 1fr;
  }
}

.card {
  background-color: #1a1a1c;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.6);
}

.image-wrapper {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 aspect ratio placeholder */
}

.image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.9);
  transition: transform 0.3s ease;
}

.card:hover .image-wrapper img {
  transform: scale(1.05);
}

.card-content {
  padding: 1.25rem 1rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.car-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #f9d880;
  margin-bottom: 0.25rem;
}

.price {
  font-size: 1.1rem;
  font-weight: 500;
  color: #e6c56c;
  margin-bottom: 0.75rem;
}

.specs {
  list-style: none;
  margin-bottom: 0.75rem;
  color: #d0d0d0;
  font-size: 0.9rem;
}

.specs li + li {
  margin-top: 0.25rem;
}

.description {
  flex: 1;
  font-size: 0.85rem;
  color: #bbbbbb;
  margin-bottom: 1rem;
}

.location {
  font-size: 0.8rem;
  color: #787878;
  margin-top: auto;
}

/* Gallery styling for car detail pages */
.gallery {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem 0;
}

.gallery img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  object-fit: contain;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Footer */
.footer {
  background-color: #0f0f11;
  padding: 2rem 0;
  font-size: 0.8rem;
  color: #999999;
  text-align: center;
  border-top: 1px solid #1e1e21;
}

/*
  The inventory grid links (card-link) wrap the entire card so that the
  whole tile acts as a hyperlink. Browsers underline all anchor
  contents by default, which results in distracting underlines on every
  piece of text inside a card. To create a cleaner, more legible
  inventory section, remove the default underline and inherit text
  colour from the surrounding elements. Only the vehicle title gains
  an underline on hover to hint that the card is clickable without
  cluttering the rest of the typography.
*/
a.card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

a.card-link:hover {
  text-decoration: none;
}

a.card-link .car-title {
  color: #f9d880;
  text-decoration: none;
}

a.card-link:hover .car-title {
  text-decoration: underline;
}

/* Navigation bar */
.navbar {
  width: 100%;
  background-color: #0f0f11;
  border-bottom: 1px solid #1e1e21;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logo {
  font-size: 1.2rem;
  font-weight: 700;
  color: #f9d880;
  text-decoration: none;
}

.nav-link {
  font-size: 0.95rem;
  color: #d0d0d0;
  text-decoration: none;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: #f9d880;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Reuse existing phone-number color for nav */
.nav-right .phone-number {
  font-size: 0.95rem;
  font-weight: 500;
  color: #f9d880;
}

/* Adjust WhatsApp button within nav */
.nav-whatsapp {
  padding: 0.4rem 0.9rem;
  font-size: 0.9rem;
  line-height: 1;
}

/* Modal styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal.active {
  opacity: 1;
  visibility: visible;
}

.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: -1;
}

.modal-content {
  background-color: #1a1a1c;
  border-radius: 6px;
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  position: relative;
}

.modal-content h2 {
  font-size: 1.6rem;
  font-weight: 600;
  color: #f9d880;
  margin-bottom: 0.5rem;
}

.modal-price {
  font-size: 1.3rem;
  font-weight: 500;
  color: #e6c56c;
  margin-bottom: 1rem;
}

.modal-description {
  font-size: 0.9rem;
  color: #cccccc;
  margin-bottom: 1rem;
}

.modal-location {
  font-size: 0.8rem;
  color: #888888;
  margin-bottom: 1rem;
}

.modal-contact {
  font-size: 0.85rem;
  color: #b7b7b7;
}

.modal-contact a {
  color: #f9d880;
  text-decoration: underline;
}

.modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 1.5rem;
  background: none;
  border: none;
  color: #e6c56c;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.modal-close:hover {
  color: #f9d880;
}