/*
	Configure the layout of the various pages.
 */

/* Define layout variables. */

:root {
	/* 
		The space between two elements of the body, like nav and main.
	*/
	--layout-gap-body: calc(var(--spacing-block) * 2);

	/*
		The space between elements of the title banner.
	*/
	--layout-gap-banner: var(--spacing-inline);

	/*
		The minimum space required between navbar items.
	*/
	--layout-gap-nav: var(--spacing-inline);

	/*
		The size of a navbar item, excluding the gap.
	*/
	--layout-width-navitem: 12ch;

	/*
		The maximum size of a "single" container.
	*/
	--layout-width-single: 400px;

	/*
		The maximum size of a "double" container.
	*/
	--layout-width-double: calc(2 * var(--layout-width-single) + 1 * var(--spacing-block));

	/*
		The maximum size of a "triple" container.
	*/
	--layout-width-triple: calc(3 * var(--layout-width-single) + 2 * var(--spacing-block));

	/*
		The maximum size of a "quadruple" container.
	*/
	--layout-width-quadruple: calc(4 * var(--layout-width-single) + 3 * var(--spacing-block));
}

/* Center titles. */

h1, h2, h3, h4, h5, h6 {
	text-align: center;
}

/* Make separators always draw a full line. */

hr {
	width: 100%;
}

/* Create a custom layout for checkboxes and radio buttons. */

input[type="checkbox"],
input[type="radio"] {
	appearance: none;

	width: fit-content;

	display: flex;
	justify-content: center;
	align-items: center;
}

input[type="checkbox"]::after,
input[type="radio"]::after {
	content: " ";

	width: 1em;
	height: 1em;
}

/* Configure panel layout. */

.panel {
	display: flex;
	flex-direction: column;
}

/* Define generic containers of various kinds for the main content. */

.row {
	display: flex;

	/* Override the column flex-direction of panel. */
	flex-direction: row;

	/* Allow wrapping (for small screens). */
	flex-wrap: wrap;

	/* Stretch all items on the row. */
	align-items: stretch;
}

.column {
	display: flex;

	flex-direction: column;

	/* Align items on the line to the center of the element. */
	align-items: center;
}

.line {
	display: flex;

	/* Override the column flex-direction of panel. */
	flex-direction: row;

	/* Allow wrapping (for small screens). */
	flex-wrap: wrap;

	/* Align items on the line to the center of the element. */
	align-items: center;
}

.masonry {
	display: grid;

	grid-template-rows: masonry;

	/* This implies .single for all contents. */
	grid-template-columns: repeat(auto-fill, min(var(--layout-width-single), 100%));
}

.center {
	justify-content: center;
}

.fill {
	width: 100%;
}

.grow {
	flex-grow: 1;
}

.single {
	max-width: var(--layout-width-single);
}

.double {
	max-width: var(--layout-width-double);
}

.triple {
	max-width: var(--layout-width-triple);
}

.quadruple {
	max-width: var(--layout-width-quadruple);
}

/* Configure the body's layout. */

body {
	display: block flex;
	flex-direction: column;
	align-items: center;

	/* Make sure the body always fills the whole page. */
	min-height: 100svh;
}

body > * {
	/* Give all children (but the last) a gap from the following one. */
	margin-block-end: var(--layout-gap-body);
}

body > *:last-child {
	/* As mentioned above, remove the gap from the last. */
	margin-block-end: 0;
}

body > main {
	/* Let main use as much space as it needs. */
	flex-grow: 1;

	/* This effectively doubles the gap from the navbar or the flash bar. */
	margin-block-start: var(--layout-gap-body);
}

body > footer {
	/* This effectively doubles the gap from whatever is above. */
	margin-block-start: var(--layout-gap-body);
}

/* Configure the header's layout. */

header > hgroup {
	display: grid;
	grid-template-areas: 
		"avatar title"
		"avatar motd"
	;

	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;

	column-gap: var(--layout-gap-banner);

	justify-content: start;

	/* 
		The avatar being fixed to 64px removes the need to use a row-gap. 
		To perfectly match the --spacing-block, it would need to be 68px, but whatever, you don't really notice.
	*/
	align-items: space-between;
}

header > hgroup > picture {
	grid-area: avatar;
}

header > hgroup > h1 {
	grid-area: title;

	text-align: start;
}

@media (max-width: 400px) {
	/* Do not display the "'s website" part on smaller screens. */
	header > hgroup > h1 > span {
		display: none;
	}
}

header > hgroup > p {
	grid-area: motd;

	overflow-x: hidden;
	overflow-wrap: break-word;
}

/* Configure the navbar's layout. */

nav {
	/* Make sure the navbar takes in consideration all available space when distributing elements. */
	width: 100%;
}

nav h2 {
	display: none;
}

nav ul {
	list-style-type: none;

	column-count: 8;
	column-width: var(--layout-width-navitem);

	max-width: max-content;
	margin-inline: auto;

	/* 
		Do not span multiple lines in the exceptional case of an overflow. 
		https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Multiple-column_Layout#columns_and_fragmentation
	*/
	break-inside: avoid;
}

@supports (column-count: 8) {
	/* 
		If column-count is not supported, like on Servo, everything is displayed on a single column.
		Might as well keep the icons aligned.
	*/

	@media (min-width: 1281px) {
		nav li {
			text-align: center;
		}
	}
}

@media (max-width: 1280px) {
	/* 
		Force 4 columns if 8 are not possible.
	*/

	nav ul {
		column-count: 4;
	}
}

/* Configure the main content container's layout. */

main {
	width: 100%;

	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Configure the footer's layout. */

footer {
	width: 100%;
}

footer h2 {
	display: none;
}

footer ul {
	list-style-type: none;

	display: flex;
	justify-content: center;
}