/*
  nav-fix.css — UPLUS Navigation v3.1
  Flutter-wave dropdowns with icons + descriptions
  Loads last, wins all specificity wars
*/

/* ── VARIABLES ─────────────────────────────────────────────── */
:root {
  --uplus-orange: #e8521a;
  --uplus-navy:   #1c3048;
  --uplus-green:  #1e8449;
  --nav-h: 72px;
}

/* ── REMOVE ALL DOUBLE-UNDERLINE SOURCES ───────────────────── */
.nav-link::after, .nav-link.active::after,
.nav-list .nav-link::after, .nav-list .nav-link.active::after,
.dropdown-toggle::after { display:none!important; content:none!important; }

/* ── SCROLLBAR REMOVAL ─────────────────────────────────────── */
html,body { scrollbar-width:none!important; -ms-overflow-style:none!important; overflow-x:hidden!important; }
html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { display:none!important; width:0!important; }

/* ── HEADER ────────────────────────────────────────────────── */
#main-header {
  position:fixed!important; top:0; left:0; right:0;
  z-index:9000!important;
  transition:background .35s ease,box-shadow .35s ease;
}
#main-header.scrolled {
  background:#fff!important;
  box-shadow:0 1px 0 rgba(0,0,0,.06),0 4px 20px rgba(0,0,0,.09)!important;
}

/* ── NAVBAR ────────────────────────────────────────────────── */
.navbar {
  display:flex!important; align-items:center!important;
  justify-content:space-between!important;
  max-width:1160px; margin:0 auto;
  padding:0 28px; height:var(--nav-h);
}
@media(max-width:768px){ .navbar { padding:0 16px; } }

/* ── LOGO ANIMATION ────────────────────────────────────────── */
.navbar-brand img {
  height:56px!important; width:auto;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
}
.navbar-brand:hover img { transform:scale(1.05) rotate(-1deg); }

/* ── NAV LIST ──────────────────────────────────────────────── */
.nav-list {
  display:flex!important; align-items:center!important;
  list-style:none!important; margin:0!important; padding:0!important; gap:0!important;
}

/* ── NAV LINKS ─────────────────────────────────────────────── */
.nav-list > li > a.nav-link,
.nav-list > li.has-dropdown > a.nav-link {
  display:inline-flex!important; align-items:center!important; gap:4px!important;
  padding:0 13px!important; height:var(--nav-h)!important;
  font-family:'DM Sans',sans-serif!important;
  font-size:.86rem!important; font-weight:500!important;
  color:rgba(255,255,255,.92)!important;
  text-decoration:none!important;
  border:none!important; border-radius:0!important;
  background:transparent!important; box-shadow:none!important;
  cursor:pointer; white-space:nowrap; position:relative;
  transition:color .2s ease!important;
}
.nav-list > li > a.nav-link::before {
  content:''; position:absolute; bottom:0; left:13px; right:13px;
  height:2px; background:var(--uplus-orange);
  border-radius:2px 2px 0 0;
  transform:scaleX(0); transition:transform .25s ease;
}
.nav-list > li > a.nav-link:hover { color:#fff!important; }
.nav-list > li > a.nav-link:hover::before { transform:scaleX(1); }
.nav-list > li > a.nav-link.active { color:#fff!important; }
.nav-list > li > a.nav-link.active::before { transform:scaleX(1); }

#main-header.scrolled .nav-list > li > a.nav-link { color:#2c3e50!important; }
#main-header.scrolled .nav-list > li > a.nav-link:hover { color:var(--uplus-orange)!important; }
#main-header.scrolled .nav-list > li > a.nav-link.active { color:var(--uplus-orange)!important; }

/* ── DONATE BUTTON ─────────────────────────────────────────── */
a.nav-donate {
  height:auto!important; padding:9px 20px!important;
  margin-left:8px; background:var(--uplus-orange)!important;
  color:#fff!important; border-radius:6px!important;
  font-weight:700!important; font-size:.84rem!important;
  letter-spacing:.02em; box-shadow:0 3px 12px rgba(232,82,26,.35)!important;
  transition:background .2s,transform .2s,box-shadow .2s!important;
}
a.nav-donate:hover {
  background:#c94315!important; transform:translateY(-2px)!important;
  box-shadow:0 6px 20px rgba(232,82,26,.45)!important;
}
a.nav-donate::before { display:none!important; }
#main-header.scrolled a.nav-donate { color:#fff!important; }

/* ── CHEVRON ───────────────────────────────────────────────── */
.nav-arrow {
  font-size:.55rem!important; opacity:.6!important;
  display:inline-block!important;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1)!important;
}
.has-dropdown:hover .nav-arrow,
.has-dropdown:focus-within .nav-arrow { transform:rotate(180deg)!important; }

/* ════════════════════════════════════════════════════════════
   FLUTTER-WAVE DROPDOWN — rich cards with icons + descriptions
   ════════════════════════════════════════════════════════════ */
.nav-dropdown {
  position:absolute!important;
  top:calc(var(--nav-h) + 1px)!important; left:50%!important;
  transform:translateX(-50%) translateY(-12px)!important;
  background:#fff!important;
  border-radius:16px!important;
  box-shadow:0 20px 60px rgba(28,48,72,.18), 0 0 0 1px rgba(28,48,72,.05)!important;
  padding:10px 8px!important;
  list-style:none!important; margin:0!important;
  opacity:0!important; pointer-events:none!important;
  transition:opacity .28s cubic-bezier(.4,0,.2,1),
             transform .28s cubic-bezier(.34,1.56,.64,1)!important;
  z-index:9100!important;
  min-width:240px!important;
}
/* Wide dropdown for Our Work */
.has-dropdown.wide .nav-dropdown { min-width:560px!important; }

/* Hover bridge */
.has-dropdown::before {
  content:''; position:absolute; top:66px; left:0; right:0;
  height:10px; background:transparent; z-index:9050;
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown {
  opacity:1!important; pointer-events:all!important;
  transform:translateX(-50%) translateY(0)!important;
}

/* Wide grid layout */
.has-dropdown.wide .nav-dropdown { padding:16px!important; }
.has-dropdown.wide .nav-dropdown ul {
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:4px!important;
  list-style:none!important; margin:0; padding:0;
}

/* Dropdown items */
.nav-dropdown li { display:block!important; }
.nav-dropdown li.sep {
  height:1px!important; background:#f0f0f0!important;
  margin:6px 4px!important;
}
.nav-dropdown li a {
  display:flex!important; align-items:center!important; gap:12px!important;
  padding:10px 12px!important;
  border-radius:10px!important;
  text-decoration:none!important;
  transition:background .18s ease, transform .18s ease!important;
  border:none!important;
}
.nav-dropdown li a:hover {
  background:#f8f4f2!important;
  transform:translateX(3px)!important;
}
/* Icon circle */
.dd-icon {
  width:36px; height:36px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  font-size:.85rem;
  transition:transform .2s ease;
}
.nav-dropdown li a:hover .dd-icon { transform:scale(1.1); }
/* Text block */
.dd-text { display:flex; flex-direction:column; gap:1px; }
.dd-title {
  font-family:'DM Sans',sans-serif;
  font-size:.85rem; font-weight:600;
  color:#1c3048; line-height:1.2;
  transition:color .18s;
}
.dd-desc {
  font-size:.73rem; color:#9aa5b4; line-height:1.3;
  font-weight:400;
}
.nav-dropdown li a:hover .dd-title { color:var(--uplus-orange); }

/* Section label inside dropdown */
.dd-section-label {
  font-size:.68rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:#c0c8d4;
  padding:6px 12px 4px;
}

/* ── HAMBURGER ─────────────────────────────────────────────── */
#nav-hamburger {
  display:none!important;
  flex-direction:column!important; justify-content:center!important;
  align-items:center!important; gap:5px!important;
  width:40px!important; height:40px!important;
  background:rgba(255,255,255,.12)!important;
  border:1.5px solid rgba(255,255,255,.28)!important;
  border-radius:8px!important; cursor:pointer!important;
  padding:0!important; flex-shrink:0!important;
  transition:background .2s,border-color .2s!important;
}
#nav-hamburger:hover {
  background:rgba(255,255,255,.22)!important;
  border-color:rgba(255,255,255,.55)!important;
}
#main-header.scrolled #nav-hamburger {
  background:#f4f6f9!important; border-color:#d0d8e4!important;
}
.ham-bar {
  display:block!important; width:18px!important; height:2px!important;
  background:#fff!important; border-radius:2px!important;
  transition:transform .3s ease,opacity .22s ease!important;
}
#main-header.scrolled .ham-bar { background:#1c3048!important; }
#nav-hamburger.open .ham-bar:nth-child(1) { transform:translateY(7px) rotate(45deg)!important; }
#nav-hamburger.open .ham-bar:nth-child(2) { opacity:0!important; }
#nav-hamburger.open .ham-bar:nth-child(3) { transform:translateY(-7px) rotate(-45deg)!important; }

/* ── MOBILE OVERLAY ────────────────────────────────────────── */
#mobile-overlay {
  position:fixed!important; inset:0!important;
  background:rgba(0,0,0,.52)!important;
  backdrop-filter:blur(4px)!important;
  z-index:9200!important;
  opacity:0!important; pointer-events:none!important;
  transition:opacity .32s ease!important;
}
#mobile-overlay.open { opacity:1!important; pointer-events:all!important; }

/* ── MOBILE DRAWER ─────────────────────────────────────────── */
#mobile-drawer {
  position:fixed!important; top:0; left:0; bottom:0!important;
  width:min(292px,86vw)!important;
  background:#1c3048!important;
  z-index:9300!important;
  display:flex!important; flex-direction:column!important;
  transform:translateX(-100%)!important;
  transition:transform .34s cubic-bezier(.4,0,.2,1)!important;
  overflow-y:auto!important;
}
#mobile-drawer.open { transform:translateX(0)!important; }
.drawer-head {
  display:flex!important; align-items:center!important;
  justify-content:space-between!important;
  padding:16px 18px!important;
  border-bottom:1px solid rgba(255,255,255,.07)!important;
  flex-shrink:0!important;
}
.drawer-head img { height:42px!important; }
#drawer-close {
  width:32px; height:32px; border-radius:6px;
  background:rgba(255,255,255,.1)!important; border:none!important;
  color:rgba(255,255,255,.8)!important; font-size:.95rem;
  cursor:pointer; display:flex!important; align-items:center!important;
  justify-content:center!important; transition:background .2s;
}
#drawer-close:hover { background:rgba(255,255,255,.2)!important; }
.drawer-links { flex:1!important; padding:8px 0!important; display:flex!important; flex-direction:column!important; }
.drawer-links a {
  display:flex!important; align-items:center!important; gap:10px!important;
  padding:12px 20px!important;
  font-family:'DM Sans',sans-serif!important;
  font-size:.9rem!important; font-weight:500!important;
  color:rgba(255,255,255,.7)!important;
  text-decoration:none!important;
  border-left:3px solid transparent!important;
  transition:all .15s!important;
}
.drawer-links a:hover, .drawer-links a.active {
  background:rgba(255,255,255,.07)!important;
  color:#fff!important; border-left-color:var(--uplus-orange)!important;
}
.drawer-links a .dm-icon { font-size:.82rem; width:16px; text-align:center; opacity:.65; }
.drawer-donate { color:rgba(255,175,95,.9)!important; }
.drawer-toggle {
  display:flex!important; align-items:center!important;
  justify-content:space-between!important;
  padding:12px 20px!important;
  font-family:'DM Sans',sans-serif!important;
  font-size:.9rem!important; font-weight:500!important;
  color:rgba(255,255,255,.7)!important;
  cursor:pointer!important; border-left:3px solid transparent!important;
  transition:all .15s!important; user-select:none!important;
}
.drawer-toggle:hover, .drawer-toggle.open-state {
  background:rgba(255,255,255,.07)!important; color:#fff!important;
}
.dtoggle-arrow {
  font-size:.62rem!important; opacity:.6!important;
  transition:transform .26s ease!important; display:inline-block!important;
}
.drawer-toggle.open-state .dtoggle-arrow { transform:rotate(180deg)!important; }
.drawer-sub {
  overflow:hidden!important; max-height:0!important;
  transition:max-height .32s ease!important;
  background:rgba(0,0,0,.14)!important;
}
.drawer-sub.open { max-height:400px!important; }
.drawer-sub a {
  padding:9px 20px 9px 30px!important;
  font-size:.84rem!important;
  color:rgba(255,255,255,.52)!important;
  border-left:none!important;
}
.drawer-sub a:hover { color:rgba(255,255,255,.88)!important; border-left:none!important; }
.drawer-sep { height:1px!important; background:rgba(255,255,255,.07)!important; margin:6px 0!important; }
.drawer-foot { padding:14px 16px 22px!important; border-top:1px solid rgba(255,255,255,.07)!important; flex-shrink:0!important; }
.drawer-donate-btn {
  display:block!important; text-align:center!important;
  padding:13px!important; background:var(--uplus-orange)!important;
  color:#fff!important; border-radius:8px!important;
  font-weight:700!important; font-size:.92rem!important;
  text-decoration:none!important; letter-spacing:.02em;
  transition:background .2s,transform .2s!important;
  font-family:'DM Sans',sans-serif!important;
}
.drawer-donate-btn:hover { background:#c94315!important; transform:translateY(-1px)!important; }

/* ── BREAKPOINTS ───────────────────────────────────────────── */
@media(max-width:960px) {
  .nav-list { display:none!important; }
  #nav-hamburger { display:flex!important; }
}
@media(min-width:961px) {
  #nav-hamburger { display:none!important; }
}

/* ── HERO TEXT SPACING ─────────────────────────────────────── */
.hero-content { padding-top:170px!important; padding-bottom:100px!important; }
.hero h1 { font-size:clamp(2rem,4.5vw,3.8rem)!important; line-height:1.12!important; }
@media(max-width:768px) {
  .hero-content { padding-top:130px!important; }
  .hero h1 { font-size:clamp(1.8rem,7vw,2.6rem)!important; }
}

/* ── PAGE HERO SPACING ─────────────────────────────────────── */
.page-hero, .about-hero, .work-hero, .action-hero, .don-hero {
  padding-top:140px!important;
}
@media(max-width:768px) {
  .page-hero, .about-hero, .work-hero, .action-hero, .don-hero {
    padding-top:110px!important;
  }
}

/* ── FOOTER BOTTOM FIX ─────────────────────────────────────── */
.footer-bottom {
  display:flex!important; flex-wrap:wrap!important;
  justify-content:space-between!important; align-items:center!important;
  gap:10px!important; padding:20px 0!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
  font-size:.78rem!important; color:rgba(255,255,255,.4)!important;
}
.footer-bottom > span { flex:1 1 200px; min-width:0; }
.footer-bottom-links { display:flex!important; gap:18px!important; flex-shrink:0!important; }
.footer-bottom-links a { color:rgba(255,255,255,.42)!important; text-decoration:none!important; white-space:nowrap!important; }
.footer-bottom-links a:hover { color:rgba(255,255,255,.8)!important; }
@media(max-width:560px) {
  .footer-bottom { flex-direction:column!important; align-items:flex-start!important; }
  .footer-bottom > span { flex:none!important; }
}

/* ── TOAST CONTAINER ───────────────────────────────────────── */
#toast-container {
  position:fixed; top:20px; right:20px;
  z-index:99999; display:flex;
  flex-direction:column; gap:10px;
  max-width:340px; pointer-events:none;
}
.uplus-toast {
  background:#fff; border-radius:12px;
  padding:14px 16px;
  box-shadow:0 8px 32px rgba(0,0,0,.18);
  display:flex; align-items:flex-start; gap:12px;
  pointer-events:all;
  opacity:0; transform:translateX(30px);
  transition:opacity .3s ease,transform .3s ease;
  font-family:'DM Sans',sans-serif;
}
.uplus-toast.show { opacity:1; transform:translateX(0); }
.uplus-toast.out  { opacity:0; transform:translateX(30px); }
.toast-icon { font-size:1.05rem; flex-shrink:0; margin-top:2px; }
.toast-body { flex:1; min-width:0; }
.toast-title { font-weight:700; color:#1a252f; font-size:.87rem; }
.toast-msg   { color:#777; font-size:.81rem; line-height:1.4; margin-top:2px; }
.toast-close { background:none; border:none; cursor:pointer; color:#aaa; font-size:.85rem; padding:0; flex-shrink:0; }
.uplus-toast.success { border-left:4px solid #1e8449; }
.uplus-toast.error   { border-left:4px solid #c0392b; }
.uplus-toast.warning { border-left:4px solid #e67e22; }
.uplus-toast.info    { border-left:4px solid #2980b9; }
.uplus-toast.loading { border-left:4px solid #7f8c8d; }