/* ==========================================================================
   NUWEBIZ header & navigation variants
   Scoped by body classes set in Appearance → Customize → NUWEBIZ Theme
   Options → Header & Navigation. With no class present, the original
   (Classic) header renders untouched.
   ========================================================================== */

/* ---- Sticky off: header stays at the very top, does not follow scroll --- */
body.nw-sticky-off #header { position: absolute; }
body.nw-sticky-off #header.scrolled .navbar { padding: 10px 0; box-shadow: none; }

/* ---- Top info bar hidden -------------------------------------------------- */
body.nw-topbar-off .topbar { display: none; }


/* ==========================================================================
   STYLE 2 — Centered logo (logo on top, menu on its own row underneath)
   ========================================================================== */
@media (min-width: 1025px) {
	body.nw-hs-centered .navbar .container {
		flex-direction: column; gap: 6px; padding-top: 4px; padding-bottom: 2px;
	}
	body.nw-hs-centered .logo { justify-content: center; }
	body.nw-hs-centered .logo-img { height: 52px; }
	body.nw-hs-centered .nav-links {
		justify-content: center; width: 100%;
		border-top: 1px solid var(--border); padding-top: 6px;
	}
	body.nw-hs-centered .nav-actions {
		position: absolute; right: 22px; top: 14px;
	}
	body.nw-hs-centered .navbar { position: relative; }
	body.nw-hs-centered .nav-link {
		border-radius: 0; background: none !important;
		border-bottom: 2px solid transparent; padding: 8px 13px;
	}
	body.nw-hs-centered .nav-link:hover,
	body.nw-hs-centered .nav-link.active {
		color: var(--m); border-bottom-color: var(--gold);
	}
	body.nw-hs-centered .dropdown { left: 50%; transform: translate(-50%, -8px); }
	body.nw-hs-centered .nav-item:hover .dropdown { transform: translate(-50%, 0); }
	/* Compact when scrolled */
	body.nw-hs-centered #header.scrolled .logo-img { height: 40px; }
	body.nw-hs-centered #header.scrolled .nav-links { padding-top: 3px; }
}

/* ==========================================================================
   STYLE 3 — Dark green bar (solid NUWEBIZ green, gold accents)
   ========================================================================== */
body.nw-hs-dark .navbar {
	background: var(--m);
	border-bottom: 2px solid var(--gold);
	backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.nw-hs-dark .logo-img { background: #fff; padding: 4px 6px; border-radius: 6px; }
body.nw-hs-dark .logo-name { color: #fff; }
body.nw-hs-dark .logo-tag { color: rgba(255, 255, 255, .65); }
body.nw-hs-dark .nav-link { color: rgba(255, 255, 255, .88); }
body.nw-hs-dark .nav-link:hover,
body.nw-hs-dark .nav-link.active { color: var(--gold); background: rgba(255, 255, 255, .08); }
body.nw-hs-dark .dropdown {
	background: var(--m); border-color: rgba(255, 255, 255, .12);
	border-top-color: var(--gold);
}
body.nw-hs-dark .dropdown a { color: rgba(255, 255, 255, .85); }
body.nw-hs-dark .dropdown a:hover { color: var(--gold); background: rgba(255, 255, 255, .06); }
body.nw-hs-dark .icon-btn {
	background: rgba(255, 255, 255, .1); color: #fff;
	border-color: rgba(255, 255, 255, .2);
}
body.nw-hs-dark .icon-btn:hover { background: var(--gold); color: var(--m); border-color: var(--gold); }
body.nw-hs-dark .hamburger { background: var(--gold); }
body.nw-hs-dark .hamburger span { background: var(--m); }
body.nw-hs-dark .topbar { background: #14291d; }
body.nw-hs-dark #header.scrolled .navbar { box-shadow: 0 6px 22px rgba(0, 0, 0, .35); }
body.nw-hs-dark .nav-donate-desktop { box-shadow: 0 3px 10px rgba(0, 0, 0, .3); }
body.nw-hs-dark .nav-donate-desktop:hover { background: #fff; color: var(--m); }

/* ==========================================================================
   Widget areas (Footer Widgets / Page Sidebar) — only visible once an admin
   actually adds a widget; styled to match the rest of the site.
   ========================================================================== */
.footer-extra .nw-widget-title {
	font-family: 'DM Serif Display', serif; font-size: 15px; color: #fff;
	margin: 0 0 8px;
}
.footer-extra .nw-widget { line-height: 1.7; }
.footer-extra .nw-widget a { color: rgba(255, 255, 255, .8); }
.footer-extra .nw-widget a:hover { color: var(--gold); }
aside .nw-widget {
	background: #fff; border: 1px solid var(--border); border-radius: 10px;
	padding: 18px; margin-bottom: 16px; font-size: 13px; color: var(--tl); line-height: 1.7;
}
aside .nw-widget-title {
	font-family: 'DM Serif Display', serif; font-size: 15px; color: var(--m);
	margin: 0 0 10px;
}

/* ==========================================================================
   Elementor-built pages/posts/programs — no NUWEBIZ ".page" flex wrapper
   here (see inc/elementor.php), just enough top clearance for the fixed
   header. Elementor's own CSS handles everything else.
   ========================================================================== */
.elementor-nw-page,
.nw-builder-canvas {
	padding-top: 96px;
	min-height: 60vh;
}
@media (max-width: 780px) {
	.elementor-nw-page,
	.nw-builder-canvas { padding-top: 76px; }
}

/* Article hashtag pills */
.nw-hashtags { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.nw-hashtag {
	background: var(--bg2); color: var(--m); font-size: 12px; font-weight: 600;
	padding: 5px 12px; border-radius: 999px; text-decoration: none;
	border: 1px solid var(--border); transition: var(--t);
}
.nw-hashtag:hover { background: var(--m); color: #fff; border-color: var(--m); }

/* ==========================================================================
   Staff profile side panel — slides in from the right when a Leadership
   Team card is clicked (About Us page), instead of opening a separate page.
   ========================================================================== */
.staff-panel-overlay {
	position: fixed; inset: 0; background: rgba(20, 30, 25, .55);
	z-index: 4000; opacity: 0; visibility: hidden; transition: opacity .3s ease;
}
.staff-panel-overlay.open { opacity: 1; visibility: visible; }

.staff-panel {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 4001;
	width: min(420px, 92vw); background: #fff; box-shadow: -8px 0 40px rgba(0, 0, 0, .2);
	transform: translateX(100%); transition: transform .35s cubic-bezier(.2, .8, .2, 1);
	overflow-y: auto; padding: 0 0 40px;
}
.staff-panel.open { transform: translateX(0); }

.staff-panel-close {
	position: absolute; top: 14px; right: 14px; z-index: 2; width: 34px; height: 34px;
	border-radius: 50%; border: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.92);
	font-size: 15px; color: var(--m); cursor: pointer; transition: var(--t); box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.staff-panel-close:hover { background: var(--m); color: #fff; border-color: var(--m); }

.staff-panel-photo {
	width: 100%; aspect-ratio: 4/3; overflow: hidden; background: var(--bg2);
}
.staff-panel-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }

.staff-panel-body { padding: 24px 28px 0; }

.staff-panel-name {
	font-family: 'DM Serif Display', serif; font-size: 21px; color: var(--m);
	text-align: center; margin: 0 0 4px;
}
.staff-panel-role {
	text-align: center; font-size: 12px; font-weight: 700; color: var(--gold);
	letter-spacing: .3px; margin-bottom: 18px;
}
.staff-panel-bio {
	font-size: 13px; line-height: 1.9; color: var(--tm);
	border-top: 1px solid var(--border); padding-top: 16px; margin-top: 4px;
}
.staff-panel-contact {
	font-size: 13px; color: var(--tl); border-top: 1px solid var(--border);
	padding-top: 16px; margin-top: 16px;
}
.staff-panel-contact a { color: inherit; }

@media (max-width: 640px) {
	.staff-panel-body { padding: 20px 20px 0; }
}