/* ===== Inner-page header — Midnight title band (pgh-) =====
   Every member page except the dashboard names itself here: a back button,
   the page title and one line on what the page is for, on the same deep
   indigo band the dashboard uses. The markup comes from includes/header.php;
   every rule is keyed on .page-titles.pgh or the .pgh-page class the header
   adds to #main-wrapper (a plain class, not :has(), so toggling the menu
   stays cheap), so pages without it (the dashboard, admin) are untouched. */
#main-wrapper.pgh-page .header-banner {
	background:
		radial-gradient(520px 300px at 88% 0%, rgba(32, 201, 151, .16), transparent 62%),
		radial-gradient(760px 440px at 8% 125%, rgba(111, 99, 238, .5), transparent 66%),
		linear-gradient(150deg, #29217f 0%, #1c1759 55%, #110e38 100%) !important;
}

/* Top bar: the same glass controls the dashboard band has. */
#main-wrapper.pgh-page .header .header-content {
	/*
	 * .page-titles is emitted inside .header, after .header-content. Without an
	 * explicit layer on this fixed bar, the later positioned title band can be
	 * painted over it while the page scrolls. Keep the entire bar above page
	 * chrome; its dropdown receives the next layer below.
	 */
	z-index: 30;
}
#main-wrapper.pgh-page .header .search-area {
	background: rgba(255, 255, 255, .07) !important;
	border: 1px solid rgba(255, 255, 255, .13) !important;
	border-radius: 12px !important;
	height: 44px;
	overflow: hidden;
}
#main-wrapper.pgh-page .header .search-area .form-control {
	background: transparent !important;
	border: 0 !important;
	color: #fff !important;
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	font-size: .875rem !important;
	height: 42px !important;
	padding-left: 14px !important;
}
#main-wrapper.pgh-page .header .search-area .form-control::placeholder { color: rgba(255, 255, 255, .6) !important; }
#main-wrapper.pgh-page .header .search-area .input-group-text {
	background: transparent !important;
	border: 0 !important;
	height: 42px;
	padding: 0 14px 0 6px !important;
}
#main-wrapper.pgh-page .header .search-area .input-group-text i { color: rgba(255, 255, 255, .72) !important; font-size: 18px !important; }
#main-wrapper.pgh-page .header .notice-board-toggle {
	align-items: center;
	background: rgba(255, 255, 255, .08) !important;
	border: 1px solid rgba(255, 255, 255, .15) !important;
	border-radius: 12px !important;
	box-shadow: none !important;
	display: flex !important;
	height: 44px;
	justify-content: center;
	padding: 0 !important;
	position: relative;
	width: 44px;
}
#main-wrapper.pgh-page .header .notice-board-toggle svg { height: 24px; width: 24px; }
#main-wrapper.pgh-page .header-profile2 > .nav-link {
	background: rgba(255, 255, 255, .08) !important;
	border: 1px solid rgba(255, 255, 255, .15) !important;
	border-radius: 999px !important;
	padding: 4px 4px 4px 16px !important;
}
#main-wrapper.pgh-page .header-profile2 .header-info2 img {
	border: 2px solid rgba(255, 255, 255, .22);
	border-radius: 50% !important;
	height: 38px !important;
	margin: 0 !important;
	object-fit: cover;
	width: 38px !important;
}
#main-wrapper.pgh-page .header-profile2 .dropdown-menu.mpx-menu {
	/* The account sheet must cover page chrome, including the title/back band. */
	z-index: 40;
}
@media (min-width: 768px) {
	#main-wrapper.pgh-page .nav-header .nav-control {
		align-items: center;
		background: rgba(255, 255, 255, .08) !important;
		border: 1px solid rgba(255, 255, 255, .15) !important;
		border-radius: 12px !important;
		display: flex !important;
		justify-content: center;
	}
}

/* The title band itself. */
#main-wrapper .page-titles.pgh {
	background: transparent !important;
	display: block;
	margin-bottom: 0 !important;
	/* Below the fixed topbar and every menu opened from it. */
	z-index: 0;
}
.pgh-row { align-items: center; display: flex; gap: 14px; }
.pgh-back {
	align-items: center;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 12px;
	color: #fff !important;
	display: inline-flex;
	flex: 0 0 42px;
	font-size: 18px;
	height: 42px;
	justify-content: center;
	text-decoration: none !important;
	transition: background-color .15s ease;
	width: 42px;
}
.pgh-back:hover { background: rgba(255, 255, 255, .16); }
.pgh-back:focus-visible { outline: 2px solid #86f2d0; outline-offset: 2px; }
.pgh-copy { flex: 1 1 auto; min-width: 0; }
#main-wrapper .page-titles.pgh .pgh-title {
	align-items: center;
	color: #fff !important;
	display: flex;
	flex-wrap: wrap;
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
	font-size: 1.625rem !important;
	font-weight: 800 !important;
	gap: 0 .4em;
	letter-spacing: -.02em;
	line-height: 1.2 !important;
	margin: 0 !important;
	text-shadow: none !important;
}
.pgh-staff { height: 28px; width: auto; }
#main-wrapper .page-titles.pgh .pgh-sub {
	color: rgba(255, 255, 255, .66) !important;
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	font-size: .875rem;
	font-weight: 500;
	margin: 3px 0 0;
}
.pgh-chip {
	align-items: center;
	background: rgba(52, 224, 173, .16);
	border: 1px solid rgba(52, 224, 173, .3);
	border-radius: 999px;
	color: #86f2d0;
	display: inline-flex;
	flex: none;
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	font-size: .75rem;
	font-weight: 800;
	gap: 6px;
	padding: 5px 11px;
	white-space: nowrap;
}
.pgh-stats { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); margin-top: 14px; }
.pgh-stat {
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 12px;
	color: #fff;
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	padding: 8px 12px;
}
.pgh-stat small { color: rgba(255, 255, 255, .6); display: block; font-size: .6875rem; font-weight: 700; }
.pgh-stat b { font-size: 1rem; font-variant-numeric: tabular-nums; font-weight: 800; }

@media (max-width: 767.98px) {
	#main-wrapper.pgh-page .header .header-content,
	#main-wrapper.pgh-page .nav-header { background: #241d71 !important; }
	#main-wrapper.pgh-page .header .header-content { box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
	.pgh-row { gap: 11px; }
	.pgh-back { flex-basis: 38px; font-size: 16px; height: 38px; width: 38px; }
	#main-wrapper .page-titles.pgh .pgh-title { font-size: 1.25rem !important; }
	#main-wrapper .page-titles.pgh .pgh-sub { font-size: .8125rem; }
	.pgh-staff { height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.pgh-back { transition: none; }
}