/* River Rock — shared custom CSS (complements Tailwind) */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,600;1,9..144,600&family=Manrope:wght@400;600;700;800&display=swap');

:root {
  --bg:             #FBF6EE;
  --surface:        #FFFDF9;
  --surface-raised: #FFFFFF;
  --surface-sunken: #F2E8D9;
  --border:         #E6D7C3;
  --divider:        #EFE4D3;
  --text-primary:   #3A2A1E;
  --text-secondary: #6B5341;
  --text-muted:     #7C5E45;
  --primary:        #010D3D; /* River Rock navy — buttons / links / CTAs */
  --primary-hover:  #0A1A5A;
  --primary-pressed:#01081F;
  --on-primary:     #FFFFFF;
  --gold:           #9A5C18; /* secondary accent (eyebrows, ticks, decoration) */
  --coin:           #A86A12;
  --shadow:         rgba(58,42,30,0.18);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; min-width: 250px; }
body {
  font-family: 'Manrope', sans-serif;
  background-color: var(--bg);
  color: var(--text-primary);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* ── Typography ─────────────────────────────────────────── */
.font-display { font-family: 'Fraunces', serif; }
.eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--coin);
}

/* ── Buttons ────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--primary); color: var(--on-primary);
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 16px;
  padding: 14px 32px; border-radius: 999px; border: none;
  cursor: pointer; text-decoration: none;
  transition: background .18s, transform .12s, box-shadow .18s;
  box-shadow: 0 4px 18px rgba(1,13,61,.30);
}
.btn-primary:hover  { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(1,13,61,.40); }
.btn-primary:active { background: var(--primary-pressed); transform: translateY(0); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--primary);
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 15px;
  padding: 12px 24px; border-radius: 999px; border: 1.5px solid var(--border);
  cursor: pointer; text-decoration: none;
  transition: border-color .18s, background .18s;
}
.btn-ghost:hover { border-color: var(--primary); background: rgba(1,13,61,.06); }

/* ── Cards ──────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 2px 14px var(--shadow);
}

/* ── Nav ────────────────────────────────────────────────── */
.site-nav {
  position: fixed; top:0; left:0; right:0; z-index: 100;
  background: rgba(251,246,238,.90);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--divider);
  transition: box-shadow .2s;
}
.site-nav.scrolled { box-shadow: 0 2px 16px var(--shadow); }

#mobile-menu { display: none; }
#mobile-menu.open { display: block; }

/* ── Decorative divider line ───────────────────────────── */
.gold-rule {
  width: 48px; height: 3px;
  background: linear-gradient(90deg, var(--coin), transparent);
  border-radius: 2px;
  margin: 12px 0 20px;
}

/* ── Phone glow ─────────────────────────────────────────── */
.phone-glow {
  filter: drop-shadow(0 40px 80px rgba(154,92,24,.20))
          drop-shadow(0 8px 24px rgba(154,92,24,.12));
}

/* ── Scrim gradient (hero section bg) ──────────────────── */
.hero-scrim {
  background: linear-gradient(160deg, rgba(251,246,238,.0) 0%, rgba(251,246,238,.96) 60%);
}

/* ── FAQ accordion ──────────────────────────────────────── */
details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details[open] .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform .22s ease; display: inline-block; }

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── Responsive tweaks ──────────────────────────────────── */
@media (max-width: 400px) {
  .btn-primary { padding: 12px 22px; font-size: 15px; }
  .btn-ghost   { padding: 10px 18px; font-size: 14px; }
}