@layer layout {
	/* Layout */
	body > header {
		width: 100%;
		padding: 1rem 2rem;
		display: flex;
		align-items: center;
		justify-content: space-between;

		nav ul {
			display: flex;
			gap: 1.5rem;
			list-style: none;
			margin: 0;
			padding: 0;
		}

		nav[aria-label="Projects"] {
			h2 {
				display: inline-block;
				margin: 0;
				font-size: 0.9rem;
				cursor: pointer;

				&::after {
					content: " | ";
					margin: 0 0.5rem;
				}
			}

			ul {
				transform-origin: left center;
				transition: transform 0.3s ease-in-out;
				display: inline-flex;
			}

			&.collapsed {
				ul {
					transform: scaleX(0);
				}

				h2::after {
					content: " ▶";
					margin-left: 0.5rem;
				}
			}
		}
	}

	body {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}
	body > main {
		flex: 1;

		display: flex;
		align-items: flex-start;
		gap: 2rem;

		position: relative;
		justify-content: center;
		padding: 2rem;
		width: 100%;
	}

	body > footer {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 1rem 2rem;

		ul {
			list-style: none;
		}
	}

	/* Theming */
	body {
		background: var(--container-bg-texture);
		color: var(--container-text-color);

		&::selection,
		&::-moz-selection {
			background: var(--container-selection-bg);
			color: var(--container-selection-fg);
		}
	}

	body > header {
		nav a {
			color: var(--container-link-color);
			text-decoration: none;
			font-weight: 500;

			&:hover {
				color: var(--container-link-accent);
				text-decoration: underline;
			}
		}
	}

	body > footer {
		font-size: 0.95rem;
		box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.1);

		h2 {
			font-size: 1.25rem;
			margin-bottom: 1rem;
		}

		a {
			color: var(--container-link-color);
			text-decoration: none;

			&:hover {
				color: var(--container-link-accent);
				text-decoration: underline;
			}
		}

		#contact-info {
			ul {
				display: flex;
				gap: 0.25rem;
				align-items: center;
			}

			li {
				list-style: none;
			}

			a {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30px;
				height: 30px;
				border-radius: 8px;
				background-color: #fff;
				transition: all 0.2s ease;

				&:hover {
					background-color: #f0f0f0;
					transform: translateY(-2px);
				}

				svg {
					width: 24px;
					height: 24px;
				}
			}
		}
	}

	body > main {
		font-family: system-ui, sans-serif;
		background: var(--main-bg-texture);
		color: var(--main-text-color);

		&::selection,
		&::-moz-selection {
			background: var(--main-selection-bg);
			color: var(--main-selection-fg);
		}
	}
}