/* Extracted styles from index.html */
body { margin:0; font-family:'Noto Sans Devanagari', sans-serif; background-color:#fffaf0; color:#3e2723; }

/* Overlay to improve contrast over background banner */
.site-overlay { position:fixed; inset:0; pointer-events:none; z-index:0; background: linear-gradient(rgba(255,255,255,0.92), rgba(255,255,255,0.75) 30%, rgba(255,255,255,0.45) 55%, rgba(255,255,255,0) 75%); }

/* Splash overlay (initial full-screen banner) */
.splash-overlay { 
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center; 
  background-image: url('/images/Image-Banner.png');
  background-position:center center; background-size:contain; background-repeat:no-repeat; 
  z-index:99999; cursor:pointer; padding:20px; background-color:#000; filter:brightness(1.12) saturate(1.05);
}
.splash-overlay::after {
  content: '';
  position: absolute; inset: 0;
  /* subtle lightening overlay to brighten the banner without losing contrast */
  background: linear-gradient(rgba(255,255,255,0.24), rgba(255,255,255,0.12));
  pointer-events: none;
}
.splash-content { position: relative; z-index: 1; }
.splash-overlay.fade-out { opacity:0; transition:opacity .4s ease; }

/* Splash content (text over banner) */
.splash-content { position:absolute; bottom:8vh; left:50%; transform:translateX(-50%); pointer-events:auto; text-align:center; max-width:90%; }
.splash-poem { font-family:'Noto Sans Devanagari', sans-serif; font-size:clamp(1rem,3.5vw,1.6rem); line-height:1.35; margin-top:8px; color:#ffd966; font-weight:900; text-shadow:0 2px 6px rgba(0,0,0,0.5); }

@media (max-width:800px) {
  .splash-content { left:50%; transform:translateX(-50%); max-width:90%; text-align:center; }
  .splash-poem { font-size:1.05rem; }
}

/* Prevent background scrolling while splash visible */
.no-scroll { overflow:hidden; }

/* Ensure main structural elements sit above overlay */
header, nav, section, footer { position:relative; z-index:1; }
header { background: linear-gradient(135deg,#ff6f00,#d84315); color:white; padding:28px 16px; text-align:center; }
header h1 { margin:0; font-size:1.9rem; font-weight:700; }
header p { margin:6px 0 0; font-size:1.1rem; }
nav { position:sticky; top:0; background:#fff3e0; display:flex; overflow-x:auto; border-bottom:2px solid #ffcc80; }
nav a { padding:12px 16px; text-decoration:none; color:#bf360c; font-weight:600; white-space:nowrap; }
section { padding:24px 16px; max-width:800px; margin:auto; }
h2 { color:#d84315; border-left:5px solid #ff6f00; padding-left:10px; margin-top:0; }
.card { background:white; border-radius:12px; padding:16px; margin:12px 0; box-shadow:0 2px 6px rgba(0,0,0,0.08); }
ul { padding-left:20px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; }
.gallery a.gallery-item { text-decoration:none; color:inherit; }
.gallery div { background:#ffe0b2; height:100px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#8d6e63; padding:8px; }
.gallery div:hover { box-shadow:0 2px 8px rgba(0,0,0,0.12); transform:translateY(-2px); transition:all 150ms ease; }
.btn { display:inline-block; background:#ff6f00; color:white; padding:10px 18px; border-radius:8px; text-decoration:none; font-weight:600; margin-top:8px; }
footer { background:#3e2723; color:#ffecb3; text-align:center; padding:20px; margin-top:30px; }

/* Event list styles */
.event-list { display:flex; flex-direction:column; gap:12px; }
.event-card { display:flex; gap:12px; align-items:flex-start; }
.event-card img.event-image { width:200px; height:120px; object-fit:cover; border-radius:8px; }
.event-card .event-body { flex:1; }
.event-card h3 { margin:0 0 6px 0; color:#bf360c; }
.youtube-thumb { margin-top:8px; }
.youtube-thumb img { width:320px; height:180px; object-fit:cover; border-radius:8px; }

/* Mandir gallery */
.mandir-gallery { display:flex; gap:8px; flex-wrap:wrap; }
.gallery-thumb { width:200px; height:120px; object-fit:cover; border-radius:8px; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,0.08); }
.gallery-thumb:hover { transform:translateY(-4px); transition:all 120ms ease; }

/* Modal styles */
.image-modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.8); z-index:9999; }
.image-modal img { max-width:90%; max-height:80%; border-radius:6px; box-shadow:0 6px 20px rgba(0,0,0,0.6); }
.image-modal button { position:fixed; background:rgba(255,255,255,0.9); border:none; border-radius:6px; padding:8px 12px; font-size:18px; cursor:pointer; }
#modal-prev { left:24px; top:50%; transform:translateY(-50%); }
#modal-next { right:24px; top:50%; transform:translateY(-50%); }
#modal-close { right:24px; top:24px; transform:none; }
.image-modal button:disabled { opacity:0.5; cursor:default; }

@media (max-width:600px) {
  .event-card { flex-direction:column; }
  .event-card img.event-image { width:100%; height:180px; }
  .youtube-thumb img { width:100%; height:auto; }
  .gallery-thumb { width:48%; }
}