/* ==================================================================
   Header navigation additions (all pages, including the homepage)
   - "Our Initiatives" dropdown: opens on hover (desktop) and on click/tap
   - Header "Donate Now" is now a link to donate.php
   Only new selectors; the approved header styles are not overridden.
   ================================================================== */

.nav-dropdown { position: relative; }
.nav-dropdown-toggle { display: inline-flex !important; align-items: center; gap: 5px; cursor: pointer; }
.nav-caret { font-size: .78em; line-height: 1; transition: transform .25s ease; }
.nav-dropdown:hover .nav-caret,
.nav-dropdown-toggle.show .nav-caret { transform: rotate(180deg); }

.nav-dropdown-menu {
  --bs-dropdown-link-active-bg: transparent;
  min-width: 330px;
  margin: 0;
  padding: 10px;
  border: 1px solid #e3ebf5;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 22px 48px rgba(7, 38, 90, .16);
}
.nav-dropdown-menu .dropdown-divider { margin: 6px 8px; border-color: #e6edf5; opacity: 1; }
.nav-dropdown-menu .dropdown-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: 12px;
  color: var(--navy-ink); white-space: normal;
  transition: background-color .2s ease, color .2s ease;
}
.nav-dropdown-menu .dropdown-item:hover,
.nav-dropdown-menu .dropdown-item:focus-visible { background: #f2f7fd; color: var(--orange-dark); }
.nav-dropdown-menu .dropdown-item.active { background: var(--orange-soft); color: var(--orange-dark); }
.nav-dd-icon {
  display: grid; place-items: center; flex: 0 0 38px;
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--orange-soft); color: var(--orange-dark); font-size: 15px;
  transition: background-color .2s ease, color .2s ease;
}
.nav-dropdown-menu .dropdown-item:hover .nav-dd-icon,
.nav-dropdown-menu .dropdown-item.active .nav-dd-icon { background: var(--orange); color: #fff; }
.nav-dd-text { display: flex; flex-direction: column; min-width: 0; }
.nav-dd-text strong { font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.nav-dd-text small { font-size: 11px; color: var(--muted); line-height: 1.35; margin-top: 1px; }
.nav-dd-all { justify-content: space-between; background: #f5f9fe; }
.nav-dd-all > i { color: var(--orange-dark); }

/* Desktop: open on hover and keyboard focus, positioned under the link */
@media (min-width: 1200px) {
  .nav-dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 10px; }
  .nav-dropdown-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* hover bridge */
  .nav-dropdown-menu::after {
    content: ''; position: absolute; top: -7px; left: 50%; width: 13px; height: 13px;
    background: #fff; border-left: 1px solid #e3ebf5; border-top: 1px solid #e3ebf5;
    transform: translateX(-50%) rotate(45deg);
  }
}
@media (min-width: 1200px) and (hover: hover) {
  .nav-dropdown:hover > .nav-dropdown-menu,
  .nav-dropdown:focus-within > .nav-dropdown-menu { display: block; animation: navDdIn .2s ease both; }
}
@keyframes navDdIn { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Mobile / tablet menu: the list expands inside the collapsed menu */
@media (max-width: 1199.98px) {
  .nav-dropdown-toggle { width: 100%; justify-content: space-between; }
  .site-navbar .nav-dropdown-toggle::after { display: none; }
  .nav-dropdown-menu {
    position: static !important; transform: none !important;
    min-width: 0; margin: 2px 0 8px; padding: 6px;
    border-radius: 14px; box-shadow: none; background: #f7fafe;
  }
  .nav-dropdown-menu .dropdown-item { padding: 8px; }
  .nav-dd-icon { flex-basis: 34px; width: 34px; height: 34px; font-size: 14px; }
}

/* Header Donate Now as a link */
a.header-donate-now { text-decoration: none; }
a.header-donate-now.is-current { background: var(--orange-dark); border-color: var(--orange-dark); }

@media (prefers-reduced-motion: reduce) {
  .nav-caret { transition: none; }
  .nav-dropdown:hover > .nav-dropdown-menu, .nav-dropdown:focus-within > .nav-dropdown-menu { animation: none; }
}