/* Global Typography and Base Styles */

/* Global Typography */
body {
  font-family: 'DM Sans', sans-serif;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Prevent horizontal overflow on mobile and enable smooth scrolling */
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: 4rem; /* Account for navigation offset */
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Canela Deck Trial', serif;
}

/* Section Heights */
.section-height {
  min-height: 100dvh; /* Modern browsers with dynamic viewport units */
  min-height: calc(var(--vh, 1vh) * 100); /* Fallback for older browsers */
  padding-top: 6rem;
  padding-bottom: 8rem;
  padding-bottom: env(safe-area-inset-bottom); /* iOS safe area support */
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
  .section-height {
    min-height: 100dvh; /* Modern browsers with dynamic viewport units */
    min-height: calc(var(--vh, 1vh) * 100); /* Fallback for older browsers */
    padding-top: 4rem;
    padding-bottom: 6rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Reduce bottom padding specifically for feature section */
  #feature {
    padding-bottom: 2rem;
  }
  
  /* Ensure all containers respect mobile boundaries */
  .max-w-7xl,
  .max-w-6xl,
  .max-w-5xl,
  .max-w-4xl,
  .max-w-3xl,
  .max-w-2xl {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Video Container */
.video-container {
  position: relative;
  width: 100%;
  height: 100dvh; /* Modern browsers with dynamic viewport units */
  height: calc(var(--vh, 1vh) * 100); /* Fallback for older browsers */
  overflow: hidden;
}

/* Desktop: Show dual videos, hide mobile video */
.desktop-video {
  display: block;
}

.mobile-video {
  display: none;
}

/* Dual video element positioning and transition styles */
.desktop-video {
  transition: none; /* No accidental fades */
}

/* Default video positioning - overridden by Tailwind classes in HTML */
.video-container video {
  object-fit: cover;
}

.video-container > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile video height adjustments only */
@media (max-width: 768px) {
  .video-container video,
  .video-container > img {
    height: 100dvh; /* Modern browsers with dynamic viewport units */
    height: calc(var(--vh, 1vh) * 100); /* Fallback for older browsers */
  }
}

/* Navigation Transitions - Fully Transparent */
.nav-hidden {
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out;
}

.nav-visible {
  transform: translateY(0);
  transition: transform 0.3s ease-in-out;
}

/* Navigation is completely transparent */
#navigation {
  background: transparent;
}

/* Color classes for compatibility */
.text-blue-950 {
  color: #1e3a8a;
}

/* Button Letter Spacing */
.tracking-widest {
  letter-spacing: 0.3em !important;
}

/* Font styles */
.font-canela {
  font-family: 'Canela Deck Trial', serif;
  font-style: italic;
}