/* ============================================================
   Sree Annam Travels — Design tokens & custom utilities
   Converted 1:1 from the Next.js globals.css (oklch palette)
   ============================================================ */

:root {
  --radius: 0.875rem;

  --background: oklch(0.985 0.004 240);
  --foreground: oklch(0.20 0.04 252);

  --card: oklch(1 0 0);
  --card-foreground: oklch(0.20 0.04 252);

  --primary: oklch(0.22 0.07 250);
  --primary-foreground: oklch(0.98 0.005 240);

  --secondary: oklch(0.965 0.012 235);
  --secondary-foreground: oklch(0.22 0.07 250);

  --muted: oklch(0.96 0.010 235);
  --muted-foreground: oklch(0.50 0.03 250);

  --accent: oklch(0.78 0.13 210);

  --destructive: oklch(0.6 0.22 25);

  --border: oklch(0.91 0.012 235);
  --input: oklch(0.93 0.010 235);
  --ring: oklch(0.55 0.13 235);

  /* Brand palette */
  --navy:    oklch(0.20 0.075 252);
  --ocean:   oklch(0.52 0.14 238);
  --sky:     oklch(0.76 0.11 228);
  --cyan:    oklch(0.80 0.14 208);
  --charcoal:oklch(0.32 0.025 252);
  --gold:    oklch(0.78 0.14 80);

  /* Gradients */
  --gradient-hero:  linear-gradient(135deg,
    oklch(0.16 0.07 255) 0%,
    oklch(0.24 0.10 250) 45%,
    oklch(0.42 0.14 234) 100%);
  --gradient-ocean: linear-gradient(135deg,
    oklch(0.52 0.14 238) 0%,
    oklch(0.80 0.14 208) 100%);
  --gradient-gold:  linear-gradient(135deg,
    oklch(0.72 0.16 75) 0%,
    oklch(0.84 0.12 88) 100%);
  --gradient-light: linear-gradient(180deg,
    oklch(0.985 0.004 240) 0%,
    oklch(0.955 0.018 232) 100%);
  --gradient-light-alt: linear-gradient(160deg,
    oklch(0.99 0.002 240) 0%,
    oklch(0.965 0.014 220) 50%,
    oklch(0.975 0.010 245) 100%);
  --gradient-light-warm: linear-gradient(170deg,
    oklch(0.99 0.003 250) 0%,
    oklch(0.97 0.012 240) 40%,
    oklch(0.96 0.016 225) 100%);
  --gradient-light-cool: linear-gradient(180deg,
    oklch(0.985 0.005 235) 0%,
    oklch(0.96 0.015 245) 60%,
    oklch(0.975 0.008 230) 100%);

  /* Shadows */
  --shadow-glow:  0 20px 60px -20px oklch(0.52 0.14 238 / 0.50);
  --shadow-soft:  0 10px 40px -15px oklch(0.20 0.075 252 / 0.20);
  --shadow-card:  0 4px 24px -8px  oklch(0.20 0.075 252 / 0.14);
  --shadow-gold:  0 8px 32px -8px  oklch(0.72 0.16 75 / 0.35);
}

* { border-color: var(--border); }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

h1, h2, h3, h4, h5 {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

:focus-visible {
  outline: 2px solid var(--ocean);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Gradient backgrounds ---------- */
.bg-gradient-hero  { background: var(--gradient-hero); }
.bg-gradient-ocean { background: var(--gradient-ocean); }
.bg-gradient-gold  { background: var(--gradient-gold); }
.bg-gradient-light { background: var(--gradient-light); }
.bg-gradient-light-alt  { background: var(--gradient-light-alt); }
.bg-gradient-light-warm { background: var(--gradient-light-warm); }
.bg-gradient-light-cool { background: var(--gradient-light-cool); }

/* ---------- Shadows ---------- */
.shadow-glow { box-shadow: var(--shadow-glow); }
.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-card { box-shadow: var(--shadow-card); }
.shadow-gold { box-shadow: var(--shadow-gold); }

/* ---------- Text ---------- */
.text-balance { text-wrap: balance; }
.text-gradient-ocean {
  background: var(--gradient-ocean);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-gold {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------- Animations ---------- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn 0.6s ease-out both; }

/* Scroll reveal (replaces framer-motion whileInView) */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.animate-pulse-dot { animation: pulseDot 2s ease-in-out infinite; }

/* FAQ accordion */
.faq-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.faq-item.open .faq-body {
  grid-template-rows: 1fr;
  opacity: 1;
}
.faq-body > div { overflow: hidden; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }

/* ============================================================
   Navbar transparent  -> solid transition
   (matches Next.js Navbar: transparent on home top, solid on scroll)
   ============================================================ */

/* default (transparent over hero) */
#navbar { background: transparent; }
.nav-brand-name { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.nav-brand-sub  { color: oklch(0.80 0.14 208 / 0.9); }
.nav-link        { color: rgba(255,255,255,.85); }
.nav-link:hover  { color: #fff; background: rgba(255,255,255,.10); }
.nav-link.is-active { color: #fff; background: rgba(255,255,255,.15); font-weight: 600; }
.nav-cta-call    { border-color: rgba(255,255,255,.2); color: #fff; }
.nav-cta-call:hover { background: rgba(255,255,255,.10); }
.nav-burger      { background: rgba(255,255,255,.12); color: #fff; }

/* solid (scrolled / inner pages) */
#navbar.nav-solid {
  background: oklch(1 0 0 / 0.90);
  box-shadow: 0 2px 24px -4px oklch(0.20 0.075 252 / 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.nav-solid .nav-brand-name { color: var(--navy); text-shadow: none; }
.nav-solid .nav-brand-sub  { color: var(--ocean); }
.nav-solid .nav-link        { color: var(--charcoal); }
.nav-solid .nav-link:hover  { color: var(--navy); background: var(--secondary); }
.nav-solid .nav-link.is-active { color: var(--navy); background: var(--secondary); }
.nav-solid .nav-cta-call    { border-color: var(--border); color: var(--navy); }
.nav-solid .nav-cta-call:hover { background: var(--secondary); }
.nav-solid .nav-burger      { background: var(--secondary); color: var(--navy); }