/*
	Reversible logo test:
	The former text remains in .brand-text. Removing the branding.css link and
	the .brand-logo element restores the previous text-only header.
*/

#header h1 a {
	align-items: center;
	display: flex;
	height: 100%;
}

#header .brand-logo {
	display: block;
	height: auto;
	max-height: 2.55em;
	width: auto;
}

#header .brand-text {
	display: none;
}

/* While the start-page slider is visible, the transparent header shows text. */
#header.alt .brand-logo {
	display: none;
}

#header.alt .brand-text {
	display: inline;
}

/* Coloured content areas on the public two-column pages. */
#main.wrapper.sidebar.colored-columns {
	padding-bottom: 0.5em;
	padding-top: 3em;
}

#main.wrapper.sidebar.colored-columns + #footer {
	border-top: 0;
	padding-top: 0.75em;
}

#main.wrapper.sidebar.colored-columns + #footer .copyright,
#main.wrapper.sidebar.colored-columns + #footer .menu {
	line-height: 1.3;
}

@media screen and (min-width: 1250px) {
	#main.wrapper.sidebar.colored-columns + #footer {
		text-align: left;
	}

	#main.wrapper.sidebar.colored-columns + #footer .copyright {
		margin-bottom: 0;
	}

	#main.wrapper.sidebar.colored-columns + #footer .menu {
		position: absolute;
		right: 0;
		top: 0;
	}
}

#main.wrapper.sidebar.colored-columns > .inner {
	column-gap: 1.35em;
	display: grid;
	grid-template-areas:
		"page-header page-sidebar"
		"page-content page-sidebar";
	grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
	grid-template-rows: auto 1fr;
}

#main.wrapper.sidebar.colored-columns > .inner > header.major {
	background-color: #F5F1E6;
	grid-area: page-header;
	margin-bottom: 0;
	padding: 1.35em 1.35em 0;
	width: auto;
}

#main.wrapper.sidebar.colored-columns > .inner > .content {
	background-color: #F5F1E6;
	grid-area: page-content;
	padding: 1.35em;
	width: auto;
}

#main.wrapper.sidebar.colored-columns > .inner > .sidebar {
	background-color: #e8f7b9;
	grid-area: page-sidebar;
	padding: 9em 1.35em 1.35em;
	width: auto;
}

@media screen and (max-width: 1249px) {
	#main.wrapper.sidebar.colored-columns {
		padding-top: 2em;
	}

	#main.wrapper.sidebar.colored-columns > .inner {
		column-gap: 0;
		display: flex;
	}

	#main.wrapper.sidebar.colored-columns > .inner > header.major,
	#main.wrapper.sidebar.colored-columns > .inner > .content,
	#main.wrapper.sidebar.colored-columns > .inner > .sidebar {
		padding-left: 1.35em !important;
		width: 100%;
	}

	#main.wrapper.sidebar.colored-columns > .inner > .sidebar {
		border-top: 0;
		margin: 2em 0 0;
		padding: 1.35em;
	}
}

@media screen and (max-width: 736px) {
	#main.wrapper.sidebar.colored-columns {
		padding-top: 1.25em;
	}
}

@media screen and (max-width: 480px) {
	#main.wrapper.sidebar.colored-columns > .inner > header.major,
	#main.wrapper.sidebar.colored-columns > .inner > .content,
	#main.wrapper.sidebar.colored-columns > .inner > .sidebar {
		padding: 1em;
		padding-left: 1em !important;
	}

	#main.wrapper.sidebar.colored-columns > .inner > header.major {
		padding-bottom: 0;
	}

	#header .brand-logo {
		max-height: 2.2em;
		max-width: 12em;
	}
}

/* Navigation: hover, keyboard focus and current page. */
#header #nav a:hover,
#header #nav a:focus-visible,
#header #nav a[aria-current="page"],
#navPanel a.link:hover,
#navPanel a.link:focus-visible,
#navPanel a.link[aria-current="page"] {
	font-weight: 700;
}

#navPanel a.link.depth-0:not(:hover):not(:focus-visible):not([aria-current="page"] ) {
	font-weight: 500;
}