/* Tablets and smaller desktop screens */
@media (max-width: 64rem) {
	.pageHeader {
		gap: 1rem;
		padding-right: 1.25rem;
		padding-left: 1.25rem;

		.pageHeaderContent {
			gap: 0.5rem;

			.pageHeaderMenu {
				.menuItems {
					.menuitem {
						padding: 0.6rem 0.75rem;
					}
				}
			}

			.pageHeaderUser {
				padding-left: 0.75rem;
			}
		}
	}

	main {
		padding-right: 1.25rem;
		padding-left: 1.25rem;
	}

	.welcome-box {
		padding: 3rem;
	}

	.features-box {
		.features-tiles {
			grid-template-columns: repeat(
				auto-fit,
				minmax(16rem, 1fr)
			);
		}
	}

	.userpage {
		.userpage-profile {
			gap: 1.25rem;
		}
	}

	.footer {
		padding-right: 1.25rem;
		padding-left: 1.25rem;
	}
}

/* Tablets */
@media (max-width: 50rem) {
	.pageHeader {
		flex-wrap: wrap;
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;

		.pageHeaderContent {
			justify-content: space-between;
			width: 100%;

			.pageHeaderMenu {
				.menuItems {
					flex-wrap: wrap;
				}
			}
		}
	}

	main {
		.pagetitle {
			font-size: 1.75rem;
		}
	}

	.welcome-box {
		padding: 2.5rem;

		.welcome-text {
			font-size: clamp(2rem, 7vw, 3rem);
		}
	}

	.features-box {
		.features-title {
			padding: 1.5rem;

			.h1 {
				font-size: 1.75rem;
			}
		}
	}

	.news-box {
		.news-title {
			.h1 {
				font-size: 1.75rem;
			}
		}
	}

	.userpage {
		.userpage-profile {
			grid-template-columns: 1fr;
		}
	}

	.footer {
		align-items: flex-start;
		gap: 1rem;

		.footer-links {
			flex-wrap: wrap;
			justify-content: flex-end;
		}
	}
}

/* Smartphones */
@media (max-width: 40rem) {
	.pageHeader {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;

		.pageHeaderLogo {
			justify-content: center;

			.pageHeaderLogoLarge {
				max-width: 10rem;
				height: 2.5rem;
			}
		}

		.pageHeaderContent {
			flex-direction: column;
			align-items: stretch;
			gap: 0.75rem;

			.pageHeaderMenu {
				justify-content: center;
				width: 100%;

				nav {
					width: 100%;
				}

				.menuItems {
					justify-content: center;
					width: 100%;

					li {
						flex: 1 1 auto;
					}

					.menuitem {
						padding: 0.6rem;
						text-align: center;
					}
				}
			}

			.pageHeaderUser {
				justify-content: center;
				padding: 0.75rem 0 0;
				border-top: 1px solid #dee2e6;
				border-left: 0;
				white-space: normal;
			}
		}
	}

	main {
		min-height: calc(100vh - 12rem);
		padding: 1rem;

		.pagetitle {
			font-size: 1.5rem;
		}

		.breadcrumbs {
			margin-bottom: 1rem;
			font-size: 0.875rem;
		}
	}

	.welcome-box {
		padding: 2rem 1.5rem;
		margin: 1rem 0;

		&::after {
			top: -6rem;
			right: -8rem;
			width: 18rem;
			height: 18rem;
		}

		.welcome-text {
			font-size: 2rem;
			letter-spacing: -0.04rem;
		}

		.welcome-subtext {
			font-size: 1rem;
		}

		.welcome-actions {
			flex-direction: column;
			align-items: stretch;

			.welcome-button {
				width: 100%;
				text-align: center;
			}
		}
	}

	.features-box {
		margin: 1rem 0;

		.features-title {
			padding: 1.25rem;

			.h1 {
				font-size: 1.5rem;
			}
		}

		.features-tiles {
			grid-template-columns: 1fr;
			padding: 0.75rem;

			.features-tiles-box {
				padding: 1.25rem;
			}
		}
	}

	.news-box {
		.news-title {
			padding: 1.25rem;

			.h1 {
				font-size: 1.5rem;
			}
		}

		.news-tiles {
			gap: 0.75rem;
			padding: 0.75rem;

			.news-tiles-box {
				padding: 1rem;

				.news-tiles-box-title {
					font-size: 1.25rem;
				}
			}
		}
	}

	.userpage {
		margin: 1rem auto;

		.userpage-header {
			height: 12rem;

			.userpage-avatar {
				bottom: -1.25rem;
				left: 1.25rem;
				width: 7rem;
				height: 7rem;

				svg {
					width: 3rem;
					height: 3rem;
				}
			}

			.userpage-title {
				right: 1.25rem;
				bottom: 3.25rem;
				left: 9rem;
				max-width: calc(100% - 10.25rem);
				padding: 0 0.2rem 0.2rem;
				font-size: 0.85rem;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			.userpage-name {
				right: 1.25rem;
				bottom: 1.25rem;
				left: 9rem;
				font-size: 1.5rem;
			}
		}

		.userpage-profile {
			grid-template-columns: 1fr;
			gap: 1rem;
			padding: 3rem 1.25rem 1.25rem;

			.userpage-about {
				padding: 1.25rem;
			}
		}
	}

	.login-box {
		margin: 1rem auto;

		.login-box-header {
			padding: 1.25rem;

			.login-box-title {
				font-size: 1.35rem;
			}
		}

		.login-form {
			padding: 1.25rem;

			.login-actions {
				.login-button {
					width: 100%;
				}
			}
		}
	}

	.footer {
		flex-direction: column;
		align-items: center;
		gap: 0.75rem;
		padding: 1rem;
		text-align: center;

		.footer-links {
			justify-content: center;
		}
	}

	.alert {
		padding: 0.65rem 0.75rem;
	}
}

/* Small smartphones */
@media (max-width: 28rem) {
	.pageHeader {
		.pageHeaderContent {
			.pageHeaderMenu {
				.menuItems {
					flex-direction: column;

					li {
						width: 100%;
					}
				}
			}

			.pageHeaderUser {
				flex-direction: column;
				gap: 0.5rem;

				form,
				button {
					width: 100%;
				}
			}
		}
	}

	.welcome-box {
		padding: 1.5rem 1rem;

		.welcome-text {
			font-size: 1.75rem;
		}
	}

	.userpage {
		.userpage-header {
			height: 11rem;

			.userpage-avatar {
				left: 1rem;
				width: 6rem;
				height: 6rem;
			}

			.userpage-title {
				right: 1rem;
				bottom: 2.75rem;
				left: 8rem;
				max-width: calc(100% - 9rem);
				padding: 0 0.15rem 0.15rem;
				font-size: 0.75rem;
			}

			.userpage-name {
				right: 1rem;
				bottom: 1rem;
				left: 8rem;
				font-size: 1.25rem;
			}
		}

		.userpage-profile {
			padding: 2.75rem 1rem 1rem;
		}
	}

	.footer {
		.footer-links {
			flex-direction: column;
			gap: 0.35rem;

			a {
				&:not(:last-child)::after {
					content: none;
				}
			}
		}
	}
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}