.citizen-page-header {
	z-index: @z-index-above-content;
	padding-right: var( --padding-page );
	padding-left: var( --padding-page );
	margin-top: var( --space-xl );

	&-inner {
		display: flex;
		flex-wrap: wrap;
		gap: var( --space-md );
		align-items: center;
		/* max-width should sync with .citizen-body-container */
		max-width: var( --width-layout );
		padding-top: var( --space-md );
		padding-bottom: var( --space-md );
		margin-inline: auto;

		@media ( min-width: @min-width-breakpoint-desktop ) {
			.citizen-toc-enabled & {
				max-width: ~'calc( var( --width-layout ) + var( --width-toc ) + var( --space-xl ) )';
			}
		}
	}
}

.citizen-page-heading {
	flex-grow: 1;
}

.firstHeading-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.firstHeading {
	margin: 0;
	word-break: break-word;
	overflow-wrap: break-word;
}

.mw-page-title {
	&-namespace {
		color: var( --color-base );
	}

	&-separator {
		margin-right: var( --space-xxs );
		color: var( --color-subtle );
	}

	&-parenthesis {
		font-size: var( --font-size-x-large );
		color: var( --color-subtle );
	}
}