/* ============================================
   FONTS
   ============================================ */
@import url("https://fonts.googleapis.com/css2?family=Sanchez&display=swap");

/* ============================================
   iOS PWA SAFE AREA & VIEWPORT FIXES
   ============================================ */

/* Safe area padding for bottom navigation (iOS notch/home indicator) */
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Fix iOS PWA viewport height issues
   - min-h-screen uses 100vh which doesn't account for iOS dynamic viewport
   - 100dvh (dynamic viewport height) properly handles iOS Safari/PWA
   - Fallback to 100vh for browsers that don't support dvh
*/
@supports (min-height: 100dvh) {
  body.min-h-screen,
  html body[class*="min-h-screen"] {
    min-height: 100dvh;
  }
}

/* PWA standalone mode specific fixes */
@media all and (display-mode: standalone) {
  /* Ensure body fills the viewport properly in PWA mode */
  html, body {
    min-height: 100dvh;
    min-height: -webkit-fill-available;
  }

  /* Add safe area inset to footer padding in PWA mode */
  footer {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
  }
}


@view-transition {
	navigation: auto;
}

/* Heading font application */
h1, h2, h3, h4, h5, h6 {
  font-family: "Sanchez", serif;
}

/* ============================================
   LIFETIME STATS MAP - OVERRIDES
   (Main marker styles are in styles.css)
   ============================================ */

/* Map tooltip styling */
.tw-map-tooltip {
  background: rgba(30, 27, 24, 0.95) !important;
  border: 1px solid rgba(245, 208, 106, 0.3) !important;
  border-radius: 6px !important;
  color: #f5f5f4 !important;
  font-size: 12px !important;
  padding: 6px 10px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

.tw-map-tooltip::before {
  border-top-color: rgba(30, 27, 24, 0.95) !important;
}

/* Leaflet zoom controls - dark theme */
.leaflet-control-zoom a {
  background: rgba(41, 37, 33, 0.9) !important;
  color: #f5f5f4 !important;
  border-color: rgba(68, 64, 60, 0.5) !important;
}

.leaflet-control-zoom a:hover {
  background: rgba(68, 64, 60, 0.9) !important;
}

/* ============================================
   AIRCRAFT IMAGE FADE-IN ANIMATION
   ============================================ */

@keyframes aircraft-fade-in {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 0.7;
    transform: translateX(0);
  }
}

@keyframes aircraft-label-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Reserve minimum height to prevent layout shift */
.aircraft-container {
  min-height: 80px;
}

/* Image starts invisible, animates when loaded */
.aircraft-image {
  opacity: 0;
}

.aircraft-image.aircraft-loaded {
  animation: aircraft-fade-in 0.6s ease-out forwards;
}

/* Label starts invisible, animates when sibling image is loaded */
.aircraft-label {
  opacity: 0;
}

.aircraft-image.aircraft-loaded ~ .aircraft-label {
  animation: aircraft-label-fade-in 0.5s ease-out 0.3s forwards;
}