/* Additional CSS - main.css */

/* =============================================
   IMAGE PLACEHOLDERS WITH EMOJI - OVERRIDE
   ============================================= */
.package-img-placeholder,
.yacht-img-wrap {
  background-size: cover;
  background-position: center;
}

/* =============================================
   ADDITIONAL HOVER STATES
   ============================================= */
.package-card:hover .package-body h3 { color: var(--gold); transition: color 0.3s; }
.yacht-card:hover .yacht-body h3 { color: var(--gold); transition: color 0.3s; }

/* =============================================
   WAVE DIVIDERS
   ============================================= */
.wave-divider {
  position: relative;
  overflow: hidden;
  line-height: 0;
}
.wave-divider svg { display: block; }

/* =============================================
   ANIMATED BACKGROUND GRADIENT
   ============================================= */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hero-bg {
  background-size: 200% 200%;
  animation: gradientShift 15s ease infinite;
}

/* =============================================
   SCROLL SNAP (optional enhancement)
   ============================================= */
@media (min-width: 768px) {
  .testimonials-slider { scroll-snap-type: x mandatory; }
  .testimonial-card { scroll-snap-align: start; }
}

/* =============================================
   LOADING SKELETON (improved UX)
   ============================================= */
@keyframes shimmer {
  0% { background-position: -468px 0; }
  100% { background-position: 468px 0; }
}

/* =============================================
   FOCUS STYLES (accessibility)
   ============================================= */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =============================================
   PRINT STYLES
   ============================================= */
@media print {
  .site-nav, .whatsapp-float, .scroll-progress, .mobile-menu { display: none !important; }
  body { background: white; color: black; }
  .hero-bg { display: none; }
}

/* =============================================
   REDUCED MOTION
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-badge, .hero-title, .hero-description, .hero-actions, .hero-stats {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* =============================================
   DARK MODE (native)
   ============================================= */
/* Already dark theme — no changes needed */

/* =============================================
   TYPOGRAPHY ENHANCEMENTS
   ============================================= */
.text-gradient {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* =============================================
   CARD GRID ON MOBILE
   ============================================= */
@media (max-width: 600px) {
  .package-card, .yacht-card, .service-card {
    border-radius: 16px;
  }
  .package-details { grid-template-columns: 1fr; }
}

/* =============================================
   HERO RESPONSIVE ADJUSTMENTS
   ============================================= */
@media (max-width: 480px) {
  .hero-content { padding: 7rem 0 4rem; }
  .hero-badge { font-size: 0.65rem; }
  .hero-stats { flex-direction: column; gap: 1rem; }
  .stats-grid { gap: 1.5rem; }
}

/* =============================================
   NAV DROPDOWN (future use)
   ============================================= */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--navy-mid);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.75rem;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
}
.has-dropdown:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* =============================================
   GOOGLE MAPS EMBED
   ============================================= */
.map-embed {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 16/9;
  width: 100%;
}
.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* =============================================
   BACK TO TOP
   ============================================= */
.back-to-top {
  position: fixed;
  bottom: 5.5rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  background: var(--navy-light);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  cursor: pointer;
  transition: var(--transition);
  opacity: 0;
  pointer-events: none;
  z-index: 990;
}
.back-to-top.visible { opacity: 1; pointer-events: all; }
.back-to-top:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }