:root {
	--ss-bg: #F7F6F0;
	--ss-border: #192384;

	--ss-header-height: 80px;
	--ss-header-slimheight: 60px;
	--ss-header-sliminheight: 50px;
	--ss-header-minheight: 36px;
}
@media (pointer: coarse) or (hover: none) {
	:root {
		--ss-header-height: 90px;
		--ss-header-slimheight: 70px;
		--ss-header-slimminheight: 60px;
		--ss-header-minheight: 50px;
	}
}

body:has(> header.follow) {
	padding-top: calc(var(--ss-header-height) + var(--top));
}
body.scroll-passed-header:has(> header.reveal) {
	padding-top: calc(var(--ss-header-height) + var(--top));
}

body > header {
	container-type: inline-size;
	background-color: var(--ss-bg);
	border-bottom: 1px solid var(--ss-border);
	font-size: 16px;
	width: 100%;
}
body > header.follow {
	position: fixed;
	top: var(--top);
	left: 0;
	z-index: 9999;
}
body.scroll-passed-header > header.reveal {
	position: fixed;
	top: var(--top);
	left: 0;
	z-index: 9999;
}

body > header > div {
	max-width: var(--pageWidth);
	margin: auto;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	column-gap: 20px;
	row-gap: 6px;
	height: var(--ss-header-height);
	max-height: var(--ss-header-height);
	min-height: var(--ss-header-minheight);
}
body > header.scale.follow > div {
	height: clamp(var(--ss-header-minheight), var(--ss-header-height), calc(var(--ss-header-height) - var(--scroll, 0px)));
}
body.scroll-passed-minheader > header.follow > div {
	height: var(--ss-header-minheight);
}
body.scroll-passed-header > header.reveal > div {
	height: var(--ss-header-minheight);
}
body.scroll-passed-header > header.reveal {
	top: calc(var(--top) - var(--ss-header-minheight) - var(--border));
	transition: transform 300ms ease-in-out;
}
body.scroll-passed-header.scroll-up > header.reveal {
	transform: translate3d(0, 100%, 0);
}

body > header h1 {
	font-size: 3rem;
	height: inherit;
}

body > header h1 a {
	color: #000;
	text-decoration: none;
	display: flex;
	height: inherit;
	justify-content: center;
	align-items: center;
}
body > header img {
	max-height: calc(100% - 10px);
}

:is(#full-menu, #mini-menu) #search > div {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto;
}
#full-menu #search > div {
	border: 1px solid #19238455;
    border-radius: 4px;
	border-color: var(--ss-border);
}
:is(#full-menu, #mini-menu) #search input {
	border: 0;
	font-size: 1rem;
	min-width: 100px;
    padding: 10px 12px;
	background: var(--bg);
	border-radius: 4px 0px 0px 4px;
	color: var(--color);
}
:is(#full-menu, #mini-menu) #search button {
	border: 0;
	background: var(--bg);
	border-radius: 0px 4px 4px 0px;
}
:is(#full-menu, #mini-menu) #search button svg {
	width: 20px;
	height: 20px;
	margin-right: 4px;
	fill: #444;
}
#full-menu {
	display: contents;
}
#full-menu > div {
	display: contents;
}

#full-menu nav {
	grid-column: span 2;
	margin-left: 6px;
	text-align: right;
}

:is(#full-menu, #mini-menu) nav ul {
	list-style: none;
}
#full-menu nav ul li:not(:first-child) {
	margin-left: 16px;
}
#full-menu nav ul li {
	display: inline-block;
}
#full-menu nav a {
	text-decoration: none;
	color: #333;
	font-size: 1rem;
}
#full-menu nav a:hover {
	text-decoration: underline;
}
#full-menu .mini {
	display: none;
}

#full-menu nav ul ul {
	display: none;
}

#bar-menu {
	display: none;
}
#bar-menu button {
	background: transparent;
	border: 1px solid transparent;
}
#bar-menu button:hover {
	border: 1px solid #00000017;
	background: #159eff;
	fill: #fff;
}
#bar-menu svg {
	width: 30px;
	height: 30px;
}

#mini-menu {
	transform: translate3d(-100%, 0, 0);
	transition: transform 200ms ease-in-out;
	position: fixed;
	top: var(--top);
	left: 0;
	z-index: 10001;
	background-color: #fff;
	width: 90%;
	max-width: 400px;
	height: calc(100vh - var(--top) - var(--bottom));
	overflow-y: scroll;
}
#mini-center-menu {
	display: none;
}

#mini-menu .toggle-menu {
	position: absolute;
    right: 2px;
    top: 2px;
	background: transparent;
	border: 1px solid transparent;
	fill: #444;
}
#mini-menu .toggle-menu:hover {
	border: 1px solid #00000017;
	background: #159eff;
	fill: #fff;
}
#mini-menu .toggle-menu svg {
	width: 24px;
	height: 24px;
}
#mini-menu h1 {
	padding: 6px 0 0 12px;
	font-size: 22px;
}
#mini-menu #icons {
	padding: 4px 0;
}
#mini-menu #icons > div {
	display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
}
#mini-menu #icons > div > * {
	width: unset;
}

#mini-menu .mini {
	height: calc(var(--ss-header-minheight));
	background-color: var(--ss-bg);
	border-bottom: 1px solid var(--ss-border);
	box-sizing: content-box;
}
#mini-menu #search {
	border-bottom: 1px solid var(--ss-border);
}
#mini-menu #icons {
	background-color: var(--ss-bg);
	border-bottom: 1px solid var(--ss-border);
}

#mini-menu nav li {
	margin: 4px 0;
}
#mini-menu nav li a {
	text-decoration: none;
	color: #333;
	font-weight: bold;
	padding: 4px 12px;
	display: block;
	background: var(--ss-bg);
	border-top: 1px solid #00000017;
	border-bottom: 1px solid #00000017;
}
#mini-menu nav li a:hover {
	background: #e5f3ff;
}
#mini-menu nav li li a {
	padding-left: 20px;
	background: transparent;
}
#mini-menu nav li li li a {
	padding-left: 40px;
}
#mini-menu nav li li li li a {
	padding-left: 60px;
}

@media (prefers-reduced-motion: reduce) {
	body > header, #overlay, #mini-menu {
		transition: unset;
	}
}
@media (pointer: coarse) or (hover: none) {
	#bar-menu svg, #mini-menu .toggle-menu {
		width: 44px;
		height: 44px;
	}
	#mini-menu nav li a {
		padding: 8px 12px;
	}
}

body.page-width *:is(bread-crumbs, #sshead) {
	margin-left: 10px;
	margin-right: 10px;
}

body.slim-width:has(> header.follow) {
	padding-top: calc(var(--ss-header-slimheight) + var(--top));
}
body.slim-width.scroll-passed-header:has(> header.reveal) {
	padding-top: calc(var(--ss-header-slimheight) + var(--top));
}
body.slim-width.scroll-passed-minheader > header.follow > div {
	height: var(--ss-header-sliminheight);
}
body.slim-width.scroll-passed-header > header.reveal > div {
	height: var(--ss-header-sliminheight);
}
body.slim-width.scroll-passed-header > header.reveal {
	top: calc(var(--top) - var(--ss-header-sliminheight) - var(--border));
}
body.slim-width #bar-menu {
	display: unset;
	justify-self: right;
}
body.slim-width #full-menu {
	display: none;
}
body.slim-width #mini-center-menu {
	display: unset;
}
body.slim-width > header > div {
	height: var(--ss-header-slimheight);
	max-height: var(--ss-header-slimheight);
	min-height: var(--ss-header-sliminheight);
}
body.slim-width > header h1 {
	font-size: 1.8rem;
}
body.slim-width > header img {
	vertical-align: text-bottom;
}
body.slim-width > header.scale.follow > div {
	height: clamp(var(--ss-header-sliminheight), var(--ss-header-slimheight), calc(var(--ss-header-slimheight) - var(--scroll, 0px)));
}
body.slim-width .scroll-passed-header > header.reveal {
	top: calc(var(--top) - var(--ss-header-slimheight));
}

body:not(.page-width) {
	header:has(#full-menu #search) +
	div +
	main:has(.ssfrag-search form) {
		form {
			display: none;
		}
	}
}