/* =========================================================
   RCMA Valet — Home Page Styles (navbar removed)
   - Parallax hero
   - Glass-card grid
   - Fade-in sections
   - Final CTA
   - Social section
   - Footer
   - Sticky mobile CTA
   ========================================================= */

/* ---------- Root Vars ---------- */
:root{
  --bg:#000; --text:#eee; --muted:#cfcfcf;
  --gold:#ffd700; --gold-2:#ffea70;
  --line:rgba(255,215,0,0.15); --border:rgba(255,215,0,0.25);
  --glass:rgba(15,15,15,0.42); --blur:12px;
  --radius:16px;
  --container:1320px;
  --container-xl:1680px;
  --nav-h:64px;

  /* iOS safe areas */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- Base ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  color:var(--text);
  overflow-x:hidden;

  /* Split background props so we can override attachment on iOS */
  background-color: var(--bg);
  background-image: url("pictures/RCMA%20Valet%20%26%20%C3%98rchard%20Bar%20%26%20Table.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;

  position:relative;
}
body::before{
  content:""; position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  z-index:-1;
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

/* ---------- Hero (Parallax) ---------- */
.hero{
  /* Use modern viewport units for iOS Safari */
  height:100svh;
  height:100dvh;
  min-height:760px;

  display:grid;place-items:center;text-align:center;
  position:sticky;top:0;z-index:0;

  /* Split background props to control attachment per device */
  background-image: url("pictures/RCMA%20Valet%20%26%20%C3%98rchard%20Bar%20%26%20Table.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.35),rgba(0,0,0,.68));
  pointer-events:none;
}
.hero-content,.hero-cta{position:relative;z-index:1;}
.hero-content{max-width:1100px;padding:20px;margin-bottom:36px;will-change:opacity,transform;}
.hero-title{
  font-family:"Montserrat",sans-serif;font-weight:700;
  font-size:clamp(2.7rem,7.2vw,6rem);
  background:linear-gradient(270deg,var(--gold),#fff,var(--gold));
  background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 6s linear infinite;
}
@keyframes shimmer{0%{background-position:220% center;}100%{background-position:-220% center;}}
.hero-subtitle{color:#d8d8d8;margin-top:10px;}
.hero-btn-huge{
  background:var(--gold);color:#000;border:0;cursor:pointer;
  padding:20px 56px;border-radius:14px;font-weight:900;font-size:clamp(1.05rem,1.9vw,1.45rem);
  box-shadow:0 10px 24px rgba(255,215,0,.25);
  transition:.25s;
}
.hero-btn-huge:hover{background:var(--gold-2);transform:translateY(-1px);}
.hero-cta.fixed{
  position:fixed;top:calc(var(--nav-h) + var(--safe-top));left:0;right:0;
  background:rgba(0,0,0,.92);padding:12px 16px;text-align:center;
  z-index:1300;pointer-events:auto;
}
.hero-cta.fixed .hero-btn-huge{width:100%;border-radius:0;padding:18px 0;box-shadow:none;}

/* ---------- Sections ---------- */
section{padding:clamp(96px,10vw,160px) 0;}
section h2{
  font-family:"Montserrat",sans-serif;
  font-size:clamp(1.7rem,2.7vw,2.6rem);
  color:var(--gold);margin-bottom:22px;text-align:center;
}

/* ---------- Glass Layout ---------- */
.glass-grid{padding-top:clamp(36px,7vw,72px);}
.glass-row{
  display:grid;gap:36px;align-items:stretch;
  grid-template-columns:1fr;
  width:100%;max-width:var(--container);
  margin-inline:auto;padding-inline:24px;
}
@media(min-width:900px){.glass-row{grid-template-columns:1fr 1fr;}}
@media(min-width:1400px){.glass-row{max-width:var(--container-xl);gap:44px;}}
.glass-card{
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--glass);
  backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
  padding:clamp(34px,3.8vw,56px);
  box-shadow:0 14px 32px rgba(0,0,0,.38);
}
.glass-card p{color:#ededed;line-height:1.75;}
.inline-cta{margin-top:18px;text-align:left;}
.inline-cta .hero-btn-huge{padding:16px 28px;font-size:1.02rem;}
.service-list{list-style:none;margin-top:8px;}
.service-list li{margin:10px 0;color:#f0f0f0;}
.quote{margin:10px 0 14px;color:#f5f5f5;font-style:italic;}
.quote cite{display:block;color:#d0d0d0;margin-top:6px;}

/* ---------- FAQ Accordion ---------- */
.faq{
  border:1px solid rgba(255,215,0,0.28);
  border-radius:14px;
  background:rgba(18,18,18,0.45);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  margin:12px 0;overflow:hidden;
}
.faq[open]{background:rgba(18,18,18,0.6);border-color:rgba(255,215,0,0.5);}
.faq>summary{
  list-style:none;cursor:pointer;
  padding:18px 18px;font-weight:700;color:#fff;position:relative;
}
.faq>summary::-webkit-details-marker{display:none;}
.faq>summary::after{
  content:"▾";
  position:absolute;right:16px;top:50%;
  transform:translateY(-50%) rotate(0deg);
  transition:.25s;color:var(--gold);
}
.faq[open]>summary::after{transform:translateY(-50%) rotate(180deg);}
.faq-body{padding:0 18px 18px;color:#e5e5e5;}
.faq-body p{line-height:1.75;}

/* ---------- Ultra-wide enhancement ---------- */
@media(min-width:2560px){
  .glass-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(420px,1fr));
    gap:48px;max-width:min(92vw,2400px);
    margin-inline:auto;padding-inline:24px;
  }
  .glass-grid .glass-row{display:contents;}
}

/* ---------- Final CTA ---------- */
.cta{
  min-height:60vh;
  display:grid;place-items:center;text-align:center;
  position:relative;overflow:hidden;
}
.cta h2{margin-bottom:12px;}
.cta .cta-alt{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:10px 14px;margin-top:12px;color:#d5d5d5;
}
.cta .cta-alt a{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:999px;
  border:1px solid rgba(255,215,0,0.35);
  background:rgba(15,15,15,0.45);
  backdrop-filter:blur(8px);
  color:#fff;text-decoration:none;transition:.25s;
}
.cta .cta-alt a:hover{
  transform:translateY(-1px);
  border-color:rgba(255,215,0,0.6);
  background:rgba(15,15,15,0.6);
}
.cta .cta-alt a[href^="mailto:"]::before{content:"✉️ "; }
.cta .cta-alt a[href^="tel:"]::before{content:"📞 "; }

/* ---------- Social (Connect section override) ---------- */
.social {
  background:rgba(0,0,0,0.85) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important; 
}

/* ---------- Sticky CTA (mobile) ---------- */
.sticky-cta{display:none;}
@media(max-width:768px){
  .sticky-cta{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:2000;
    background:var(--gold);
    padding:12px env(safe-area-inset-right) calc(12px + var(--safe-bottom)) env(safe-area-inset-left);
    box-shadow:0 -8px 24px rgba(0,0,0,.35);text-align:center;
  }
  .sticky-cta button{
    width:100%;padding:16px;border:0;border-radius:12px;cursor:pointer;
    background:#000;color:var(--gold);font-weight:900;font-size:1.05rem;
  }
  .sticky-cta button:hover{background:#111;}
}

/* ---------- Mobile Safari fixes ---------- */
/* Avoid parallax bugs on iOS: disable fixed attachment on small screens */
@media(max-width:768px){
  body{ background-attachment: scroll; }
  .hero{ background-attachment: scroll; }
}