/** ADD YOUR AWESOME CODES HERE **/

/* Zanzibar flag in navbar list (shared with includes/header.php + index.php) */
.top-navbar .navbar-nav .nav-item.flag-nav-item {
	display: flex;
	align-items: center;
	justify-content: center;
}

.top-navbar .navbar-nav .znz-flag-top-right {
	height: 40px;
	width: auto;
	display: block;
	border-radius: 4px;
}

/* Dropdowns should open on click only (no hover-open) */
.top-navbar .dropdown:not(.show):hover > .dropdown-menu,
.top-navbar .nav-item.dropdown:not(.show):hover > .dropdown-menu,
.dropdown:not(.show):hover > .dropdown-menu {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* Some existing CSS disables click on dropdown toggles; re-enable it */
.dropdown > .dropdown-toggle:active {
	pointer-events: auto !important;
}

/* Keep dropdowns hidden unless explicitly shown */
.top-navbar .nav-item.dropdown > .dropdown-menu,
.top-navbar .dropdown > .dropdown-menu,
.dropdown > .dropdown-menu {
	display: none;
}

/* Only open when Bootstrap (or our JS) sets .show */
.top-navbar .dropdown.show > .dropdown-menu,
.top-navbar .nav-item.dropdown.show > .dropdown-menu,
.dropdown.show > .dropdown-menu,
.dropdown-menu.show {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
}

/* If the cursor is hovering while open, keep it open */
.top-navbar .dropdown.show:hover > .dropdown-menu,
.top-navbar .nav-item.dropdown.show:hover > .dropdown-menu,
.dropdown.show:hover > .dropdown-menu {
	display: block !important;
}

/* Prevent "active" class from forcing dropdowns open */
.top-navbar .nav-item.dropdown.active > .dropdown-menu,
.top-navbar .dropdown.active > .dropdown-menu {
	display: none !important;
}

/* Items inside parent menus (dropdown submenus): no text shadow */
.top-navbar .navbar-nav .dropdown-menu .dropdown-item,
.top-navbar .navbar-nav .dropdown-menu .dropdown-item:hover,
.top-navbar .navbar-nav .dropdown-menu .dropdown-item:focus,
.top-navbar .navbar-nav .dropdown-menu .dropdown-item:active,
.top-navbar .navbar-nav .dropdown-menu .dropdown-item i,
.top-navbar .navbar-nav .dropdown-menu .dropdown-item:hover i,
.top-navbar .navbar-nav .dropdown-menu .dropdown-item:active i,
.top-navbar .navbar-nav #dropdown-programmes ~ .dropdown-menu .dropdown-item,
.top-navbar .navbar-nav #dropdown-academics ~ .dropdown-menu .dropdown-item,
.top-navbar .navbar-nav #dropdown-admissions ~ .dropdown-menu .dropdown-item,
.top-navbar .navbar-nav #dropdown-programmes ~ .dropdown-menu .dropdown-item:hover,
.top-navbar .navbar-nav #dropdown-academics ~ .dropdown-menu .dropdown-item:hover,
.top-navbar .navbar-nav #dropdown-admissions ~ .dropdown-menu .dropdown-item:hover,
.top-navbar .navbar-nav #dropdown-programmes ~ .dropdown-menu .dropdown-item:focus,
.top-navbar .navbar-nav #dropdown-academics ~ .dropdown-menu .dropdown-item:focus,
.top-navbar .navbar-nav #dropdown-admissions ~ .dropdown-menu .dropdown-item:focus,
.top-navbar .navbar-nav #dropdown-programmes ~ .dropdown-menu .dropdown-item:active,
.top-navbar .navbar-nav #dropdown-academics ~ .dropdown-menu .dropdown-item:active,
.top-navbar .navbar-nav #dropdown-admissions ~ .dropdown-menu .dropdown-item:active,
.top-navbar .navbar-nav [aria-labelledby="dropdown-programmes"] .dropdown-item,
.top-navbar .navbar-nav [aria-labelledby="dropdown-academics"] .dropdown-item,
.top-navbar .navbar-nav [aria-labelledby="dropdown-admissions"] .dropdown-item,
.top-navbar .navbar-nav [aria-labelledby="dropdown-programmes"] .dropdown-item:hover,
.top-navbar .navbar-nav [aria-labelledby="dropdown-academics"] .dropdown-item:hover,
.top-navbar .navbar-nav [aria-labelledby="dropdown-admissions"] .dropdown-item:hover,
.top-navbar .navbar-nav [aria-labelledby="dropdown-programmes"] .dropdown-item:active,
.top-navbar .navbar-nav [aria-labelledby="dropdown-academics"] .dropdown-item:active,
.top-navbar .navbar-nav [aria-labelledby="dropdown-admissions"] .dropdown-item:active,
.top-navbar .navbar-nav [aria-labelledby="dropdown-programmes"] .dropdown-item i,
.top-navbar .navbar-nav [aria-labelledby="dropdown-academics"] .dropdown-item i,
.top-navbar .navbar-nav [aria-labelledby="dropdown-admissions"] .dropdown-item i {
	text-shadow: none !important;
}

/* Mobile navbar + dropdown fixes */
@media (max-width: 991.98px) {
	/* Menu panel uses same --navbar-offset as body (set in js/custom.js + index.php) */

	/* Ensure header never shifts on mobile */
	.top-navbar {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		z-index: 10006 !important;
	}

	/* Hamburger: white border + three white lines inside */
	.top-navbar .navbar-toggler {
		background: transparent !important;
		border: 2px solid #ffffff !important;
		border-radius: 6px !important;
		padding: 7px 8px !important;
		box-shadow: none !important;
		color: #ffffff !important;
		display: inline-flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 5px !important;
		width: 42px !important;
		height: 38px !important;
	}

	.top-navbar .navbar-toggler .icon-bar {
		display: block !important;
		width: 22px !important;
		height: 3px !important;
		min-height: 3px !important;
		margin: 0 !important;
		background: #ffffff !important;
		background-color: #ffffff !important;
		border-radius: 2px !important;
		opacity: 1 !important;
		visibility: visible !important;
		flex-shrink: 0 !important;
	}

	.top-navbar .navbar-toggler .icon-bar + .icon-bar {
		margin-top: 0 !important;
	}

	.top-navbar .navbar-toggler:hover,
	.top-navbar .navbar-toggler:focus,
	.top-navbar .navbar-toggler:active {
		background: rgba(255, 255, 255, 0.14) !important;
		border-color: #ffffff !important;
	}

	.top-navbar .navbar-toggler:hover .icon-bar,
	.top-navbar .navbar-toggler:focus .icon-bar,
	.top-navbar .navbar-toggler:active .icon-bar {
		background: #ffffff !important;
		background-color: #ffffff !important;
		opacity: 1 !important;
	}

	.top-navbar .navbar-toggler[aria-expanded="true"] .icon-bar {
		background: #ffffff !important;
		background-color: #ffffff !important;
	}

	/* When menu is open, lock page scroll (menu will scroll instead) */
	body.nav-menu-open {
		overflow: hidden !important;
	}

	/* Turn the collapsed menu into a fixed, scrollable panel */
	.top-navbar .navbar-collapse.show,
	.top-navbar .navbar-collapse.collapsing {
		position: fixed !important;
		top: var(--navbar-offset, 80px) !important;
		left: 0 !important;
		right: 0 !important;
		max-height: calc(100vh - var(--navbar-offset, 80px)) !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		-webkit-overflow-scrolling: touch;
		scroll-behavior: auto !important;
		touch-action: pan-y !important;
		/* Promote own compositor layer (avoid transform:none which kills momentum) */
		transform: translate3d(0, 0, 0) !important;
		overscroll-behavior: contain;
		z-index: 10004 !important;
		margin: 0 !important;          /* remove gap under header */
		margin-top: 0 !important;
		border-radius: 0 !important;   /* flush with header */
		border-top: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
		padding: 0 !important;
		text-align: center !important;
		box-shadow: none !important;
		animation: none !important;
	}

	/* Stabilize the collapsed menu (avoid shaking from height/slide animations) */
	.top-navbar .navbar-collapse {
		animation: none !important;
		transition: none !important;
	}

	.top-navbar .navbar-collapse.collapsing {
		transition: none !important;
		height: auto !important;
	}

	/* Make collapsed menu fill width and be readable */
	.top-navbar .navbar-collapse {
		width: 100% !important;
	}

	.top-navbar .navbar-nav {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
	}

	/*
	 * Sidebar list order (shared DOM in includes/header.php + index.php):
	 * 1 home, 2 about, 3 programmes, 4 academics, 5 admissions, 6 contact, 7 Gallery, 8 admin, 9 flag
	 * Display: Home → Academics → About → Programmes → Admissions → Contact → Gallery → Flag → Admin (admin last)
	 */
	.top-navbar .navbar-collapse .navbar-nav {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
	}

	.top-navbar .navbar-collapse .navbar-nav > li:nth-child(1) {
		order: 10;
	} /* home */

	.top-navbar .navbar-collapse .navbar-nav > li:nth-child(4) {
		order: 20;
	} /* academics (after home) */

	.top-navbar .navbar-collapse .navbar-nav > li:nth-child(2) {
		order: 30;
	} /* about */

	.top-navbar .navbar-collapse .navbar-nav > li:nth-child(3) {
		order: 40;
	} /* programmes */

	.top-navbar .navbar-collapse .navbar-nav > li:nth-child(5) {
		order: 50;
	} /* admissions */

	.top-navbar .navbar-collapse .navbar-nav > li:nth-child(6) {
		order: 60;
	} /* contact */

	.top-navbar .navbar-collapse .navbar-nav > li:nth-child(7) {
		order: 70;
	} /* Gallery */

	.top-navbar .navbar-collapse .navbar-nav > li:nth-child(9) {
		order: 80;
	} /* flag */

	.top-navbar .navbar-collapse .navbar-nav > li:nth-child(8) {
		order: 100;
	} /* admin login — bottom of menu */

	/* Zanzibar flag inside mobile sidebar: visible, centered */
	.top-navbar .navbar-collapse .navbar-nav .nav-item.flag-nav-item {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		justify-content: center !important;
		align-items: center !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 10px 0 14px !important;
	}

	.top-navbar .navbar-collapse .navbar-nav .nav-item.flag-nav-item .flag-container-top-right,
	.top-navbar .navbar-collapse .navbar-nav .nav-item.flag-nav-item .znz-flag-top-right {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	/*
	 * Admin login in sidebar: index.php uses margin-left:auto + order:999 for desktop,
	 * which can hide or strand the button at the end of a long column menu.
	 */
	.top-navbar .navbar-collapse .navbar-nav .nav-item.admin-login-item {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		justify-content: center !important;
		align-items: center !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		flex-shrink: 0 !important;
	}

	.top-navbar .navbar-collapse .navbar-nav .admin-login-btn {
		width: 100% !important;
		max-width: none !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		box-sizing: border-box !important;
	}

	.top-navbar .navbar-nav .nav-link {
		white-space: normal !important;
		word-break: break-word !important;
	}

	/* Reduce menu item size to fit sidebar nicely */
	.top-navbar .navbar-nav .nav-link {
		padding: 12px 16px !important;
		font-size: 0.95rem !important;
		line-height: 1.2 !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		border-radius: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
		border-top: 0 !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
		box-sizing: border-box !important;
		justify-content: center !important;
		text-align: center !important;
		background: rgba(0, 0, 0, 0.12) !important;
	}

	.top-navbar .navbar-nav .nav-item,
	.top-navbar .navbar-nav .nav-item.dropdown {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		align-items: stretch !important;
	}

	.top-navbar .navbar-nav .dropdown-menu .dropdown-item {
		padding: 10px 14px !important;
		font-size: 0.92rem !important;
		line-height: 1.2 !important;
		border-radius: 0 !important;
		margin: 0 !important;
		border-bottom: 1px solid rgba(26, 35, 126, 0.08) !important;
		text-align: center !important;
	}

	.top-navbar .navbar-nav .dropdown-menu {
		text-align: center !important;
	}

	/* Disable hover-open behavior on touch/mobile */
	.dropdown:hover > .dropdown-menu {
		display: none !important;
	}

	/* Revert the "pointer-events: none" rule on mobile so taps work */
	.dropdown > .dropdown-toggle:active {
		pointer-events: auto !important;
	}

	/* Make dropdown menus render inside the flow (not absolute/offscreen) */
	.top-navbar .navbar-nav .dropdown-menu,
	.top-navbar .navbar-light .navbar-nav li .dropdown-menu,
	.top-navbar .navbar-light .navbar-nav .nav-item.dropdown .dropdown-menu,
	.navbar-nav .nav-item.dropdown .dropdown-menu,
	.dropdown-menu {
		position: static !important;
		float: none !important;
		width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
		transform: none !important;
		box-shadow: none !important;
		border-radius: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: rgba(255, 255, 255, 0.96) !important;
	}

	/* Hide the desktop dropdown "arrow" decorations when in-flow */
	.dropdown-menu::before,
	.dropdown-menu::after {
		display: none !important;
	}

	/* Keep dropdown closed unless Bootstrap (or our JS) sets .show */
	.dropdown-menu {
		display: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
	}

	.dropdown.show > .dropdown-menu,
	.dropdown-menu.show {
		display: block !important;
	}

	/* Do not auto-open submenus on "active" pages in mobile sidebar */
	.top-navbar .navbar-nav .nav-item.dropdown.active > .dropdown-menu,
	.top-navbar .navbar-nav .dropdown.active > .dropdown-menu {
		display: none !important;
	}

	.top-navbar .navbar-nav .nav-item.dropdown.active.show > .dropdown-menu,
	.top-navbar .navbar-nav .dropdown.active.show > .dropdown-menu {
		display: block !important;
	}

	/* Submenu rows */
	.dropdown-menu .dropdown-item {
		padding: 12px 16px !important;
		text-align: center !important;
	}

	.dropdown-menu .dropdown-menu .dropdown-item {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.top-navbar .navbar-nav .dropdown-toggle::after {
		right: 16px !important;
		transition: none !important;
	}

	/* Sidebar: no hover color shifts, no motion / transitions */
	.top-navbar .navbar-collapse .navbar-nav .nav-link,
	.top-navbar .navbar-collapse .navbar-nav .dropdown-toggle,
	.top-navbar .navbar-collapse .navbar-nav .dropdown-item,
	.top-navbar .navbar-collapse .navbar-nav .admin-login-btn {
		transition: none !important;
		animation: none !important;
	}

	.top-navbar .navbar-collapse .navbar-nav .nav-link:not(.admin-login-btn):hover,
	.top-navbar .navbar-collapse .navbar-nav .nav-link:not(.admin-login-btn):focus,
	.top-navbar .navbar-collapse .navbar-nav .nav-link:not(.admin-login-btn):active,
	.top-navbar .navbar-collapse .navbar-nav .dropdown-toggle:hover,
	.top-navbar .navbar-collapse .navbar-nav .dropdown-toggle:focus,
	.top-navbar .navbar-collapse .navbar-nav .dropdown-toggle:active {
		background: rgba(0, 0, 0, 0.12) !important;
		color: #ffffff !important;
		transform: none !important;
		box-shadow: none !important;
		border-color: rgba(255, 255, 255, 0.12) !important;
	}

	.top-navbar .navbar-collapse .navbar-nav .admin-login-btn:hover,
	.top-navbar .navbar-collapse .navbar-nav .admin-login-btn:focus,
	.top-navbar .navbar-collapse .navbar-nav .admin-login-btn:active {
		background-color: rgba(255, 255, 255, 0.2) !important;
		color: #ffffff !important;
		transform: none !important;
		box-shadow: none !important;
		border-color: rgba(255, 255, 255, 0.3) !important;
	}

	.top-navbar .navbar-collapse .navbar-nav .dropdown-menu .dropdown-item:hover,
	.top-navbar .navbar-collapse .navbar-nav .dropdown-menu .dropdown-item:focus,
	.top-navbar .navbar-collapse .navbar-nav .dropdown-menu .dropdown-item:active {
		background: rgba(255, 255, 255, 1) !important;
		color: #1a237e !important;
		transform: none !important;
		box-shadow: none !important;
		border-left: 0 !important;
	}

	.top-navbar .navbar-collapse .navbar-nav .nav-link::before,
	.top-navbar .navbar-collapse .navbar-nav .nav-link::after,
	.top-navbar .navbar-collapse .navbar-nav .nav-item::after,
	.top-navbar .navbar-collapse .navbar-nav .nav-item::before {
		display: none !important;
		content: none !important;
		opacity: 0 !important;
	}
}