/**
 * Life @ SPAV — Tailwind page shell + header isolation
 * BUILD: 20260714fix1
 */

/* ── HEADER LOGO GUARD ──────────────────────────────────────────────────────
   Ensure this page's body class never breaks the site header logo dimensions.
   header.php inline critical CSS has: #site-header .hdr-brand img { height:70px !important }
   We reinforce it here with higher specificity to survive any Tailwind img resets.
─────────────────────────────────────────────────────────────────────────── */
body.lifespav-page-body #site-header .hdr-brand a.hdr-brand img,
body.lifespav-page-body #site-header .hdr-brand img {
  height: 70px !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
}
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;
}

/* Do NOT override header logo sizing — header.php critical CSS sets height:70px !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;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   TAILWIND UTILITY FALLBACKS — lifespav.php
   Tailwind CDN was removed; these classes are not in spav.min.css.
   Only utilities actually used on this page are listed here.
══════════════════════════════════════════════════════════════════════════ */

/* ── Text white (used on coloured cards and dark sections) ── */
.lifespav-page-shell .text-white,
.lifespav-page-shell .text-white h3,
.lifespav-page-shell .text-white p,
.lifespav-page-shell .activity-card h3,
.lifespav-page-shell .activity-card p { color: #fff !important; }

/* ── Border radius ── */
.lifespav-page-shell .rounded-xl  { border-radius: .75rem; }
.lifespav-page-shell .rounded-2xl { border-radius: 1rem; }
.lifespav-page-shell .rounded-3xl { border-radius: 1.5rem; }
.lifespav-page-shell .rounded-full { border-radius: 9999px; }

/* ── Shadow ── */
.lifespav-page-shell .shadow-lg  { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1); }
.lifespav-page-shell .shadow-xl  { box-shadow: 0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1); }
.lifespav-page-shell .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); }

/* ── Padding ── */
.lifespav-page-shell .p-4  { padding: 1rem; }
.lifespav-page-shell .p-8  { padding: 2rem; }
.lifespav-page-shell .p-16 { padding: 4rem; }

/* ── ACTIVITY CARD GRADIENT BACKGROUNDS ─────────────────────────────────
   Each card uses a different from-*/to-* Tailwind colour pair.
   Matched exactly to the 12 cards in #activities order.
─────────────────────────────────────────────────────────────────────── */
/* 1. RITMO — orange */
.lifespav-page-shell .from-spav-orange { background: linear-gradient(135deg,#f97316,#ea580c) !important; }
/* 2. MONOLOGUE — purple */
.lifespav-page-shell .from-purple-500  { background: linear-gradient(135deg,#a855f7,#7e22ce) !important; }
/* 3. AVANTE GARDE — pink/rose */
.lifespav-page-shell .from-pink-500    { background: linear-gradient(135deg,#ec4899,#e11d48) !important; }
/* 4. CLUB-29 — blue */
.lifespav-page-shell .from-blue-500    { background: linear-gradient(135deg,#3b82f6,#1d4ed8) !important; }
/* 5. GROUND ZERO — green/emerald */
.lifespav-page-shell .from-green-500   { background: linear-gradient(135deg,#22c55e,#059669) !important; }
/* 6. CLUB ID — indigo */
.lifespav-page-shell .from-indigo-500  { background: linear-gradient(135deg,#6366f1,#4338ca) !important; }
/* 7. TASVEER — yellow/amber */
.lifespav-page-shell .from-yellow-500  { background: linear-gradient(135deg,#eab308,#d97706) !important; }
/* 8. AARA CLUB — red */
.lifespav-page-shell .from-red-500     { background: linear-gradient(135deg,#ef4444,#b91c1c) !important; }
/* 9. ANAADYANTA — teal/cyan */
.lifespav-page-shell .from-teal-500    { background: linear-gradient(135deg,#14b8a6,#0891b2) !important; }
/* 10. NATURE CLUB — lime/green */
.lifespav-page-shell .from-lime-500    { background: linear-gradient(135deg,#84cc16,#16a34a) !important; }
/* 11. SPAVELO — orange/red */
.lifespav-page-shell .from-orange-500  { background: linear-gradient(135deg,#f97316,#dc2626) !important; }
/* 12. ATELIER64 — violet/purple */
.lifespav-page-shell .from-violet-500  { background: linear-gradient(135deg,#8b5cf6,#7e22ce) !important; }

/* ── CAMPUS LIFE DARK SECTION ────────────────────────────────────────────
   Section uses: bg-gradient-to-br from-spav-navy to-slate-800
   Without this, it renders white making all light-coloured text invisible.
─────────────────────────────────────────────────────────────────────── */
.lifespav-page-shell section.from-spav-navy,
.lifespav-page-shell .from-spav-navy {
  background: linear-gradient(135deg,#0f172a 0%,#1e293b 100%) !important;
}

/* Text colours inside the dark section */
.lifespav-page-shell .from-spav-navy .text-white   { color: #ffffff !important; }
.lifespav-page-shell .from-spav-navy h2.text-white { color: #ffffff !important; }
.lifespav-page-shell .from-spav-navy .text-gray-200,
.lifespav-page-shell .from-spav-navy p.text-gray-200 { color: #e2e8f0 !important; }
.lifespav-page-shell .from-spav-navy .text-gray-300,
.lifespav-page-shell .from-spav-navy p.text-gray-300 { color: #cbd5e1 !important; }
.lifespav-page-shell .from-spav-navy p,
.lifespav-page-shell .from-spav-navy li { color: #cbd5e1; }
.lifespav-page-shell .from-spav-navy h2,
.lifespav-page-shell .from-spav-navy h3 { color: #fff; }

/* Semi-transparent white card inside dark section */
.lifespav-page-shell .from-spav-navy .bg-white\/10,
.lifespav-page-shell .from-spav-navy .backdrop-blur-sm {
  background: rgba(255,255,255,0.10) !important;
  border-radius: 1.5rem;
  padding: 2rem;
}

/* ── Section background utilities used elsewhere on the page ── */
.lifespav-page-shell .bg-gradient-to-br.from-white.to-orange-50 {
  background: linear-gradient(135deg,#fff 0%,#fff7ed 100%);
}
.lifespav-page-shell .bg-gradient-to-br.from-slate-50.to-blue-50 {
  background: linear-gradient(135deg,#f8fafc 0%,#eff6ff 100%);
}

/* ── Prose text inside light sections ── */
.lifespav-page-shell .prose p,
.lifespav-page-shell .prose.text-gray-700 { color: #334155; }