@import url("/fonts/lpmq-isep-misbah/font.css");

.markdown-document {
	line-height: 150%;
}

.markdown-document .heading-content {
	font-family: var(--font-family--heading);
	line-height: 100%;
}
.markdown-document :is(p, ul, ol, table) {
	font-family: var(--font-family--body);
}

/** LIST */
.markdown-document :is(ul, ol) {
	padding-left: 2em;
}

/*- CHECKBOX LIST */
.markdown-document li:has(> input[type="checkbox"]) {
	list-style: none;
}

.markdown-document li > input[type="checkbox"] {
	appearance: none;
	position: absolute;
}

.markdown-document li > input[type="checkbox"]::after {
	--checkbox-size: 16px;
	content: "";
	position: absolute;
	display: grid;
	place-items: center;
	width: var(--checkbox-size);
	height: var(--checkbox-size);
	margin-left: calc(-1.5 * var(--checkbox-size));
	border: 1px solid var(--border-mute);
	border-radius: 4px;
	box-sizing: border-box;
	top: 6px;
	aspect-ratio: 1;
}

.markdown-document li > input[type="checkbox"]:checked::after {
	content: "check";
	font-family: "Material Symbols Outlined";
	font-weight: bold;
	font-size: 0.9em;
	color: var(--background);
	background-color: var(--primary);
	border: none;
}

/** IMAGE */
.markdown-document img {
	max-width: 100%;
}

/** TABLE */
.markdown-document table {
	border-collapse: collapse;
	display: block;
	overflow-x: auto;
	margin-block: 1em;
}

.markdown-document td,
.markdown-document th {
	border: 1px solid var(--border-mute);
	padding: .25em .75em;
	vertical-align: text-top;
}

.markdown-document th {
	text-align: left;
	background: hsl(from var(--border-mute) h s l / 20%);
}

/** BLOCKQUOTE */
.markdown-document blockquote {
	border-left: 4px solid var(--primary);
	background-color: hsl(from var(--primary) h s l / 10%);
	margin-inline: 0;
	border-radius: 0 .5em .5em 0;
	padding-inline: 1em;
	padding-block: .5em;
}

.markdown-document blockquote :first-child {
	margin-top: 0;
}
.markdown-document blockquote :last-child {
	margin-bottom: 0;
}

/** ALERTS */
.markdown-alert {
	border-left: 4px solid var(--color);
	background-color: hsl(from var(--color) h s l / 10%);
	margin-inline: 0;
	margin-bottom: 1em;
	border-radius: 0 .5em .5em 0;
	padding: .5em 1em;
	overflow-x: auto;
}

.markdown-alert :last-child {
	margin-bottom: 0;
}

.markdown-alert-note,
.markdown-alert-info {
	--color: var(--info);
}
.markdown-alert-tip,
.markdown-alert-success {
	--color: var(--success);
}
.markdown-alert-abstract,
.markdown-alert-todo {
	--color: hsl(from var(--info) h calc(s + 20) calc(l + 20));
}
.markdown-alert-important,
.markdown-alert-example {
	--color: var(--important);
}
.markdown-alert-warning,
.markdown-alert-question {
	--color: var(--warning);
}
.markdown-alert-failure,
.markdown-alert-danger,
.markdown-alert-bug,
.markdown-alert-caution {
	--color: var(--error);
}
.markdown-alert-quote {
	--color: var(--text);
}

.markdown-alert-title {
	color: var(--color);
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-weight: bold;
	margin-bottom: .5em;
}

.markdown-alert-icon span.material-symbols-outlined {
	vertical-align: text-bottom;
}

.markdown-alert-title svg {
	fill: currentColor;
}

/** LINK */
.anchor:hover {
	border-bottom: 1px solid var(--link);
}

/** FOOTNOTES */
.markdown-document hr[data-footnotes] {
  max-width: 2in;
}

.markdown-document #footnote-label {
	display: none;
	visibility: hidden;
}

section.footnotes > ol {
	font-size: 0.83em;
	list-style-type: none;
	counter-reset: footnote;
}

section.footnotes > ol > li {
	position: relative;
}

section.footnotes > ol > li::before {
	content: counter(footnote);
	counter-increment: footnote;
	font-size: 0.75em;
	vertical-align: super;
	position: absolute;
	transform: translateX(-100%);
	margin-left: -.5em;
	top: -4px;
}

/** MATH EQUATIONS */
mjx-container {
	overflow-x: auto;
	overflow-y: hidden;
}

@media print {
	:root {
		--text: black;
		--text-mute: hsl(0, 0%, 30%);

		--border: hsl(0, 0%, 30%);
		--border-mute: hsl(0, 0%, 60%);

		--background: white;
		--background-accent: hsl(0, 0%, 80%);
	}

	body {
		print-color-adjust: exact;
	}

	header {
		display: none;
	}

	aside {
		display: none;
	}

	main {
		max-width: unset;
	}

	hr {
		border-color: var(--text);
	}
}