/* Zephyr Airways - Custom Styles */

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

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* Header transitions */
#header {
  background: transparent;
}

#header.scrolled {
  background: rgba(26, 54, 93, 0.95);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

#header.scrolled .nav-link {
  color: rgba(255, 255, 255, 0.9);
}

/* Navigation link hover effects */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: #14b8a6;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* Mobile menu animations */
#mobile-menu.active {
  display: block;
}

#mobile-menu.active .mobile-backdrop {
  animation: fadeIn 0.3s ease forwards;
}

#mobile-menu.active .mobile-drawer {
  transform: translateX(0);
}

.mobile-drawer {
  transition: transform 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Region tabs */
.region-tab {
  background: #f1f5f9;
  color: #475569;
}

.region-tab:hover {
  background: #e2e8f0;
}

.region-tab.active {
  background: #1a365d;
  color: white;
}

/* Table styles */
table {
  border-collapse: collapse;
}

/* Modal animations */
#booking-modal.active {
  display: block;
}

#booking-modal.active #modal-backdrop {
  animation: fadeIn 0.3s ease forwards;
}

#booking-modal.active #modal-content {
  animation: scaleIn 0.3s ease forwards;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Wave animation for decorative elements */
.wave-animation {
  animation: wave 8s ease-in-out infinite;
}

@keyframes wave {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Hover effects for cards */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Jetstream tier card gradients */
.tier-breeze {
  border-top: 3px solid #38bdf8;
}

.tier-tradewind {
  border-top: 3px solid #14b8a6;
}

.tier-jetstream {
  border-top: 3px solid #f59e0b;
}

.tier-cirrus {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, transparent 50%);
  border-top: 3px solid #f59e0b;
}

/* Route map hover effects */
.route-line {
  stroke-dasharray: 5 5;
  animation: dash 20s linear infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: -100;
  }
}

/* Focus styles for accessibility */
:focus-visible {
  outline: 2px solid #14b8a6;
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid #14b8a6;
  outline-offset: 2px;
}

/* Selection colors */
::selection {
  background: #14b8a6;
  color: white;
}

/* Prose styling overrides */
.prose p {
  margin-bottom: 1rem;
}

.prose strong {
  color: #1a365d;
}

/* Loading placeholder shimmer */
.loading-shimmer {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Print styles */
@media print {
  #header,
  #booking-modal,
  #mobile-menu {
    display: none !important;
  }

  body {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
  .nav-link {
    color: white;
  }

  .region-tab.active {
    border: 2px solid white;
  }
}

/* Form input styles */
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
  padding-right: 2.5rem;
}

/* Badge styles */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.badge-gold {
  background: #f59e0b;
  color: white;
}

.badge-teal {
  background: #0d9488;
  color: white;
}

.badge-slate {
  background: #64748b;
  color: white;
}

/* Divider wave styles */
.wave-divider {
  position: relative;
}

.wave-divider::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 120L60 110C120 100 240 80 360 70C480 60 600 60 720 65C840 70 960 80 1080 85C1200 90 1320 90 1380 90L1440 90V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0Z' fill='white'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: bottom;
}

/* Sticky section header offset for fixed nav */
section[id] {
  scroll-margin-top: 80px;
}

/* Text gradient effect */
.text-gradient {
  background: linear-gradient(135deg, #14b8a6 0%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hero image Ken Burns effect */
#hero img {
  animation: kenBurns 30s ease-in-out infinite alternate;
}

@keyframes kenBurns {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

/* Responsive adjustments */
@media (max-width: 640px) {
  /* Smaller hero text on mobile */
  #hero h1 {
    font-size: 2rem;
    line-height: 1.2;
  }

  /* Stack booking widget vertically */
  .booking-widget-grid {
    grid-template-columns: 1fr;
  }

  /* Adjust modal padding */
  #modal-content {
    padding: 1.5rem;
  }
}

/* Ensure images don't overflow */
img {
  max-width: 100%;
  height: auto;
}

/* Button active states */
button:active {
  transform: scale(0.98);
}

/* Link underline animation */
.link-animated {
  position: relative;
  text-decoration: none;
}

.link-animated::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.3s ease;
}

.link-animated:hover::after {
  width: 100%;
}