.ipsHeader__align,
.ipsHeaderExtra{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
	min-height: inherit;
}

[data-ips-header-position],
[data-ips-header-content]{
	display: contents;
}

.ipsHeader__start, .ipsHeaderExtra__start{ --i-header-row--align: start; }
.ipsHeader__center, .ipsHeaderExtra__center{ --i-header-row--align: center; }
.ipsHeader__end, .ipsHeaderExtra__end{ --i-header-row--align: end; }

:where(:is(.ipsHeader__start, .ipsHeaderExtra__start) [data-ips-header-content] > *){
	margin-inline-end: auto;
}
:where(:is(.ipsHeader__center, .ipsHeaderExtra__center) [data-ips-header-content] > *){
	margin-inline-start: auto;
	margin-inline-end: auto;
}
:where(:is(.ipsHeader__end, .ipsHeaderExtra__end) [data-ips-header-content] > *){
	margin-inline-start: auto;
}

.ipsHeader__top{
	--i-co: var(--i-headerTop--co);
	--i-header-row--he: var(--i-headerTop--he);
	background-color: var(--i-headerTop--ba-co);
	color: var(--i-co);
	min-height: var(--i-header-row--he);
}

.ipsHeader__primary{
	--i-co: var(--i-headerPrimary--co);
	--i-header-row--he: var(--i-headerPrimary--he);
	background-color: var(--i-headerPrimary--ba-co);
	color: var(--i-co);
	min-height: var(--i-header-row--he);
}

.ipsHeader__secondary{
	--i-co: var(--i-headerSecondary--co);
	--i-header-row--he: var(--i-headerSecondary--he);
	background: var(--i-headerSecondary--ba-co);
	color: var(--i-co);
	min-height: var(--i-header-row--he);
}

/* Improve spacing in iPad PWA */
@media (display-mode: standalone){
	.ipsHeader__top:first-child,
	.ipsHeader__primary:first-child{
		box-sizing: content-box;
		padding-top: env(safe-area-inset-top);
	}
}

.ipsHeaderExtra{
	--i-co: var(--i-color_contrast, currentColor);
	color: var(--i-co);
}

	.ipsLogo{
		--_font-size: calc(var(--set__i-desktop-logo--fo-si) * 1px);
		--_image-size: var(--set__i-logo--he);
		display: flex;
		align-items: center;
		color: inherit;
		font-weight: var(--set__i-logo--fo-we);
		font-family: var(--set__i-logo--fo-fa);
		text-decoration: none;
		height: var(--i-header-row--he, 100%);
		font-size: var(--_font-size);
		flex-shrink: 100;
	}

		.ipsLogo__text{
			display: grid;
			justify-items: var(--i-header-row--align, start);
			gap: clamp(7px, 0.4em, 11px);
			line-height: 1;
			white-space: nowrap;
		}

		.ipsMobileHeader .ipsLogo{
			--_font-size: calc(var(--set__i-mobile-logo--fo-si) * 1px);
			--_image-size: var(--set__i-mobile-logo--he);
		}

		.ipsMobileHeader .ipsLogo__text{
			line-height: 1.3;
			gap: 0;
			overflow: hidden;
			height: 100%;
			align-content: center;
		}

			.ipsLogo__slogan{
				font-size: .6em;
			}

			.ipsLogo__slogan:empty{
				display: none;
			}

		.ipsLogo__image{
			display: contents; /* Remove <picture> element from layout */
		}

		.ipsLogo__image img{
			object-fit: contain; /* Prevent squished logo */
			height: 100%; /* auto can be used, but 100% is best for svgs */
			max-height: calc(var(--_image-size, 100) * 1%);
			width: auto;
		}

		/* Hide the text logo if an image logo isn't available */
		[data-ips-scheme="light"] :is(.ipsLogo__image--dark, .ipsLogo__image--light:not([hidden]) ~ .ipsLogo__text),
		[data-ips-scheme="dark"] :is(.ipsLogo__image--light, .ipsLogo__image--dark:not([hidden]) ~ .ipsLogo__text){
			display: none;
		}

@media (max-width: 979px){
	.ipsResponsive_header--desktop{
		display: none !important;
	}
}
@media (min-width: 980px){
	.ipsResponsive_header--mobile{
		display: none !important;
	}
}

i-navigation-menu{
	display: block;
	position: relative;
}

/* The flex-basis must be 1% for the More menu to function */
.ipsNav{
	flex: 999 10 1%;
}

	.ipsNavBar{
		display: flex;
		justify-content: safe var(--i-header-row--align, center);
		gap: 2px;
	}

	/* Fallback for older browsers which don't support "safe" */
	@supports not (justify-content: safe center){
		.ipsNavBar{
			justify-content: var(--i-header-row--align, center);
		}
		/* If justify-content: safe end; isn't supported, add an auto margin instead for "end" alignment. Required for calculating overflow for the More menu. */
		.ipsHeader__end .ipsNavBar{
			justify-content: start;
		}
		.ipsHeader__end .ipsNavBar > li:first-child{
			margin-inline-start: auto;
		}
	}

		.ipsNavBar > li{
			flex-shrink: 0;
		}

			.ipsNavBar > li > :is(a, button){
				display: flex;
				align-items: center;
				justify-content: center;
				gap: .7em;
				padding: var(--i-nav--pa);
				white-space: nowrap;
				border-radius: var(--i-nav--bo-ra);
				background-color: var(--i-nav--ba-co);
				color: var(--i-nav--co);
				text-align: center;
				text-decoration: none;
				font-weight: var(--i-nav--fo-we);
				text-transform: var(--i-nav--te-tr);
				font-size: var(--i-nav--fo-si);
			}

			.ipsNavBar > li:not([data-active]) > a:hover,
			.ipsNavBar > li:not([data-active]) > button:hover,
			.ipsNavBar > li:not([data-active]) > [aria-expanded="true"],
			.ipsNavBar > li:not([data-active]) > button:has(~ :popover-open){
				color: var(--i-nav-hover--co);
				background-color: var(--i-nav-hover--ba-co);
			}

			/* Active buttons */
			.ipsNavBar > [data-active] > :is(a, button){
				color: var(--i-nav-active--co);
				background-color: var(--i-nav-active--ba-co);
			}

				.fa-ips--primary-nav{
					display: none;
				}

				.ipsNavBar__text{
					flex: 0 0 auto;
					display: flex;
					align-items: center;
					justify-content: center;
					gap: .5em;
				}

				.ipsNavBar .fa-angle-down{
					font-size: .75em;
					min-width: 1em; /* Helps with layout shift */
					margin-inline-start: auto; /* For summary elements in dropdowns */
				}

	.ipsNavBar > li > .ipsNav__dropdown{
		inset: auto;
		position: absolute;
		position-area: bottom;
		justify-self: anchor-center;
		position-try: flip-block, flip-inline, flip-block flip-inline;
		transition-property: display, overlay, translate, opacity;
		transition-behavior: allow-discrete;
		transition-duration: .15s;

		opacity: 0;
		translate: 0 1em;

		background-color: var(--i-nav-dropdown--ba-co);
		color: var(--i-nav-dropdown--co);
		box-shadow: var(--i-nav-dropdown--bo-sh);
		border-radius: 8px;
		font-weight: 500;
		font-size: .95em;
		line-height: 1;
		min-width: 18em;
		padding: 5px;
		white-space: nowrap;
		margin: var(--i-nav-dropdown--offset, 6px);
		overflow: visible;
	}

	/* Fill the gap to ensure hover menus stay active during mouse movements */
	[data-hover] .ipsNavBar > li > .ipsNav__dropdown::before{
		content: "";
		position: absolute;
		left: 0; right: 0;
		bottom: 100%;
		height: var(--i-nav-dropdown--offset, 6px);
	}

	@supports (not (position-area:bottom)) or (-webkit-hyphens:auto){
		.ipsNavBar > li > .ipsNav__dropdown{
			/* Reset transitioned, anchored popover as it freezes in Safari 26.0 */
			position-area: initial;
			justify-self: initial;
			position-try: initial;
			margin-left: 0;
			margin-right: 0;
		}
		/* Only apply the positioned menu once the JS has loaded */
		i-navigation-menu:defined .ipsNavBar > li > .ipsNav__dropdown{
			left: 0;
			top: var(--_anchor-v, auto);
			transform: translateX(clamp(
				var(--i-nav-dropdown--offset, 6px),
				var(--_anchor-h, 0px) - 50%,
				100vw - 100% - var(--i-nav-dropdown--offset, 6px))
			)
		}

		/* Safari 26.1: Closing popovers can jump in position. Setting a fixed position with a new top value fixes this */
		@supports (-webkit-hyphens:auto){
			.ipsNavBar > li > .ipsNav__dropdown:not(:popover-open){
				position: fixed;
				top: var(--_anchor-v-fixed, auto);
			}
		}
	}

	.ipsNavBar > li > .ipsNav__dropdown:popover-open{
		opacity: 1;
		translate: 0 0;
	}
	/* Popover polyfill */
	.ipsNavBar > li > .ipsNav__dropdown.\:popover-open{
		opacity: 1;
		translate: 0 0;
	}

	@starting-style{
		.ipsNavBar > li > .ipsNav__dropdown:popover-open{
			opacity: 0;
			translate: 0 1em;
		}
	}

	.ipsNav__dropdown .ipsNav__dropdown{
		--_menu-depth: 1;
	}
	.ipsNav__dropdown .ipsNav__dropdown .ipsNav__dropdown{
		--_menu-depth: 2;
	}
	
		.ipsNav__dropdown :is(a, summary){
			display: flex;
			align-items: center;
			gap: .8em;
			padding: 1em 1.2em;
			color: currentColor;
			text-decoration: none;
			border-radius: 4px;
		}

			.ipsNav__dropdown :where(a, summary):hover{
				background-color: var(--i-nav-dropdown-hover--ba-co);
				color: var(--i-nav-dropdown-hover--co);
			}

			.ipsNav__dropdown [aria-current="page"]{
				background-color: var(--i-nav-dropdown-active--ba-co);
				color: var(--i-nav-dropdown-active--co);
			}

			.ipsNav__dropdown i-details-content :is(a, summary){
				padding-inline-start: 2.4em;
			}

			.ipsNav__dropdown hr{
				height: 1px;
				background: currentColor;
				margin: .3em .5em;
				opacity: .15;
			}

			.ipsNav__dropdown .ipsNavBar__text{
				justify-content: start;
				flex: 1 1 auto;
			}

			/* Add a space after internal dropdowns, if it's followed by a regular link */
			.ipsNav__dropdown > li:has(> .ipsNav__dropdownTitle){
				margin: 1.5em 0;
			}
			.ipsNav__dropdown > li:first-child{
				margin-top: 0;
			}
			.ipsNav__dropdown > li:last-child{
				margin-bottom: 0;
			}

			/* Rotate arrows in sub-dropdown menus */
			.ipsNav__dropdown details .fa-angle-down{
				rotate: -90deg;
				transition: rotate .3s;
			}
			.ipsNav__dropdown details[open] .fa-angle-down{
				rotate: 0deg;
			}

			/* Hide toggles in sub-dropdowns since the list is always shown */
			.ipsNav__dropdown .ipsNav__dropdownTitle + [popovertarget]{
				display: none;
			}

				.ipsNav__dropdownTitle{
					display: none;
					color: var(--i-color_hard);
					font-weight: 700;
					gap: .8em;
  					padding: 1em 1.2em;
					cursor: default; /* The text selection cursor seems odd here, so lets use the standard arrow */
					text-transform: uppercase;
					font-size: .9em;
				}

				.ipsNav__dropdown .ipsNav__dropdownTitle{
					display: flex;
				}
				.ipsNav__dropdownTitle .ipsNavBar__label{
					font-size: .9em;
				}

				.ipsNav__dropdownTitle .ipsNavBar__icon,
				.ipsNav__dropdownTitle .fa-angle-down{
					display: none;
				}

/* Icons */
.ipsNavBar__icon{
	line-height: 1;
	text-align: center;
	flex: 0 0 1.2em; /* Helps with layout shift */
}

	[data-ips-theme-setting-nav-bar-icons="0"] .ipsNavBar__icon{
		display: none;
	}

	.ipsNavBar__icon [style*="--icon"]::before{
		content: var(--icon);
	}

	.ipsNavBar__icon i{
		opacity: .5;
	}

/* A cloned version uses intersectionObserver to control the More menu */
.ipsNavPriority{
	position: absolute;
	top: 0; bottom: 0;
	left: 0; right: 0;
	overflow: hidden;
	visibility: hidden;
	pointer-events: none;
}

.ipsNavPriority .ipsNavBar{
	justify-content: start;
}

/* Temporarily hide previously hidden menu items on page load */
i-navigation-menu:not([data-observed]) [data-initially-hidden] {
	display: none;
}

/*
	----------------
	- Mobile header
	----------------
*/

.ipsMobileHeader{
	--i-header-row--he: var(--i-mobileHeader--he, 70px);
	--i-co: var(--i-headerMobile--co);
	background: var(--i-headerMobile--ba-co);
	color: var(--i-co);
	border-bottom: 1px solid transparent;
	border-color: color-mix(in srgb, var(--i-color_hard) 15%, transparent);
	display: flex;
	align-items: center;
	height: var(--i-mobileHeader--he, 70px);
	padding: 0 max(env(safe-area-inset-left), var(--i-layout-gutter));
	position: relative;
	z-index: var(--i-z-index_headerPrimary);
}

/* 
	If the PWA is in full screen mode, adjust the height of the mobile header to cater for the iOS status bar
	The :first-child selector is used because we only want to apply this if the mobile header is the first element. Sometimes it isn't, such as when advertisements are enabled
*/
@media (display-mode: standalone){
	.ipsMobileHeader:first-child{
		box-sizing: content-box;
		padding-top: env(safe-area-inset-top);
	}
}

@supports not (color: color-mix(in hsl, red, blue)){
	.ipsMobileHeader{
		border-width: 0;
	}
}

.ipsMobileNavIcons{
	margin-inline-start: auto;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

	.ipsMobileNavIcons__button{
		display: flex;
		align-items: center;
		justify-content: center;
		gap: .6em;
		min-width: 40px;
		min-height: 40px;
		padding: 0 .8em;
		font-size: .9em;
		font-weight: 600;
		border-radius: min(var(--i-design-radius), 6px);
		text-align: center;
		position: relative;
		text-decoration: none;
		color: inherit; /* Overwrite link color */
	}

	@media (any-hover:hover){
		.ipsMobileNavIcons__button:hover{
			background: color-mix(in srgb, currentColor 5%, transparent);
		}
	}

		.ipsMobileNavIcons__button > :is(i, svg){
			height: 1.2em;
			fill: currentColor;
		}
		.ipsMobileNavIcons__button .ipsUserPhoto{
			width: 2em;
		}

	.ipsMobileNavIcons__button .ipsNotification{
		inset-block-start: 0;
		inset-inline-end: 0;
	}

	.ipsMobileNavIcons__button--primary{
		background-color: var(--i-secondary);
		color: var(--i-secondary-contrast);
	}

	@media (any-hover:hover){
		.ipsMobileNavIcons__button--primary:hover{
			background-color: var(--i-secondary-light);
		}
	}

/* User nav */
.ipsUserNav{
	flex: 0 0 auto;
	display: flex;
	font-size: .9em;
}
.ipsUserNav--guest{
	gap: 5px;
}

	.ipsUserNav > li{
		flex: 0 0 auto;
	}

		.ipsUserNav__link{
			display: flex;
			align-items: center;
			gap: .7em;
			height: 3em;
			padding: 0 1em;
			font-weight: 600;
			border-radius: min(var(--i-design-radius), 6px);
			position: relative;
			color: currentColor;
		}

		.ipsUserNav__link:hover,
		.ipsUserNav__link[aria-expanded="true"]{
			background: color-mix(in srgb, currentColor 8%, transparent);
		}

		.ipsUserNav__link.ipsUserNav__link--sign-up{
			background: var(--i-primary);
			color: var(--i-primary-contrast);
		}

			.ipsUserNav__link > *{
				flex: 0 0 auto;
			}

			.ipsUserNav__link .ipsUserPhoto{
				width: 2em;
				margin-inline-start: -0.5em;
			}

				.ipsUserNav__link .fa-angle-down{
					font-size: .7em;
				}

				.ipsUserNav__link > i{
					min-width: 1em;
				}

				.ipsUserNav__icon{
					font-size: max(15px, 1em);
					text-align: center;
				}
	.ipsUserNav .ipsNotification{
		top: -3px;
		inset-inline-end: 3px;
		font-size: 10px;
	}

.ipsUserNav .iDropdown{
	width: 400px;
}
#elUserLink_menu .iDropdown{
	width: 340px;
}

.elUserNav_achievements__icon{
	width: 40px;
}

[data-ips-layout="side"] #cUserLink{
	order: 1;
}

/* Hide "Manage Blocks" and "Theme Editor" links while Block Manager or Theme Editor is active */
:is([data-theme-editor-active], .cWidgetsManaging) :is([data-menuitem="blockEditor"], [data-menuitem="themeEditor"]){
	display: none;
}

/* Sign in popup and register modal */
#elUserSignIn_menu .iDropdown {
	width: min(600px, 95vw);
	max-width: none;
}

#elUserSignIn_menu .iDropdown > form{
	border-radius: inherit;
	overflow: hidden; /* Crop overflow to border-radius */
}

	#elUserSignIn_menu .iDropdown:not(:has(.ipsColumns)){
		width: 340px;
	}

	#elUserSignIn_menu .ipsColumns{
		border-radius: var(--i-dropdown--bo-ra);
	}

	:is(#elUserSignIn_menu, #elRegisterButton_dialog) .ipsFieldRow{
		padding: 1em;
	}

	#elUserSignIn_menu .ipsSubmitRow{
		border-radius: 0;
	}

#elUserSignIn_internal{
	flex-basis: auto;
}

#elRegisterButton_dialog .ipsFieldRow__required{
	margin-inline-start: auto;
}

#elRegisterButton_dialog .ipsFieldRow__label a{
	text-decoration: underline;
}


/*
	----------------
	- Breadcrumb search
	----------------
*/

.ipsSearchPseudo{
	--i-search--co: currentcolor;
	--i-search--ba-co: color-mix(in srgb, var(--i-search--co) 15%, transparent);
	--i-search-hover--ba-co: color-mix(in srgb, var(--i-search--ba-co), var(--i-search--co) 15%);

	--i-outline-color: hsl(0 0% 100%);
	color: var(--i-search--co);
	flex: 0 1 var(--i-search--wi);
	background-color: var(--i-search--ba-co);
	border-radius: min(var(--i-design-radius), 6px);
	padding: 0 1em;
	height: var(--i-search--he);
	display: flex;
	align-items: center;
	gap: 1em;
	font-size: .9em;
}
	@media (hover){
		.ipsSearchPseudo:hover{
			background-color: var(--i-search-hover--ba-co);
		}
	}
	.ipsSearchPseudo i{
		flex: 0 0 1.1em;
		text-align: center;
	}
	:where(.ipsHeader__center, .ipsHeaderExtra__center) .ipsSearchPseudo{
		margin: 0;
		flex-grow: 1;
	}

	/* color-mix fallback */
@supports not (color: color-mix(in srgb, red, red)){
	.ipsSearchPseudo{
		background-color: #fff !important;
		color: #111;
	}
}

/* Pull to refresh, iOS PWA */
i-pull-to-refresh{
	display: none;
	--_limit: 180;
	--_background: var(--i-headerMobile--ba-co);
	--_color: var(--i-headerMobile--co);
	--_height: var(--i-mobileHeader--he);
}

@media (min-width: 980px){
	i-pull-to-refresh{
		--_background: var(--i-headerPrimary--ba-co);
		--_color: var(--i-headerPrimary--co);
		--_height: var(--i-headerPrimary--he);
	}	
}

/* Only show pull-to-refresh in iOS standalone PWAs. Android already has pull-to-refresh */
@supports (-webkit-touch-callout: none) {
	@media (display-mode: standalone){
		i-pull-to-refresh{
			display: block;
			color: var(--_color);
			position: absolute;
			z-index: 999;
			width: 100%;
			/* Height isn't important. We just need it tall enough for intersectionObserver to safely notice it */
			height: 5px;
			pointer-events: none;
		}
	}
}

/* Background */
i-pull-to-refresh::before{
	content: "";
	position: absolute;
	width: 100%;
	height: 400px;
	margin-top: -400px;
	background: var(--_background);
	/* The transform ensures the element is painted, even when outside of the viewport */
	transform: translate3d(0,0,0);
}

.iPullToRefresh{
	position: fixed;
	display: flex;
	width: 100%;
	height: var(--_height, 80px);
	padding-top: env(safe-area-inset-top);
	box-sizing: content-box;
}

.iPullToRefresh::after{
	content: "";
	mask: conic-gradient(
		black 0% clamp(0%, var(--_scroll, 0) / var(--_limit) * -100%, 100%),
		hsl(0 0% 0% / .1) clamp(0%, var(--_scroll, 0) / var(--_limit) * -100%, 100%) 100%
	);
	border: 3px solid;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	margin: auto;
	opacity: clamp(0%, var(--_scroll, 0) / var(--_limit) * -200%, 100%);
}

@keyframes ipsPullToRefresh{
	to{
		rotate: 360deg;
	}
}

[data-ips-pwa-refreshing] .iPullToRefresh{
	background-color: var(--_background);
}

[data-ips-pwa-refreshing] .iPullToRefresh::after{
	opacity: 1;
	mask: none;
	border-color: color-mix(in hsl, currentColor 10%, transparent);
	border-top-color: currentColor;
	animation: ipsPullToRefresh .5s linear infinite;
}