/* A&E Auto Sales — custom styles */

.nav-link {
  font-size: .9rem;
  font-weight: 500;
  color: #b8bec9;
  transition: color .15s ease;
}
.nav-link:hover { color: #d4a72c; }

.btn-gold {
  display: inline-block;
  background: #d4a72c;
  color: #0f1115;
  font-weight: 700;
  padding: .55rem 1.4rem;
  border-radius: 4px;
  transition: background .15s ease;
}
.btn-gold:hover { background: #e8c358; }

.btn-outline {
  display: inline-block;
  background: transparent;
  border: 1px solid #d4a72c;
  color: #d4a72c;
  font-weight: 600;
  padding: .5rem 1.3rem;
  border-radius: 4px;
  transition: all .15s ease;
}
.btn-outline:hover { background: #d4a72c; color: #0f1115; }

.footer-heading {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #d4a72c;
  margin-bottom: 1rem;
}
.footer-link {
  font-size: .88rem;
  color: #b8bec9;
  transition: color .15s ease;
}
.footer-link:hover { color: #e8c358; }

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  background: linear-gradient(160deg, #0f1115 0%, #171a21 45%, #1f2532 100%);
  overflow: hidden;
  padding: 7rem 1.5rem 6rem;
}

.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(15,17,21,0.94) 0%, rgba(15,17,21,0.82) 40%, rgba(15,17,21,0.5) 75%, rgba(15,17,21,0.3) 100%);
  z-index: 1;
}

.hero-glow {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60%;
  height: 140%;
  background: radial-gradient(circle, rgba(212,167,44,0.14) 0%, rgba(212,167,44,0) 70%);
  pointer-events: none;
  z-index: 2;
}

.hero-road {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #d4a72c66, transparent);
  z-index: 2;
}

.hero-car-icon {
  opacity: .9;
}

/* Gentle bobbing motion for the hero "lot" scene -- staggered per car so they
   don't move in sync, suggesting a small lot rather than one static graphic. */
.lot-car {
  transform-box: fill-box;
  transform-origin: center;
  animation: lot-car-bob 4.2s ease-in-out infinite;
}
.lot-car-bg1  { animation-delay: 0s; }
.lot-car-bg2  { animation-delay: 1.4s; }
.lot-car-hero { animation-delay: 0.7s; animation-duration: 4.6s; }

@keyframes lot-car-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.headlight {
  transform-box: fill-box;
  transform-origin: center;
  animation: headlight-pulse 2.3s ease-in-out infinite;
}

@keyframes headlight-pulse {
  0%, 100% { opacity: .4; }
  50%      { opacity: 1; }
}

.stock-chip {
  font-family: 'Oswald', sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #d4a72c;
  background: #d4a72c14;
  border: 1px solid #d4a72c55;
  border-radius: 4px;
  padding: .12rem .5rem;
  white-space: nowrap;
}

/* ── Car cards ────────────────────────────────────────────────────────── */

.car-card {
  background: #171a21;
  border: 1px solid #2a2f3a;
  border-radius: 10px;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease;
}
.car-card:hover {
  transform: translateY(-3px);
  border-color: #d4a72c88;
}
.car-photo-wrap {
  aspect-ratio: 4 / 3;
  background: #0f1115;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.car-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.status-badge {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .2rem .55rem;
  border-radius: 4px;
}
.status-available { background: #3ba55d22; color: #6fd98a; border: 1px solid #3ba55d55; }
.status-pending    { background: #d4a72c22; color: #e8c358; border: 1px solid #d4a72c55; }
.status-sold       { background: #e0525222; color: #f08a8a; border: 1px solid #e0525255; }

/* ── Forms ────────────────────────────────────────────────────────────── */

.form-label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: #b8bec9;
  margin-bottom: .35rem;
}
.form-input {
  width: 100%;
  background: #0f1115;
  border: 1px solid #2a2f3a;
  border-radius: 6px;
  padding: .6rem .8rem;
  color: #f1f3f6;
  font-size: .92rem;
  outline: none;
  transition: border-color .15s ease;
}
.form-input:focus { border-color: #d4a72c; }