@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #FFF8F0;
  --foreground: #13253D;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #FF4A7D #FFF8F0;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100%;
}

/* Scale down root font size slightly on laptop viewports to reduce overall spacing and font sizes */
@media (min-width: 1024px) and (max-width: 1440px) {
  html {
    font-size: 15px;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-jakarta), ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  max-width: 100%;
}

::selection {
  background: #FF4A7D;
  color: white;
}

.text-balance {
  text-wrap: balance;
}

.glass {
  backdrop-filter: blur(16px);
  background: rgba(255, 248, 240, 0.85);
}

.card-shadow {
  box-shadow: 0 10px 40px -10px rgba(19, 37, 61, 0.12), 0 4px 16px -4px rgba(255, 74, 125, 0.08);
}

.card-shadow-hover {
  box-shadow: 0 20px 60px -12px rgba(19, 37, 61, 0.18), 0 8px 24px -6px rgba(255, 74, 125, 0.15);
}

.prose-trip h2 {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #13253D;
}

.prose-trip h3 {
  font-weight: 700;
  font-size: 1.25rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.prose-trip p {
  line-height: 1.7;
  color: #3D4A5E;
  margin-bottom: 1rem;
}

.prose-trip ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.prose-trip li {
  margin-bottom: 0.5rem;
  color: #3D4A5E;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  animation: marquee 30s linear infinite;
}