@layer layout {
	html {
		height: 100%;
	}
	body {
		display: grid;
		min-height: 100%;

	}

	.logo {
		/*background: var(--color-primary);*/
		display: flex;
		align-items: center;
		padding: 1rem;
		& h1 {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			line-height: 1;
			& > span {
				font-size: .5em;
			}
		}
	}

	.nav-filter {
		details[open] summary::marker {
			color: var(--color-primary);
		}
		& section span {
			font-family:var(--font-family-head);
			font-weight: bold;
		}

		& section ul {
			display: flex;
			width: 100%;
			gap: .25rem;
			flex-wrap: wrap;
			margin-top: 0;

			& li {
				display: inline-block;
				position: relative;
				padding: 0.5rem 0.5rem;

				& a {
					text-decoration: none;
				}

				&:before {
					content: "";
					width: 2px;
					height: 1lh;
					background: var(--color-base-muted);
					position: absolute;
					left: 0.25rem;
					transform: rotate(18deg);
				}

				&:has(a:focus),
				&:has(a:hover),
				&:has(a:active) {
					&:before {
						background: var(--color-primary);
					}

					& a {
						outline: none;
					}
				}
			}
		}
	}

	footer {
		padding: 1rem;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: repeat(3, min-content);
		grid-template-areas:
			"text"
			"links"
			"user"
		;

		position: relative;

		&:before {
			content: "";
			position: absolute;
			top: 0;
			left: 1rem;
			width: 4rem;
			height: 2px;
			background: var(--color-primary);
		}

		& p {
			margin: 0;
			font-size: 1rem;
		}



		& .footer__text {
			grid-area: text;
		}

		& .footer__links {
			grid-area: links;
		}
		& .footer__user {
			grid-area: user;
		}
	}

	@media (min-width: 650px) {
		footer {
			grid-template-areas:
				"links . ."
				"text . user"
			;
			gap: 1rem;
			grid-template-columns: 1fr auto auto;
			grid-template-rows: auto auto;
			align-items: end;
		}

	}
}