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

/* Custom styles for special effects */

/* Accessibility utilities */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Focus states for better keyboard navigation */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #EC5608;
  outline-offset: 2px;
}

/* Hero background image */
.hero-bg-image {
  background-image: url('../images/background.webp'), url('../images/background.png');
  background-repeat: no-repeat;
  background-position: center center;
  /* Default: show full image on desktop */
  background-size: cover;
  position: relative;
}

/* Hero section default height for desktop */
.hero-section {
  min-height: 100vh;
  min-height: 100dvh;
}

/* Hero background blend - fade at bottom */
.hero-bg-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0%, transparent 80%, #EFCAA9 100%);
  pointer-events: none;
  z-index: 1;
}

/* Text shadow for better readability */
.text-shadow-lg {
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* Hero tagline emphasis */
.hero-tagline {
  text-shadow: 0 2px 4px rgba(236, 86, 8, 0.1);
  animation: subtle-glow 3s ease-in-out infinite alternate;
}

@keyframes subtle-glow {
  from {
    text-shadow: 0 2px 4px rgba(236, 86, 8, 0.1);
  }
  to {
    text-shadow: 0 4px 8px rgba(236, 86, 8, 0.2), 0 2px 4px rgba(236, 86, 8, 0.1);
  }
}

/* Background pattern overlay */
.bg-pattern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('background.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.03;
  z-index: -1;
}

/* Hero background overlay */
.hero-pattern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('background.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.15;
  mix-blend-mode: overlay;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%);
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Prevent navbar jumping - always keep at top */
#navbar {
  top: 0 !important;
  transition: none !important;
  height: 64px; /* Set fixed height for navbar */
}

/* Callout bar positioning */
#calloutBar {
  position: fixed;
  top: 0;
  z-index: 50;
  transition: transform 0.3s ease;
}

/* Add padding to body when callout is visible */
body {
  padding-top: 0;
  transition: none !important;
}

/* Ensure proper spacing from fixed navbar */
.pt-24 {
  padding-top: 8rem !important; /* Increased from 6rem to account for fixed navbar */
}

/* Adjust hero sections */
.pt-32 {
  padding-top: 10rem !important; /* Ensure adequate spacing for pages with pt-32 */
}

/* Tablet screens (640px to 1024px) */
@media (min-width: 640px) and (max-width: 1023px) {
  .hero-bg-image {
    /* Percentage sizing for tablets */
    background-size: 150%;
    background-position: center center;
  }
  
  /* Hero section height for tablets */
  .hero-section {
    height: 70vh;
    height: 70dvh;
    min-height: 500px;
    max-height: 800px;
    transition: height 0.3s ease;
  }
  
  /* Adjust gradient for tablets - middle ground */
  .hero-bg-image::after {
    background: linear-gradient(to bottom, transparent 0%, transparent 85%, #EFCAA9 100%);
  }
}

/* Mobile screens (up to 640px) */
@media (max-width: 639px) {
  .hero-bg-image {
    /* Back to percentage for proper logo centering */
    background-size: 180%;
    background-position: center top;
    height: 100%;
  }
  
  /* Adjust gradient for mobile - ensure it's visible */
  .hero-bg-image::after {
    background: linear-gradient(to bottom, transparent 0%, transparent 85%, #EFCAA9 100%);
    /* Ensure gradient is applied */
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
  }

  /* Hero section height scales with viewport */
  .hero-section {
    /* Balanced height for proper logo display */
    height: 45vh;
    height: 45dvh;
    min-height: 380px;
    max-height: 500px;
    /* Ensure gradient is visible */
    position: relative;
    overflow: hidden;
  }
  
  /* Ensure hero container fills the section */
  .hero-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  
  /* Ensure arrow button is visible but not too low */
  header .absolute.bottom-8.right-8 {
    bottom: 1rem;
    right: 1rem;
  }
  
  /* Fix email form sizing on mobile */
  #emailForm {
    width: 100%;
    max-width: 100%;
  }
  
  #emailForm input[type="email"] {
    font-size: 16px !important; /* Prevents zoom on iOS */
    width: 100%;
    min-width: 0; /* Prevent overflow */
  }
  
  #emailForm button[type="submit"] {
    font-size: 16px !important; /* Consistent with input */
    width: 100%;
    white-space: nowrap;
  }
  
  /* Ensure form doesn't overflow viewport */
  #date-location {
    overflow-x: hidden;
  }
  
  #date-location .text-center {
    width: 100%;
    max-width: 100%;
  }
}

/* Small mobile screens (320px to 375px) */
@media (max-width: 375px) {
  .hero-bg-image {
    /* Reduced zoom to fit logo in smaller height */
    background-size: 160%;
    background-position: center top;
  }
  
  /* Ensure gradient is visible on small screens */
  .hero-bg-image::after {
    background: linear-gradient(to bottom, transparent 0%, transparent 85%, #EFCAA9 100%);
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
  }
  
  /* Adjust hero height for small screens */
  .hero-section {
    height: 40vh;
    height: 40dvh;
    min-height: 350px;
    max-height: 450px;
  }
}

/* Medium mobile screens (376px to 414px) */
@media (min-width: 376px) and (max-width: 414px) {
  .hero-bg-image {
    /* Back to percentage for proper centering */
    background-size: 195%;
    background-position: center top;
  }
  
  /* Minimal gradient */
  .hero-bg-image::after {
    background: linear-gradient(to bottom, transparent 0%, transparent 91%, #EFCAA9 100%);
  }
}

/* Large mobile screens (415px to 640px) */
@media (min-width: 415px) and (max-width: 639px) {
  .hero-bg-image {
    /* Back to percentage for proper centering */
    background-size: 170%;
    background-position: center top;
  }
  
  /* Adjust hero height for larger mobile */
  .hero-section {
    height: 48vh;
    height: 48dvh;
    min-height: 400px;
    max-height: 520px;
  }
  
  /* Slightly more gradient room */
  .hero-bg-image::after {
    background: linear-gradient(to bottom, transparent 0%, transparent 88%, #EFCAA9 100%);
  }
}

/* Transition zone between mobile and tablet */
@media (min-width: 580px) and (max-width: 639px) {
  .hero-section {
    height: 60vh;
    height: 60dvh;
  }
  
  .hero-bg-image {
    background-size: 160%;
  }
}