@import url(./reset.css);

:root {
	--clr-background: #D9CEC1;
	--clr-background-light: #ede6de;
	--clr-lines: #C6BBAE;
	--clr-text: #2B3640;
	--y-offset: 2rem;
	--x-offset: 0rem;
	font-size: 16px;
	--component-gap: 5rem;
}

html {
	font-family: 'Eras ITC';
}

body {
	background: var(--clr-background);
		background-size: 5rem 5rem;
		background-position-y: var(--y-offset);
		background-position-x: calc(50% - var(--x-offset));
		background-image: 
			linear-gradient(
				to right, 
				var(--clr-lines) 2px, transparent 1px, 
				transparent 1rem, var(--clr-lines) calc(1rem + 1px), transparent calc(1rem + 1px), 
				transparent 2rem, var(--clr-lines) calc(2rem + 1px), transparent calc(2rem + 1px), 
				transparent 3rem, var(--clr-lines) calc(3rem + 1px), transparent calc(3rem + 1px),
				transparent 4rem, var(--clr-lines) calc(4rem + 1px), transparent calc(4rem + 1px)),
			linear-gradient(
				to bottom, 
				var(--clr-lines) 2px, transparent 1px, 
				transparent 1rem, var(--clr-lines) calc(1rem + 1px), transparent calc(1rem + 1px), 
				transparent 2rem, var(--clr-lines) calc(2rem + 1px), transparent calc(2rem + 1px), 
				transparent 3rem, var(--clr-lines) calc(3rem + 1px), transparent calc(3rem + 1px),
				transparent 4rem, var(--clr-lines) calc(4rem + 1px), transparent calc(4rem + 1px));
	
		display: flex;
		justify-content: center;
		min-height: 62rem;
		position: relative;
		margin: 0;
}

.hero {
	margin-bottom: var(--component-gap)
}

.content {
	min-height: 20rem;
	width: 100%;
}

.grid-aligner {
	position: absolute;
	top: var(--y-offset);
	left: 50%;
	transform: translateX(calc(-50% - var(--x-offset)));
	width: 85rem;
	padding-bottom: 5rem;
}

.grid-aligner .row {
	position: relative;
	width: 100%;
}

.grid-aligner .row.height-1 {
	height: 5rem;
}

.grid-aligner .row.height-2 {
	height: 10rem;
}

.grid-aligner .row.height-3 {
	height: 15rem;
}

.logo {
	position: absolute;
	height: 6rem;
	bottom: -1rem;
	left: -1.3rem;
}

.navigation {
	position: fixed;
	z-index: 10;
	right: 0rem;
	top: 10rem;
	height: 20rem;
	width: 11rem;
	box-sizing: content-box;
	border-width: 0;
	border-right-width: 2px;
	border-style: solid;
	border-image: linear-gradient(transparent, var(--clr-text) 1rem, var(--clr-text) 19rem, transparent) 1;
}

.nav-list {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.nav-item {
	padding: 0;
	margin: 0;
	height: 5rem;
	position: relative;
}

.nav-arrow {
	height: 0.8rem;
	position: absolute;
	left: 0;
	bottom: 0;
	margin-left: -1.3rem;
}

.nav-link {
	position: absolute;
	bottom: -0.3rem;
	left: 1rem;
	right: 0;
	padding-top: 1rem;
	cursor: pointer;
	font-size: 1.5rem;
}


.nav-item::before {
	content: "";
	height: 2px;
	width: 0;
	background-image:
		linear-gradient(90deg, transparent, var(--clr-text) 1rem);
	position: absolute;
	right: 0;
	bottom: -2px;
	transition: all 0.2s ease-in-out;
	transition-delay: 0s;
}

.nav-item::after {
	content: "";
	height: 2px;
	width: 0;
	position: absolute;
	background-image:
		linear-gradient(
			90deg,
			transparent,
			var(--clr-text) 0.1rem,
			var(--clr-text) 0.9rem,
			transparent);
	bottom: -2px;
	right: 0;
	transform: translateX(50%) rotate(45deg);
}

.nav-item:hover::before {
	width: 100%;
	transition-delay: 0.2;
}

.nav-item:hover::after {
	width: 1rem;
	transition: all 0.1s ease-in-out;
}

.nav-item.active:hover::before,
.nav-item.active:hover::after {
	width: 0;
}

.nav-item.active .nav-link:before {
	content: '';
	background-image: url('./assets/arrow.svg');
	background-repeat: no-repeat;
	height: 0.8rem;
	width: 5rem;
	position: absolute;
	left: 0;
	bottom: 0;
	transform: translate(-1rem, -30%);
	margin-left: -1.3rem;
}


h1 {
	padding-top: 6.2rem;
	margin: 0;
	font-size: 4rem;
	line-height: 5rem;
}

.buttons {
	display: flex;
	background: green;
	height: 100%;
	flex-direction: column;
	justify-content: end;
	align-items: baseline;
}

.cta,
input,
textarea,
button {
	color: inherit;
	text-decoration: none;
	font-weight: inherit;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 3rem;
	position: relative;
	top: 0;
	left: 0;
	border-radius: 0;
	border: 1px solid var(--clr-text);
	background: 0;
	padding: 0 2rem;
	font-size: 1.2rem;
	font-family: unset;
	cursor: pointer;
	transition: background-image 0.2s ease-in-out;
}

input,
textarea {
	background: var(--clr-background-light);
	border-width: 2px;
	width: 18rem;
	box-sizing: border-box;
	margin: 0 2rem 2rem 0;
	position: unset;
	padding: 0 1rem;
}

textarea {
	padding: 1rem;
	min-height: 13rem;
	resize: vertical;
}

input.double,
textarea.double {
	width: 38rem;
}

#customer-phone {
	margin-bottom: 4rem;
}

.input-row {
	width: 38rem;
	display: flex;
}

.input-row.align-right button {
	margin-left: auto;
}

.field-wrapper {
	position: relative;
}

.field-wrapper label {
	position: absolute;
	top: 0%;
	transform: translateY(-110%);
}

.cta.primary {
	font-weight: 600;
	border-width: 2px;
	color: var(--clr-background);
	background: rgba(43, 54, 64, 0.5);
	background-image: url(./assets/cross_hatch.svg);
	background-size: 150%;
	background-position: center center;
	/* background-image:
		linear-gradient(160deg, var(--clr-text) 75%, transparent),
		repeating-linear-gradient(60deg, var(--clr-background), var(--clr-background) 2px, var(--clr-text) 2px, var(--clr-text) 6px); */
}

.cta.primary .marker {
	height: 2px;
}

.cta .marker {
	height: 1px;
	width: 1rem;
	position: absolute;
	background-image:
		linear-gradient(
			90deg,
			transparent,
			var(--clr-text) 0.05rem,
			var(--clr-text) 0.95rem,
			transparent);
	transform-origin: 50% 50%;
	transform: rotate(45deg);
}

.cta .marker:nth-of-type(1) {
	top: -2px;
	left: -0.6rem;
}

.cta .marker:nth-of-type(2) {
	top: -2px;
	right: -0.6rem;
}

.cta .marker:nth-of-type(3) {
	bottom: -2px;
	left: -0.6rem;
}

.cta .marker:nth-of-type(4) {
	bottom: -2px;
	right: -0.6rem;
}

#button_contact {
	top: 5rem;
	width: 20rem;
}

.cta.primary:hover,
form button:hover {
	background-image:
	linear-gradient(90deg, var(--clr-text), var(--clr-text) 2px);
	color: var(--clr-background);
}

#button_learn_more {
	width: 20rem;
	background-image: url(./assets/cross_hatch_2.svg);
	background-repeat: no-repeat;
	background-position: 220% 100%;
	background-size: 50%;
	transition: background-position 0.1s ease-out;
}

#button_learn_more:hover {
	background-position: 140% 20%;
	/* background-image:
	linear-gradient(160deg, var(--clr-background) 75%, transparent),
		repeating-linear-gradient(60deg, var(--clr-text), var(--clr-text) 2px, transparent 2px, transparent 6px); */
}


footer {
	position: relative;
	margin-top: 5rem;
	height: 10rem;
	width: 100%;
	border-top: 1px solid var(--clr-text);
}

.gallery {
	display: grid;
	grid-template-columns: repeat(1fr, 4);
	grid-template-rows: auto;
	grid-template-areas:
		"img1 img1 img2 img3"
		"img1 img1 img4 img4"
		"img5 img6 img6 img7" 
		"img5 img6 img6 img8";
	grid-gap: 3rem;
	min-height: 85rem;
}

.gallery-image {
	border: 1px solid var(--clr-text);
	height: 100%;
	width: 100%;
	background-image:
		linear-gradient(160deg, var(--clr-background) 75%, transparent),
		repeating-linear-gradient(60deg, var(--clr-text), var(--clr-text) 2px, transparent 2px, transparent 6px);
}

#image_1 {
	grid-area: img1;
}

#image_2 {
	grid-area: img2;
}

#image_3 {
	grid-area: img3;
}

#image_4 {
	grid-area: img4;
}

#image_5 {
	grid-area: img5;
}

#image_6 {
	grid-area: img6;
}

#image_7 {
	grid-area: img7;
}

#image_8 {
	grid-area: img8;
}