/* Shared top navigation bar — the SINGLE SOURCE for both the public website and
   the group wiki. The site loads it directly; the wiki loads this same file
   (served at /assets/navbar.css) so the two bars match exactly. Fully scoped
   under .shin-topbar. */

/* Reset the host page's influence inside the bar */
.shin-topbar, .shin-topbar * { box-sizing: border-box; }
.shin-topbar ul, .shin-topbar li { margin: 0; padding: 0; border: 0; list-style: none; line-height: inherit; }
.shin-topbar a { text-decoration: none; background: none; }
.shin-topbar a::after { content: none !important; }

.shin-topbar.navbar {
	margin: 0;
	position: sticky;
	top: 0;
	z-index: 1000;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: .15em 1em;
	background: #fff;
	border-bottom: 1px solid #ddd;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 11pt;
	line-height: 1.5;
	font-weight: 400;
}
.shin-topbar .navbar-brand {
	display: inline-block;
	padding: .15em 0;
	margin-right: 1em;
	font-size: 1.25em;
	line-height: inherit;
	white-space: nowrap;
	text-decoration: none;
	/* No explicit weight: the brand's own <b> tags supply it (700, with the
	   "@ MIT" span reaching 900 via Bootstrap's relative `bolder`). Setting
	   font-weight:bold here pushed the whole brand to 900 — too heavy. */
	color: rgba(0, 0, 0, .9);
}
.shin-topbar .navbar-brand:hover,
.shin-topbar .navbar-brand:focus { color: rgba(0, 0, 0, .9); text-decoration: none; }
.shin-topbar .mit { color: #750014; }

/* Hamburger toggler (mobile) */
.shin-topbar .navbar-toggler {
	border: none;
	background: transparent;
	padding: .25em;
	margin-left: .5em;
	cursor: pointer;
	color: rgba(0, 0, 0, .55);
	font-size: 1.25em;
	line-height: 1;
}
.shin-topbar .navbar-toggler-icon {
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	vertical-align: middle;
	background: no-repeat center center;
	background-size: 100% 100%;
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Nav links */
.shin-topbar .collapse:not(.show) { display: none; }
.shin-topbar .navbar-collapse { flex-basis: 100%; flex-grow: 1; align-items: center; }
.shin-topbar .navbar-nav { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; list-style: none; }
.shin-topbar .nav-item { list-style: none; }
.shin-topbar .nav-link { display: block; padding: .5em 1em; color: rgba(0, 0, 0, .5); text-decoration: none; }
.shin-topbar .navbar-nav .nav-link { padding-right: 0; padding-left: 0; }
.shin-topbar .nav-link:hover,
.shin-topbar .nav-link:focus { color: rgba(0, 0, 0, .7); text-decoration: none; }
/* Current-page highlight: black font, NOT bold — bold is wider than the other
   items and shifts the bar when the active page changes. */
.shin-topbar .nav-link.active { color: rgba(0, 0, 0, .9); }

/* Search — a large box on desktop; the magnifier is fixed at the box's right
   edge (same design/size/position always). Activating only widens the box
   (font-size + padding are constant, so the height never changes). Mobile:
   collapses to just the magnifier; tapping expands it. */
.shin-topbar .shin-nav-search { position: relative; margin-left: auto; display: flex; align-items: center; }
.shin-topbar .shin-nav-search input[type="search"] {
	display: block;
	width: 16em;
	max-width: 34vw;
	min-width: 0;
	font: inherit;   /* same font-size as the nav links (11pt) */
	line-height: 1.4;
	padding: .4em 2.2em .4em .7em;
	border: 1px solid #ccc;
	border-radius: .35em;
	outline: none;
	color: #202122;
	background: #fff;
}
.shin-topbar .shin-nav-search button {
	position: absolute;
	right: .15em;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	border: none;
	background: transparent;
	padding: .25em;
	color: rgba(0, 0, 0, .5);
	cursor: pointer;
	font-size: 16px;
}
.shin-topbar .shin-nav-search button svg { width: 1.3em; height: 1.3em; }
.shin-topbar.navbar:has(.shin-nav-search.expanded) > .navbar-brand,
.shin-topbar.navbar:has(.shin-nav-search.expanded) > .navbar-collapse { display: none !important; }
.shin-topbar .shin-nav-search.expanded { order: -1; flex: 1 1 100%; }
.shin-topbar .shin-nav-search.expanded input[type="search"] { width: auto; max-width: none; flex: 1 1 auto; }
/* Search shows as a magnifier BUTTON on all widths; clicking it expands the input. */
.shin-topbar .shin-nav-search:not(.expanded) input[type="search"] { display: none; }
.shin-topbar .shin-nav-search:not(.expanded) button { position: static; transform: none; padding: .25em; }
.shin-topbar .shin-nav-search:not(.expanded) button svg { width: 1.5em; height: 1.5em; }

/* Live results preview dropdown */
.shin-topbar .shin-search-results {
	position: absolute; top: 100%; left: 0; right: 0; margin-top: .2em;
	background: #fff; border: 1px solid #ccc; border-radius: .3em;
	max-height: 60vh; overflow-y: auto; z-index: 1100;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .15); display: none;
}
.shin-topbar .shin-search-item { display: block; padding: .45em .7em; border-bottom: 1px solid #eee; color: #202122; text-decoration: none; }
.shin-topbar .shin-search-item:last-child { border-bottom: none; }
.shin-topbar .shin-search-item:hover { background: #f5f5f5; text-decoration: none; }
.shin-topbar .shin-search-item b { color: #750014; display: block; }
.shin-topbar .shin-search-item span { font-size: .82em; color: #666; }
.shin-topbar .shin-search-none { padding: .45em .7em; color: #888; }

/* Desktop: single row */
@media (min-width: 992px) {
	.shin-topbar.navbar { flex-flow: row nowrap; justify-content: flex-start; }
	.shin-topbar .navbar-nav { flex-direction: row; }
	.shin-topbar .navbar-nav .nav-link { padding-right: .5em; padding-left: .5em; }
	.shin-topbar .navbar-collapse { display: flex !important; flex-basis: auto; }
	.shin-topbar .navbar-toggler { display: none; }
}
/* Mobile: controls on the top row; menu/expanded-search drop below. Search
   collapses to just the magnifier. */
@media (max-width: 991.98px) {
	.shin-topbar .navbar-brand { order: 0; }
	.shin-topbar .shin-nav-search { order: 1; }
	.shin-topbar .navbar-toggler { order: 2; }
	.shin-topbar .navbar-collapse { order: 5; }
	.shin-topbar.navbar:has(.shin-nav-search.expanded) > .navbar-toggler { display: none !important; }
	.shin-topbar .shin-nav-search.expanded input[type="search"] { display: block; font-size: 16px; }  /* 16px on the full-width mobile box prevents iOS zoom-on-focus */
}