/*
 * Fröhlich Lab site stylesheet.
 *
 * Hand-written replacement for Bootstrap 3.0.3 + bootstrap-theme + Font Awesome 4.3.
 * Plain CSS (no Sass), so it is served as-is by Jekyll 3 and Jekyll 4 alike.
 * Geometry (container widths, 30px gutters, breakpoints at 768/992/1200px) matches
 * the old Bootstrap grid so the pages keep their previous layout.
 */

/*
 * Colours: light-dark(<light>, <dark>) picks a value from the page's colour
 * scheme. By default that follows the visitor's system setting; the header
 * button stores an explicit choice as data-theme on <html> (see default.html).
 */
:root {
	color-scheme: light dark;
	--font: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--fg: light-dark(#000, #e6e6e6);
	--bg: light-dark(#fff, #121417);
	--link: light-dark(#337ab7, #6ea8fe);        /* 4.6:1 / 8:1 on the background */
	--link-hover: light-dark(#23527c, #9ec5fe);
	--subtle: light-dark(#687a7c, #9aa5a6);      /* 4.5:1 / 7:1 */
	--muted: light-dark(#999, #8a8f95);
	--bar-bg: light-dark(#fff, #181b1f);
	--bar-fg: light-dark(#727272, #a8adb3);      /* header/footer links */
	--bar-fg-hover: light-dark(#333, #fff);
	--bar-border: light-dark(#e7e7e7, #2a2e33);
	--control-border: light-dark(#ddd, #3a3f45);
	--control-fg: light-dark(#888, #aab0b6);
	--rule: light-dark(#eee, #2a2e33);
	--year-rule: light-dark(#808088, #5a5f66);
	--photo-border: light-dark(#000, #3a3f45);
	--life: light-dark(rgba(51, 122, 183, 0.14), rgba(110, 168, 254, 0.12)); /* background cells */
	--surface: light-dark(rgba(255, 255, 255, 0.94), rgba(24, 27, 31, 0.94)); /* content boxes */
	--box-border: light-dark(#e7e7e7, #2a2e33);
	--gutter: 30px;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ---------- Base ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.428571429;
	color: var(--fg);
	background-color: var(--bg);
}

h1, h2, h3, h4, h5, h6 {
	margin: 20px 0 10px;
	font-family: inherit;
	font-weight: 700;
	line-height: 1.1;
}

h4, h5, h6 { margin-top: 10px; }

h1 { font-size: 28px; }
h2 { font-size: 24px; }
h3 { font-size: 21px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }

h1 small {
	font-size: 65%;
	font-weight: 400;
	line-height: 1;
	color: var(--muted);
}

p { margin: 0 0 10px; }

ul, ol {
	margin-top: 0;
	margin-bottom: 10px;
}

b, strong { font-weight: 700; }

a {
	color: var(--link);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--link-hover);
	text-decoration: underline;
}

:focus-visible {
	outline: 2px solid var(--link);
	outline-offset: 2px;
}

img {
	border: 0;
	vertical-align: middle;
}

hr {
	height: 0;
	margin: 20px 0;
	border: 0;
	border-top: 1px solid var(--rule);
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 10px;
	z-index: 1100;
	padding: 8px 12px;
	background: var(--bg);
}

.skip-link:focus { top: 10px; }

.icon {
	width: 1.2857em;            /* fixed width, like Font Awesome's fa-fw */
	height: 1em;
	vertical-align: -0.125em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- Layout ---------- */

.container {
	margin-right: auto;
	margin-left: auto;
	padding-right: 25px;
	padding-left: 25px;
}

@media (min-width: 768px) { .container { width: 750px; } }
@media (min-width: 992px) { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }

/* Space for the fixed header and footer bars. */
.site-main {
	padding-top: 50px;
	padding-bottom: 50px;
}

/*
 * Sidebar + main column on a 12-column grid (same geometry as Bootstrap's
 * col-md-*). Stacks below 992px.
 *   .split          3 + 8 columns
 *   .split-wide     3 + 9
 *   .split-narrow   2 + 10
 */
.split {
	--aside: 3;
	--main: 8;
}

.split-wide { --main: 9; }

.split-narrow {
	--aside: 2;
	--main: 10;
}

/* Three equal columns from 992px (home feeds, team) or 1200px (papers, .paper-grid). */
@media (min-width: 992px) {
	.split {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--gutter);
	}

	.split > :first-child { grid-column: span var(--aside); }
	.split > :nth-child(2) { grid-column: span var(--main); }

	.columns-3 {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: var(--gutter);
	}
}

.paper-grid {
	display: grid;
	gap: 20px var(--gutter);
}

@media (min-width: 1200px) {
	.paper-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/*
 * Vertical spacing between blocks. Padding rather than margin, so it never
 * collapses with neighbouring margins, matching the empty spacer divs it replaced.
 */
.pt-5 { padding-top: 5px; }
.pt-20 { padding-top: 20px; }
.pt-50 { padding-top: 50px; }
.pb-20 { padding-bottom: 20px; }

/* Heading above a list of papers on member and project pages. */
.list-heading { padding: 20px 0 10px; }

/* Sidebar entries from _includes/link_item.html. */
.link-item { padding-bottom: 20px; }
.link-item .note { padding-top: 5px; }

/* ---------- Header and footer bars ---------- */

.site-header,
.site-footer {
	position: fixed;
	right: 0;
	left: 0;
	z-index: 1030;
	min-height: 51px;
	background-color: var(--bar-bg);
}

.site-header {
	top: 0;
	border-bottom: 1px solid var(--bar-border);
}

.site-footer {
	bottom: 0;
	border-top: 1px solid var(--bar-border);
}

.site-header__inner,
.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.bar-links {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bar-links a,
.site-brand {
	display: block;
	padding: 15px;
	line-height: 20px;
	color: var(--bar-fg);
}

.bar-links a:hover,
.bar-links a:focus,
.site-brand:hover,
.site-brand:focus {
	color: var(--bar-fg-hover);
	text-decoration: none;
}

/* Inset focus ring, so the scrollable mobile menu does not clip it. */
.bar-links a:focus-visible,
.site-brand:focus-visible { outline-offset: -2px; }

.site-logo img {
	display: block;
	width: 40px;
	height: 40px;
	margin: 5px;
	border-radius: 6px;        /* the logo has a white background: a tile in dark mode */
}

.site-nav {
	display: flex;
	flex: 1;
	align-items: center;
}

.site-brand {
	margin-left: -15px;
	font-size: 22px;
	color: var(--fg);
}

.site-nav .bar-links {
	margin-left: auto;
	margin-right: -15px;
	font-size: 18px;
}

.site-nav a[aria-current="page"] {
	color: var(--fg);
	box-shadow: inset 0 -2px 0 var(--link);
}

.nav-toggle {
	display: none;
	margin: 8px 0 8px auto;
	padding: 9px 10px;
	background: transparent;
	border: 1px solid var(--control-border);
	border-radius: 4px;
	cursor: pointer;
}

.nav-toggle:hover,
.nav-toggle:focus { background-color: var(--control-border); }

.nav-toggle__bar {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 1px;
	background-color: var(--control-fg);
}

.nav-toggle__bar + .nav-toggle__bar { margin-top: 4px; }

.site-footer .bar-links { font-size: 15px; }

.site-footer .bar-links:last-child {
	margin-left: auto;
	margin-right: -15px;
}

/* 768–991px: not enough room for the lab name next to the links. */
@media (min-width: 768px) and (max-width: 991px) {
	.site-brand { display: none; }
}

@media (max-width: 767px) {
	.site-logo { margin-left: -15px; }

	.nav-toggle { display: block; }

	/* Collapsed menu: opens below the bar, links stacked and right-aligned. */
	.site-nav {
		flex: 0 0 calc(100% + 30px);
		flex-direction: column;
		align-items: flex-start;
		max-height: 340px;
		margin: 0 -15px;
		padding: 7.5px 15px;
		overflow-y: auto;
		border-top: 1px solid var(--bar-border);
	}

	.js .site-nav:not(.is-open) { display: none; }

	.site-nav .bar-links {
		flex-direction: column;
		align-self: flex-end;
		margin-top: 15px;
	}

	.site-nav .bar-links a {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	/* Without JavaScript the menu is always open; keep it in the page flow. */
	html:not(.js) .nav-toggle { display: none; }
	html:not(.js) .site-header { position: static; }
	html:not(.js) .site-main { padding-top: 0; }

	/* Footer links stay visible (no second toggle) and shrink to fit. */
	.site-footer .bar-links { font-size: clamp(13px, 4vw, 15px); }

	.site-footer .bar-links a {
		padding-right: 10px;
		padding-left: 10px;
	}

	.site-footer .bar-links:first-child { margin-left: -10px; }
	.site-footer .bar-links:last-child { margin-right: -10px; }
}

/* ---------- Text styles ---------- */

a.off {
	color: inherit;
	border-bottom: none;
}

.title {
	font-size: 45px;
	font-weight: 100;
	line-height: 50px;
}

.head {
	font-size: 32px;
	font-weight: 300;
	line-height: 1.2;
}

.smallhead {
	font-size: 19px;
	font-weight: 300;
	line-height: 23px;
}

/* .title/.head/.smallhead are also used on h1–h3; drop the heading margins. */
.title,
.head,
.smallhead { margin: 0; }

.item-heading { margin: 0 0 5px; }

@media (max-width: 500px) {
	.title {
		font-size: 30px;
		line-height: 30px;
	}
}

.subtle { color: var(--subtle); }

.note-title { font-weight: 600; }

.note-title a {
	color: var(--fg);
	border-bottom: none;
}

.note {
	font-size: 16px;
	font-weight: 300;
	line-height: 20px;
}

.note a {
	color: var(--fg);
	border-bottom: thin dotted;
}

.smallnote {
	font-size: 14px;
	font-weight: 300;
	line-height: 16px;
}

.journal,
.shortref { font-style: italic; }

.page-header {
	margin: 40px 0 20px;
	padding-bottom: 9px;
	border-bottom: 1px solid var(--rule);
}

/* ---------- Home ---------- */

/* Scales with the window, so it stays on one line on desktops and wraps cleanly on phones. */
.home-title {
	margin: 30px 0 25px;
	font-size: clamp(36px, 6vw, 72px);
	font-weight: 300;
	line-height: 1.1;
	text-align: center;
}


.home-banner {
	margin: 1vh 0;
	text-align: center;
}

.home-feeds h2 { padding-bottom: 20px; }
.feed-item { padding-bottom: 20px; }
.feed-item:last-child { padding-bottom: 0; }
.feed-item .smallnote { padding-top: 5px; }

/* News and blog lists: titles sit in a narrow column. */
.post-entry .head { font-size: 24px; }
.post-entry .smallnote { margin-top: 4px; }

.home-banner img {
	max-width: 70%;
	height: auto;
	border: 1px solid var(--photo-border);
}

@media (max-width: 767px) {
	.home-banner img { max-width: 100%; }
}

/* ---------- Research and software lists, tool pages ---------- */

.logobox {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 137px;
}

.projectbox {
	display: flex;
	align-items: center;
	height: 137px;
}

/* Fit inside the 137px box (Bootstrap's .media used to crop larger logos). */
.toollogo {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	padding: 5px;
}

/* ---------- Research ---------- */

/* Icon beside title and text; on phones a smaller icon beside the title only. */
.research-theme {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr);
	column-gap: 20px;
	align-items: start;
}

.research-icon {
	grid-row: span 2;
	align-self: center;         /* vertically centred beside title and text */
	width: 80px;
	height: 80px;
}

@media (max-width: 767px) {
	.research-theme {
		grid-template-columns: 48px minmax(0, 1fr);
		column-gap: 12px;
		align-items: center;
	}

	.research-icon {
		grid-row: auto;
		width: 48px;
		height: 48px;
	}

	.research-theme .head { font-size: 24px; }

	.research-theme .note {
		grid-column: 1 / -1;
		margin-top: 10px;
	}
}

/* ---------- Papers ---------- */

.year-rule {
	height: 2px;
	border: none;
	background-color: var(--year-rule);
}

/* ---------- Team ---------- */

/* Names sit next to the photo in a third of the page. */
.member-card .head { font-size: 24px; }

.member-card {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding-bottom: 15px;
}

.member-photo {
	display: block;
	height: 20vw;
	min-height: 100px;
	max-height: 150px;
	aspect-ratio: 1;           /* same-size squares, whatever the photo's shape */
	object-fit: cover;
	border: 1px solid var(--photo-border);
}

.big-member-photo {
	display: block;
	max-width: 100%;
	height: auto;
	border: 1px solid var(--photo-border);
}

@media (min-width: 992px) {
	.team-grid { row-gap: 20px; }
}

.alumni-title { text-align: center; }

/* ---------- Content boxes ---------- */

/*
 * Rounded boxes that keep the Game of Life background out from behind the
 * text. default.html puts one box around a page's content; list pages set
 * `box: false` and box each item or section themselves inside .boxes.
 */
.box {
	padding: 20px 25px;
	background-color: var(--surface);
	border: 1px solid var(--box-border);
	border-radius: 12px;
}

.box > :first-child { margin-top: 0; }
.box > :last-child,
.box :is(p, ul, ol):last-child { margin-bottom: 0; }

/* A stack (or, with .columns-3, a row) of boxes with gaps between them. */
.page-box,
.boxes {
	margin: 20px 0;
}

.boxes {
	display: grid;
	gap: 20px var(--gutter);
}

.boxes .boxes { margin: 0; }

@media (max-width: 767px) {
	.box { padding: 15px; }
}

/* ---------- Theme button ---------- */

.theme-toggle {
	order: 2;                  /* after the menu on wide screens */
	margin-left: 10px;
	padding: 6px;
	color: var(--bar-fg);
	background: transparent;
	border: 1px solid var(--control-border);
	border-radius: 4px;
	line-height: 0;
	cursor: pointer;
}

.theme-toggle:hover,
.theme-toggle:focus { color: var(--bar-fg-hover); }

html:not(.js) .theme-toggle { display: none; }

.theme-toggle .icon {
	width: 18px;
	height: 18px;
	vertical-align: 0;
}

/* Show the moon in light mode and the sun in dark mode (set by default.html). */
.theme-toggle[data-current="light"] .icon-sun,
.theme-toggle[data-current="dark"] .icon-moon { display: none; }

@media (max-width: 767px) {
	/* Next to the menu button, before the opened menu. */
	.theme-toggle {
		order: 0;
		margin-left: auto;
	}

	.nav-toggle { margin-left: 10px; }
}

/* ---------- Game of Life background (assets/themes/lab/js/life.js) ---------- */

.life {
	position: fixed;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	pointer-events: none;
	color: var(--life);       /* read by life.js as the cell colour */
}

/* ---------- Print ---------- */

/* Like Bootstrap's print styles: no fixed bars, which would repeat on
   every printed page and cover content. */
@media print {
	:root { color-scheme: light; }   /* dark text on paper, whatever the theme */

	.site-header,
	.site-footer,
	.skip-link,
	.life { display: none; }

	.box {
		padding: 0;
		border: 0;
	}

	.site-main {
		padding-top: 0;
		padding-bottom: 0;
	}
}