/* ==========================================================================
   Khulna Menu Bar — app-shell + fixed nav
   Deep blue / white / emerald-accent theme
   ========================================================================== */

:root {
	--kmb-primary: #0A2647;
	--kmb-bg: #FFFFFF;
	--kmb-accent: #10B981;
	--kmb-nav-height: 64px;
	--kmb-safe-top: env(safe-area-inset-top, 0px);
	--kmb-safe-bottom: env(safe-area-inset-bottom, 0px);
	--kmb-topbar-height: 48px;
	--kmb-topbar-bg: #1565F0;

	/* Pre-computed total rendered heights (bar + whatever safe-area inset
	   it swallows), used to reserve constant space for each bar. Kept as
	   named vars so they're only ever defined once, in one place. */
	--kmb-topbar-total: calc(var(--kmb-topbar-height) + var(--kmb-safe-top));
	--kmb-nav-mobile-top-total: calc(var(--kmb-nav-height) + var(--kmb-safe-top) + var(--kmb-safe-bottom));
	--kmb-nav-mobile-bottom-total: calc(var(--kmb-nav-height) + var(--kmb-safe-bottom));
	--kmb-nav-desktop-total: var(--kmb-nav-height);
}

/* Prevent the page itself from zooming or scrolling — the inner
   #kmb-app-scroll div becomes the only scroll surface, like a native app. */
html, body {
	height: 100%;
	overscroll-behavior: none;
	touch-action: pan-y;
}

body {
	margin: 0;
	overflow: hidden;
	background: var(--kmb-bg);
}

#kmb-app-shell {
	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
	background: var(--kmb-bg);
}

#kmb-app-scroll {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-y: contain;
}

/* --------------------------------------------------------------------
   App-shell overlay mode (only active when JS/PHP wraps things in
   #kmb-app-shell — the "lock viewport" mode).

   The topbar/nav used to be flex siblings of #kmb-app-scroll, so hiding
   one of them (animating its margin to collapse the reserved space)
   forced the browser to resize and re-layout the scroll container on
   every animation frame — *while the user's finger was still scrolling
   it*. That fight between "the box is resizing" and "the box is being
   scrolled" is what showed up as the bar vibrating/jumping.

   Fix: the bars become plain absolutely-positioned overlays instead of
   flex items. #kmb-app-scroll fills the whole shell and reserves a
   constant padding for each bar — a padding that never changes whether
   the bar is shown or hidden. Hiding a bar then only ever animates its
   own `transform` (GPU-composited, doesn't touch layout at all), and
   just reveals more of the content that was already sitting there.
   That's what makes the hide/show buttery-smooth with zero shake.
   -------------------------------------------------------------------- */
#kmb-app-shell {
	display: block;
}

#kmb-app-shell #kmb-app-scroll {
	position: absolute;
	inset: 0;
}

#kmb-app-shell .kmb-topbar,
#kmb-app-shell .kmb-nav {
	position: absolute;
	left: 0;
	right: 0;
	transition: transform 0.28s ease;
	will-change: transform;
}

#kmb-app-shell .kmb-topbar {
	top: 0;
}

/* The base "hide" rules further down still set margin-top/margin-bottom
   on `.kmb-bar-hidden` for the non-shell fallback below. Inside the
   shell, the bar is an overlay now, so any leftover margin would just
   shove it out of position — neutralize it here. */
#kmb-app-shell .kmb-topbar.kmb-bar-hidden,
#kmb-app-shell .kmb-nav.kmb-bar-hidden {
	margin: 0;
}

@media (min-width: 783px) {
	#kmb-app-shell.kmb-shell--topbar #kmb-app-scroll { padding-top: var(--kmb-topbar-total); }
	#kmb-app-shell.kmb-shell--nav-desktop-top #kmb-app-scroll { padding-top: var(--kmb-nav-desktop-total); }
	#kmb-app-shell.kmb-shell--topbar.kmb-shell--nav-desktop-top #kmb-app-scroll {
		padding-top: calc(var(--kmb-topbar-total) + var(--kmb-nav-desktop-total));
	}
	#kmb-app-shell.kmb-shell--nav-desktop-bottom #kmb-app-scroll { padding-bottom: var(--kmb-nav-desktop-total); }

	#kmb-app-shell .kmb-nav.kmb-desktop-top { top: 0; bottom: auto; }
	#kmb-app-shell.kmb-shell--topbar .kmb-nav.kmb-desktop-top { top: var(--kmb-topbar-total); }
	#kmb-app-shell .kmb-nav.kmb-desktop-bottom { bottom: 0; top: auto; }
}

@media (max-width: 782px) {
	#kmb-app-shell.kmb-shell--topbar #kmb-app-scroll { padding-top: var(--kmb-topbar-total); }
	#kmb-app-shell.kmb-shell--nav-mobile-top #kmb-app-scroll { padding-top: var(--kmb-nav-mobile-top-total); }
	#kmb-app-shell.kmb-shell--topbar.kmb-shell--nav-mobile-top #kmb-app-scroll {
		padding-top: calc(var(--kmb-topbar-total) + var(--kmb-nav-mobile-top-total));
	}
	#kmb-app-shell.kmb-shell--nav-mobile-bottom #kmb-app-scroll { padding-bottom: var(--kmb-nav-mobile-bottom-total); }

	#kmb-app-shell .kmb-nav.kmb-mobile-top { top: 0; bottom: auto; }
	#kmb-app-shell.kmb-shell--topbar .kmb-nav.kmb-mobile-top { top: var(--kmb-topbar-total); }
	#kmb-app-shell .kmb-nav.kmb-mobile-bottom { bottom: 0; top: auto; }
}

/* --------------------------------------------------------------------
   Top header panel — separate from the main nav bar. Only prints on
   pages the admin selects. Blank/blue placeholder for now; put real
   content inside #kmb-topbar-inner later.
   -------------------------------------------------------------------- */
.kmb-topbar {
	flex: 0 0 auto;
	height: var(--kmb-topbar-height);
	background: var(--kmb-topbar-bg);
	padding-top: var(--kmb-safe-top);
	box-sizing: content-box;
	z-index: 9998;
}

.kmb-topbar-inner {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 2px;
}

/* --------------------------------------------------------------------
   Hamburger button (3-line menu toggle) inside the top header panel
   -------------------------------------------------------------------- */
.kmb-hamburger {
	appearance: none;
	background: transparent;
	border: 0;
	width: 40px;
	height: 44px;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	cursor: pointer;
}

.kmb-hamburger span {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: #FFFFFF;
	transition: transform 0.22s ease, opacity 0.22s ease;
}

/* Morph into an "X" while the drawer is open */
.kmb-hamburger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.kmb-hamburger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}
.kmb-hamburger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------------------
   Search box — sits between the hamburger and the messages icon.
   Placeholder only for now; no search behaviour wired up yet.

   Everything below is written defensively (scoped under #kmb-topbar-inner
   for extra specificity, box-sizing forced, !important on the handful of
   properties themes love to reset) because the active theme's own
   input/icon styles were leaking in and blowing the box up to its
   default (tall, square-cornered, white-on-white) look instead of ours.
   -------------------------------------------------------------------- */
#kmb-topbar-inner .kmb-topbar-search {
	box-sizing: border-box !important;
	flex: 1 1 auto;
	min-width: 0;
	display: flex !important;
	align-items: center;
	gap: 8px;
	height: 36px !important;
	max-height: 36px;
	margin: 0 4px;
	padding: 0 10px !important;
	border-radius: 10px !important;
	background: #FFFFFF !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
	overflow: hidden;
}

#kmb-topbar-inner .kmb-topbar-search-icon {
	box-sizing: content-box !important;
	flex: 0 0 auto;
	position: static !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	color: #8A8F98 !important;
	opacity: 1;
	font-size: 16px !important;
	width: 16px !important;
	height: 16px !important;
	line-height: 16px !important;
	margin: 0 !important;
	padding: 0 !important;
	top: auto !important;
	transform: none !important;
}

#kmb-topbar-inner input.kmb-topbar-search-input {
	box-sizing: border-box !important;
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	height: 100% !important;
	max-height: 100%;
	appearance: none !important;
	-webkit-appearance: none !important;
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	color: #1F2430 !important;
	font-size: 14px !important;
	line-height: normal !important;
	font-family: inherit;
	vertical-align: middle;
}

#kmb-topbar-inner input.kmb-topbar-search-input::placeholder {
	color: #9AA0A8 !important;
	opacity: 1 !important;
}

/* --------------------------------------------------------------------
   People-search dropdown — only appears when Khulna Social is active
   and the visitor is logged in (see initPeopleSearch() in
   kmb-script.js). Anchored to the search box itself so it tracks the
   box wherever the topbar happens to be docked.
   -------------------------------------------------------------------- */
#kmb-topbar-inner .kmb-topbar-search {
	position: relative !important;
}

.kmb-people-results {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	max-height: 320px;
	overflow-y: auto;
	background: #FFFFFF;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	z-index: 9999;
}

.kmb-people-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	text-decoration: none !important;
	color: #1F2430 !important;
}

.kmb-people-item:hover,
.kmb-people-item:focus {
	background: #F2F4F7;
}

.kmb-people-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
	background: #E4E7EC;
}

.kmb-people-name {
	font-size: 14px;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.kmb-people-empty {
	padding: 14px;
	font-size: 13px;
	color: #8A8F98;
	text-align: center;
}

/* Grouped global-search results (People / Products / Posts / ...) — each
   contributor plugin gets its own labelled section inside the same
   dropdown, see class-kmb-search.php. */
.kmb-results-group + .kmb-results-group {
	border-top: 1px solid #EEF0F3;
}

.kmb-results-group-label {
	padding: 8px 14px 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #8A8F98;
}

.kmb-people-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.kmb-people-subtitle {
	font-size: 12px;
	line-height: 1.3;
	color: #8A8F98;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --------------------------------------------------------------------
   Blood-donation button — sits between the search box and the messages
   icon. Only printed when a URL is set on the Settings page.
   -------------------------------------------------------------------- */
.kmb-blood {
	appearance: none;
	background: transparent;
	border: 0;
	width: 34px;
	height: 46px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	cursor: pointer;
	text-decoration: none !important;
}

.kmb-blood-icon-wrap {
	position: relative;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.kmb-blood-icon {
	width: 22px;
	height: 22px;
	color: #FF3B30;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

.kmb-blood:active .kmb-blood-icon {
	opacity: 0.7;
}

.kmb-blood-badge {
	position: absolute;
	top: -4px;
	right: -6px;
	min-width: 15px;
	height: 15px;
	padding: 0 3px;
	border-radius: 999px;
	background: #E23744;
	color: #FFFFFF;
	font-size: 10px;
	font-weight: 700;
	line-height: 15px;
	text-align: center;
}

.kmb-blood-badge[hidden] {
	display: none;
}

/* --------------------------------------------------------------------
   Messages button — placeholder icon on the opposite side of the
   hamburger. No behaviour wired up yet; just sits there as a button
   ready for a click handler later.
   -------------------------------------------------------------------- */
.kmb-messages {
	appearance: none;
	background: transparent;
	border: 0;
	width: 40px;
	height: 46px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.kmb-messages-icon {
	width: 29px;
	height: 29px;
	color: #FFFFFF;
}

.kmb-messages:active .kmb-messages-icon {
	opacity: 0.7;
}

/* --------------------------------------------------------------------
   Hamburger dropdown — small glassy panel anchored under the button,
   not a full-height sidebar.
   -------------------------------------------------------------------- */
.kmb-hamburger-overlay {
	position: fixed;
	inset: 0;
	background: transparent;
	z-index: 10000;
}

.kmb-hamburger-menu {
	position: fixed;
	top: calc(var(--kmb-safe-top) + var(--kmb-topbar-height) + 8px);
	left: 10px;
	width: 210px;
	max-width: 70vw;
	background: rgba(255, 255, 255, 0.55);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 16px;
	z-index: 10001;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
	transform-origin: top left;
	transform: scale(0.92) translateY(-6px);
	opacity: 0;
	transition: transform 0.18s ease, opacity 0.18s ease;
	overflow: hidden;
}

.kmb-hamburger-menu.is-open {
	transform: scale(1) translateY(0);
	opacity: 1;
}

.kmb-hamburger-menu-list {
	list-style: none;
	margin: 0;
	padding: 6px;
}

.kmb-hamburger-menu-item a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 12px;
	text-decoration: none;
	color: var(--kmb-primary);
	font-size: 14.5px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	border-radius: 10px;
}

.kmb-hamburger-menu-item + .kmb-hamburger-menu-item {
	margin-top: 2px;
}

.kmb-hamburger-menu-item a:active {
	background: rgba(0, 0, 0, 0.08);
}

.kmb-hamburger-menu-item .kmb-icon {
	font-size: 18px;
	width: 18px;
	height: 18px;
	line-height: 18px;
	color: var(--kmb-topbar-bg);
	flex-shrink: 0;
}

.kmb-hamburger-menu-item .kmb-icon-blood {
	color: #FF3B30;
}

/* --------------------------------------------------------------------
   Nav bar — shared styles
   -------------------------------------------------------------------- */
.kmb-nav {
	flex: 0 0 auto;
	background: var(--kmb-primary);
	z-index: 9999;
}

.kmb-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: stretch;
	justify-content: space-around;
	height: var(--kmb-nav-height);
}

.kmb-nav-item {
	flex: 1 1 0;
	display: flex;
}

.kmb-nav-item a {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	text-decoration: none;
	color: rgba(255, 255, 255, 0.65);
	font-size: 11px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	transition: color 0.15s ease, transform 0.15s ease;
}

.kmb-nav-item .kmb-icon {
	font-size: 22px;
	width: 22px;
	height: 22px;
	line-height: 22px;
}

.kmb-nav-item.is-active a {
	color: #FFFFFF;
}

.kmb-nav-item.is-active .kmb-icon {
	color: var(--kmb-accent);
	transform: translateY(-1px);
}

.kmb-nav-item a:active {
	transform: scale(0.94);
}

/* Small "you are here" dot for a bit of positive-feedback polish */
.kmb-nav-item.is-active a::after {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--kmb-accent);
	margin-top: 1px;
}

/* --------------------------------------------------------------------
   Scroll-to-hide — Facebook-newsfeed style. Scrolling down hides both
   bars, scrolling up brings them back. Direction of the hide-slide
   depends on whether a bar sits at the top or bottom.

   NOTE: this margin-collapse version is the fallback for pages that
   don't use the #kmb-app-shell wrapper (i.e. "lock viewport" is off,
   so the bars sit in normal page flow). Inside #kmb-app-shell, the
   rules above turn the bars into absolute-positioned overlays and
   override this margin entirely — see the comment above for why.

   IMPORTANT: transform alone only moves a box visually — it doesn't
   change the space the box reserves in the flex column, so the
   "hidden" bar used to leave behind a blank gap and the scroll area
   never grew to fill it. To actually collapse that reserved space we
   pull the box out of flow with a negative margin equal to its own
   rendered height (bar height + any safe-area inset it adds), applied
   on the same edge the bar slides toward. We deliberately use fixed
   px values (via the height custom properties) rather than percentage
   margins here, because vertical margin percentages resolve against
   the containing block's *width*, not its height, so a %-based margin
   could never track the bar's actual height correctly.
   -------------------------------------------------------------------- */
.kmb-topbar,
.kmb-nav {
	transition: transform 0.28s ease, margin-top 0.28s ease, margin-bottom 0.28s ease;
	will-change: transform, margin-top, margin-bottom;
}

/* Topbar always sits at the top and slides upward. */
.kmb-topbar.kmb-bar-hidden {
	transform: translateY(-100%);
	margin-bottom: calc(-1 * (var(--kmb-topbar-height) + var(--kmb-safe-top)));
}

@media (min-width: 783px) {
	.kmb-nav.kmb-bar-hidden.kmb-desktop-top {
		transform: translateY(-100%);
		margin-bottom: calc(-1 * var(--kmb-nav-height));
	}
	.kmb-nav.kmb-bar-hidden.kmb-desktop-bottom {
		transform: translateY(100%);
		margin-top: calc(-1 * var(--kmb-nav-height));
	}
}

@media (max-width: 782px) {
	/* Mobile nav always carries the bottom safe-area padding (see the
	   .kmb-nav padding-bottom rule below), regardless of whether it's
	   docked top or bottom, so both variants must fold that inset in
	   too or a sliver of the old padding gap would still survive. */
	.kmb-nav.kmb-bar-hidden.kmb-mobile-top {
		transform: translateY(-100%);
		margin-bottom: calc(-1 * (var(--kmb-nav-height) + var(--kmb-safe-top) + var(--kmb-safe-bottom)));
	}
	.kmb-nav.kmb-bar-hidden.kmb-mobile-bottom {
		transform: translateY(100%);
		margin-top: calc(-1 * (var(--kmb-nav-height) + var(--kmb-safe-bottom)));
	}
}

/* --------------------------------------------------------------------
   Positioning — desktop vs mobile, top vs bottom
   -------------------------------------------------------------------- */

/* Order controls whether the nav sits above or below the scroll area.
   Gated by breakpoint so desktop/mobile classes don't fight each other. */
@media (min-width: 783px) {
	.kmb-desktop-top { order: -1; }
	.kmb-desktop-bottom { order: 1; }
	.kmb-nav-list { justify-content: center; gap: 8px; }
	.kmb-nav-item { flex: 0 0 auto; }
	.kmb-nav-item a { flex-direction: row; padding: 0 18px; font-size: 14px; }
	.kmb-nav-item .kmb-icon { font-size: 18px; width: 18px; height: 18px; margin-right: 6px; }
	.kmb-nav-item.is-active a::after { display: none; }
}

@media (max-width: 782px) {
	.kmb-mobile-top { order: -1; }
	.kmb-mobile-bottom { order: 1; }
	.kmb-nav {
		padding-bottom: var(--kmb-safe-bottom);
	}
}

/* Respect the top notch/status-bar area when the bar sits at the top */
.kmb-desktop-top, .kmb-mobile-top {
	padding-top: var(--kmb-safe-top);
}