/* Copyright (C) 2026 Free Software Foundation, Inc.

This file is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This file is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details. */

:root {
	font-family: sans-serif;
	text-rendering: optimizeLegibility;
	font-variant-ligatures: common-ligatures;
	font-kerning: auto;

	--primary: #bb3955;
	--secondary: #973066;
	--ternary: #c73a6c;
	--background: #eee;
	--foreground: #fff;
	--highlight: #ffd;

	/* TODO: adjust the variables to create an accessible dark theme.

	color-scheme: light;
	@media (prefers-color-scheme: dark) {

	} */

	/* Note: when changing this variable, please remember to also adjust
		 the @media rule below.  */
	--page-width: 100ch;
	--padding: 1ch;
}

html {
	box-sizing: border-box;

	/* Hack to prevent the scroll bar from shifting the content of the
		 page: https://stackoverflow.com/a/30293718 */
	padding-left: calc(100vw - 100%);
}
*, *::before, *::after { box-sizing: inherit; }

body {
	max-width: var(--page-width);
	margin: auto;
	padding: var(--padding);
	background: var(--background);
}

code, samp, kbd {
	/* Hack to not use a smaller font for fixed-width text:
		 https://github.com/necolas/normalize.css/issues/519#issuecomment-197131966 */
	font-family: monospace, monospace;
}

dt {
	margin-top: var(--padding);
	font-weight: bold;
}

a {
	color: var(--ternary);

	&:visited { color: var(--secondary); }
}

:target {
	background: color-mix(in oklab, 100% white, 50% var(--primary));
	padding: calc(0.5 * var(--padding));
	margin: 0 calc(-0.5 * var(--padding));
	border-radius: calc(0.5 * var(--padding));
}

header {
	font-size: large;

	h1 {
		color: var(--primary);

		img {
			vertical-align: -40%;

			/* We fix the height to that of images/logo.svg to prevent "bouncing"
				 when reloading the site */
			height: 64px;
		}
	}

	nav {
		background: linear-gradient(135deg, var(--primary), var(--ternary), var(--secondary));
		border-radius: var(--padding);
		line-height: 1;

		/* We add additional padding on both ends, so that the space around
			 each element in the navbar appears to be the same as between
			 the fringe elements and the side of the navbar. */
		padding: 0 var(--padding);

		ul {
			padding: 0;

			li {
				display: inline-block;
				list-style-type: none;

				a {
					text-decoration: none;
					padding: var(--padding);
					display: inline-block;

					/* The navbar links are not really text-links so we don't want
						 :visited to change their color. */
					color: var(--foreground) !important;
				}

				&.other {
					float: right;
				}
			}
		}
	}
}

main {
	background: var(--foreground);
	padding: var(--padding) calc(2 * var(--padding));
	border-radius: var(--padding);
	position: relative;

	p, li, dd {
		text-align: justify;
		hyphens: auto;
		overflow-wrap: break-word;
	}

	pre {
		overflow-x: auto;
	}

	.fulldescription > img {
		border: 1px solid;
	}

	img {
		max-width: 100%;
		margin: 0 auto;
		overflow-x: auto;
		&[align="right"] {
			margin-left: var(--padding);
		}
	}

	details {
		summary {
			padding-bottom: 8px;
		}
	}

	search input {
		margin: var(--padding) auto;
		display: block;
		width: min(calc(var(--page-width) / 2), 100%);
		font-size: larger;
		padding: calc(var(--padding) / 2);
	}

	table#packages {
		font-variant-numeric: tabular-nums;
		border-collapse: collapse;
		overflow-x: auto;
		width: 100%;
		table-layout: fixed;
		contain: layout paint style;
		margin: auto;

		/* javascript/package-search.js uses this class to hide elements when
			 filtering the table by a search query. */
		tr.invisible {
			content-visibility: hidden;
			display: none;
		}

		th, td {
			padding: var(--padding);
			overflow-wrap: break-word;
		}
		td.alt { background-color: var(--highlight); }

		th[data-sort] { cursor: pointer; }
		th[data-sort]:after {
			content: "↕";
			font-family: monospace, monospace;
		}
		th[data-order="asc"]:after { content: "↑"; }
		th[data-order="desc"]:after { content: "↓"; }

		tbody {
			tr:hover {
				background-color: rgba(0,0,0,0.025);
			}
		}
	}

	h2 {
		color: var(--primary);

		&.package .badge {
			position: absolute;
			right: var(--padding);
			top: 0;

			img {
				/* Ensure same margin to the right as above the image. */
				margin-top: var(--padding);
			}
		}
	}
}

footer {
	font-size: 80%;
	text-align: center;
}

@media screen and (max-width: 100ch) { /* see --page-width comment above */
	body {
		padding: 0;

		header {
			h1 { padding-left: var(--padding); }
			nav {
				border-radius: 0;
				padding-left: var(--padding);
			}
			ul {
				li.other {
					float: unset;
				}
			}
		}
	}

	main {
		border-radius: 0;
		padding: var(--padding);

		h2.package + dl {
			display: grid;
			grid-template-columns: max-content auto;

			dt, dd { padding-top: var(--padding); }
			dt { grid-column: 1; }
			dd { grid-column: 2; }
		}

		table#packages {
			width: unset;
			table-layout: initial;
			display: block;
			overflow-x: auto;
		}
	}
}