/* CSS Variables for colors */
:root {
	--color-background: #e1ded8;
	--color-text: #083025;
	--color-white: #fafbf7;
	--color-accent: #8b9a3c;
	--color-bright: #1ee927;
	--color-border: #083025;
	--color-bg-hover: rgb(24, 91, 71);
}

/* Ensure the whole page fits the viewport without scrolling */
html,
body {
	margin: 0;
	padding: 0;
	height: 100vh;
	overflow: hidden;
}

body {
	background-color: var(--color-background);
	width: 100vw;
	font-family: 'GTPlanar', sans-serif;
	font-variation-settings: 'wght' 400;
	color: var(--color-text);
}

/* Headings */
h1 {
	font-size: clamp(16px, 2vw, 24px);
	line-height: 135%;
}
h2 {
	font-family: 'GTPlanar', sans-serif;
	font-size: 12px;
	line-height: 100%;
	padding-left: 6px;
	padding-bottom: 2px;
	color: var(--color-white);
	font-style: normal;
	font-weight: 400;
	letter-spacing: 2.55px;
	text-transform: uppercase;
}
h3 {
	font-family: 'GTPlanar', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 100%;
	padding: 0;
}

/* ----------------------------- Nav ----------------------------- */
nav {
	display: flex;
	height: 160px;
	padding: 0 24px;
	justify-content: space-between;
	align-items: center;
}

.nav-type,
.nav-image {
	transition: transform 0.5s;
}

.nav-type:hover img {
	content: url('img/type-hover.svg');
}

.nav-image:hover img {
	content: url('img/image-hover.svg');
}

.homepage .nav-type,
.homepage .nav-image {
	opacity: 0;
	pointer-events: none;
	cursor: default;
}

.imagepage .nav-type img {
	content: url('img/type-grey.svg');
}
.imagepage .nav-type:hover img {
	content: url('img/type-hover.svg');
}

.typepage .nav-image img {
	content: url('img/image-grey.svg');
}
.typepage .nav-image:hover img {
	content: url('img/image-hover.svg');
}

/* --------------------------- Homepage Main --------------------------- */
/* Make main a flex column that fills the remaining height after nav */
main {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 160px);
	overflow: hidden;
}

/* Image container at the top */
.img-container {
	flex: 1 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	/* Responsive gap: at minimum 24px, growing with window width up to 80px */
	gap: clamp(24px, calc((100vw - 1200px) / 4 + 24px), 80px);
	margin-top: 20px;
}

/* Columns: empty side columns and two main image columns */
.col-1 {
	flex: 1;
}
.col-5 {
	flex: 5;
}

.homepage-link {
	border: 2px solid var(--color-border);
	color: var(--color-text);
	text-decoration: none !important;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.homepage-link:hover {
	background-color: var(--color-text);
	color: var(--color-background);
}

.homepage-type,
.homepage-image {
	width: 100%;
	border: 2px solid var(--color-border);
	/* transition: border 0.2s ease-out; */
}
.homepage-type:hover {
	content: url('img/homepage-type-hover.svg');
	background-color: var(--color-accent);
	border: 2px solid var(--color-accent);
}
.homepage-image:hover {
	content: url('img/homepage-image-hover.svg');
	background-color: var(--color-accent);
	border: 2px solid var(--color-accent);
}

/* Intro text container at the bottom */
.homepage-intro {
	flex: 0 0 auto;
	width: clamp(300px, 50%, 80%);
	margin: 20px auto 20px;
	text-align: center;
	padding: 40px 10px; /* Add horizontal padding so text doesn't touch edges */
	text-wrap: balance;
}

/* Optionally, you can adjust the font-size responsively as above in h1 */
.homepage-intro h1 {
	font-size: clamp(16px, 2.5vw, 24px);
	margin: 0;
}