/* =========================================================
   ✅ FIXED HEADER STACK (reference-style stability)
========================================================= */
.siteHeader{
  position:fixed;
  top:0; left:0;
  width:100%;
  z-index:1000;
  background:#fff;
}

/* ====== TOP BAR ====== */
.topbar{
  background:#fff;
  border-bottom:1px solid rgba(2,6,23,.06);
  position:relative;
  z-index:1200; /* ✅ FIX: topbar above drawer */
}
.topbar__inner{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 0;
  position:relative;
}

/* ✅ Donate + Login equal feel (desktop) */
.topbar__donate{
  margin-right:auto;
  height:44px;
  padding:10px 18px;
  font-size:14px;
}

.topbar__brand{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ✅ Logo bigger (desktop) */
.topbar__brand img{
  width:70px;
  height:70px;
  object-fit:contain;
}

.topbar__login{
  margin-left:auto;
  height:44px;
  padding:8px 14px;
  border-radius:999px;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  color:var(--secondary);
  background:rgba(0,19,105,.06);
  border:1px solid rgba(0,19,105,.10);
}
.topbar__login:hover{
  background:rgba(0,19,105,.09);
}

.topbar__loginIcon{
  width:34px;
  height:34px;
  border-radius:999px;
  background:rgba(255,92,0,.14);
  display:grid;
  place-items:center;
  color:var(--primary);
}

.topbar__divider{
  display:none;
  height:1px;
  background:rgba(2,6,23,.10);
}

/* Hamburger (DEFAULT: hidden, only mobile shows) */
.navToggle{
  display:none;
  width:42px;
  height:42px;

  /* ✅ more rectangular */
  border-radius:10px;

  border:1px solid rgba(2,6,23,.12);
  background:linear-gradient(#ffffff, #f8fafc);
  cursor:pointer;

  padding:0;

  /* ✅ FIX: perfect bar width + gap control (like your 2nd image) */
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;

  box-shadow:0 10px 18px rgba(2,6,23,.08);

  position:relative; /* ✅ FIX: keep above drawer */
  z-index:1205;      /* ✅ FIX: hamburger always visible for X animation */
}
.navToggle:hover{
  box-shadow:0 14px 26px rgba(2,6,23,.12);
}
.navToggle span{
  display:block;

  /* ✅ line width bada */
  width:30px;

  /* ✅ thoda thick */
  height:3px;

  background:var(--secondary);

  /* ✅ IMPORTANT: margin remove (gap upar se control ho raha hai) */
  margin:0;

  border-radius:999px;
  transition:transform .18s ease, opacity .18s ease;
}

/* ✅ open state translate values gap+height ke hisab se */
.navToggle.is-open span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.navToggle.is-open span:nth-child(2){ opacity:0; }
.navToggle.is-open span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

/* ====== NAVBAR ====== */
.navbar{
  background:var(--secondary);
  position:relative;
  z-index:1;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.navbar__inner{ position:relative; }

.menu{
  margin:0;
  padding:6px 0;
  list-style:none;
  display:flex;
  align-items:center;

  /* ✅ equal distribution across row */
  justify-content:space-between;

  gap:12px;
  min-height:64px;
  width:100%;
}

/* ✅ each item gets equal width */
.menu__item{
  position:relative;
  flex:1;
  display:flex;
}

/* ✅ Rectangular boxed menu items (same style for all) */
.menu__link{
  color:#fff;
  display:flex;
  align-items:center;

  /* ✅ centered like tabs */
  justify-content:center;

  gap:8px;
  width:100%;

  padding:12px 14px;
  border-radius:10px;
  font-weight:600;
  font-size:14px;

  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.menu__link:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.22);
  transform:translateY(-1px);
}
.menu__link.is-active{
  color:#fff;
  background:rgba(255,92,0,.18);
  border-color:rgba(255,92,0,.45);
  align-items: center;
  justify-content: center;
}

/* ✅ dropdown buttons look exactly like other tabs */
.menu__btn{
  color:#fff;
  display:flex;
  align-items:center;

  /* ✅ centered like tabs (desktop) */
  justify-content:center;

  gap:8px;
  width:100%;

  padding:10px 14px;
  border-radius:10px;
  font-weight:600;
  font-size:14px;

  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);

  cursor:pointer;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;

  font:inherit;
}
.menu__btn:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.22);
  transform:translateY(-1px);
}

/* ✅ active / open dropdown gets same reddish feel */
.menu__btn.is-active{
  background:rgba(255,92,0,.18);
  border-color:rgba(255,92,0,.45);
}
.menu__item.open > .menu__btn{
  background:rgba(255,92,0,.14);
  border-color:rgba(255,92,0,.38);
}

/* ✅ FIX: SAME RECTANGLE HEIGHT for <a> AND <button> (normal/hover/active) */
.menu__link,
.menu__btn{
  min-height:44px;
  padding:12px 14px;          /* ✅ same padding for both */
  line-height:1;
  box-sizing:border-box;
}

/* ✅ FIX: remove default button rendering quirks (height mismatch) */
.menu__btn{
  -webkit-appearance:none;
  appearance:none;
}

.caret{
  width:0; height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid #fff;
  margin-top:2px;
}

/* ✅ Submenu Desktop: animated + proper gap + CLICK FIX (hover bridge) */
.submenu{
  position:absolute;
  left:0;
  top:calc(100% + 8px);
  background:#fff;
  min-width:230px;
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:8px;

  opacity:0;
  transform:translateY(10px);
  visibility:hidden;
  pointer-events:none;
  transition:opacity .16s ease, transform .16s ease, visibility .16s ease;

  z-index:5;
}
.submenu::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-10px;
  height:10px;
}
.submenu li{ list-style:none; }

/* ✅ submenu items divided (desktop) */
.submenu a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  color:var(--secondary);
  font-weight:600;
  font-size:14px;
}

/* ✅ First submenu item: only TOP rounded, bottom square */
.submenu li:first-child > a{
  border-bottom:1px solid rgba(2,6,23,.08);
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  padding-bottom:12px;
}

/* (Optional but clean) Last submenu item: ensure bottom stays rounded */
.submenu li:last-child > a{
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.submenu li + li a{
  border-top:1px solid rgba(2,6,23,.08);
  border-top-left-radius:0;
  border-top-right-radius:0;
  padding-top:12px;
}

.submenu a:hover{
  background:rgba(0,19,105,.06);
  color:var(--primary);
}
.menu__item:hover > .submenu{
  opacity:1;
  transform:translateY(0);
  visibility:visible;
  pointer-events:auto;
}

/* ✅ IMPORTANT FIX:
   mobile drawer injected logo should be hidden on desktop */
.menu__mobileBrand{ display:none; }

/* ✅ Drawer close button (only in mobile drawer, injected by JS) */
.menu__closeWrap{
  display:none;
}
.menu__closeBtn{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
  cursor:pointer;
  display:grid;
  place-items:center;
  color:#fff;
}
.menu__closeBtn:hover{
  background:rgba(255,255,255,.16);
}
.menu__closeBtn span{
  display:block;
  width:18px;
  height:2px;
  background:#fff;
  border-radius:999px;
  position:absolute;
}
.menu__closeBtn{ position:relative; }
.menu__closeBtn span:nth-child(1){ transform:rotate(45deg); }
.menu__closeBtn span:nth-child(2){ transform:rotate(-45deg); }

/* ====== FOOTER ====== */
.footer{
  background:var(--secondary);
  color:#fff;
  padding:44px 0 0;
  margin-top:auto;
}
.footer__grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:26px;
  align-items:start;
  padding-bottom:28px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.footer__brandBox{ min-width:0; }
.footer__brand{
  width:62px;
  height:62px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  display:grid;
  place-items:center;
  margin-bottom:14px;
}
.footer__brand img{ width:48px; height:48px; object-fit:contain; }

.footer__title{
  font-family:"Cinzel",serif;
  font-weight:700;
  margin:0 0 8px;
  letter-spacing:.3px;
}
.footer__line{
  width:56px;
  height:3px;
  background:var(--primary);
  border-radius:999px;
  margin-bottom:14px;
}
.footer__text{
  color:rgba(255,255,255,.82);
  line-height:1.75;
  margin:0 0 10px;
  font-size:14px;
}
.footer__text a{ color:#fff; }

.footer__links{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}
.footer__links a{
  color:#fff;
  font-weight:600;
  font-size:14px;
  opacity:.92;
}
.footer__links a:hover{ color:var(--primary); }

.footer__map{
  height:170px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  overflow:hidden;
  position:relative;
}

.footer__mapLink{
  display:grid;
  place-items:center;           /* ✅ center-center */
  width:100%;
  height:100%;
}

.footer__mapImg{
  width:100%;
  height:100%;
  object-fit:contain;           /* ✅ no cut */
  object-position:center;       /* ✅ center */
  display:block;
}

@media (max-width: 520px){
  .footer__map{ height:255px; } /* optional */
}


.footer__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 0 22px;
}
.subscribe{
  display:flex;
  gap:12px;
  align-items:center;
  flex:1;
  min-width:0;
  max-width:720px;
}
.subscribe__input{
  flex:1;
  height:46px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  padding:0 16px;
  color:#fff;
  outline:none;
  min-width:0;
}
.subscribe__input::placeholder{ color:rgba(255,255,255,.70); }
.subscribe__btn{
  height:46px;
  padding:0 22px;
  flex:0 0 auto;
}
.social{
  display:flex;
  gap:10px;
  align-items:center;
  flex:0 0 auto;
}
.social__btn{
  width:40px;
  height:40px;
  border-radius:10px;
  background:var(--primary);
  display:grid;
  place-items:center;
  font-weight:800;
  color:#fff;
  user-select:none;
}
.social__btn:hover{ background:var(--btn2); }

.copyright{ background:var(--primary); padding:14px 0; }
.copyright__inner{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.copyright p{
  margin:0;
  font-weight:700;
  letter-spacing:.2px;
}

/* Back to top */
.toTop{
  position:fixed;
  right:18px;
  bottom:18px;
  width:46px;
  height:46px;
  padding:0;
  border:none;
  border-radius:10px;
  background:#ffffff;
  color:var(--secondary);
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  display:grid;
  place-items:center;
  transition:transform .12s ease, box-shadow .12s ease, opacity .18s ease;
  opacity:0;
  pointer-events:none;
  z-index:9999;
}
.toTop.show{
  opacity:1;
  pointer-events:auto;
}
.toTop:hover{
  box-shadow:0 16px 34px rgba(0,0,0,.22);
  transform:translateY(-1px);
}
.toTop:active{
  transform:translateY(0px);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

/* Overlay for mobile drawer */
.navOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px);
  display:none;
  z-index:900;
}
.navOverlay.show{ display:block; }

/* ====== RESPONSIVE ====== */
@media (max-width: 980px){
  .footer__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 820px){
  /* ✅ ONLY on mobile: show hamburger in topbar */
  .navToggle{
    display:flex; /* ✅ FIX: was grid, now flex so bars width/gap works */
  }

  .topbar__loginText{ display:inline; }

  /* ✅ Drawer */
  .navbar{
    position:fixed;

    /* ✅ FIX: header ke neeche shift (cut issue solve) */
    top:var(--siteHeaderH);

    right:0;              
    left:auto;            

    /* ✅ FIX: remaining viewport height only */
    height:calc(100dvh - var(--siteHeaderH));

    width:min(320px, 86vw);
    transform:translateX(110%); 
    transition:transform .22s ease;
    z-index:950;
    box-shadow: 0 18px 42px rgba(0,0,0,.35);
    border-left:1px solid rgba(255,255,255,.12); 
    border-right:0; 
  }
  .navbar.open{ transform:translateX(0); }

  .navbar__inner{
    height:100%;
    overflow:auto;
    padding:14px 0 18px;
    position:relative;
  }

  /* ✅ Drawer header row: left spacer + center logo + right close */
  .menu__closeWrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 12px;
    position:sticky;
    top:0;
    background:linear-gradient(to bottom, rgba(0,19,105,1), rgba(0,19,105,.92));
    z-index:6;
    border-bottom:1px solid rgba(255,255,255,.10);
  }

  .menu__closeSpacer{
    width:40px;
    height:40px;
    flex:0 0 40px;
  }

  /* ✅ Mobile logo now inside header row */
  .menu__mobileBrand{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:1;
    padding:0;
    margin:0;
    border:0;
  }
  .menu__mobileBrand img{
    width:66px;
    height:66px;
    object-fit:contain;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
  }

  .menu{
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;

    /* ✅ more gap between items (mobile) */
    gap:10px;

    padding:14px 12px;
    min-height:auto;
    width:100%;
  }

  /* ✅ IMPORTANT: submenu should be below (not side) */
  .menu__item{
    flex:0 0 auto;
    width:100%;
    display:block; 
  }

  /* ✅ mobile: full width rectangular boxes */
  .menu__link{
    width:100%;
    justify-content:space-between; 
    border-radius:14px;
    padding:12px 12px;
  }

    /* ✅ mobile: full width rectangular boxes */
  .menu__btn{
    width:100%;
    justify-content:space-between; 
    border-radius:14px;
    padding:10px 12px;
  }

  /* Mobile submenu accordion */
  .submenu{
    position:static;
    display:none;
    box-shadow:none;

    background:rgba(255,255,255,.07);

    border:1px solid rgba(255,255,255,.12);

    margin:8px 0 14px; 
    width:100%;        

    border-radius:14px;
    padding:10px;

    opacity:1;
    transform:none;
    visibility:visible;
    pointer-events:auto;
    transition:none;
  }

  /* ✅ submenu links + divider lines (mobile) */
  .submenu a{
    color:#fff;
    opacity:.92;
    border-radius:12px;
    border:0;
  }
  .submenu li + li a{
    border-top:1px solid rgba(255,255,255,.12);
    border-top-left-radius:0;
    border-top-right-radius:0;
    padding-top:12px;
  }

  .submenu a:hover{ background:rgba(255,255,255,.10); color:#fff; }

  .menu__item:hover > .submenu{ display:none; }
  .menu__item.open > .submenu{ display:block; }
}

@media (max-width: 520px){
  .topbar__inner{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "logo donate"
      "divider divider"
      "hamburger login";
    align-items:center;
    gap:10px;
    padding:12px 0;
    position:static;
  }

  .topbar__divider{
    display:block;
    grid-area:divider;
    height:1px;
    background:rgba(2,6,23,.14);
    margin:4px 0;
  }

  .topbar__brand{
    grid-area:logo;
    position:static;
    transform:none;
    justify-self:start;
  }

  .topbar__brand img{
    width:62px;
    height:62px;
  }

  .topbar__donate{
    grid-area:donate;
    margin:0;
    justify-self:end;
    height:40px;
    padding:8px 12px;
    font-size:13px;
  }

  .navToggle{
    grid-area:hamburger;
    justify-self:start;
    width:50px;
    height:40px;

    /* ✅ keep rectangular on small */
    border-radius:10px;
  }


  @media (max-width: 520px){
  .subscribe__input,
  .subscribe__btn{
    height:46px;              /* same physical height */
    width:100%;               /* both full width */
  }

  .subscribe__input{
    padding:0 16px;
    line-height:46px;         /* helps “visual” equal height */
  }

  .subscribe__btn{
    padding:0 22px;           /* keep horizontal padding only */
  }
}



  .topbar__login{
    grid-area:login;
    margin:0;
    justify-self:end;
    height:40px;
    padding:6px 12px;
  }

  .topbar__loginText{ display:inline; }
  .topbar__loginIcon{ width:32px; height:32px; }

  .footer__grid{ grid-template-columns:1fr; }

  .footer__bottom{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  .subscribe{
    max-width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .subscribe__btn{ width:100%; }
  .social{ justify-content:center; flex-wrap:wrap; }
}