@import url('/reset.css');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Raleway:wght@400;700&display=swap');

:root {
	--color-white: #FFF;
	--color-shade: rgba(0,0,0,0.025);
	
	--text-secondary: hsl(0 0% 45%);
	
	--surface: #FFF;
	--accent: hsl(174, 36%, 52%);
	--link: hsl(174, 56%, 35%);
	--weight-bold: 700;

	--text-large: 1.2rem;
	--text-sub: 0.85rem;

	--divider-major: rgba(0,0,0,0.2);
	--radius-small: 4px;
	--radius-medium: 12px;
	--timing-normal: 0.2s;
	--shadow-level1: 0px 1px 2px rgba(0,0,0,0.2);
	--shadow-level2: 0px 2px 4px rgba(0,0,0,0.2);
	--shadow-level3: 0px 4px 8px rgba(0,0,0,0.05);

	--section-padding: 5rem;
	--max-width: 1200px;
}
html {
	overflow-x: hidden;
}
body {
	font-size: 16px;
	font-family: "Raleway", sans-serif;
	line-height: 1.6;
}

a {
	color: var(--link);
}
h1 {
	font-size: 2.5rem;
}
h2 {
	font-size: 1.75rem;
}
input, textarea {
	font-family: inherit;
	font-size: inherit;
	padding: 0.5rem 0.75rem;
}
.button {
	background-color: var(--accent);
	line-height: 48px;
	padding: 0 2rem;
	border-radius: 24px;
	cursor: pointer;
	transition: box-shadow var(--timing-normal);
	color: var(--color-white);
	text-align: center;
	&:hover {
		box-shadow: var(--shadow-level3);
	}
	&.cta {
		line-height: 56px;
		border-radius: 28px;
		padding: 0 2.5rem;
		min-width: 320px;
	}
}
.placeholder {
	background-color: var(--color-shade);
	min-height: 360px;
	display: grid;
	place-content: center;
	border-radius: var(--radius-medium);
}

nav {
	background-color: var(--surface);
	padding: 2rem 2.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: sticky;
	top: 0;
	box-shadow: var(--shadow-level1);
	& > h1 {
		font-family: "Pacifico";
		cursor: pointer;
		text-transform: capitalize;
	}
	& .links {
		display: flex;
		gap: 1.5rem;
		& > a {
			text-decoration: none;
		}
	}
}
section {
	background: var(--surface);
}
section#title {
	text-align: center;
	padding: 8rem 2rem;
	color: var(--color-white);
	background-color: var(--link);
	background-image: url('/image/hazelandfriend.jpg');
	background-size: cover;
	background-position: 0% 15%;
	& > h1 {
		font-weight: var(--weight-bold);
		font-size: 4rem;
		text-shadow: var(--shadow-level2);
	}
	& .subtitle {
		font-size: 1.25rem;
		text-shadow: var(--shadow-level2);
		margin-bottom: 2rem;
		& span:last-child {
			display: none;
		}
	}
	& .button {
		display: inline-block;
	}
	& .scrim {
		display: none;
	}
}
section#services {
	display: flex;
	max-width: var(--max-width);
	margin: auto;
	padding: var(--section-padding);
	gap: 2.5rem;
	& > div {
		flex: 1;
		& img {
			margin-top: 2.5rem;
			max-width: 100%;
		}
	}
	.subtitle {
		border-bottom: 1px solid var(--divider-major);
		margin-top: 0.25rem;
		margin-bottom: 1rem;
		padding-bottom: 0.5rem;
		color: var(--text-secondary);
	}
}
section#info {
	display: flex;
	max-width: var(--max-width);
	padding: var(--section-padding);
	padding-top: 0;
	margin: auto;
	& > div {
		flex: 1;
	}
	& #hours {
		& .time {
			display: flex;
			& > div {
				flex: 1;
			}
		}
	}
	& h2 {
		margin-bottom: 1rem;
	}
	& iframe {
		width: 100%;
		min-height: 360px;
	}
}
section#about {
	display: flex;
	padding: 4rem;
	gap: 4rem;
	max-width: var(--max-width);
	margin: auto;
	& > div > * {
		margin-bottom: 1rem;
	}
}
section#availability{
	max-width: var(--max-width);
	margin: auto;
	padding: calc(var(--section-padding) / 2) 0;
	& h1 {
		margin-bottom: 1rem;
	}
	& iframe {
		width: 100%;
		min-height: 640px;
	}
}
section#contact {
	padding: var(--section-padding);
	& .jotform-form {
		max-width: 640px;
		margin: auto;
		& .form-section {
			display: flex;
			flex-direction: column;
			gap: 1rem;
		}
		& .form-input-wide {
			& > div {
				display: flex;
				gap: 1rem;
				& input {
					max-width: 100%;
				}
			}
			& .form-sub-label-container {
				gap: 0.25rem;
			}
			& textarea {
				box-sizing: border-box;
				width: 100%;
				min-height: 96px;
			}
			& input, & textarea {
				border: 1px solid var(--divider-major);
				border-radius: var(--radius-small);
			}
		}
		& .form-sub-label-container {
			display: flex;
			flex-direction: column;
			flex: 1;
			& label {
				font-size: var(--text-sub);
				color: var(--text-secondary);
			}
		}
		& button {
			outline: none;
			border: none;
			font-family: inherit;
			font-size: inherit;
			color: var(--color-white);
			margin: auto;
			min-width: 50%;
		}
	}
	& #direct {
		background-color: var(--color-shade);
		max-width: 640px;
		margin: auto;
		margin-top: 2.5rem;
		border-radius: var(--radius-medium);
		padding: 1rem;
		display: flex;
		gap: 2rem;
		justify-content: center;
	}
}
footer {
	display: flex;
	place-content: center;
	padding: var(--section-padding);
	max-width: var(--max-width);
	margin: auto;
	& #clients {
		display: flex;
		justify-content: space-between;
		width: 100%;
		& img {
			flex: 1;
			max-width: 31%;
		}
	}
}
#finalCTA {
	width: calc(100% - 40px);
	max-width: 400px;
}

/* DESKTOP */
@media screen and (min-width: 720px){
	section#info + footer {
		padding-top: 0;
	}
}

/* MOBILE */
@media screen and (max-width: 720px){
	:root {
		--section-padding: 2rem;
	}
	h1 {
		font-size: 2rem;
	}
	nav {
		flex-direction: column;
		padding: 1.25rem;
		gap: 0.75rem;
		z-index: 5;
		& h1 {
			display: none;
		}
	}
	.button.cta {
		min-width: 48px;
	}
	#mainCTA {
		/* position: fixed;
		bottom: calc(env(safe-area-inset-bottom) + 24px);
		box-shadow: var(--shadow-level3); */
		/* left: 50%;
		translate: -50% 0%; */
		white-space: nowrap;
	}
	section#info {
		flex-direction: column;
		#location {
			margin-top: 4rem;
		}
	}
	section#title {
		padding: 12rem 2rem 3rem 2rem;
		background-position: center;
		position: relative;
		& h1 {
			font-size: 2.5rem;
			position: relative;
			z-index: 1;
		}
		& .subtitle {
			font-size: 1rem;
			position: relative;
			z-index: 1;
			& span:last-child {
				display: inline;
			}
		}
		& .scrim {
			display: block;
			position: absolute;
			width: 100%;
			height: 75%;
			bottom: 0; left: 0;
			background: linear-gradient(180deg, transparent, rgba(0,0,0,0.6));
			z-index: 0;
		}
		& .button {
			z-index: 1;
			position: relative;
		}
	}
	section#services {
		flex-direction: column;
		padding: 2.5rem;
	}
	section#availability{
		text-align: center;
	}
	section#about {
		flex-direction: column;
		padding: var(--section-padding);
		gap: var(--section-padding);
	}
	section#contact {
		& #direct {
			flex-direction: column;
			justify-content: center;
			gap: 0;
			text-align: center;
		}
	}
}