/* Site-specific additions to the Editorial theme: a top navigation bar instead of the sidebar. */

#header.site-header {
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75em 2.5em;
	padding: 2.5em 0 1em 0;
}
	#header.site-header > * { flex: 0 0 auto; }
	#header.site-header .site-nav { flex: 1 1 auto; }

.site-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em 2em;
	list-style: none;
	margin: 0;
	padding: 0;
}
	.site-nav li { padding: 0; }
	.site-nav a {
		border-bottom: 0;
		color: #3d4449;
		font-family: "Roboto Slab", serif;
		font-size: 0.85em;
		letter-spacing: 0.075em;
		text-transform: uppercase;
	}
	.site-nav a:hover, .site-nav a.active { color: #5690f3; }
	.site-nav a.active { border-bottom: solid 2px #5690f3; }

@media screen and (max-width: 736px) {
	#header.site-header { padding-top: 1.5em; gap: 0.75em 1.5em; }
	#header.site-header .icons { position: static; height: auto; line-height: inherit; }
	#header.site-header .site-nav { order: 3; flex-basis: 100%; }
}

/* Footer with contact details, at the bottom of every page */
#footer.site-footer {
	border-top: solid 1px rgba(210, 215, 217, 0.75);
	font-size: 0.9em;
	margin-top: 3em;
	padding-top: 1.5em;
}
	#footer.site-footer p { margin-bottom: 0; }
	#footer.site-footer .credit { float: right; font-size: 0.8em; opacity: 0.7; }

/* Collapsible CV sections */
details.cv-section { margin-bottom: 1.5em; }
	details.cv-section > summary { cursor: pointer; list-style: none; }
	details.cv-section > summary::-webkit-details-marker { display: none; }
	details.cv-section > summary h2 { display: inline; }
	details.cv-section > summary h2::after { content: " +"; color: #5690f3; }
	details.cv-section[open] > summary h2::after { content: " −"; }
	details.cv-section > summary + * { margin-top: 1em; }

/* Math stuff page */
.post-list article { border-bottom: solid 1px rgba(210, 215, 217, 0.75); margin-bottom: 2em; padding-bottom: 1em; }
	.post-list article:last-child { border-bottom: 0; }
	.post-list h3 a { border-bottom: 0; }

/* Homepage map (_includes/travel-map.html) */
#travel-map {
	height: 26em;
	border-radius: 0.375em;
	position: relative;
	z-index: 0;
}

#travel-map .map-pin {
	background: none;
	border: none;
}

#travel-map .leaflet-popup-content {
	font-size: 0.85em;
	line-height: 1.5;
}

#travel-map .leaflet-popup-content ul {
	margin: 0.4em 0 0 0;
	padding-left: 1.1em;
}

#travel-map .leaflet-popup-content li {
	padding-left: 0;
	margin-bottom: 0.3em;
}

#travel-map .leaflet-popup-content .when {
	color: #9fa3a6;
	white-space: nowrap;
}

#travel-map-legend {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5em 1.5em;
	padding: 0;
	margin: 1em 0 0 0;
	font-size: 0.85em;
}

#travel-map-legend li {
	padding: 0;
}

#travel-map-legend .dot {
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	border-radius: 50%;
	margin-right: 0.35em;
	vertical-align: middle;
}

#travel-map-legend .dot.current { background: #2ca02c; }
#travel-map-legend .dot.affiliation { background: #d62728; }
#travel-map-legend .dot.trip { background: #1f77b4; }
#travel-map-legend .dot.upcoming { background: #f1c40f; }

@media screen and (max-width: 736px) {
	#travel-map {
		height: 24em;
	}
}

/* Back button above the title of posts and research pages (_includes/back-link.html) */
.back-link {
	display: inline-block;
	margin: 0 0 1.5em 0;
	padding: 0.25em 0.9em;
	border: solid 1px rgba(210, 215, 217, 0.75);
	border-bottom: solid 1px rgba(210, 215, 217, 0.75);
	border-radius: 0.375em;
	color: #7f888f;
	font-family: "Roboto Slab", serif;
	font-size: 0.75em;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
	.back-link:hover { border-color: #5690f3; color: #5690f3 !important; }

/* Collapsible sections in Markdown pages (_plugins/collapsible_sections.rb) */
details.md-section { margin-bottom: 1em; }
	details.md-section > summary { cursor: pointer; list-style: none; }
	details.md-section > summary::-webkit-details-marker { display: none; }
	details.md-section > summary > * { display: inline-block; margin-bottom: 1em; }
	details.md-section > summary > *::after { content: " +"; color: #5690f3; }
	details.md-section[open] > summary > *::after { content: " −"; }

/* Darker body text than the theme's light grey (#7f888f), for better contrast */
body, input, select, textarea { color: #4f575c; }

/* Smaller headings than the theme's: page titles and section titles (a "# Heading" inside a
   page is a section title, smaller than the page title) */
#main header.main > h1 { font-size: 2.4em; }
h2 { font-size: 1.3em; }
h3 { font-size: 1.1em; }
#main .inner > section > h1,
#main .inner > section > details.md-section > summary > h1 { font-size: 1.6em; }

@media screen and (max-width: 1680px) {
	#main header.main > h1 { font-size: 2.25em; }
}

@media screen and (max-width: 980px) {
	#main header.main > h1 { font-size: 2.1em; }
}

@media screen and (max-width: 736px) {
	#main header.main > h1 { font-size: 1.6em; }
	h2 { font-size: 1.2em; }
	#main .inner > section > h1,
	#main .inner > section > details.md-section > summary > h1 { font-size: 1.4em; }
}

/* Images in posts and pages never wider than the text */
#main .inner > section img { max-width: 100%; height: auto; }

/* Timeline page (timeline.md, _includes/timeline.html, assets/js/timeline.js) */
.tl { --tl-rule: rgba(210, 215, 217, 0.75); margin-bottom: 2em; }
.tl button {
	appearance: none; background: #fff; box-shadow: none; color: #3d4449 !important; cursor: pointer;
	font-family: "Open Sans", sans-serif; font-size: 0.75em; font-weight: 400; height: auto;
	letter-spacing: normal; line-height: 1.5; padding: 0.25em 0.8em; text-transform: none; white-space: normal;
}
.tl a { border-bottom: dotted 1px; }
.tl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em 1.2em; margin-bottom: 1em; }
.tl-seg { display: inline-flex; border: solid 1px var(--tl-rule); border-radius: 999px; overflow: hidden; }
	.tl-seg button { border-radius: 0; padding: 0.3em 1em; }
	.tl-seg button[aria-pressed="true"] { background: #3d4449; color: #fff !important; }
.tl-chips { display: flex; flex-wrap: wrap; gap: 0.35em; }
.tl button.tl-chip { border: solid 1px var(--tl-rule); border-radius: 999px; display: inline-flex; align-items: center; gap: 0.45em; }
	.tl-chip .dot { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--c); }
	.tl button.tl-chip[aria-pressed="true"] { border-color: var(--c); box-shadow: inset 0 0 0 1px var(--c); }
.tl-updated { font-size: 0.8em; margin-top: 0.8em; }

/* Map: time runs down a sticky year axis; boxes and cards are placed by the script. */
.tl-map { border: solid 1px var(--tl-rule); border-radius: 0.375em; height: min(78vh, 60em); overflow: auto; }
.tl-row { display: flex; }
.tl-axis { position: sticky; left: 0; z-index: 3; flex: none; width: 4em; background: #fff; border-right: solid 1px var(--tl-rule); }
.tl-tick { position: absolute; right: 0.7em; font-family: "Roboto Slab", serif; font-size: 0.75em; color: #3d4449; }
	.tl-tick.major { font-weight: 700; }
.tl-plane { position: relative; flex: none; }
.tl-grid { position: absolute; left: 0; right: 0; border-top: solid 1px rgba(210, 215, 217, 0.45); }
.tl-box {
	position: absolute; border-radius: 10px; transition: opacity 0.15s;
	background: color-mix(in srgb, var(--c) 9%, white); border: solid 1px color-mix(in srgb, var(--c) 35%, white);
}
.tl-lbl {
	position: absolute; left: 10px; right: 10px; top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	color: color-mix(in srgb, var(--c) 75%, black); font-size: 0.68em; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
}
.tl button.tl-card {
	position: absolute; width: 200px; text-align: left; border: solid 1px var(--tl-rule); border-left: solid 3px var(--c);
	border-radius: 6px; padding: 0.45em 0.6em; font-size: 0.75em; line-height: 1.35; transition: opacity 0.15s, box-shadow 0.15s;
}
	.tl button.tl-card:hover, .tl button.tl-card.sel { box-shadow: 0 2px 10px rgba(61, 68, 73, 0.18); }
	.tl-y { font-family: "Roboto Slab", serif; font-weight: 700; margin-right: 0.35em; }
.tl-edges { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
	.tl-edges path { fill: none; stroke: #c3c9cd; stroke-width: 1.2; transition: opacity 0.15s; }
	.tl-edges path.cross { stroke-dasharray: 3 3; }
.tl-plane.focus .tl-card:not(.on) { opacity: 0.25; }
.tl-plane.focus .tl-box:not(.on) { opacity: 0.35; }
.tl-plane.focus .tl-edges path { opacity: 0.15; }
.tl-plane.focus .tl-edges path.on { opacity: 1; stroke: #3d4449; stroke-width: 1.6; }

.tl-detail {
	position: fixed; right: 1em; bottom: 1em; z-index: 10; width: min(22em, calc(100vw - 2em)); max-height: 70vh; overflow: auto;
	background: #fff; border: solid 1px var(--tl-rule); border-top: solid 4px var(--c); border-radius: 0.375em;
	box-shadow: 0 6px 24px rgba(61, 68, 73, 0.18); font-size: 0.85em; padding: 0.9em 1.1em;
}
	.tl-detail h3 { font-size: 1.05em; margin: 0.2em 1em 0.4em 0; }
	.tl-detail p { margin: 0.7em 0 0.2em; font-weight: 600; }
	.tl-detail ul { margin: 0; padding-left: 1.1em; }
	.tl-detail li { padding-left: 0; }
	.tl button.tl-x { position: absolute; right: 0.4em; top: 0.3em; border: 0; font-size: 1.3em; padding: 0 0.3em; color: #7f888f !important; }
.tl-field { color: var(--c); font-size: 0.85em; font-weight: 600; }

/* List: the view on narrow screens */
.tl-list h3 { margin: 1.6em 0 0.4em; }
.tl-entry { display: grid; grid-template-columns: 4em 1fr; gap: 0 1em; padding: 0.6em 0; border-top: solid 1px var(--tl-rule); scroll-margin-top: 6em; }
	.tl-year { font-family: "Roboto Slab", serif; font-weight: 700; color: #3d4449; }
	.tl-body { border-left: solid 3px var(--c); padding-left: 0.9em; color: #3d4449; transition: background 0.2s; }
	.tl-entry.flash .tl-body { background: #eef4fe; }
	.tl-note { color: #7f888f; font-size: 0.9em; }
	.tl-meta { display: flex; flex-wrap: wrap; gap: 0.2em 1em; font-size: 0.75em; margin-top: 0.3em; }

@media screen and (max-width: 736px) {
	.tl-seg { display: none; }
	.tl-entry { grid-template-columns: 3.2em 1fr; gap: 0 0.6em; }
}