/* ==========================================================================
   style.css — Core / Global Styles
   Signature motif: a soft radiating "flame/diya" glow (::before pseudo
   elements) echoing the torch in the org's emblem, used sparingly on
   headings, dividers and CTAs rather than scattered everywhere.
   ========================================================================== */

/* -------------------- Reset & Base -------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  font-family: var(--mmss-font-body);
  color: var(--mmss-text-body);
  background: var(--mmss-bg-white);
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{ max-width: 100%; height: auto; display: block; }
a{ text-decoration: none; color: inherit; transition: var(--mmss-transition); }
ul{ list-style: none; margin: 0; padding: 0; }
.container{ max-width: var(--mmss-container-max); }

h1,h2,h3,h4,h5,h6{
  font-family: var(--mmss-font-display); font-weight: 700; color: var(--mmss-text-dark);
  margin: 0; line-height: 1.15; letter-spacing: -.01em;
}
h1{ font-size: var(--mmss-fs-h1); font-weight: 800; font-optical-sizing: auto; }
h2{ font-size: var(--mmss-fs-h2); font-weight: 700; }
h3{ font-size: var(--mmss-fs-h3); font-weight: 600; }
p{ color: var(--mmss-text-muted); margin: 0; }
em, .accent-italic{ font-family: var(--mmss-font-display); font-style: italic; font-weight: 500; color: var(--mmss-secondary); }

:focus-visible{ outline: 3px solid var(--mmss-accent); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* -------------------- Page Loader -------------------- */
#mmss-loader{
  position: fixed; inset: 0; z-index: 99999;
  background: var(--mmss-gradient-dusk);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .6s ease, visibility .6s ease;
}
#mmss-loader.is-hidden{ opacity: 0; visibility: hidden; pointer-events: none; }
.mmss-loader-inner{ text-align: center; color: #fff; }
.mmss-loader-blob{
  width: 60px; height: 60px; margin: 0 auto 18px; position: relative;
}
.mmss-loader-blob::before{
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--mmss-flame) 0%, var(--mmss-secondary) 55%, transparent 75%);
  animation: flamePulse 1.5s ease-in-out infinite;
}
@keyframes flamePulse{
  0%,100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.35); opacity: .55; }
}
.mmss-loader-text{ font-family: var(--mmss-font-display); font-weight: 600; letter-spacing: .5px; font-size: 1.05rem; opacity: .92; }

/* -------------------- Top Utility Bar -------------------- */
.topbar{ background: var(--mmss-bg-dark); color: rgba(255,255,255,.85); font-size: .82rem; padding: 9px 0; }
.topbar-inner{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.topbar-left{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; min-width: 0; }
.topbar-left a{ color: rgba(255,255,255,.85); overflow-wrap: anywhere; word-break: break-word; }
.topbar-left a:hover{ color: var(--mmss-flame); }
.topbar-left i{ color: var(--mmss-flame); margin-right: 6px; }
.topbar-right a{ color: rgba(255,255,255,.7); margin-left: 14px; font-size: .92rem; }
.topbar-right a:hover{ color: var(--mmss-secondary); transform: translateY(-2px); display: inline-block; }

/* -------------------- Navbar -------------------- */
.mmss-navbar {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  position: sticky; top: 0; z-index: 1000;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--mmss-secondary) 0%, var(--mmss-primary) 50%, var(--mmss-accent) 100%) 1;
  box-shadow: 0 2px 24px rgba(26,15,46,.06);
  transition: var(--mmss-transition);
}
.mmss-navbar.scrolled { box-shadow: 0 8px 32px rgba(26,15,46,.12); background: rgba(255,255,255,.98); }
.mmss-navbar .navbar  { padding: 12px 0; }

.navbar-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.navbar-brand:hover .brand-text strong { color: var(--mmss-secondary); }

.nav-logo-wrap { position: relative; flex-shrink: 0; }
.logo-img {
  height: 60px; width: 60px;
  object-fit: contain;
  filter: drop-shadow(0 3px 10px rgba(242,118,12,.32));
  transition: var(--mmss-transition);
}
.logo-img:hover { transform: rotate(-4deg) scale(1.07); }

.logo-badge {
  width: 60px; height: 60px;
  background: var(--mmss-gradient-warm);
  border-radius: 50%;
  align-items: center; justify-content: center;
  font-size: 1.5rem; color: #fff;
  box-shadow: var(--mmss-shadow-glow-warm);
}

.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong {
  font-family: var(--mmss-font-display);
  font-size: 1.12rem; font-weight: 700;
  color: var(--mmss-text-dark);
  letter-spacing: -.2px;
  transition: var(--mmss-transition);
}

.navbar-nav .nav-link {
  color: var(--mmss-text-dark);
  font-weight: 600; font-size: .89rem;
  padding: 10px 14px !important;
  border-radius: var(--mmss-radius-pill);
  transition: var(--mmss-transition);
  white-space: nowrap;
  position: relative;
}
.navbar-nav .nav-link:hover {
  color: var(--mmss-primary);
  background: var(--mmss-bg-lavender);
}
.navbar-nav .nav-link.active {
  color: var(--mmss-primary);
  background: var(--mmss-bg-lavender);
  font-weight: 700;
}

.btn-donate-nav {
  background: var(--mmss-gradient-warm);
  color: #fff !important; font-weight: 700; font-size: .88rem;
  padding: 12px 26px !important; border-radius: var(--mmss-radius-pill);
  box-shadow: var(--mmss-shadow-glow-warm);
  display: inline-flex; align-items: center; gap: 8px;
  transition: var(--mmss-transition);
}
.btn-donate-nav:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(242,118,12,.42);
}

/* ── Guarantee correct mobile toggler position (brand left, toggler right) ── */
.mmss-navbar .navbar-brand{ order: 1; }
.mmss-navbar .navbar-toggler{ order: 2; margin-left: auto; }
.mmss-navbar .navbar-collapse{ order: 3; }

.navbar-toggler { border: none; padding: 6px; }
.navbar-toggler:focus { box-shadow: none; }
.toggler-bar {
  display: block; width: 26px; height: 2.5px;
  background: var(--mmss-text-dark); border-radius: 4px; margin: 5px 0;
  transition: var(--mmss-transition);
}

/* -------------------- About dropdown submenu -------------------- */
.nav-dropdown-menu{
  border: none; border-radius: var(--mmss-radius-md); box-shadow: var(--mmss-shadow-lg);
  padding: 10px; min-width: 220px; margin-top: 8px;
}
.nav-dropdown-menu .dropdown-item{
  border-radius: var(--mmss-radius-sm); padding: 11px 16px; font-weight: 600; font-size: .9rem;
  display: flex; align-items: center; gap: 12px; transition: var(--mmss-transition);
}
.nav-dropdown-menu .dropdown-item i{
  width: 30px; height: 30px; border-radius: 9px; background: var(--mmss-bg-lavender);
  color: var(--mmss-primary); display: flex; align-items: center; justify-content: center; font-size: .82rem;
  flex-shrink: 0; transition: var(--mmss-transition);
}
.nav-dropdown-menu .dropdown-item:hover, .nav-dropdown-menu .dropdown-item.active{
  background: var(--mmss-bg-lavender); color: var(--mmss-primary);
}
.nav-dropdown-menu .dropdown-item:hover i, .nav-dropdown-menu .dropdown-item.active i{
  background: var(--mmss-gradient-primary); color: #fff;
}

/* -------------------- Section Basics -------------------- */
.section{ padding: var(--mmss-section-pad) 0; position: relative; overflow: hidden; }
.section-lavender{ background: var(--mmss-bg-lavender); }
.section-cream{ background: var(--mmss-bg-sand); }
.section-teal-mist{ background: var(--mmss-bg-teal-mist); }
.section-contact-cta{
  background: linear-gradient(155deg, var(--mmss-bg-lavender) 0%, var(--mmss-bg-sand) 60%, var(--mmss-bg-teal-mist) 100%);
}
.section-contact-cta .map-wrapper{ box-shadow: var(--mmss-shadow-lg); border: 6px solid #fff; }
.section-dark{ background: var(--mmss-bg-dark); color: #fff; }
.section-dark p{ color: rgba(255,255,255,.72); }
.section-dark h2, .section-dark h3{ color: #fff; }

.section-eyebrow{
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--mmss-bg-lavender); color: var(--mmss-primary);
  font-weight: 700; font-size: .76rem; letter-spacing: 1.4px; text-transform: uppercase;
  padding: 9px 20px 9px 16px; border-radius: var(--mmss-radius-pill); margin-bottom: 20px;
  border: 1px solid rgba(91,33,182,.12);
}
.section-eyebrow i{ color: var(--mmss-secondary); }
.section-dark .section-eyebrow{ background: rgba(255,255,255,.08); color: var(--mmss-accent-light); border-color: rgba(255,255,255,.14); }

.section-heading{ max-width: 740px; margin-bottom: 60px; }
.section-heading.text-center{ margin-left: auto; margin-right: auto; }
.section-heading h2{ margin-bottom: 18px; }
.section-heading .highlight{
  font-family: var(--mmss-font-display); font-style: italic; font-weight: 600;
  color: var(--mmss-secondary); position: relative;
  background: linear-gradient(180deg, transparent 62%, rgba(242,118,12,.22) 62%);
}

/* -------------------- Buttons -------------------- */
.btn-mmss-primary{
  background: var(--mmss-gradient-primary); color: #fff; font-weight: 700;
  padding: 15px 36px; border-radius: var(--mmss-radius-pill); border: none;
  box-shadow: var(--mmss-shadow-glow); display: inline-flex; align-items: center; gap: 10px;
  position: relative; overflow: hidden; transition: var(--mmss-transition);
}
.btn-mmss-primary:hover{ color: #fff; transform: translateY(-3px); box-shadow: 0 16px 38px rgba(91,33,182,.42); }

.btn-mmss-outline{
  background: transparent; color: var(--mmss-primary); font-weight: 700;
  padding: 14px 34px; border-radius: var(--mmss-radius-pill); border: 2px solid var(--mmss-primary);
  display: inline-flex; align-items: center; gap: 10px; transition: var(--mmss-transition);
}
.btn-mmss-outline:hover{ background: var(--mmss-primary); color: #fff; transform: translateY(-3px); box-shadow: var(--mmss-shadow-glow); }

.btn-light-pill{
  background: #fff; color: var(--mmss-primary); font-weight: 700; padding: 15px 34px;
  border-radius: var(--mmss-radius-pill); display: inline-flex; align-items: center; gap: 10px; margin: 0 14px 20px 0;
  transition: var(--mmss-transition);
}
.btn-light-pill:hover{ background: #fff; color: var(--mmss-primary); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.25); }

.btn-outline-pill{
  background: rgba(255,255,255,.06); color: #fff; font-weight: 700; padding: 14px 32px;
  border-radius: var(--mmss-radius-pill); border: 2px solid rgba(255,255,255,.55);
  display: inline-flex; align-items: center; gap: 10px; backdrop-filter: blur(6px);
  transition: var(--mmss-transition);
}
.btn-outline-pill:hover{ background: rgba(255,255,255,.18); color: #fff; border-color: #fff; transform: translateY(-3px); }

/* -------------------- Back to top -------------------- */
.back-to-top{
  position: fixed; bottom: 28px; right: 28px; z-index: 998;
  width: 50px; height: 50px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9);
  background: var(--mmss-gradient-primary); color: #fff; font-size: 1.1rem;
  box-shadow: 0 8px 22px rgba(30,15,46,.35); opacity: 0; visibility: hidden; transform: translateY(20px);
  transition: var(--mmss-transition);
}
.back-to-top.show{ opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover{ transform: translateY(-4px); }

/* -------------------- WhatsApp float -------------------- */
.whatsapp-float{
  position: fixed; bottom: 28px; left: 28px; z-index: 998;
  width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff;
  border: 2px solid rgba(255,255,255,.9);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.3); animation: floatPulse 2.6s ease-in-out infinite;
}
@keyframes floatPulse{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.08); } }

/* -------------------- Decorative blobs & flame glow -------------------- */
.deco-blob{ position: absolute; border-radius: 50%; filter: blur(70px); opacity: .32; z-index: 0; pointer-events: none; }
.deco-blob.purple{ background: var(--mmss-primary-light); }
.deco-blob.orange{ background: var(--mmss-secondary); }
.deco-blob.teal{ background: var(--mmss-accent); }
.deco-blob.flame{ background: var(--mmss-flame); }

.mesh-bg{ position: absolute; inset: 0; background-image: var(--mmss-gradient-mesh); pointer-events: none; z-index: 0; }

/* Signature: small radiating flame mark used as a section divider accent */
.flame-mark{
  width: 46px; height: 46px; margin: 0 auto 22px; position: relative;
}
.flame-mark::before{
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--mmss-flame) 0%, var(--mmss-secondary) 60%, transparent 78%);
  box-shadow: 0 0 26px 6px rgba(255,176,32,.35);
}

/* -------------------- SVG Wave Dividers -------------------- */
.wave-divider{ line-height: 0; position: relative; z-index: 1; }
.wave-divider svg{ width: 100%; height: 90px; display: block; }
.wave-fill-white{ fill: var(--mmss-bg-white); }
.wave-fill-lavender{ fill: var(--mmss-bg-lavender); }
.wave-fill-cream{ fill: var(--mmss-bg-sand); }
.wave-fill-dark{ fill: var(--mmss-bg-dark); }

/* -------------------- Pre-footer CTA -------------------- */
.precta-section{ padding-top: 0; padding-bottom: 110px; }
.precta-box{
  background: var(--mmss-gradient-dusk); border-radius: var(--mmss-radius-lg);
  padding: 64px 56px; position: relative; overflow: hidden; box-shadow: var(--mmss-shadow-lg);
}
.precta-box::after{ content:''; position:absolute; inset:0; background: var(--mmss-gradient-mesh); pointer-events: none; }
.precta-box h3{ color: #fff; font-size: clamp(1.7rem,2.8vw,2.4rem); margin-bottom: 12px; position: relative; }
.precta-box p{ color: rgba(255,255,255,.85); max-width: 540px; position: relative; }
.precta-blob{ position: absolute; border-radius: 50%; filter: blur(55px); opacity: .45; pointer-events: none; }
.precta-blob.blob-1{ width: 260px; height: 260px; background: var(--mmss-secondary); top: -90px; right: -60px; }
.precta-blob.blob-2{ width: 200px; height: 200px; background: var(--mmss-accent); bottom: -80px; left: 10%; }

/* -------------------- Footer -------------------- */
.mmss-footer{ background: var(--mmss-bg-dark); color: rgba(255,255,255,.75); padding-top: 0; position: relative; }
.footer-wave svg path{ fill: var(--mmss-bg-white); }
.footer-top{ padding: 34px 0 54px; }
.footer-logo{ display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.footer-logo img{ height: 46px; }
.footer-logo span{ font-family: var(--mmss-font-display); font-size: 1.25rem; font-weight: 700; color: #fff; }
.footer-about{ color: rgba(255,255,255,.65); font-size: .93rem; margin-bottom: 24px; }
.footer-social{ display: flex; gap: 10px; }
.footer-social a{
  width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center; color: #fff; transition: var(--mmss-transition);
}
.footer-social a:hover{ background: var(--mmss-secondary); transform: translateY(-3px); }
.footer-heading{ font-family: var(--mmss-font-display); color: #fff; font-weight: 600; margin-bottom: 24px; position: relative; padding-bottom: 14px; }
.footer-heading::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; background: var(--mmss-gradient-warm); border-radius: 4px; }
.footer-links li{ margin-bottom: 13px; }
.footer-links a{ color: rgba(255,255,255,.65); font-size: .93rem; transition: var(--mmss-transition); }
.footer-links a:hover{ color: var(--mmss-flame); padding-left: 4px; }
.footer-contact li{ display: flex; gap: 12px; margin-bottom: 17px; font-size: .93rem; color: rgba(255,255,255,.65); }
.footer-contact i{ color: var(--mmss-accent-light); margin-top: 4px; }

/* Same layout, but for use on light backgrounds (e.g. homepage contact CTA) */
.contact-list-light li{ display: flex; gap: 12px; margin-bottom: 17px; font-size: .95rem; color: var(--mmss-text-body); font-weight: 500; }
.contact-list-light i{ color: var(--mmss-primary); margin-top: 4px; width: 18px; text-align: center; }
.footer-reg{
  border-top: 1px solid rgba(255,255,255,.08); padding: 22px 0; display: flex; gap: 28px;
  flex-wrap: wrap; font-size: .8rem; color: rgba(255,255,255,.5);
}
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.08); padding: 22px 0; display: flex;
  justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: .85rem; color: rgba(255,255,255,.5);
}
.footer-bottom i{ color: var(--mmss-secondary); }

/* -------------------- Language Switcher -------------------- */
.lang-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 700; font-size: .88rem; border-radius: var(--mmss-radius-pill);
    padding: 8px 14px !important;
}
.lang-toggle:hover { background: var(--mmss-bg-lavender); color: var(--mmss-primary); }
.lang-menu {
    border: none; border-radius: var(--mmss-radius-md); box-shadow: var(--mmss-shadow-lg);
    padding: 8px; min-width: 140px;
}
.lang-menu .dropdown-item {
    border-radius: var(--mmss-radius-sm); padding: 10px 14px; font-weight: 600; font-size: .9rem;
}
.lang-menu .dropdown-item:hover, .lang-menu .dropdown-item.active {
    background: var(--mmss-bg-lavender); color: var(--mmss-primary);
}
.lang-menu .dropdown-item.active { font-weight: 700; }

/* -------------------- Hindi font override -------------------- */
[data-lang="hi"],
[data-lang="hi"] h1, [data-lang="hi"] h2, [data-lang="hi"] h3,
[data-lang="hi"] h4, [data-lang="hi"] h5, [data-lang="hi"] h6,
[data-lang="hi"] p, [data-lang="hi"] a, [data-lang="hi"] span,
[data-lang="hi"] button, [data-lang="hi"] label, [data-lang="hi"] input,
[data-lang="hi"] select, [data-lang="hi"] textarea {
    font-family: 'Noto Sans Devanagari', 'Inter', sans-serif;
}
[data-lang="hi"] { line-height: 1.9; }
[data-lang="hi"] h1, [data-lang="hi"] h2, [data-lang="hi"] h3 { line-height: 1.4; letter-spacing: 0; }
[data-lang="hi"] .highlight{ font-style: normal; }