@import url("giallo-dark.css") (prefers-color-scheme: dark);
@import url("giallo-light.css") (prefers-color-scheme: light);

:root {
	color-scheme: light dark;

	--bg: light-dark(white, #111);
	--dim-bg: light-dark(#EEE, #222);
	--fg: light-dark(black, #EEE);
	--dim-fg: light-dark(#666, #888);

	--link-fg: light-dark(#0000ee, #9393fd);
	--link-visited-fg: light-dark(#551a8b, #bb88e9);
	--link-external-marker-fg: light-dark(maroon, #ff7769);

	--font-serif: "Libertinus Serif", serif;
	--font-serif-title: "Libertinus Serif Display", serif;
	--font-serif-variants: discretionary-ligatures historical-ligatures styleset(swashy, swash-ampersand);
	--font-lettrine: "Libertinus Serif Initials", serif;
	--font-mono: "IBM Plex Mono", mono;
	--font-keyboard: "Libertinus Keyboard";
}

@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
}

::view-transition-group(*) {
	animation-duration: 0.25s;
}

::view-transition-old(main) {
}

::view-transition-new(main) {
}

html {
	scroll-behavior: smooth;
	font-family: var(--font-serif);
	font-variant: var(--font-serif-variants);
	font-size: 18px;
	color: var(--fg);
	background-color: var(--bg);
	max-width: 800px;
	margin: 0 auto;
	padding: 1em;
	scrollbar-color: var(--fg) var(--bg);
	scrollbar-gutter: stable;
}

header {
	display: flex;
	flex-wrap: wrap;

	& > h1 {
		text-wrap: nowrap;
		flex: 1;
		margin-right: 1em;
		transition: translate 0.2s ease;

		a {
			padding: 10px;
			border: 2px solid var(--fg);
			box-shadow: 10px 10px var(--fg);
			transition: box-shadow 0.2s ease;
			color: var(--fg);
			text-decoration: none;
		}

		&:hover, &:focus-within {
			translate: -2px -2px;
			a {
				box-shadow: 17px 17px var(--fg);
			}
		}
	}

	& > nav {
		align-self: center;
		& > ul {
			padding: 0;
			list-style-type: none;
			li {
				display: inline-block;
				margin: 0 .2em;
				a {
					display: block;
					font-weight: bold;
					padding: .2em .5em;
					border: 1px solid var(--fg);
					box-shadow: 3px 3px var(--fg);
					text-decoration: none;
					transition: box-shadow 0.2s ease, translate 0.2s ease;
				}
				&:hover, &:focus-within {
					a {
						translate: -2px -2px;
						box-shadow: 7px 7px var(--fg);
					}
				}
			}
		}
	}

	a {
		color: inherit;
	}
}

main {
	margin-top: 1em;
	border-top: 1px dashed var(--fg);
	border-bottom: 1px dashed var(--fg);
	line-height: 1.5;
	view-transition-name: main;

	.post-metadata {
		display: flex;
		column-gap: 1em;
		font-style: italic;

		span, time {
			display: flex;
			align-items: baseline;
			column-gap: .3em;
			padding: .3em;
			border: 1px solid var(--fg);
		}

		.post-date {
			&::before {
				content: "";
				display: block;
				height: .8em;
				width: .8em;
				mask: url(/calendar.svg) center;
				mask-size: cover;
				background: var(--fg);
			}
		}
	}

	h1, h2, h3, h4, h5, h6 {
		text-wrap: balance;

		& > :any-link.heading-anchor {
			color: var(--dim-fg);
			text-decoration: none;
			display: inline-block;
			width: .5em;
			margin-left: -.9em;
			padding: 0 .2em;
		}

		&:target {
			color: var(--bg);
			background-color: var(--fg);
		}
	}

	h1 {
		font-size: clamp(2rem, 3vw, 3rem);
		font-family: var(--font-serif-title);
		font-weight: normal;

		&::after {
			content: "";
			display: block;
			width: 5em;
			height: 2px;
			background: var(--fg);
			margin-top: 3px;
		}
	}

	& > p:first-of-type::first-letter {
		font-size: 4em;
		font-family: var(--font-lettrine);
		line-height: 0.8;
	}

	:any-link {
		color: var(--link-fg);

		&:not(:hover, :focus-visible, :active) {
			text-decoration-color: color-mix(in srgb, currentcolor 40%, transparent)
		}

		&:visited {
			color: var(--link-visited-fg);
		}

		&[rel="external"]::after {
			content: "°";
			color: var(--link-external-marker-fg);
			font-weight: bold;
		}
	}

	ul, ol {
		padding-inline-start: 1em;
	}

	hr {
		border: none;
		text-align: center;
		max-width: 15em;
		margin-inline: auto;
		color: var(--dim-fg);
		font-size: 2em;
		background-image:
			linear-gradient(
				to bottom,
				transparent 3px,
				var(--dim-bg) 3px 5px,
				transparent 5px 8px
			);
		background-position: center;
		background-size: 8px 8px;
		background-repeat: repeat-x;
		&::after {
			content: "⁂";
			background-color: var(--bg);
			padding-inline: .5em;
		}
	}

	pre, figure, details {
		display: grid;
		overflow-x: auto;
		margin: 1.5em 0;
		padding: 1em 1.5em;
		border: 1px solid var(--fg);
		box-shadow: 3px 3px var(--fg);

		code[data-name]::before, figcaption {
			display: block;
			min-width: 100%;
			max-width: 100%;
			font-family: var(--font-mono);
			font-style: italic;
			font-variant: small-caps;
			border-bottom: 1px dotted var(--fg);
			padding-bottom: .5em;
			margin-bottom: .5em;
		}
	}

	pre {
		padding: 0;
		code {
			padding: 1em 1.5em;

			&[data-name]::before {
				content: attr(data-name);
			}
		}
	}

	:not(pre) > code {
		padding: 0 .2em;
		background-color: var(--dim-bg);
	}

	code {
		font-family: var(--font-mono);
		font-size: .9em;
	}

	figure {
		img {
			max-width: 100%;
		}
	}

	table {
		margin: 0 auto;
		border-collapse: collapse;

		th, td {
			padding: 0.4em;
		}

		thead {
			border-bottom: 1px dashed var(--fg);
		}

		tbody tr:nth-child(even) {
			background-color: var(--dim-bg);
			background-size: 8px 8px, 8px 8px;
		}
	}

	blockquote {
		max-width: 25em;
		margin-inline: auto;
		border-top: 1px dotted var(--fg);
		border-bottom: 1px dotted var(--fg);

		p:has(cite) {
			text-align: right;
		}
	}

	.footnotes {
		border-top: 1px dashed var(--fg);
	}

	details {
		padding: 0;
		margin: 1.5em 0;
		summary {
			padding: 1em 1.5em;
			font-variant: small-caps;
			&:focus-visible {
				outline-offset: -4px;
			}
		}

		&[open] {
			&::details-content {
				margin: 1em 1.5em;
				margin-top: 0;
				border-top: 1px dotted var(--fg);
			}
		}
	}

	kbd {
		font-family: var(--font-keyboard);
	}

	/* If the user can't hover, add the title as a floating window on focus */
	@media (any-hover: none) {
		abbr[title] {
			anchor-scope: --abbr;
			anchor-name: --abbr;

			&:focus::after {
				content: attr(title);
				position: fixed;
				position-anchor: --abbr;
				position-area: top;
				position-try-fallbacks: flip-block;
				bottom: anchor(start);
				background-color: var(--dim-bg);
				padding: .2em .5em;
				margin: .3em 0;
				border: 1px solid var(--fg);
				box-shadow: 3px 3px var(--fg);
			}
		}
	}
}

footer {
	text-align: center;
	font-size: .8em;
	font-style: italic;
	color: var(--dim-fg);
}

::target-text {
	color: var(--bg);
	background-color: var(--fg);
}

.giallo-l {
    display: inline-block;
    min-height: 1lh;
    width: 100%;
}
.giallo-ln {
    display: inline-block;
    user-select: none;
    margin-right: 0.4em;
    padding: 0 0.4em;
    min-width: 3ch;
    text-align: right;
    opacity: 0.8;

	border-right: 1px dotted var(--fg);
}

.z-comment {
	font-style: italic;
}