/* ============================================================
   Shared mobile navigation — load AFTER page-specific CSS
   Works for index (nav + div.nav-links) and subpages (navbar + ul)
   ============================================================ */

@media (max-width: 768px) {
  html {
    overflow-x: hidden;
  }

  body.nav-open {
    overflow: hidden;
    touch-action: none;
  }

  body.nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 140;
  }

  /* ── Header bar ── */
  nav,
  .navbar {
    padding: 12px 16px !important;
    gap: 12px;
    min-width: 0;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    z-index: 150;
  }

  nav.scrolled,
  .navbar.scrolled {
    padding: 10px 16px !important;
  }

  .logo {
    min-width: 0;
    flex: 1;
  }

  .logo img {
    height: 40px;
    width: 40px;
    flex-shrink: 0;
  }

  .logo-text .top {
    font-size: 11px;
    letter-spacing: 1px;
  }

  .logo-text .bottom {
    font-size: 9px;
    letter-spacing: 0.5px;
  }

  .hamburger {
    display: flex;
    flex-shrink: 0;
    margin-left: auto;
  }

  /* Donate in header row — move into drawer on subpages */
  .navbar > .donate-btn {
    display: none;
  }

  body.nav-open .navbar > .donate-btn {
    display: block;
    position: fixed;
    bottom: max(20px, env(safe-area-inset-bottom));
    right: 16px;
    width: calc(min(300px, 88vw) - 32px);
    z-index: 160;
    text-align: center;
    padding: 14px 20px;
    box-sizing: border-box;
    margin: 0;
  }

  /* ── Slide-in drawer ── */
  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    width: min(300px, 88vw);
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 72px 24px 96px;
    background: #ffffff;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch !important;
    gap: 0 !important;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
    z-index: 150;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    list-style: none;
    pointer-events: none;
  }

  body.nav-open .nav-links {
    transform: translateX(0);
    pointer-events: auto;
  }

  /* List wrappers (about / cause pages) */
  .nav-links > li {
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Top-level text links */
  .nav-links > a:not(.nav-cta),
  .nav-links > li > a {
    display: block;
    width: 100%;
    padding: 14px 0;
    font-size: 17px;
    font-weight: 400;
    color: #444;
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    text-decoration: none;
    box-sizing: border-box;
  }

  .nav-links a.active,
  .nav-links .active {
    color: #2b8fbf;
  }

  /* Donate CTA inside drawer (index page) */
  .nav-links .nav-cta {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 14px 24px !important;
    text-align: center;
    border-bottom: none !important;
    box-sizing: border-box;
  }

  /* Dropdown rows */
  .nav-links .nav-dropdown,
  .nav-links > li.nav-dropdown {
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 14px 0;
    box-sizing: border-box;
  }

  .nav-dropdown-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 17px;
    font-weight: 400;
    color: #444;
    text-align: left;
    padding: 0;
    box-sizing: border-box;
  }

  .nav-dropdown-toggle.active,
  .nav-dropdown.open .nav-dropdown-toggle {
    color: #2b8fbf;
  }

  /* Disable desktop hover underline in drawer */
  .nav-links a::after {
    display: none !important;
  }

  .nav-dropdown-menu {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 6px 0 2px 12px !important;
    margin: 0 !important;
    min-width: unset !important;
    display: none;
    border-radius: 0;
    list-style: none;
  }

  .nav-dropdown.open .nav-dropdown-menu {
    display: block;
  }

  .nav-dropdown-menu > li {
    list-style: none;
  }

  .nav-dropdown-menu a {
    display: block;
    font-size: 15px !important;
    padding: 10px 0 !important;
    border-radius: 0 !important;
    text-align: left;
    color: #555;
  }

  .nav-dropdown-menu a:hover,
  .nav-dropdown-menu a.active {
    background: transparent !important;
    color: #2b8fbf;
  }
}

@media (max-width: 480px) {
  nav,
  .navbar {
    padding: 10px 14px !important;
  }

  nav.scrolled,
  .navbar.scrolled {
    padding: 8px 14px !important;
  }

  .logo-text .top {
    font-size: 10px;
  }

  .logo-text .bottom {
    font-size: 8px;
  }

  .nav-links {
    width: min(280px, 92vw);
    padding: 68px 20px 88px;
  }

  body.nav-open .navbar > .donate-btn {
    width: calc(min(280px, 92vw) - 40px);
    right: 14px;
  }
}