/* Vaadhoo Council — custom styles (RTL Dhivehi primary) */

html { scroll-behavior: smooth; }

/* Latin numbers/names in RTL context */
.ltr { direction: ltr; unicode-bidi: embed; font-family: 'Inter', system-ui, sans-serif; }

/* Navbar blur */
.nav-blur { background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav-dark { background: rgba(10,37,36,0.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* Home hero navbar: while transparent (not yet scrolled), fade a dark gradient
   behind it and turn the menu text white so it stays visible over the photo.
   Once the .nav-blur (white bar) kicks in on scroll, the normal dark text
   returns. Scoped to #mainNav, which only exists on the home page. */
#mainNav:not(.nav-blur) {
  background: linear-gradient(180deg, rgba(10,37,36,0.6) 0%, rgba(10,37,36,0) 100%);
}
#mainNav:not(.nav-blur) [class*="text-lagoon"] { color: #fff; }
/* …but the mobile dropdown has a white background, so keep its text dark. */
#mainNav:not(.nav-blur) #mobileMenu [class*="text-lagoon"] { color: #0a2524; }

/* Hero gradient overlay */
.hero-overlay {
  background: linear-gradient(180deg, rgba(10,37,36,0.25) 0%, rgba(10,37,36,0.45) 50%, rgba(10,37,36,0.85) 100%);
}

/* Slow zoom for hero */
@keyframes slowZoom {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}
.slow-zoom { animation: slowZoom 20s ease-in-out infinite alternate; }

/* Fade-up on scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Card hover lift */
.card-lift { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.card-lift:hover { transform: translateY(-6px); box-shadow: 0 22px 48px -18px rgba(10,37,36,0.35); }

/* Comma dial for Qibla */
@keyframes spinQibla {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}
.qibla-needle { transition: transform 0.4s ease; }

/* Photo gallery slider */
.gallery-track { display: flex; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }

/* Tab switching */
.tab-btn { transition: all 0.2s ease; }
.tab-btn.active { background: #0a2524; color: #fff; }

/* News card image zoom */
.news-img { transition: transform 0.5s ease; }
.group:hover .news-img { transform: scale(1.08); }

/* Counter pulse */
.stat-number { font-variant-numeric: tabular-nums; }

/* Marquee for ticker */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-track { animation: marquee 38s linear infinite; }
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }

/* Section heading underline */
.heading-line::after {
  content: ''; display: block; width: 64px; height: 4px;
  background: linear-gradient(90deg, #d21034, #007e3a); border-radius: 4px;
  margin-top: 12px; margin-inline: auto;
}

/* Page banner (interior pages) */
.page-banner { position: relative; background: #0a2524; overflow: hidden; }
.page-banner::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,37,36,0.55) 0%, rgba(10,37,36,0.9) 100%);
}
.page-banner > * { position: relative; z-index: 1; }

/* Breadcrumb chevron flips correctly in RTL via logical rotation */
.crumb-sep { opacity: .5; }

/* Prose block for article/detail bodies.
   Inherit the container's colour (text-lagoon on light bodies, text-white/85
   on dark cards) so the text stays visible on both backgrounds. */
.prose-dv p { margin-bottom: 1.15rem; line-height: 2; color: inherit; }
.prose-dv h2 { margin: 2rem 0 1rem; }
.prose-dv h3 { margin: 1.6rem 0 .8rem; }
.prose-dv ul { margin: 0 0 1.15rem; }
.prose-dv blockquote {
  border-inline-start: 4px solid #14b8a6; background: #f8f5ef;
  padding: 1rem 1.25rem; border-radius: 0 12px 12px 0; margin: 1.5rem 0;
}

/* Smooth scrollbar for dropdown */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #0a252433; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #0a252466; }

/* Focus ring */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid #14b8a655; outline-offset: 2px; border-radius: 6px;
}