/*
	Planet Formation Lab — Custom Styles
	https://pfl.mit.edu

	All PFL-specific additions to the HTML5 UP Hyperspace template.
	Load this stylesheet AFTER main.css in every HTML page.
*/

/* ─── Brand colours ──────────────────────────────────────────────────────── */

:root {
	--pfl-orange:     rgb(242, 131, 40);
	--pfl-dark-gray:  rgb(87, 87, 87);
	--pfl-light-gray: rgb(178, 178, 178);
	--pfl-blue:       rgb(33, 156, 222);
	--pfl-color:      var(--pfl-orange);
}

/* ─── Utility classes ────────────────────────────────────────────────────── */

.section-icon {
	margin-right: 1em;
	color: var(--pfl-color);
}

.member-photo {
	border-radius: 50%;
	width: 250px;
}

.news-icon {
	margin-right: 1em;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.footer-logo {
	width: 250px;
}

.footer-copyright {
	font-size: 0.7em;
	text-align: right;
}

/* ─── Brushy text decorations ────────────────────────────────────────────── */

h1.brushy {
	position: relative;
	display: inline-block;
}

	h1.brushy::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translate(-50%, -200%);
		width: 110%;
		height: 0.1em;
		background: var(--pfl-color);
		border-radius: 45% 55% 35% 65% / 60% 40% 50% 50%;
		z-index: -1;
	}

h3.brushy {
	position: relative;
	display: inline-block;
}

	h3.brushy::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translate(-50%, -150%);
		width: 120%;
		height: 0.1em;
		background: var(--pfl-color);
		border-radius: 45% 55% 35% 65% / 60% 40% 50% 50%;
		z-index: -1;
	}

h4.brushy {
	position: relative;
	display: inline-block;
}

	h4.brushy::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translate(-50%, -150%);
		width: 100%;
		height: 0.1em;
		background: var(--pfl-color);
		border-radius: 45% 55% 35% 65% / 60% 40% 50% 50%;
		z-index: -1;
	}

.brushy_right {
	position: relative;
	display: inline-block;
	z-index: 1;
}

	.brushy_right::after {
		content: "";
		position: absolute;
		left: -5%;
		top: 50%;
		transform: translateY(-50%);
		width: 130%;
		height: 1.8em;
		z-index: -1;
		background: linear-gradient(90deg, #f2832888, #f2832800);
		border-radius: 10% 45% 40% 12% / 70%;
	}

.brushy_left {
	position: relative;
	display: inline-block;
	z-index: 1;
}

	.brushy_left::after {
		content: "";
		position: absolute;
		left: -25%;
		top: 50%;
		transform: translateY(-50%);
		width: 130%;
		height: 1.8em;
		z-index: -1;
		background: linear-gradient(270deg, #f2832888, #f2832800);
		border-radius: 55% 10% 8% 40% / 70%;
	}

/* ─── Research images ────────────────────────────────────────────────────── */

.rounded-shadow {
	border-radius: 10%;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
	height: 350px;
}

/* ─── News table ─────────────────────────────────────────────────────────── */

.scrollable-table {
	max-height: 400px;
	overflow-y: auto;
}

	/* Chrome, Edge, Safari, Opera */
	.scrollable-table::-webkit-scrollbar {
		width: 12px;
	}

	.scrollable-table::-webkit-scrollbar-track {
		background: inherit;
	}

	.scrollable-table::-webkit-scrollbar-thumb {
		background: var(--pfl-light-gray);
		border-radius: 12px;
	}

	.scrollable-table::-webkit-scrollbar-thumb:hover {
		background: var(--pfl-color);
	}

	/* Firefox
	.scrollable-table {
		scrollbar-width: thin;
		scrollbar-color: var(--pfl-color) #ffffff;
	} */

/* ─── Sidebar ─────────────────────────────────────────────────────────────── */

/* Sidebar width: narrower than the template default of 18em (desktop only) */
@media screen and (min-width: 1281px) {

	#sidebar {
		width: 15.3em;
	}

	#sidebar + #wrapper {
		margin-left: 15.3em;
	}

	#sidebar + #wrapper + #footer {
		margin-left: 15.3em;
	}

}

/* Desktop sidebar logo: slightly narrower than full width, left-aligned */
#sidebar nav > ul > li:first-child .image.fit {
	width: 75%;
	margin-left: 0;
	margin-right: auto;
}

/* Sidebar nav active-link gradient: orange instead of template blue */
#sidebar nav a:after {
	background-image: -moz-linear-gradient(to right, var(--pfl-color), rgba(242, 131, 40, 0));
	background-image: -webkit-linear-gradient(to right, var(--pfl-color), rgba(242, 131, 40, 0));
	background-image: -ms-linear-gradient(to right, var(--pfl-color), rgba(242, 131, 40, 0));
	background-image: linear-gradient(to right, var(--pfl-color), rgba(242, 131, 40, 0));
}

#sidebar nav a.active {
	color: var(--pfl-color);
}

/* ─── Mobile toolbar ─────────────────────────────────────────────────────── */

@media screen and (max-width: 1280px) {

	/* Active-link underline: orange instead of template blue */
	#sidebar nav a:after {
		background-image: none;
		background-color: var(--pfl-color);
	}

	/* Logo: left-aligned, auto right margin pushes nav links to the right */
	#sidebar nav > ul > li:first-child {
		display: flex;
		align-items: center;
		margin: 0 auto 0 1.5em;
	}

	/* Right padding on the last nav link */
	#sidebar nav > ul > li:last-child {
		margin-right: 1.5em;
	}

	#sidebar nav > ul > li:first-child .image.fit {
		width: auto;
		margin: 0;
		height: 100%;
		display: flex;
		align-items: center;
	}

	#sidebar nav > ul > li:first-child .image.fit img {
		width: auto;
		height: 2.5em;
	}

}

/* ─── Intro section ──────────────────────────────────────────────────────── */

#intro h1.brushy {
	display: table;
	margin-left: auto;
	margin-right: auto;
	/* Fluid font: scales smoothly with viewport, avoiding discrete jumps */
	font-size: clamp(2.5rem, 5vw, 6rem);
}