/* ============================================================
   VACANCE RENT A CAR — design tokens + custom styles
   ------------------------------------------------------------
   Aligned to DESIGN.md (The Mediterranean Fixer).
   Coast-led palette; Sun is the accent in reserve.
   ============================================================ */

:root {
  /* Color primitives (see DESIGN.md frontmatter) */
  --carthage-navy:        #0f172a;
  --coastal-lagoon:       #0e7c8a;
  --coastal-lagoon-deep:  #0a5f6b;
  --coastal-lagoon-tint:  #e6f3f5;
  --saharan-sun:          #f59e0b;
  --sun-ember:            #d97706;
  --sun-tint:             #fef3c7;
  --coastal-sand:         #fef7e6;
  /* Body background — was warm cream (#fffbf2), pulled cool toward chroma 0
     with a hair of Lagoon hue. Breaks the 2026 warm-AI-cream default. */
  --paper:                #f6fafb;
  --whatsapp-emerald:     #25d366;
  --whatsapp-emerald-deep:#1ebe5a;

  /* Legacy aliases for Tailwind `bg-cream` / `var(--cream)` callers */
  --cream:                var(--paper);
  --navy:                 var(--carthage-navy);
  --lagoon:               var(--coastal-lagoon);
  --lagoon-700:           var(--coastal-lagoon-deep);
  --sunset:               var(--saharan-sun);
  --sunset-700:           var(--sun-ember);
  --sand:                 var(--coastal-sand);

  /* Motion tokens */
  --ease-out-quart:       cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:        cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:        150ms;
  --duration-base:        250ms;
  --duration-slow:        600ms;

  /* Brand-tinted lift shadows (Same-Hue Shadow Rule) */
  --shadow-cta-lagoon:    0 10px 25px -8px rgb(14 124 138 / 0.30);
  --shadow-cta-sun:       0 10px 25px -8px rgb(245 158 11 / 0.30);
  --shadow-cta-emerald:   0 10px 25px -8px rgb(37 211 102 / 0.30);

  /* z-index scale */
  --z-nav:                40;
  --z-sticky:             45;
  --z-modal-backdrop:     50;
  --z-modal:              55;
  --z-toast:              60;
  --z-fab:                65;
  --z-tooltip:            70;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--carthage-navy);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Honor reduced-motion globally */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Display family */
.font-display {
  font-family: 'Playfair Display', Georgia, serif;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Default focus rings (visible on every interactive element).
   Tailwind utility focus styles still apply; this is the catch-all. */
:focus-visible {
  outline: 2px solid var(--coastal-lagoon);
  outline-offset: 3px;
  border-radius: 4px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--coastal-lagoon);
  outline-offset: 3px;
}

/* ============================================================
   Reusable pill
   ============================================================ */
.rx-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

/* ============================================================
   Hero
   ============================================================ */
.hero-grad {
  background:
    radial-gradient(ellipse 80% 60% at 70% 0%, rgb(245 158 11 / 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 60% 70% at 0% 100%, rgb(14 124 138 / 0.35) 0%, transparent 60%),
    linear-gradient(135deg, #0b1424 0%, #112236 50%, #0e7c8a 120%);
}

.hero-sun {
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fde68a 0%, #f59e0b 45%, #d97706 75%, transparent 78%);
  filter: blur(6px);
  opacity: 0.75;
  top: -120px; right: -80px;
  z-index: 0;
  animation: drift 24s var(--ease-out-expo) infinite alternate;
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-30px, 20px, 0) scale(1.04); }
}

.hero-wave {
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  width: 100%; height: 120px;
}

/* ============================================================
   Card hover (flat at rest, lifted on intent — The Flat-By-Default Rule)
   ============================================================ */
.card-hover {
  transform: translate3d(0, 0, 0);
  transition: transform var(--duration-slow) var(--ease-out-expo),
              box-shadow var(--duration-slow) var(--ease-out-expo);
}
.card-hover:hover { transform: translate3d(0, -6px, 0); }

/* Lean Lagoon, not Sun, so the image-missing state still respects
   The Coastal-Not-Desert Rule */
.gradient-fallback {
  background:
    radial-gradient(circle at 30% 25%, rgb(14 124 138 / 0.55) 0%, transparent 60%),
    linear-gradient(135deg, #0a5f6b 0%, #0f3a47 100%);
}

/* ============================================================
   Nav scrolled
   ============================================================ */
#site-nav {
  z-index: var(--z-nav);
  transition:
    background-color var(--duration-base) var(--ease-out-quart),
    box-shadow var(--duration-base) var(--ease-out-quart),
    backdrop-filter var(--duration-base) var(--ease-out-quart);
}
.nav-scrolled {
  background: rgb(255 255 255 / 0.92) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px -10px rgb(15 23 42 / 0.10);
}
.nav-scrolled .nav-link  { color: var(--carthage-navy) !important; }
.nav-scrolled .brand-text { color: var(--carthage-navy) !important; }

/* ============================================================
   Floating WhatsApp FAB
   ============================================================ */
.fab-whatsapp {
  position: fixed;
  right: 1.25rem; bottom: 1.25rem;
  width: 60px; height: 60px;
  background: var(--whatsapp-emerald);
  border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 12px 28px -6px rgb(37 211 102 / 0.55),
    0 4px 12px rgb(0 0 0 / 0.12);
  z-index: var(--z-fab);
  transition:
    transform var(--duration-base) var(--ease-out-quart),
    box-shadow var(--duration-base) var(--ease-out-quart);
}
.fab-whatsapp:hover {
  transform: scale(1.08);
  box-shadow: 0 18px 36px -8px rgb(37 211 102 / 0.65);
}
.fab-whatsapp:focus-visible {
  outline: 3px solid var(--whatsapp-emerald);
  outline-offset: 4px;
}

.fab-whatsapp .pulse-ring {
  position: absolute; inset: 0;
  border-radius: 9999px;
  background: var(--whatsapp-emerald);
  opacity: 0.55;
  animation: pulse-ring 2s var(--ease-out-quart) infinite;
  z-index: -1;
}

@keyframes pulse-ring {
  0%   { transform: scale(1);    opacity: 0.55; }
  80%  { transform: scale(1.7);  opacity: 0;    }
  100% { transform: scale(1.7);  opacity: 0;    }
}

/* ============================================================
   Coastline divider (rebrand of palm-divider)
   ============================================================ */
.palm-divider,
.coastline {
  height: 3px;
  width: 64px;
  background: linear-gradient(90deg, var(--coastal-lagoon) 0%, var(--coastal-lagoon) 70%, var(--saharan-sun) 100%);
  border-radius: 3px;
}

/* ============================================================
   Line clamp (Safari-safe)
   ============================================================ */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   Reveal on scroll — enhances an already-visible default
   (so headless renderers / hidden tabs still see content)
   ============================================================ */
.reveal {
  /* Already visible. The animation only adds nuance. */
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    animation: reveal 0.9s var(--ease-out-expo) forwards;
  }
  .reveal-delay-1 { animation-delay: 0.12s; }
  .reveal-delay-2 { animation-delay: 0.24s; }
  .reveal-delay-3 { animation-delay: 0.36s; }
}
@keyframes reveal {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ============================================================
   Reduced motion: kill everything decorative
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hero-sun                  { animation: none; }
  .fab-whatsapp .pulse-ring  { animation: none; opacity: 0; }
  .card-hover                { transition: none; }
  .card-hover:hover          { transform: none; }
  .marquee                   { animation: none; }
  .reveal {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ============================================================
   Marquee (defined but used sparingly)
   ============================================================ */
.marquee {
  display: flex;
  gap: 3rem;
  animation: marquee 28s linear infinite;
  white-space: nowrap;
}
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ============================================================
   Print: hide chrome
   ============================================================ */
@media print {
  #site-nav,
  .fab-whatsapp,
  footer { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ============================================================
   Forms: consistent focus + placeholder contrast
   ============================================================ */
input::placeholder,
textarea::placeholder {
  color: rgb(15 23 42 / 0.50); /* ≥4.5:1 vs Coastal Sand */
}

input:focus,
textarea:focus {
  background: #ffffff;
}

/* ============================================================
   Sahara-tour signature surface (only on tour detail pages
   that ARE about the desert — enforces Coastal-Not-Desert Rule)
   ============================================================ */
.surface-sahara {
  background:
    radial-gradient(ellipse 80% 60% at 80% 10%, rgb(245 158 11 / 0.18) 0%, transparent 55%),
    linear-gradient(180deg, #fef7e6 0%, #f6fafb 100%);
}