/* =========================================================
   ROOT / REM SETUP
   ========================================================= */

html {
	font-size: 62.5%; /* 1rem = 10px */
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* =========================================================
   FONTS – LORA
   ========================================================= */

@font-face {
	font-family: "Lora";
	src: url("fonts/Lora/Lora-VariableFont_wght.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Lora";
	src: url("fonts/Lora/Lora-Italic-VariableFont_wght.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

/* =========================================================
   FONTS – MULISH
   ========================================================= */

@font-face {
	font-family: "Mulish";
	src: url("fonts/Mulish/Mulish-VariableFont_wght.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Mulish";
	src: url("fonts/Mulish/Mulish-Italic-VariableFont_wght.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

/* =========================================================
   OVERLAY – BASE
   ========================================================= */

.home-redirect-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;

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

	padding: 6.4rem 2.4rem;
	color: #ffffff;

	background-image:
		linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
		var(--overlay-bg-image);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* =========================================================
   CONTENT
   ========================================================= */

.home-redirect-overlay__content {
	display: flex;
	flex-direction: column;
	align-items: center;

	gap: 6.4rem;

	width: 100%;
	max-width: 80rem;

	text-align: center;
}

/* =========================================================
   LOGO
   ========================================================= */

.home-redirect-overlay__logo {
	display: flex;
	align-items: center;
	justify-content: center;

	padding: 1rem;
	border-radius: 1.2rem;

	color: #ffffff;
}

.home-redirect-overlay__logo-svg {
	width: 13rem;
	max-width: 100%;
	height: auto;
	display: block;
}

/* =========================================================
   TEXT
   ========================================================= */

.home-redirect-overlay__text h1 {
	font-family: "Lora", serif;
	font-size: 4.8rem;
	font-weight: 400;
	line-height: 1.2;

	margin: 0 0 2.4rem;
	color: #ffffff;
}

.home-redirect-overlay__text p {
	font-family: "Mulish", sans-serif;
	font-size: 1.8rem;
	line-height: 1.5;

	margin: 0;
}

/* =========================================================
   BUTTON
   ========================================================= */

.home-redirect-overlay__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 1.2rem;

	padding: 1.2rem 2.4rem;
	border-radius: 0.8rem;

	background: #ffffff;
	color: #604234;

	font-family: "Mulish", sans-serif;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 2.4rem;

	text-decoration: none;
	white-space: nowrap;
}

.home-redirect-overlay__button svg {
	flex: 0 0 auto;
}

/* =========================================================
   BODY LOCK
   ========================================================= */

body.has-home-redirect-overlay {
	overflow: hidden;
}

body.has-home-redirect-overlay #page {
	display: none;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

	.home-redirect-overlay {
		padding: 4rem 2rem;
	}

	.home-redirect-overlay__content {
		gap: 4rem;
	}

	.home-redirect-overlay__logo-svg {
		width: 10rem;
	}

	.home-redirect-overlay__text h1 {
		font-size: 3.2rem;
		margin-bottom: 1.6rem;
	}

	.home-redirect-overlay__text p {
		font-size: 1.6rem;
	}

	.home-redirect-overlay__button {
		width: 100%;
		padding: 1.4rem 2rem;
		font-size: 1.6rem;
	}
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

	.home-redirect-overlay {
		padding: 3.2rem 1.6rem;
	}

	.home-redirect-overlay__content {
		gap: 3.2rem;
	}

	.home-redirect-overlay__text h1 {
		font-size: 2.8rem;
	}
}