/* ═══════════════════════════════════════════════════════════════════════════
   Pungudutivu Community Portal - Production CSS
   Version: 3.0 - Full Recovery Build
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   1. CSS VARIABLES & RESET
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --island-green: #059669;
  --ocean-deep: #064e3b;
  --sky-light: #f0fdf4;
  --sand-warm: #fef3c7;
  --tropical-green: #22c55e;
  --paper-bg: #fdfcf7;
  --text-dark: #1e293b;
  --text-light: #64748b;
  --border-light: #e2e8f0;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  width: 100%;
  overflow-x: hidden;
}

body {
  width: 100%;
  overflow-x: hidden;
  font-family: 'Montserrat', sans-serif;
  background-color: var(--paper-bg);
  color: var(--text-dark);
  line-height: 1.6;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* CRITICAL: Do NOT set height:100% here — it constrains the flex container
     to viewport height and causes overflow:hidden children (hero, footer)
     to collapse to 0px via flex-shrink. min-height:100vh is sufficient. */
}

main {
  flex: 1;
}

/* ───────────────────────────────────────────────────────────────────────────
   2. UNIVERSAL CONTAINER LOGIC — max-width:1200px desktop, 100% fluid mobile
   ─────────────────────────────────────────────────────────────────────────── */

.container,
.content-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Medium screens */
@media (min-width: 768px) {
  .container,
  .content-wrapper {
    padding: 0 2rem;
  }
}

/* Large screens */
@media (min-width: 1024px) {
  .container,
  .content-wrapper {
    padding: 0 3rem;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   3. MOBILE MENU — z-index: 9999 (CRITICAL FIX)
   ─────────────────────────────────────────────────────────────────────────── */

#mobileMenu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: white;
  z-index: 9999 !important;
  overflow-y: auto;
}

#mobileMenu.hidden {
  display: none !important;
}

/* Ensure menu toggle button sits above all content */
#menuToggle {
  position: relative;
  z-index: 10000 !important;
  display: block;
}

@media (min-width: 1024px) {
  #mobileMenu {
    display: none !important;
  }

  #menuToggle {
    display: none !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   4. HEADER & NAVIGATION — Fixed nav with breathing room
   ─────────────────────────────────────────────────────────────────────────── */

/* The #mainNav is position:fixed via Tailwind. Inner content constrained to 1200px. */
#mainNav {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Nav link spacing and active state */
#mainNav a {
  padding: 6px 2px;
  position: relative;
}

#mainNav a.active,
#mainNav a[aria-current="page"] {
  color: #059669 !important; /* Pungudutivu Green */
}

#mainNav a.active::after,
#mainNav a[aria-current="page"]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #059669;
  border-radius: 1px;
}

#mainNav a:hover {
  color: #059669 !important;
}

#mainNav > div {
  max-width: 1200px;
  margin: 0 auto;
}

/* Logo-to-title spacing — override Tailwind gap-3 (12px) */
#mainNav .flex.items-center.gap-3 {
  gap: 20px !important;
  margin-right: 24px !important;  /* space between title and nav menu */
}

/* Hide Tamil toggle buttons until Phase 2 launch — CSS fallback */
#langToggle,
#langToggleMobile {
  display: none !important;
  visibility: hidden !important;
}

header {
  position: relative;
  z-index: 10;
}

nav {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

nav a:hover {
  color: var(--island-green);
}

/* Glass-effect navbar (sub-pages & scrolled state) — GLOBAL DEFINITION */
.glass-nav {
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ── NAV TEXT CONTRAST: text-shadow for white-on-hero readability ── */
#mainNav.bg-transparent a,
#mainNav.bg-transparent span,
#mainNav.bg-transparent button {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 0 12px rgba(0, 0, 0, 0.25);
}

/* Remove text-shadow when glass-nav is active (dark text on white bg) */
#mainNav.glass-nav a,
#mainNav.glass-nav span,
#mainNav.glass-nav button {
  text-shadow: none;
}

/* ── HERO SECTIONS: padding-top to clear the fixed 73px nav ── */
.hero-banner,
.hero-remembrance,
.hero-section,
header.relative.h-screen,
[class*="hero"] {
  padding-top: 100px !important; /* 73px nav + 27px breathing room */
}

/* Home page full-height hero: ensure it still fills the viewport */
header#home {
  padding-top: 0 !important; /* Home hero uses flex centering, doesn't need pad */
}

/* Sub-page hero overlay — ensure text readability */
.hero-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.25) 40%,
    rgba(0, 0, 0, 0.35) 100%
  );
  z-index: 0;
  pointer-events: none;
}

/* Language toggle buttons */
#langToggle,
#langToggleMobile {
  padding: 0.5rem 1rem;
  border: 2px solid var(--island-green);
  color: var(--island-green);
  background: transparent;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.75rem;
  transition: all 0.2s;
}

#langToggle:hover,
#langToggleMobile:hover {
  background: var(--island-green);
  color: white;
}

@media (max-width: 1023px) {
  #langToggle {
    display: none;
  }
}

@media (min-width: 1024px) {
  #langToggleMobile {
    display: none;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   5. HERO SECTIONS
   ─────────────────────────────────────────────────────────────────────────── */

.hero {
  width: 100%;
  height: 40vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  position: relative;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.hero > * {
  position: relative;
  z-index: 2;
}

@media (max-width: 640px) {
  .hero {
    height: 30vh;
  }

  .hero h1 {
    font-size: 1.75rem;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   6. CONTENT SECTIONS
   ─────────────────────────────────────────────────────────────────────────── */

section {
  width: 100%;
  padding: 3rem 1rem;
}

.section-padding {
  padding: 4rem 1rem;
}

@media (min-width: 768px) {
  section {
    padding: 4rem 2rem;
  }
  .section-padding {
    padding: 5rem 2rem;
  }
}

@media (min-width: 1024px) {
  section {
    padding: 5rem 3rem;
  }
  .section-padding {
    padding: 6rem 3rem;
  }
}

@media (min-width: 1200px) {
  section {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   7. CARDS & GRID LAYOUTS
   ─────────────────────────────────────────────────────────────────────────── */

.card {
  background: white;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.grid {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 2rem;
}

/* Responsive grid */
@media (min-width: 640px) {
  .grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   8. IMAGES & MEDIA
   ─────────────────────────────────────────────────────────────────────────── */

img {
  max-width: 100%;
  height: auto;
  display: block;
}

figure {
  margin: 0;
  padding: 0;
}

figcaption {
  font-size: 0.875rem;
  color: var(--text-light);
  margin-top: 0.5rem;
}

/* ───────────────────────────────────────────────────────────────────────────
   9. TYPOGRAPHY
   ─────────────────────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: var(--text-dark);
}

/* Don't override heading colors inside hero/banner sections or footers */
.hero-remembrance h1, .hero-remembrance h2, .hero-remembrance h3,
.hero-banner h1, .hero-banner h2, .hero-banner h3,
.hero-section h1, .hero-section h2, .hero-section h3,
.hero-education h1, .hero-education h2, .hero-education h3,
.hero-infrastructure h1, .hero-infrastructure h2, .hero-infrastructure h3,
.hero-medical h1, .hero-medical h2, .hero-medical h3,
header[id="home"] h1,
[class*="hero"] h1, [class*="hero"] h2, [class*="hero"] h3,
footer h1, footer h2, footer h3, footer h4 {
  color: inherit;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

@media (max-width: 640px) {
  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.25rem;
  }
}

p {
  margin-bottom: 1rem;
  color: var(--text-dark);
}

/* Don't override text colors inside hero sections or footers */
footer p,
[class*="hero"] p,
.hero-remembrance p,
.hero-banner p,
.hero-section p,
.hero-education p,
.hero-infrastructure p,
.hero-medical p {
  color: inherit;
}

a {
  color: var(--island-green);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  text-decoration: underline;
}

/* Serif & Script font families (used across pages) */
.serif-font {
  font-family: 'Playfair Display', serif;
}

.script-font {
  font-family: 'Great Vibes', cursive;
}

/* ───────────────────────────────────────────────────────────────────────────
   10. FOOTER (STICKY)
   ─────────────────────────────────────────────────────────────────────────── */

footer {
  margin-top: auto;
  background: linear-gradient(135deg, #064e3b 0%, #022c22 100%);
  color: #e2e8f0 !important;  /* slate-200 — highly readable on dark green */
  position: relative;
  z-index: 50;
  clear: both;
}

footer p,
footer span,
footer li {
  color: #cbd5e1 !important;  /* slate-300 — clear body text */
}

footer h2, footer h3, footer h4 {
  color: #ffffff !important;  /* Pure white headings */
}

footer a {
  color: #a7f3d0 !important;  /* emerald-200 — bright, readable links */
}

footer a:hover {
  color: #ffffff !important;
}

footer a:hover {
  color: white;
  text-decoration: none;
}

/* Footer Quick Links — 2-column grid */
.footer-links-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1.5rem;
}

/* ───────────────────────────────────────────────────────────────────────────
   11. FORMS
   ─────────────────────────────────────────────────────────────────────────── */

input,
textarea,
select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.2s;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--island-green);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
}

button {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
}

button.primary {
  background: var(--island-green);
  color: white;
}

button.primary:hover {
  background: var(--ocean-deep);
}

.form-field {
  width: 100%;
  padding: 14px 20px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  background: #fff;
  outline: none;
  transition: border-color 0.2s;
}

.form-field:focus {
  border-color: var(--text-dark);
}

/* ───────────────────────────────────────────────────────────────────────────
   12. GLOBAL VISUAL EFFECTS & ANIMATIONS
   ─────────────────────────────────────────────────────────────────────────── */

/* Ocean gradient for CTA buttons */
.ocean-gradient {
  background: linear-gradient(135deg, var(--island-green) 0%, var(--ocean-deep) 100%);
}

/* Sand texture background */
.sand-texture {
  background-image: url('https://www.transparenttextures.com/patterns/sandpaper.png');
}

/* Fade-in animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-fadeIn {
  animation: fadeIn 0.4s ease-out forwards;
}

/* Fade-in-up animation */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-up {
  animation: fadeInUp 1s ease-out forwards;
}

/* Island card style (shared across news, obituary, etc.) */
.island-card {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  transition: all 0.4s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.island-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Category tags */
.category-tag {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  border-radius: 99px;
  background: #f1f5f9;
  color: #64748b;
  display: inline-block;
}

/* ───────────────────────────────────────────────────────────────────────────
   13. UTILITY CLASSES
   ─────────────────────────────────────────────────────────────────────────── */

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.gap-4 {
  gap: 1rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mt-4 {
  margin-top: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   END OF STYLESHEET
   ═════════════════════════════════════════════════════════════════════════════ */