/* temporary home page - standalone launch page with minimal chrome */

header#temp-header {
	display: flex;
	justify-content: center;
	padding: var(--gap) 0;
	background-color: var(--pink-light);

	img {
		width: 180rem;
	}
}

section.page-section.temp-hero {
	padding-top: 0;
	background-color: var(--pink-light);

	div.content {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: var(--gap);

		div.text {
			flex: 1;

			h1 {
				margin-top: 0;
			}
		}

		div.img-and-tag {
			flex: 1;

			img {
				width: 100%;
				border: 4rem solid var(--white);
				border-radius: 8rem;
			}

			p.tag {
				margin: calc(-0.5 * var(--gap)) 0 0 auto;
				padding: var(--gap-quarter) var(--gap-half);
				width: fit-content;
				background-color: var(--pink-light);
				border-radius: 6rem;
				font-family: Obviously;
				font-style: italic;
				font-weight: 900;
				text-transform: uppercase;
			}
		}
	}
}

section.page-section.temp-notify {
	background-color: var(--blue-2);
	color: var(--white);
	/* angled top edge per the design */
	clip-path: polygon(0 60rem, 100% 0, 100% 100%, 0 100%);
	padding-top: calc(60rem + var(--margin));

	div.content {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: var(--gap);

		div.text {
			flex: 1;

			h2 {
				color: var(--white);
			}

			/* legacy single-input pill form; the interim request-access form styles itself */
			form:not(.request-access) {
				display: flex;
				flex-direction: row;
				width: fit-content;
				background-color: var(--white);
				border-radius: 25rem;

				input {
					width: 220rem;
					padding: 0 var(--gap-half);
					border: none;
					border-radius: 25rem;
					font-family: inherit;
					font-size: 13rem;
				}

				button.btn-text {
					background-color: var(--red-3);
				}
			}
		}

		div.img-and-tag {
			flex: 1;

			img {
				width: 80%;
				border-radius: 8rem;
			}

			p.tag {
				margin: calc(-0.5 * var(--gap)) 0 0 auto;
				padding: var(--gap-quarter) var(--gap-half);
				width: fit-content;
				background-color: var(--black);
				border-radius: 6rem;
				font-family: Obviously;
				font-style: italic;
				font-weight: 900;
				text-transform: uppercase;
			}
		}
	}
}

section.page-section.temp-escript {
	div.content {
		h2 {
			margin-bottom: var(--gap-quarter);
		}

		> p {
			max-width: 500rem;
		}
	}
}

footer#temp-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gap-half);
	padding: var(--gap) 0;

	img.pharmacy-run {
		width: 140rem;
	}

	ul.social-media-links {
		display: flex;
		flex-direction: row;
		gap: var(--gap-quarter);
		list-style: none;

		img {
			width: 25rem;
		}
	}

	div.links {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: var(--gap-half);

		img {
			max-height: 50rem;
		}
	}

	nav.policies {
		ul {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			gap: var(--gap-half);
			list-style: none;
			font-size: 12rem;
		}
	}
}

/* mobile */
@media screen and (max-width: 767px) {
	section.page-section.temp-hero {
		div.content {
			flex-direction: column;
		}
	}

	section.page-section.temp-notify {
		clip-path: polygon(0 30rem, 100% 0, 100% 100%, 0 100%);
		padding-top: calc(30rem + var(--gap));

		div.content {
			flex-direction: column;
			align-items: start;

			form:not(.request-access) {
				width: 100%;
				flex-direction: column;
				background-color: transparent;
				gap: var(--gap-quarter);

				input {
					width: 100%;
					box-sizing: border-box;
					height: 40rem;
					border-radius: 20rem;
				}

				button.btn-text {
					width: 100%;
					box-sizing: border-box;
					text-align: center;
				}
			}
		}
	}
}