/* =========================================================
   RCMA Valet - Global Footer (Updated Mobile & Blur Fix)
   ========================================================= */

.footer {
  position: relative;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,215,0,0.20);
  color: #cfcfcf;
  padding: clamp(36px, 5vw, 56px) 0;
  z-index: 1;
}

/* ---------- Layout ---------- */
.footer__content {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
  text-align: center;
}

@media (min-width: 1400px) {
  .footer__content {
    max-width: var(--container-xl);
  }
}

/* ---------- Typography & Dividers ---------- */
.footer__content > p:first-of-type {
  margin-bottom: 14px;
  color: #e6e6e6;
  font-weight: 600;
}

.footer__content::after {
  content: "";
  display: block;
  width: min(680px, 92%);
  height: 1px;
  margin: 18px auto 22px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,215,0,0.35) 12%,
    rgba(255,215,0,0.18) 50%,
    rgba(255,215,0,0.35) 88%,
    transparent 100%
  );
}

/* ---------- Footer Nav ---------- */
.footer__nav {
  line-height: 1.9;
  margin-bottom: 12px;
  color: #d7d7d7;
  font-size: clamp(.98rem, 1.1vw, 1.02rem);
  word-break: keep-all;
}

.footer__nav a {
  color: #fff;
  text-decoration: none;
  padding: 3px 4px;
  border-radius: 6px;
  transition: color .2s ease, transform .12s ease, background .2s ease, border-color .2s ease;
  border: 1px solid transparent;
}

.footer__nav a:hover {
  color: var(--gold);
  background: rgba(255,215,0,0.08);
  border-color: rgba(255,215,0,0.30);
  transform: translateY(-1px);
}

/* ---------- Contact ---------- */
.footer__content > p:last-of-type {
  color: #d0d0d0;
  margin-top: 10px;
}

.footer__content a[href^="mailto:"],
.footer__content a[href^="tel:"] {
  color: #fff;
  text-decoration: none;
  padding: 8px 12px;
  margin: 0 4px;
  border-radius: 999px;
  border: 1px solid rgba(255,215,0,0.28);
  background: rgba(15,15,15,0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .12s ease, border-color .2s ease, background .2s ease;
}

.footer__content a[href^="mailto:"]::before {
  content: "✉️ ";
}
.footer__content a[href^="tel:"]::before {
  content: "📞 ";
}

.footer__content a[href^="mailto:"]:hover,
.footer__content a[href^="tel:"]:hover {
  transform: translateY(-1px);
  border-color: rgba(255,215,0,0.55);
  background: rgba(15,15,15,0.6);
}

/* =========================================================
   Mobile Enhancements
   ========================================================= */

/* 1. Fix blur artifacts on mobile */
@media (max-width: 768px) {
  .footer {
    background: rgba(0,0,0,0.85);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* 2. Stack contact email + phone vertically */
@media (max-width: 768px) {
  .footer__content > p:last-of-type {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .footer__content > p:last-of-type a {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    text-align: center;
  }
}

/* 3. Ensure section ends cleanly before CTA (remove any overlap) */
@media (max-width: 768px) {
  .footer {
    margin-bottom: 0;            /* reset previous test spacing */
    padding-bottom: calc(60px + env(safe-area-inset-bottom)); /* safe breathing room */
  }
}