/**
 * Life @ SPAV — Tailwind page shell + header isolation
 * BUILD: 20260701lif1
 */
body.lifespav-page-body,
body:has(#main-content .lifespav-page-shell) {
  background: #fff !important;
  color: #1e293b !important;
}

body.lifespav-page-body #main-content,
body.lifespav-page-body main#main-content.main-content,
body:has(#main-content .lifespav-page-shell) main#main-content.main-content {
  background: transparent !important;
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Keep site header/nav isolated from Tailwind on Life @ SPAV page */
body.lifespav-page-body #site-header,
body.lifespav-page-body #topbar,
body.lifespav-page-body #desktop-nav,
body.lifespav-page-body #mobile-menu {
  font-family: 'DM Sans', 'Outfit', sans-serif !important;
  line-height: normal !important;
  letter-spacing: normal !important;
}

body.lifespav-page-body #site-header .hdr-brand img {
  max-width: 100% !important;
  height: auto !important;
}

body.lifespav-page-body .hdr-portals img,
body.lifespav-page-body.translated-ltr .hdr-portals img,
body.lifespav-page-body.translated-rtl .hdr-portals img {
  height: 46px !important;
  width: auto !important;
  max-height: 46px !important;
  max-width: 110px !important;
  object-fit: contain !important;
}

body.lifespav-page-body .hdr-inner {
  align-items: center !important;
  flex-wrap: nowrap !important;
}

.lifespav-page-shell {
  width: 100%;
  box-sizing: border-box;
  font-family: 'DM Sans', 'Segoe UI', sans-serif;
}

/* Page-specific visuals (from original HTML) */
.lifespav-page-shell .hero-gradient {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
}

.lifespav-page-shell .activity-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lifespav-page-shell .activity-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.lifespav-page-shell .image-overlay {
  background: linear-gradient(45deg, rgba(249, 115, 22, 0.9), rgba(30, 64, 175, 0.8));
}

.lifespav-page-shell .text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.lifespav-page-shell .animate-fade-in {
  animation: lifespavFadeIn 0.8s ease-out both;
}

.lifespav-page-shell .animate-slide-up {
  animation: lifespavSlideUp 0.6s ease-out both;
}

.lifespav-page-shell .animate-scale-in {
  animation: lifespavScaleIn 0.5s ease-out both;
}

.lifespav-page-shell .animate-float {
  animation: lifespavFloat 3s ease-in-out infinite;
}

@keyframes lifespavFadeIn {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes lifespavSlideUp {
  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes lifespavScaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

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

/* SPAV brand tokens (fallback if Tailwind CDN is slow) */
.lifespav-page-shell .text-spav-navy { color: #1e293b !important; }
.lifespav-page-shell .text-spav-orange { color: #f97316 !important; }
.lifespav-page-shell .text-spav-blue { color: #1e40af !important; }
.lifespav-page-shell .bg-spav-orange { background-color: #f97316 !important; }
.lifespav-page-shell .bg-spav-navy { background-color: #1e293b !important; }
.lifespav-page-shell .border-spav-orange { border-color: #f97316 !important; }

/* Readability on dark gallery section */
.lifespav-page-shell section.bg-gradient-to-br.from-spav-navy h2,
.lifespav-page-shell section.bg-gradient-to-br.from-spav-navy h3,
.lifespav-page-shell section.bg-gradient-to-br.from-spav-navy p {
  color: inherit;
}

body.lifespav-page-body #main-content .text-gray-600 { color: #475569 !important; }
body.lifespav-page-body #main-content .text-gray-700 { color: #334155 !important; }
body.lifespav-page-body #main-content .text-gray-300 { color: #cbd5e1 !important; }
body.lifespav-page-body #main-content .text-gray-200 { color: #e2e8f0 !important; }
body.lifespav-page-body #main-content h2.text-spav-navy,
body.lifespav-page-body #main-content h2 .text-spav-navy { color: #1e293b !important; }

body.lifespav-page-body #main-content .group img {
  display: block !important;
  width: 100%;
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 768px) {
  .lifespav-page-shell .text-6xl {
    font-size: 2.5rem;
    line-height: 1.1;
  }
}