@use "bootstrap/dist/css/bootstrap";

@use "@fortawesome/fontawesome-free/scss/fontawesome";
@use "@fortawesome/fontawesome-free/scss/brands";
@use "@fortawesome/fontawesome-free/scss/regular";
@use "@fortawesome/fontawesome-free/scss/solid";

@use "academicons/css/academicons";

@use "highlight.js/scss/default";

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";

@font-face {
	font-family: Hebrew;
	size-adjust: 120%;
	src: url('/assets/fonts/SBL_Hebrew.ttf');
	unicode-range: U+0590-05FF, U+FB1D-FB4F;
}

body {
	font-family: Hebrew, sans-serif;
	position: relative;
}

.container {
	max-width: 970px;
}

#sticky-nav {
	padding-top: 1em;
}

#sticky-nav li > a {
	display: inline-block;
	text-wrap: nowrap;
}

@media (max-width: 1269px) {
	/* Navigation in a sticky header */
	#sticky-nav {
		background: rgba(255, 255, 255, 0.9);
		border-bottom: 1px solid #eee;
		padding-bottom: 1em;
		position: sticky;
		top: 0;
	}

	/* Offset # links because of sticky header:
	 * https://stackoverflow.com/a/64998338 */
	:target:before {
		content: '';
		display: block;
		height: 150px;
		margin: -150px 0 0;
	}
}

@media (min-width: 1270px) {
	/* Navigation in a sticky sidebar. The sidebar is to the left of the
	 * content, below the profile image, but sticks to the top of the page when
	 * scrolling down. */
	#sticky-nav {
		display: table-cell;
		/* 970px is width of .container; 180px is width of #sticky-nav. This
		 * places the nav buttons to the left of the content. */
		left: calc(50% - 970px/2 - 180px);
		/* 216px is the height of the profile image. */
		padding-top: calc(216px + 2em);
		text-align: right;
		width: 180px;
	}

	#sticky-nav ul.nav {
		border-right: 1px solid #eee;
		flex-direction: column; /* .flex-column, but only on large screens */
		padding: 1em 1em 1em 0;
		position: sticky;
		top: 1em;
	}

	ul.nav li {
		display: block;
		float: none;
	}

	#content {
		display: table-cell;
		vertical-align: top;
	}
}

.greyed-out {
	color: #888;
}

.larger {
	font-size: larger;
}

.nowrap {
	white-space: nowrap;
}

abbr {
	border-width: 0 !important;
}

img#profile {
	margin: 1em 1em 1em 0;
}

div#basicinfo {
	margin-top: 1em;
}

hr {
	clear: both;
	margin: 2ex 0;
}

a {
	code {
		color: inherit;
	}

	/* FontAwesome and Academicons */
	.ai, .fab {
		color: $body-color;
	}
	&:hover {
		.ai, .fab {
			color: $link-color;
		}
	}
}

table {
	&.main_table {
		> tbody > tr > td:first-child {
			min-width: 120px;
			white-space: nowrap;
		}

		&.publications > tbody > tr > td:first-child {
			min-width: 8em;
			text-align: right;
		}

		&.publications > tbody > tr > td.icon {
			padding-right: 0;
			text-align: center;
		}

		&.publications > tbody > tr > td:last-child > p {
			margin-left: 1.5em;
			text-indent: -1em;
		}

		&.presentations > tbody > tr {
			& > td:first-child {
				min-width: unset;
			}

			& > td:nth-child(2) {
				white-space: nowrap;
			}
		}
	}

	tr {
		td, th {
			padding-right: 1em;
			vertical-align: top;

			&:last-child {
				padding-right: 0;
			}
		}
	}

	margin-bottom: 6px;
}

span.sc {
	font-variant-caps: small-caps;
}

span.tt {
	font-family: monospace;
}

/* markdown is used for page content, but h1 - h3 are already used for the page
 * title and subtitle. So we adapt the font size of the headings in the
 * markdown content so that they are not larger than the page title. */
.markdown {
	h1, h2, h3 { font-weight: bold; }
	h1 { font-size: 18px; } /* size of h4 */
	h2 { font-size: 14px; } /* size of h5 */
	h3 { font-size: 12px; } /* size of h5 */
}

pre code {
	tab-size: 4;
	-moz-tab-size: 4;
	white-space: pre;
}

pre code.lang-js {
	tab-size: 2;
	-moz-tab-size: 2;
}

blockquote {
	font-size: unset;
}

footer {
	padding: 1em 0;
}

.obfuscate > span {
	display: none;
}