/* ============================================================
   Siddiq Akbar Foundation — premium header & footer (v9)
   Overrides the base header/footer using the existing markup.
   ============================================================ */

/* ---------- utility bar ---------- */
.utility{background:#0A211A;border-bottom:1px solid rgba(198,161,79,.14)}
.utility .wrap{padding:9px 0}
.utility .heritage{display:inline-flex;align-items:center;gap:9px;color:#9FC3AE;letter-spacing:.2px}
.utility .heritage::before{content:"\2727";color:var(--gold);font-size:12px}
.lang-toggle{display:flex;gap:0;border:1px solid rgba(198,161,79,.35);border-radius:99px;overflow:hidden}
.lang-toggle button{border:0;background:transparent;color:#BFD8C9;font-size:12.5px;
  padding:4px 14px;cursor:pointer;font-family:var(--sans);transition:background .2s ease,color .2s ease}
.lang-toggle button.active{background:var(--gold);color:#0A211A;font-weight:700}
.lang-toggle .bn{font-family:var(--bangla)}

/* ---------- header ---------- */
header.site{background:linear-gradient(180deg,rgba(18,53,40,.98),rgba(14,42,32,.96));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(198,161,79,.28);
  box-shadow:0 1px 0 rgba(198,161,79,.12),0 10px 40px -20px rgba(0,0,0,.55)}
.site .wrap{padding:16px 0;gap:28px}

/* gold hairline that grows on scroll (set by JS via --scrolled) */
header.site::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;
  width:var(--scroll-progress,0%);background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  transition:width .1s linear;opacity:.9}
header.site{position:sticky;top:0;z-index:60}

.brand{gap:14px;position:relative}
.brand .mark{width:46px;height:46px;filter:drop-shadow(0 2px 8px rgba(198,161,79,.25));
  transition:transform .4s cubic-bezier(.2,1.4,.4,1)}
.brand:hover .mark{transform:rotate(15deg) scale(1.06)}
.brand .name{font-size:22px;letter-spacing:.4px;color:#fff}
.brand .name small{color:#A9C6B4;letter-spacing:.8px;margin-top:2px}

/* nav links: refined underline slide */
nav.main ul{gap:26px}
nav.main a{position:relative;font-size:15px;color:#D3E4D9;padding:8px 2px;border-bottom:none;
  letter-spacing:.2px;transition:color .25s ease}
nav.main a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));border-radius:2px;
  transition:right .3s cubic-bezier(.4,0,.2,1)}
nav.main a:hover{color:#fff}
nav.main a:hover::after{right:0}
nav.main a[aria-current="page"]{color:#fff}
nav.main a[aria-current="page"]::after{right:0}

/* premium donate button in header */
.header-give.btn-gold{background:linear-gradient(135deg,var(--gold),#d9b45f);
  box-shadow:0 6px 18px -6px rgba(198,161,79,.7);position:relative;overflow:hidden;
  padding:11px 24px;letter-spacing:.2px}
.header-give.btn-gold::before{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);transition:left .6s ease}
.header-give.btn-gold:hover::before{left:140%}
.header-give.btn-gold:hover{transform:translateY(-1px)}

/* ---------- premium footer ---------- */
footer.site.premium-footer{background:
  radial-gradient(120% 100% at 0% 0%,rgba(30,82,64,.4),transparent 55%),
  linear-gradient(180deg,#0C261E,#081A13);
  color:#AEC8B8;position:relative;overflow:hidden}
footer.site.premium-footer::before{content:"";position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,var(--gold) 1px,transparent 0);background-size:30px 30px}
/* top ornamental rule */
footer.site.premium-footer::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(198,161,79,.6),transparent)}
.premium-footer .footer-grid{position:relative;grid-template-columns:1.6fr .7fr .7fr 1fr;
  gap:40px;padding:64px 0 34px}
.premium-footer .footer-brand{margin-bottom:16px}
.premium-footer .footer-brand .mark{width:40px;height:40px}
.premium-footer .footer-brand .name{color:#fff;font-size:20px}
.premium-footer .footer-grid>div:first-child>p{max-width:38ch;line-height:1.7;color:#9FC3AE}
.premium-footer h4{color:var(--gold-soft);font-family:var(--serif);font-weight:400;font-size:16px;
  letter-spacing:.5px;margin-bottom:16px;position:relative;padding-bottom:10px}
.premium-footer h4::after{content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;
  background:var(--gold);opacity:.6}
.premium-footer ul{list-style:none}
.premium-footer ul li{margin-bottom:10px}
.premium-footer ul a{text-decoration:none;color:#B9D2C4;font-size:14.5px;
  display:inline-flex;align-items:center;gap:7px;transition:color .2s ease,transform .2s ease}
.premium-footer ul a::before{content:"\203A";color:var(--gold);opacity:0;margin-right:-4px;
  transition:opacity .2s ease,margin .2s ease}
.premium-footer ul a:hover{color:#fff}
.premium-footer ul a:hover::before{opacity:1;margin-right:0}

/* footer contact block with prayer-time mini widget */
.footer-connect .fc-line{display:flex;align-items:center;gap:9px;margin-bottom:11px;font-size:14.5px}
.footer-connect .fc-line svg{width:16px;height:16px;color:var(--gold);flex:none}
.footer-social{display:flex;gap:10px;margin-top:18px}
.footer-social a{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:rgba(198,161,79,.1);border:1px solid rgba(198,161,79,.25);color:var(--gold-soft);
  transition:all .22s ease}
.footer-social a:hover{background:var(--gold);color:#0C261E;transform:translateY(-2px)}
.footer-social svg{width:18px;height:18px}

/* newsletter strip already styled by .nl-form; give footer version breathing room */
.premium-footer .nl-form input{background:rgba(255,255,255,.94)}

.foot-bar{border-top:1px solid rgba(198,161,79,.2);position:relative}
.foot-bar .wrap{padding:20px 0;color:#7FA18E;align-items:center}
.foot-bar .bn{font-family:var(--bangla);color:#9FC3AE}
.foot-bar .fb-marks{display:inline-flex;gap:16px;align-items:center}
.foot-bar .fb-marks a{color:#7FA18E;text-decoration:none;font-size:13px}
.foot-bar .fb-marks a:hover{color:var(--gold-soft)}

@media(max-width:900px){
  .premium-footer .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .premium-footer .footer-grid>div:first-child{grid-column:1/-1}
}
@media(max-width:600px){
  .premium-footer .footer-grid{grid-template-columns:1fr}
}

/* ---------- premium mobile drawer ---------- */
@media(max-width:980px){
  nav.main{background:linear-gradient(180deg,#123528,#0A211A)!important;
    border-left:1px solid rgba(198,161,79,.3);box-shadow:-20px 0 60px -10px rgba(0,0,0,.6)}
  nav.main a{font-size:16.5px;letter-spacing:.3px}
  nav.main a::after{display:none}
  nav.main a[aria-current="page"]{background:rgba(198,161,79,.12);border-left:3px solid var(--gold)}
}

/* ---- header layout polish (desktop) ---- */
@media(min-width:981px){
  nav.main ul{flex-wrap:nowrap}
  nav.main a{white-space:nowrap}
  .site .wrap{gap:20px}
  nav.main{flex:1;display:flex;justify-content:center}
}
/* keep brand tagline on one line */
.brand .name small{white-space:nowrap}


/* ============================================================
   FIX v11 — sticky header, no horizontal scroll, working drawer
   - html stays a normal scroll root (so position:sticky works).
   - body uses overflow-x:clip (contains sideways bleed WITHOUT
     turning into a scroll container, so sticky is unaffected).
   - the mobile drawer is a plain fixed panel: off-screen +
     visibility:hidden when closed (so it adds no width), slides
     in when .open is present. Driven entirely by app.js's
     existing openMenu/closeMenu (adds/removes .open). No extra JS.
   ============================================================ */
html{overflow-x:visible}
body{overflow-x:clip}
header.site{position:-webkit-sticky;position:sticky;top:0;z-index:70}

@media (max-width:980px){
  /* header: solid bg (no backdrop-filter, which would trap the fixed drawer) */
  header.site{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    background:linear-gradient(180deg,#123528,#0E2A20)!important;overflow:visible}

  /* the off-canvas drawer */
  nav.main{
    position:fixed!important; top:0!important; right:0!important; left:auto!important;
    bottom:0!important; width:min(86vw,340px)!important; height:100dvh!important;
    background:linear-gradient(180deg,#1a4735,#123528)!important;
    border-left:3px solid var(--gold);
    box-shadow:-30px 0 70px -10px rgba(0,0,0,.85);
    transform:translateX(100%);
    /* clip to zero width when closed so the off-screen drawer can NEVER
       extend the page width (this was the mobile top-overflow bug). */
    clip-path:inset(0 0 0 100%);
    transition:transform .34s cubic-bezier(.4,0,.2,1),clip-path 0s linear .34s,visibility 0s linear .34s;
    visibility:hidden;
    display:flex!important; flex-direction:column;
    align-items:stretch; gap:0; padding:20px 0 28px; margin:0;
    overflow-y:auto; z-index:80;
  }
  nav.main.open{ transform:translateX(0); visibility:visible;
    clip-path:inset(0 0 0 0);
    transition:transform .34s cubic-bezier(.4,0,.2,1),clip-path 0s,visibility 0s; }

  nav.main ul{flex-direction:column;align-items:stretch;gap:0;width:100%;list-style:none}
  nav.main li{width:100%}
  nav.main a{display:block;width:100%;padding:15px 26px;font-size:16.5px;
    color:#DCE8DF;border-bottom:1px solid rgba(255,255,255,.06)}
  nav.main a::after{display:none}
  nav.main a[aria-current="page"]{background:rgba(198,161,79,.12);
    border-left:3px solid var(--gold);color:#fff}
  nav.main .mobile-give{display:block;margin:18px 26px 8px;text-align:center}

  /* label at top of the open drawer */
  nav.main::before{content:"Menu";display:block;flex:none;
    padding:6px 26px 16px;margin:0 0 8px;
    font-family:var(--serif);font-size:12.5px;letter-spacing:.28em;
    text-transform:uppercase;color:var(--gold-soft);
    border-bottom:1px solid rgba(198,161,79,.18)}

  /* backdrop */
  .menu-backdrop{position:fixed;inset:0;background:rgba(4,14,10,.82);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
    opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s;z-index:75}
  .menu-backdrop.show{opacity:1;visibility:visible;transition:opacity .3s ease}

  /* hamburger → X */
  .menu-toggle{display:inline-flex!important;align-items:center;justify-content:center;
    width:46px;height:42px;position:relative;font-size:0;background:transparent;
    border:1.5px solid rgba(246,242,230,.5);border-radius:8px;z-index:85}
  .menu-toggle::before,.menu-toggle::after,.menu-toggle .bar{content:"";position:absolute;
    left:11px;right:11px;height:2px;background:var(--ivory);border-radius:2px;
    transition:transform .3s ease,opacity .2s ease}
  .menu-toggle::before{top:14px}
  .menu-toggle::after{bottom:14px}
  .menu-toggle .bar{top:50%;margin-top:-1px}
  .menu-toggle[aria-expanded="true"]::before{transform:translateY(6px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"]::after{transform:translateY(-6px) rotate(-45deg)}
  .menu-toggle[aria-expanded="true"] .bar{opacity:0}

  /* keep decorative wide elements from bleeding */
  .hero-ornament{display:none}
  .home-hero,.page-hero,.imap-hero,.kd-hero,.community-hero{overflow-x:clip}
  .dd-star{right:-30px!important;max-width:40%}
}
@media (min-width:981px){
  nav.main{display:flex!important;visibility:visible!important;transform:none!important}
  .menu-backdrop{display:none}
}

/* ============================================================
   FIX v12 — donate popup / heart button must not sit over the
   open mobile menu. Raise the drawer + backdrop above them, and
   hide the floating donate FAB and toast while the menu is open.
   ============================================================ */
@media (max-width:980px){
  /* backdrop sits at the body root; nav lives inside the header's own
     stacking context, so raise the whole header above the backdrop when
     the menu is open — otherwise the backdrop covers the links and taps
     do nothing. */
  .menu-backdrop{z-index:1000!important}
  body.menu-open header.site{z-index:1001!important;position:sticky}
  nav.main{z-index:2!important}          /* above backdrop within header ctx */
  .menu-toggle{z-index:3!important}
}
/* When the menu is open, suppress the floating donate bits (any width) */
body.menu-open .donate-fab,
body.menu-open .donate-toast,
body.menu-open .donate-modal,
body.menu-open .donate-backdrop{
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;
}

/* ============================================================
   Remove the mobile tap-highlight flash (grey/blue box on tap).
   Keeps keyboard :focus-visible outlines for accessibility.
   ============================================================ */
html{-webkit-tap-highlight-color:transparent}
a,button,[role="button"],.menu-toggle,.dz-deed,.tasbih-tap,.rm-night,
.district-hub,.pin,.map2-chip,.ip-proj,input,select,textarea,label,summary{
  -webkit-tap-highlight-color:transparent;
}
/* also drop the tap highlight on the SVG map interactive groups */
#map2 svg g{-webkit-tap-highlight-color:transparent}

/* Ensure the menu backdrop is dark enough to clearly separate the drawer
   from the page (was too transparent, so it looked like nothing changed). */
@media (max-width:980px){
  .menu-backdrop{background:rgba(4,14,10,.82)!important;
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
}

/* ============================================================
   RESPONSIVE v18 — kill small element bleeds on mobile that
   caused the "overflow at the top until you scroll" glitch.
   ============================================================ */
@media (max-width:980px){
  /* every top-level section clips its own horizontal bleed */
  main > section, .block, .home-hero, .imap-hero, .page-hero,
  .community-hero, .kd-hero, .trust-strip, .quote-band,
  .donate-hero-band, .map-section, .visit-band{
    overflow-x:clip;
  }
  /* specific decorative / wide bits */
  .dd-star{right:-24px!important;max-width:36%;overflow:hidden}
  .priority-panel,.district-list,.map-layout,.editorial-split{max-width:100%}
  .hero-stars,.hero-ornament,.hero-glow,.pattern,.pattern-bg{max-width:100%;overflow:hidden}
  /* the map SVG can slightly exceed on small screens */
  .imap-visual{overflow-x:clip}
}

/* ============================================================
   Home hero — richer mobile background (v18)
   ============================================================ */
@media (max-width:980px){
  .home-hero{
    background:
      radial-gradient(120% 55% at 50% 0%, rgba(62,121,88,.45), transparent 60%),
      radial-gradient(90% 60% at 85% 30%, rgba(198,161,79,.14), transparent 55%),
      radial-gradient(80% 50% at 10% 80%, rgba(30,82,64,.55), transparent 60%),
      linear-gradient(170deg,#0E2A20 0%, #0A2118 55%, #081A13 100%);
    padding:56px 0 70px;
  }
  /* subtle Islamic geometric pattern overlay */
  .home-hero::before{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
    background:
      radial-gradient(circle at 18% 12%, rgba(62,121,88,.35), transparent 30%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23C6A14F' stroke-width='.6' opacity='.5'%3E%3Cpath d='M30 4 37 23 56 30 37 37 30 56 23 37 4 30 23 23Z'/%3E%3Ccircle cx='30' cy='30' r='15'/%3E%3C/g%3E%3C/svg%3E");
    background-size:auto, 78px 78px;
  }
  /* soft ambient gold glow behind the headline */
  .home-hero::after{
    content:"";position:absolute;left:50%;top:46%;width:340px;height:340px;
    transform:translate(-50%,-50%);pointer-events:none;z-index:0;
    background:radial-gradient(circle, rgba(198,161,79,.16), transparent 68%);
    filter:blur(6px);
  }
  .home-hero .wrap{position:relative;z-index:1}
  /* keep the floating stars visible and gentle */
  .hero-stars{display:block!important;opacity:.7}
  .hero-stars .st{color:var(--gold-soft)}
  /* a refined divider glow under the bismillah */
  .hero-bismillah{margin-bottom:26px}
  .hero-bismillah .ar{text-shadow:0 2px 18px rgba(198,161,79,.25)}
  /* headline pops a touch more on the richer bg */
  .hero-copy h1{text-shadow:0 2px 24px rgba(0,0,0,.35)}
  .hero-badge{backdrop-filter:blur(4px)}
}

/* ============================================================
   Tablet/laptop fit (981–1120px): keep the desktop nav but make
   it fit so the Donate button doesn't overflow off the edge.
   ============================================================ */
@media (min-width:981px) and (max-width:1120px){
  header.site .wrap{gap:14px}
  nav.main ul{gap:15px}
  nav.main a{font-size:14px}
  .brand .name{font-size:19px}
  .brand .name small{font-size:10.5px}
  .header-give.btn-gold{padding:9px 16px;font-size:14.5px}
  .utility{display:none}          /* free vertical space, less clutter */
}

/* ============================================================
   Use the hamburger menu up to 1024px (tablets/small laptops),
   so the desktop nav never overflows the header.
   ============================================================ */
@media (max-width:1024px){
  .menu-toggle{display:inline-flex!important}
  .header-give{display:none!important}     /* Donate lives inside the drawer */
  nav.main{
    position:fixed!important; top:0!important; right:0!important; left:auto!important;
    bottom:0!important; width:min(86vw,340px)!important; height:100dvh!important;
    background:linear-gradient(180deg,#1a4735,#123528)!important;
    border-left:3px solid var(--gold);
    box-shadow:-30px 0 70px -10px rgba(0,0,0,.85);
    transform:translateX(100%);clip-path:inset(0 0 0 100%);
    transition:transform .34s cubic-bezier(.4,0,.2,1),clip-path 0s linear .34s,visibility 0s linear .34s;
    visibility:hidden;display:flex!important;flex-direction:column;
    align-items:stretch;gap:0;padding:20px 0 28px;margin:0;overflow-y:auto;z-index:2;
  }
  nav.main.open{transform:translateX(0);visibility:visible;clip-path:inset(0 0 0 0);
    transition:transform .34s cubic-bezier(.4,0,.2,1),clip-path 0s,visibility 0s}
  nav.main ul{flex-direction:column;align-items:stretch;gap:0;width:100%}
  nav.main a{display:block;width:100%;padding:15px 26px;font-size:16.5px;
    border-bottom:1px solid rgba(255,255,255,.06)}
  nav.main a::after{display:none}
  nav.main .mobile-give{display:block!important;margin:18px 26px 8px;text-align:center}
  body.menu-open header.site{z-index:1001!important}
}
@media (min-width:1025px){
  .menu-toggle{display:none!important}
  nav.main{display:flex!important;visibility:visible!important;transform:none!important;clip-path:none!important}
}