html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif;
}

h1, h2, h3, h4, .font-display {
  font-family: 'Fraunces', Georgia, serif;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Glass surfaces used on hero search cards and sticky nav */
.glass {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Reusable content card — destinations, dhams, temples, hotels, packages all share this */
.content-card {
  background: #fff;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 12px 30px -14px rgba(74, 56, 47, 0.28);
  transition: transform .25s ease, box-shadow .25s ease;
}

.content-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 40px -16px rgba(74, 56, 47, 0.38);
}

.pill {
  white-space: nowrap;
  border-radius: 999px;
  padding: .5rem 1.1rem;
  font-size: .875rem;
  font-weight: 600;
  transition: background-color .2s ease, color .2s ease;
}

/* FAQ accordion chevron rotation */
details.faq[open] summary .chev {
  transform: rotate(180deg);
}

details.faq summary {
  cursor: pointer;
  list-style: none;
}

details.faq summary::-webkit-details-marker {
  display: none;
}

.chev {
  transition: transform .2s ease;
}

/* Horizontal scroll rows (pill filters, mobile card rails) without visible scrollbar */
.scroll-row {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scroll-row::-webkit-scrollbar {
  display: none;
}

/* Sticky mobile CTA bar — visibility is controlled by Tailwind's own
   `flex lg:hidden` utilities on the element (not here), because the
   Tailwind CDN's injected stylesheet can load after this one and would
   otherwise win the cascade tie against a plain `display:none` here. */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
}

/* Scroll-reveal micro-interaction (JD 39: subtle, not flashy) */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}

[data-reveal].reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.skeleton {
  background: linear-gradient(90deg, #ece0c6 25%, #f5ecd9 37%, #ece0c6 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
}

@keyframes skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}