/*
Opinionated styling for raw HTML elements.

- h1–h6
- p
- ul, ol
- blockquote
- table
- img
- hr

This defines how content looks without classes. If someone drops plain HTML in, this file makes it decent. 
*/

:where(h1, h2, h3, h4, h5, h6) {
	line-height: 1.15;
	text-wrap: balance;
}
h1 {
	font-size: var(--fs-6);
}
h2 {
	font-size: var(--fs-5);
}
h3 {
	font-size: var(--fs-4);
}
h4 {
	font-size: var(--fs-3);
}
h5 {
	font-size: var(--fs-2);
}
h6 {
	font-size: var(--fs-1);
}

p {
	text-wrap: pretty;
}

:where(p + p) {
	margin-top: var(--s-4);
}

:where(hr) {
	border: 0;
	border-top: var(--b-1) solid var(--c-border);
	margin-block: var(--s-6);
}

:where(blockquote) {
	border-inline-start: 4px solid var(--c-border);
	padding-inline-start: var(--s-4);
	color: var(--c-muted);
}

:where(pre) {
	padding: var(--s-4);
	border: var(--b-1) solid var(--c-border);
	border-radius: var(--r-1);
	overflow: auto;
	background: var(--c-surface);
}

:where(table) {
	width: 100%;
}
:where(th, td) {
	padding: var(--s-3);
	border-bottom: var(--b-1) solid var(--c-border);
	text-align: left;
}