/* Research hub, project pages and theme pages (layouts/research.html, project.html,
   projects.html, _partials/theme-post.html). Kept apart from the original ajayporg theme.
   Project bubbles are shaped like the FEATURED label: dark green when active, grey when not. */

.project-pills {
	clear: both;
	margin: 0.4em 0 1.6em;
	line-height: 2.8rem;
}

/* "Related projects:" before a theme's bubbles on /research/. */
.project-pills-label {
	font-size: 1.4rem;
	margin-right: 4px;
}

.project-pill,
a.project-pill:link,
a.project-pill:visited {
	display: inline-block;
	font-family: 'IBM Plex Sans', Helvetica, sans-serif;
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.8rem;
	color: #fff;
	padding: 2px 8px;
	margin: 0 2px 6px 0;
	border-radius: 5px;
	text-decoration: none;
}

.project-pill.is-active { background-color: #2e6b3c; }
.project-pill.is-inactive { background-color: #737373; }

a.project-pill:hover,
a.project-pill:focus {
	text-decoration: none;
	filter: brightness(1.2);
}

.project-meta {
	clear: both;
	font-size: 1.4rem;
	margin: 0 0 1.2em;
}

.project-meta .project-pill {
	margin-right: 6px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* The drawer the "research" menu link opens (_partials/research-drawer.html,
   /js/research-drawer.js): a light band under the menu, like a panel in the page. */

.research-drawer[hidden] { display: none; }

.research-drawer {
	background-color: #f6f6f4;
	border-top: 1px solid #e4e4e4;
	border-bottom: 1px solid #e4e4e4;
	margin: -1.8rem 0 2.8rem;  /* tucked into the menu's bottom margin */
}

.research-drawer:focus { outline: none; }

/* When the menu has stuck to the top of the window, the drawer floats just below it. */
.research-drawer.is-floating {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 9998;
	margin: 0;
	max-height: calc(100vh - 8rem);
	overflow-y: auto;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
}

.research-drawer-inner {
	position: relative;
	box-sizing: border-box;
	width: 95%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 2.4rem 6rem 1.6rem 2.5rem;
	display: flex;
	gap: 5rem;
}

.research-drawer-col { flex: 1; }

.research-drawer h3 {
	font-family: 'IBM Plex Sans', Helvetica, sans-serif;
	font-size: 1.4rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin: 0 0 1.2rem;
}

/* The headings link to /research/ and /projects/: black, underlined on hover. */
.research-drawer h3 a:link,
.research-drawer h3 a:visited {
	color: #000;
	text-decoration: none;
}

.research-drawer h3 a:hover,
.research-drawer h3 a:focus { text-decoration: underline; }

.research-drawer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.research-drawer li {
	font-size: 1.6rem;
	line-height: 2.2rem;
	margin: 0 0 0.8rem;
}

.research-drawer .project-pills { margin: 0 0 0.8rem; }

.research-drawer-close {
	position: absolute;
	top: 1.4rem;
	right: 1.6rem;
	background: none;
	border: 0;
	padding: 0.2rem 0.8rem;
	font-size: 2.8rem;
	line-height: 1;
	color: #333;
	cursor: pointer;
}

.research-drawer-close:hover,
.research-drawer-close:focus { color: #720a0b; }

/* The research link while its drawer is open. */
a[data-research-drawer][aria-expanded="true"] { text-decoration: underline !important; }

@media (max-width: 700px) {
	.research-drawer { margin-top: -1rem; }
	.research-drawer-inner {
		display: block;
		width: 100%;
		padding: 2rem 5rem 1.2rem 1.6rem;
	}
	.research-drawer-col + .research-drawer-col { margin-top: 2rem; }
}

@media (prefers-color-scheme: dark) {
	.research-drawer {
		background-color: #141414;
		border-color: #333;
	}
	.research-drawer-close { color: #ddd; }
	.research-drawer h3 a:link,
	.research-drawer h3 a:visited { color: #fff; }
}