@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;
}

.greyed-out {
	color: #888;
}

.larger {
	font-size: larger;
}

.smaller {
	font-size: smaller;
}

.wrap-anywhere {
	word-wrap: anywhere; /* utlity to prevent horizontal scrolling on small screens */
}

@media (max-width: 1269px) {
	.opt-break {
		clear: both;
		display: inline-block;
	}
}

abbr {
	border-width: 0 !important;
}

header {
	margin: 1em 0;

	> div {
		@media (min-width: 1400px) {
			height: 240px;
			position: relative;

			img#profile {
				height: 240px;
				max-width: 30vw;
				position: absolute;
				right: calc(100% + 1em);
			}

			div#basicinfo {
				bottom: 0;
				position: absolute;
				width: 100%;
			}
		}

		@media (max-width: 1399px) and (min-width: 500px) {
			align-items: self-end;
			display: flex;
			height: 240px;

			img#profile {
				max-height: 240px;
				margin-right: 1em;
				max-width: 30vw;
			}

			div#basicinfo {
				flex-grow: 1;
			}
		}

		@media (max-width: 499px) {
			img#profile {
				margin-bottom: 1em;
				max-height: 240px;
				max-width: 100%;
			}

			div#basicinfo {
				clear: both;
			}
		}
	}
}

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 {
	margin-bottom: 6px;

	&.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;
			}
		}

		@media (max-width: 1269px) {
			tr {
				display: block;
			}

			td:first-child {
				display: block;
				font-weight: bold;
				min-width: unset !important;
				text-align: initial !important;
			}

			td.icon {
				min-width: 1.5em;
			}

			&.presentations > tbody > tr {
				padding-bottom: 1ex;

				td:nth-child(2) {
					display: inline;
					padding-right: 0;

					&:after {
						content: ': ';
					}
				}

				td:last-child {
					display: inline;
				}
			}
		}
	}

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

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

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;
}