/*
 * Shared public-site navigation.
 * This deliberately mirrors the index page navbar without changing page content.
 */
#navbar,
#navbar *,
#mobileNav,
#mobileNav * {
 box-sizing: border-box;
}

#navbar {
 position: fixed !important;
 top: 0 !important;
 left: 0 !important;
 right: 0 !important;
 z-index: 1100 !important;
 width: 100% !important;
 min-height: 72px;
 height: auto !important;
 margin: 0 !important;
 padding: 10px clamp(12px, 2vw, 28px) !important;
 display: flex !important;
 align-items: center !important;
 justify-content: space-between !important;
 gap: 4px !important;
 background: linear-gradient(135deg, #051e3a 0%, #030f1f 100%) !important;
 color: #fff !important;
 box-shadow: none;
 transform: none !important;
 opacity: 1 !important;
 animation: none !important;
 transition: background 0.38s cubic-bezier(0.22, 1, 0.36, 1), padding 0.38s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

#navbar.scrolled {
 background: rgba(6, 44, 83, 0.97) !important;
 backdrop-filter: blur(20px);
 -webkit-backdrop-filter: blur(20px);
 box-shadow: 0 4px 32px rgba(2, 12, 50, 0.28);
 padding: 8px clamp(16px, 3vw, 32px) !important;
}

#navbar a { text-decoration: none !important; }

/* Grid brand layout — logo and text are two non-overlapping columns */
#navbar .nav-brand {
 display: grid !important;
 grid-template-columns: auto minmax(0, 1fr);
 align-items: center !important;
 gap: 8px !important;
 flex-shrink: 0;
 min-width: 0;
 max-width: clamp(260px, 34vw, 460px);
}

#navbar .nav-logo {
 display: block !important;
 width: 45px !important;
 height: 45px !important;
 max-width: none !important;
 border: 2px solid rgba(255, 255, 255, 0.15) !important;
 border-radius: 50% !important;
 background: #fff !important;
 object-fit: cover !important;
 flex-shrink: 0;
 transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

#navbar .nav-brand:hover .nav-logo { transform: scale(1.06); }

#navbar .nav-brand-logo {
 display: flex !important;
 flex-direction: column;
 align-items: center;
 flex-shrink: 0;
 gap: 2px;
}

#navbar .nav-brand-text {
 display: flex !important;
 flex-direction: column;
 min-width: 0;
 line-height: 1;
 align-self: center;
}

#navbar .nav-brand-name {
 color: #fff !important;
 font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
 font-size: clamp(13px, 1.5vw, 19px) !important;
 font-weight: 800 !important;
 letter-spacing: -0.01em;
 line-height: 1.25;
 white-space: nowrap;
}

#navbar .nav-brand-tagline {
 color: rgba(255, 255, 255, 0.7) !important;
 font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
 font-size: clamp(8px, 0.7vw, 10px) !important;
 font-weight: 500 !important;
 letter-spacing: 0.02em;
 line-height: 1.3;
 white-space: nowrap;
 opacity: 0.8;
}

#navbar .nav-brand-reg {
 color: #f0c64a !important;
 font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
 font-size: clamp(9.5px, 0.9vw, 11.5px) !important;
 line-height: 1.2;
 margin-top: 3px;
 letter-spacing: 0.04em;
 opacity: 0.85;
 white-space: nowrap;
}

#navbar .nav-links {
 display: flex !important;
 align-items: center !important;
 flex: 0 0 auto;
 flex-wrap: nowrap;
 gap: 4px !important;
 min-width: 0;
 margin: 0 8px !important;
}

#navbar .nav-links a {
 display: inline-block !important;
 color: rgba(255, 255, 255, 0.82) !important;
 font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
 font-size: clamp(10.5px, 0.85vw, 12.5px) !important;
 font-weight: 600 !important;
 line-height: normal;
 margin: 0 !important;
 padding: 6px 14px !important;
 border-radius: 8px;
 white-space: nowrap;
 transition: background 0.38s cubic-bezier(0.22, 1, 0.36, 1), color 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

#navbar .nav-links a:hover { background: rgba(255, 255, 255, 0.08); color: #fff !important; }
#navbar .nav-links a.active { background: rgba(255, 255, 255, 0.07); color: #f0c64a !important; }

#navbar .nav-right {
 display: flex !important;
 align-items: center !important;
 flex: 0 0 auto;
 gap: 6px !important;
 flex-shrink: 0;
}

#navbar .nav-cart {
 display: inline-block !important;
 padding: 5px 11px !important;
 border: 1px solid rgba(255, 255, 255, 0.12) !important;
 border-radius: 99px;
 background: rgba(255, 255, 255, 0.08) !important;
 color: rgba(255, 255, 255, 0.82) !important;
 font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
 font-size: 12px !important;
 font-weight: 700 !important;
 line-height: normal;
 white-space: nowrap;
}

#navbar .nav-donate-btn {
 display: inline-flex !important;
 align-items: center;
 gap: 5px;
 padding: 7px 14px !important;
 border: 0 !important;
 border-radius: 99px;
 background: linear-gradient(135deg, #c9930a, #f0c64a) !important;
 color: #03182b !important;
 font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
 font-size: 12px !important;
 font-weight: 800 !important;
 line-height: normal;
 white-space: nowrap;
}

#navbar .nav-login-btn {
 display: inline-flex !important;
 align-items: center;
 gap: 5px;
 padding: 6px 14px !important;
 border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
 border-radius: 99px;
 background: transparent !important;
 color: #fff !important;
 font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
 font-size: 12px !important;
 font-weight: 700 !important;
 line-height: normal;
 white-space: nowrap;
}

#navbar .nav-hamburger {
 display: none !important;
 width: 36px;
 height: 36px;
 padding: 8px;
 border: 1px solid rgba(255, 255, 255, 0.12);
 border-radius: 8px;
 background: rgba(255, 255, 255, 0.08);
 flex-direction: column;
 justify-content: center;
 gap: 5px;
}

#navbar .nav-hamburger span {
 display: block;
 width: 100%;
 height: 2px;
 border-radius: 99px;
 background: #fff;
 transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s;
}

#navbar .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#navbar .nav-hamburger.open span:nth-child(2) { opacity: 0; }
#navbar .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

#mobileNav {
 display: none;
 position: fixed;
 top: 72px;
 left: 0;
 right: 0;
 z-index: 1090;
 flex-direction: column;
 gap: 6px;
 padding: 18px 24px 28px;
 border-top: 1px solid rgba(255, 255, 255, 0.08);
 background: rgba(6, 44, 83, 0.98);
 backdrop-filter: blur(20px);
 -webkit-backdrop-filter: blur(20px);
}

#mobileNav.open { display: flex !important; }

#mobileNav a {
 display: block;
 padding: 11px 14px;
 border-radius: 10px;
 color: rgba(255, 255, 255, 0.85) !important;
 font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
 font-size: 15px !important;
 font-weight: 600 !important;
 line-height: normal;
 text-decoration: none !important;
}

#mobileNav a:hover { background: rgba(255, 255, 255, 0.08); color: #fff !important; }
#mobileNav .nav-mobile-donate { margin-top: 10px; border-radius: 99px; background: linear-gradient(135deg, #c9930a, #f0c64a); color: #03182b !important; font-weight: 800 !important; text-align: center; }

@media (max-width: 1280px) {
 #navbar .nav-cart { display: none !important; }
}

@media (max-width: 1120px) {
 #navbar .nav-links a:nth-child(5) { display: none !important; }
 #navbar .nav-brand-reg { display: none; }
 #navbar .nav-brand-tagline { display: none; }
 #navbar .nav-brand-name { font-size: clamp(11px, 1.2vw, 14px) !important; }
 #navbar .nav-brand { max-width: clamp(120px, 15vw, 200px); }
 #navbar .nav-links a { padding: 5px 6px !important; font-size: 11px !important; }
 #navbar .nav-donate-btn { padding: 6px 11px !important; font-size: 11px !important; }
}

@media (max-width: 1000px) {
 #navbar .nav-links a[href*="contact"] { display: none !important; }
 #navbar .nav-links a { padding: 5px !important; font-size: 10.5px !important; }
 #navbar .nav-brand { max-width: clamp(100px, 13vw, 170px); }
 #navbar .nav-donate-btn { padding: 5px 9px !important; font-size: 10.5px !important; }
 #navbar { padding: 8px clamp(8px, 1.2vw, 18px) !important; gap: 2px !important; }
}

@media (max-width: 860px) {
 #navbar .nav-links a[href*="about"] { display: none !important; }
 #navbar .nav-links a { padding: 4px 5px !important; font-size: 10px !important; }
 #navbar .nav-donate-btn { padding: 5px 8px !important; font-size: 10px !important; }
}

@media (max-width: 768px) {
 #navbar .nav-links,
 #navbar .nav-donate-btn { display: none !important; }
 #navbar .nav-hamburger { display: flex !important; }
}

/* The legacy catalogue pages previously used in-flow/sticky headers. */
body.legacy-navbar-layout { padding-top: 72px !important; }

/* This page keeps its fixed donor-status ribbon above the shared navigation. */
body.navbar-under-ribbon #navbar { top: 36px !important; }
body.navbar-under-ribbon #mobileNav { top: 108px; }