/* Shared Docusaurus-style navbar, used by the LP, Wiki, editorial, and React pages. */
:root {
	--noasaba-shared-header-bg: #fff;
	--noasaba-shared-header-fg: #1c1e21;
	--noasaba-shared-header-border: rgb(0 0 0 / 12%);
	--noasaba-shared-header-hover: #087f68;
	--noasaba-shared-header-active-bg: rgb(0 0 0 / 6%);
	--noasaba-shared-header-font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

html[data-noasaba-theme="dark"] {
	--noasaba-shared-header-bg: #1b1b1d;
	--noasaba-shared-header-fg: #f5f6f7;
	--noasaba-shared-header-border: rgb(255 255 255 / 14%);
	--noasaba-shared-header-hover: #25c2a0;
	--noasaba-shared-header-active-bg: rgb(255 255 255 / 8%);
}

.screen-reader-text:not(:focus) {
	border: 0;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.skip-link:not(:focus) {
	border: 0;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.skip-link:focus {
	background: var(--noasaba-shared-header-bg);
	color: var(--noasaba-shared-header-fg);
	left: .5rem;
	padding: .75rem 1rem;
	position: fixed;
	top: .5rem;
	z-index: 1000;
}

.site-header {
	background: var(--noasaba-shared-header-bg);
	border-bottom: 1px solid var(--noasaba-shared-header-border);
	box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
	box-sizing: border-box;
	color: var(--noasaba-shared-header-fg);
	font-family: var(--noasaba-shared-header-font-family);
	height: 60px;
	line-height: 1.65;
	position: sticky;
	top: 0;
	z-index: 500;
}

/* The landing page keeps the shared navbar fixed over its full-screen panels. */
body.noasaba-home .site-header {
	left: 0;
	position: fixed;
	width: 100%;
}

body.admin-bar .site-header { margin-top: 0 !important; top: 32px; }
body.admin-bar .site-header .nav-links { top: 32px; }
.site-header *, .site-header *::before, .site-header *::after { box-sizing: border-box; }
.site-nav { align-items: center; display: flex; gap: 0; height: 100%; padding: 0 1rem; }
.site-brand { align-items: center; color: inherit !important; display: inline-flex; flex: 0 0 auto; font-size: 1rem; font-weight: 700; gap: .5rem; margin-right: 1rem; text-decoration: none !important; white-space: nowrap; }
.site-brand img { display: block; height: 32px; object-fit: contain; width: auto; }
.site-header .menu-toggle { align-items: center; background: transparent; border: 0; color: inherit; cursor: pointer; display: none; justify-content: center; padding: .25rem; }
.site-header .menu-toggle svg { fill: none; height: 28px; stroke: currentColor; width: 28px; }
.site-header .wiki-menu-toggle { align-items: center; background: transparent; border: 0; color: inherit; cursor: pointer; display: none; font-size: 1.35rem; height: 36px; justify-content: center; padding: 0; width: 36px; }
.site-header .nav-links { align-items: center; display: flex; flex: 1 1 auto; min-width: 0; }
.site-header .nav-links-menu { align-items: center; display: flex; flex: 1 1 auto; flex-wrap: nowrap; gap: 0; list-style: none; margin: 0; min-width: 0; padding: 0; }
.site-header .nav-links-menu > li { flex: 0 0 auto; margin: 0; padding: 0; }
.site-header .nav-links-menu > li.nav-priority-core { order: 0; }
.site-header .nav-links-menu > li.nav-priority-service { order: 1; }
.site-header .nav-links-menu > li.nav-priority-extra { order: 2; }
.site-header .nav-links-menu > li > a { color: var(--noasaba-shared-header-fg) !important; display: block; font-size: 1rem; font-weight: 500; line-height: 1.5; padding: .25rem .75rem; text-decoration: none !important; white-space: nowrap; }
.site-header .nav-links-menu > li > a:hover,
.site-header .nav-links-menu > li > a:focus-visible { color: var(--noasaba-shared-header-hover) !important; }
.site-header .nav-links-menu > li.current-menu-item > a,
.site-header .nav-links-menu > li.current_page_item > a { color: var(--noasaba-shared-header-hover) !important; }
.site-header .nav-links-menu > li.nav-about { margin-left: auto; }
.site-header .nav-links-menu .menu-item-has-children { position: relative; }
.site-header .nav-links-menu .sub-menu {
	background: var(--noasaba-shared-header-bg);
	border: 1px solid var(--noasaba-shared-header-border);
	box-shadow: 0 8px 20px rgb(0 0 0 / 22%);
	display: block;
	list-style: none;
	margin: 0;
	min-width: 13rem;
	padding: .4rem;
	position: absolute;
	top: calc(100% + .25rem);
	left: 0;
	z-index: 510;
}
.site-header .nav-links-menu .sub-menu[hidden] { display: none; }
.site-header .nav-links-menu .sub-menu li { list-style: none; margin: 0; padding: 0; }
.site-header .nav-links-menu .sub-menu a { color: var(--noasaba-shared-header-fg) !important; display: block; line-height: 1.5; padding: .55rem .75rem; text-decoration: none !important; white-space: normal; }
.site-header .nav-links-menu .sub-menu a:hover,
.site-header .nav-links-menu .sub-menu a:focus-visible { background: var(--noasaba-shared-header-active-bg); color: var(--noasaba-shared-header-hover) !important; }
.site-header .nav-links-menu > li.menu-item-has-children > a { display: inline-block; }
.site-header .nav-links-menu .nav-submenu-toggle {
	align-items: center;
	background: transparent;
	border: 0;
	color: var(--noasaba-shared-header-fg);
	cursor: pointer;
	display: inline-flex;
	height: 28px;
	justify-content: center;
	margin-left: -.45rem;
	padding: 0;
	vertical-align: middle;
	width: 28px;
}
.site-header .nav-links-menu .nav-submenu-toggle svg { fill: none; height: 14px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; transition: transform 150ms ease; width: 14px; }
.site-header .nav-links-menu .submenu-open > .nav-submenu-toggle svg { transform: rotate(180deg); }
.noasaba-external-link-icon { display: inline-block; height: .84em; margin-left: .3rem; vertical-align: -.08em; width: .84em; }
.site-header .mobile-panel-header { display: none; }
.site-header .theme-toggle,
.site-header .site-search-toggle { align-items: center; background: transparent; border: 0; border-radius: 0; color: var(--noasaba-shared-header-fg); cursor: pointer; display: inline-flex; flex: 0 0 40px; height: 40px; justify-content: center; margin: 0 0 0 .5rem; padding: 0; transition: color 150ms ease; width: 40px; }
.site-header .theme-toggle:hover,
.site-header .site-search-toggle:hover,
.site-header .theme-toggle:active,
.site-header .site-search-toggle:active { background: transparent; color: var(--noasaba-shared-header-hover); }
.site-header .theme-toggle .theme-icon { background-color: currentColor; display: block; height: 22px; mask-position: center; mask-repeat: no-repeat; mask-size: contain; width: 22px; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; }
.site-header .theme-toggle .icon-sun { mask-image: url("../icons/bootstrap-icons/sun.svg"); -webkit-mask-image: url("../icons/bootstrap-icons/sun.svg"); }
.site-header .theme-toggle .icon-moon { display: none; mask-image: url("../icons/bootstrap-icons/moon-stars.svg"); -webkit-mask-image: url("../icons/bootstrap-icons/moon-stars.svg"); }
html[data-noasaba-theme="dark"] .site-header .theme-toggle .icon-sun { display: none; }
html[data-noasaba-theme="dark"] .site-header .theme-toggle .icon-moon { display: block; }
.site-header .site-search-toggle svg { fill: none; height: 22px; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; width: 22px; }
.site-header .site-search-toggle { flex-basis: auto; gap: .35rem; padding: 0 .55rem; width: auto; }
.site-header .site-search-toggle span { font: inherit; font-size: .88rem; }
.site-header .site-search-popover { background: var(--noasaba-shared-header-bg); border: 1px solid var(--noasaba-shared-header-border); border-radius: 6px; box-shadow: 0 8px 24px rgb(0 0 0 / 18%); display: flex; gap: 6px; padding: 10px; position: absolute; right: 60px; top: calc(100% + 8px); width: min(340px, calc(100vw - 32px)); z-index: 510; }
.site-header .site-search-popover[hidden] { display: none; }
.site-header .site-search input { background: var(--noasaba-shared-header-bg); border: 1px solid var(--noasaba-shared-header-border); border-radius: 4px; color: var(--noasaba-shared-header-fg); min-width: 0; padding: 8px 10px; width: 100%; }
.site-header .site-search button { background: #3578e5; border: 0; border-radius: 4px; color: #fff; cursor: pointer; padding: 8px 12px; white-space: nowrap; }
.site-header .site-search-mobile { display: none; }
.site-header .theme-toggle:focus-visible,
.site-header .site-search-toggle:focus-visible,
.site-header .menu-toggle:focus-visible,
.site-header .mobile-panel-close:focus-visible,
.site-header .nav-links a:focus-visible,
.site-header .nav-links button:focus-visible,
.site-header .site-search :is(input, button):focus-visible { outline: 3px solid #8ab4f8; outline-offset: 2px; }
.menu-backdrop { display: none; }

/* The Wiki's page-tree drawer stays separate from the shared site-nav drawer. */
body.noasaba-wiki-page .noasaba-wiki { --wiki-navbar-height: 60px; }

/* The old React shell used a fixed Docusaurus navbar. The shared header is sticky. */
body.noasaba-react-page .main-wrapper { padding-top: 0 !important; }

@media (max-width: 1100px) and (min-width: 997px) {
	.site-header .nav-links-menu > li > a { padding-left: .45rem; padding-right: .45rem; }
}

@media (max-width: 996px) {
	.site-header { height: 60px; }
	body.noasaba-wiki-page .noasaba-wiki { --wiki-navbar-height: 60px; }
	.site-nav { gap: .5rem; padding: 0 1rem; }
	.site-header .menu-toggle { display: inline-flex; flex: 0 0 32px; order: 0; }
	.site-header .wiki-menu-toggle { display: inline-flex; flex: 0 0 32px; }
	body.noasaba-wiki-page .site-header .menu-toggle { display: none; }
	body.noasaba-wiki-page .site-header .wiki-menu-toggle { flex-basis: 32px; }
	.site-brand { order: 1; }
	.site-header .nav-links { align-items: stretch; background: var(--noasaba-shared-header-bg); bottom: 0; box-shadow: 0 3px 20px rgb(0 0 0 / 25%); flex-direction: column; left: 0; max-width: 83vw; overflow: hidden; padding: 0; position: fixed; top: 0; transform: translate3d(-100%, 0, 0); transition: transform 200ms ease-in-out, visibility 200ms ease-in-out; visibility: hidden; width: 83vw; z-index: 501; }
	.site-header .nav-links.is-open { transform: translate3d(0, 0, 0); visibility: visible; }
	.site-header .mobile-panel-header { align-items: center; box-shadow: 0 1px 2px rgb(0 0 0 / 10%); display: flex; flex: 0 0 60px; height: 60px; min-height: 60px; padding: .5rem 1rem; }
	.site-header .mobile-panel-header .site-brand { margin-right: 0; }
	.site-header .mobile-panel-header .site-brand { order: 0; }
	.site-header .mobile-theme-toggle { display: inline-flex; margin-left: auto; }
	.site-header .mobile-panel-close { align-items: center; background: transparent; border: 0; color: var(--noasaba-shared-header-fg); cursor: pointer; display: inline-flex; height: 32px; justify-content: center; margin-left: 1rem; padding: 0; width: 32px; }
	.site-header .nav-links-menu { align-items: stretch; display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .5rem; }
	.site-header .nav-links-menu > li > a { padding: .6rem 1rem; white-space: normal; }
	.site-header .nav-links-menu .menu-item-has-children { display: flex; flex-wrap: wrap; }
	.site-header .nav-links-menu .menu-item-has-children > a { flex: 1 1 auto; }
	.site-header .nav-links-menu .nav-submenu-toggle { flex: 0 0 40px; height: 44px; margin: .25rem .25rem 0 0; width: 40px; }
	.site-header .nav-links-menu .sub-menu,
	.site-header .nav-links-menu .sub-menu .sub-menu {
		background: transparent;
		border: 0;
		box-shadow: none;
		flex: 0 0 100%;
		min-width: 0;
		padding: 0 0 .35rem 1rem;
		position: static;
		width: 100%;
	}
	.site-header .nav-links-menu .sub-menu a { padding: .5rem 1rem; }
	.site-header .nav-links-menu .sub-menu[hidden] { display: none; }
	.site-header .nav-links-menu > li.current-menu-item > a,
	.site-header .nav-links-menu > li.current_page_item > a { background: var(--noasaba-shared-header-active-bg); }
	.site-header .nav-links-menu > li.nav-about { margin-left: 0; }
	.site-header .site-nav > .theme-toggle,
	.site-header .site-search-toggle { display: none; }
	.site-header .site-search-mobile { display: flex; margin: .75rem 1rem; }
	.menu-backdrop:not([hidden]) { background: rgb(0 0 0 / 60%); border: 0; display: block; inset: 0; position: fixed; z-index: 499; }
	body.noasaba-mobile-menu-open { overflow: hidden; }
}

@media (max-width: 782px) {
	body.admin-bar .site-header { margin-top: 0 !important; top: 46px; }
	body.admin-bar .site-header .nav-links { top: 46px; }
}

@media (prefers-reduced-motion: reduce) {
	.site-header *, .site-header *::before, .site-header *::after { transition-duration: .01ms !important; }
}
