:root {
	--green: rgb(173, 189, 163);
	--white: #ede9d8;
	--grey: #45484b;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

@view-transition {
	navigation: auto;
}

body {
	font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
	font-size: 1em;
	line-height: 1.9em;
	background-color: var(--green);
}

header {
	padding: 1lh;
	justify-content: space-between;
	display: flex;
	flex-direction: row;
	background-color: var(--green);
}

header.home {
	background-image: url("idsworth.jpg");
	background-size: cover;
	background-position: center;
	height: 77dvh;
}

.logo {
	max-width: 6lh;
	-webkit-user-select: none;
	user-select: none;
	cursor: pointer;
}

a:has(.logo) {
	height: fit-content;
}

nav {
	align-content: center;
	position: absolute;
	top: 1lh;
	right: 0px;
	padding: 0.2lh 1lh;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

nav ul {
	list-style: none;
	display: flex;
	gap: 2lh;
}

nav a {
	font-size: 1.1rem;
	line-height: 1.5rem;
	transition: color 200ms ease-out;
	text-decoration: none;
	color: unset;
}

nav a:hover {
	color: #AF3029;
}

.green {
	background-color: var(--green);
}

.white {
	background-color: var(--white);
}

footer {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(1, 1fr);
	gap: 1lh;
	padding: 1lh;
	align-items: center;

	div {
		text-align: center;
	}

	img {
		max-height: 5lh;
		margin: auto;
	}

	a {
		transition: color 200ms ease-out;
		text-decoration: none;
		color: unset;
	}

}

blockquote {
	margin: 1lh auto;
	font-style: italic;
	border-left: solid .5lh var(--green);
	padding-left: 1lh;
	max-width: 65ch;
}

article {
	margin: auto;
	background-color: var(--white);
	color: var(--grey);

	.featured img {
		margin: 1lh 0;
		padding: 0;
		border-radius: 10px;
		max-width: 100%;
		filter: contrast(110%) saturate(150%);
	}

	.image-meta,
	.featured,
	.story {
		align-self: center;
		padding: 0 1lh;
		width: 100%;
	}

	.row {
		display: flex;
		flex: 1;
		/* Equal width for both divs in the row */
		align-self: center;
	}

	.column {
		display: flex;
		flex-direction: column;
		flex: 1;
		/* Adjusts width to take up space */
		max-width: 70ch;
		margin: auto;
		padding: 0 1lh;
	}

	.column img {
		max-width: 100%;
		border-radius: 5px;
	}

	time {
		display: flex;
		justify-content: center;
	}

	p {
		max-width: 65ch;
		margin: auto;
		margin-block: 1lh;
	}

}

.textblock {
		max-width: 65ch;
		margin-block: 1lh;
		margin:auto;
	}

.textblock p {margin-block: 1.5lh;}


.buttons {
display: flex;
gap: 1lh;
flex-wrap: wrap;
justify-content: center;
}

.buttons a {
font-size:.7lh;
align-items: center;
border-radius: 0.4rem;
font-weight: 600;
padding: .5lh;
color: var(--grey);
text-decoration: none;
border: none;
cursor: pointer;
background-color: var(--green);
transition: 
	transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),
    box-shadow 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),
    filter 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.buttons a:hover {
  transform: scale(1.05) translateY(-10px);
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.3);
  filter: brightness(1.1);
}

main {
	margin: auto;
	color: var(--grey);
	background-color: var(--white);
	padding: 1lh;

	p {
		max-width: 65ch;
		margin: auto;
		margin-block: 1lh;
	}
	
	li {margin-block-end: .5lh;}
	li a {color: var(--grey);}
	
}

h1 {
	text-align: center;
	margin: 1lh 0 0;
	text-wrap: balance;
	text-wrap: pretty;
	text-transform: capitalize;
	line-height: 4rem;
	font-size: clamp(2.244rem, 1.930rem + 1.569vw, 3.813rem);
}

h2 {
	text-align: center;
	margin: .5lh 0;
	text-wrap: balance;
	text-wrap: pretty;
	text-transform: capitalize;
	line-height: 4rem;
	font-size: clamp(1.381rem, 1.27rem + 0.557vw, 1.938rem);
}

hr {
	border: 1px solid var(--green);
	margin-block: 1lh;
}

#map {
	margin: auto;
	max-width: 90vw;
	height:25lh;
	border-radius: 5px;
}

#map button {
	margin-top: unset;
}

#map strong {
	padding-right: 1.5lh;
}

video {
	inline-size: 120%;
	margin-inline-start: -10%;
	margin-inline-end: -10%;
	border-radius: 5px;
}

button {
	font-family: inherit;
	display: flex;
	background-color: #fff;
	color: var(--grey);
	text-align: center;
	padding: .5lh;
	border-radius: .25em;
	text-decoration: none;
	border: none;
	cursor: pointer;
	font-weight: 700;
	font-size: 16px;
	gap: .5lh;
	justify-content: center;
	margin-top: 1lh;
}

button svg {
	fill: var(--grey);
}

form {
	display: flex;
	flex-direction: column;
	max-width: 65ch;
	margin: 1lh auto;
}

form label {
	margin: .5lh 0;
	font-weight: 600;
}

form input,
form textarea {
	max-width: 100%;
	padding: 1lh;
	margin-bottom: 1lh;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 16px;
}

.cards {
	padding: 1lh 1lh 2lh;

	.card-container {
		display: grid;
		gap: 1lh;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	}

	a {
		display: flex;
		text-decoration: none;
		color: var(--grey);
	}

	.card {
		background: white;
		border-radius: .5lh;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		overflow: hidden;
		width: calc(2lh + 50vw);
		height: 100%;
		display: flex;
		flex-direction: row;
		row-gap: 1lh;
		text-wrap: pretty;
		scroll-snap-align: start;
	}

	.card-image {
		height: 10lh;
		object-fit: cover;
		width: 100%;
		transition: transform 0.3s ease;
		overflow: hidden;
		filter: brightness(90%) contrast(150%) saturate(130%);
	}

	.card-content {
		background-color: var(--grey);
		border-radius: 5px;
		padding: .2lh;
		font-size: 1rem;
		color: #fff;
		margin: .5lh;
		align-self: start;
		position: absolute;
	}

	.card:hover .card-image {
		transform: scale(1.05);
		/* Slight 5% zoom on hover */
	}


}

section.explore {
	background-color: var(--white);
	padding-bottom:3lh;
	padding-top:1lh;
	
	.card-image {
		height: 5lh;
	}

	.card-content {
		background-color: var(--grey);
		color: #fff;
	}


}

/* Responsive adjustments */

@media (max-width: 800px) {

	.cards .card {
		width: 100%;
	}

	section.explore {

		.card {
			width: calc(2lh + 50vw);
		}

		.card-container {
			display: flex;
			justify-self: center;
			overflow-x: auto;
			scroll-snap-type: x mandatory;
			position: relative;
			padding-bottom: 1lh;
		}

		.card-image {
			height: 8lh;
		}

		.card-content {
			font-size: 1.1rem;
		}

	}

	.row {
		flex-direction: column-reverse;
		text-align: center;
	}

	footer {
		display: flex;
		flex-direction: column-reverse;
	}

	header {
		flex-direction: column;
		height: unset;
		background-image: unset;
		align-content: center;
	}

	header.home {
		align-content: center;
		padding: .5lh;
	}

	.logo {
		max-width: 50vw;
		padding-bottom: 1lh;
	}

	header a {
		align-self: center;
	}

	video {
		max-width: 100%;
		margin-inline: auto;
		inline-size: auto;
	}

	nav {
		background-color: rgba(237, 233, 216, 0.4);
		padding: .5lh;
		width: 100%;
		border-radius: 1em;
		backdrop-filter: blur(2px);
		position: unset;

		ul {
			gap: 1lh;
			flex-wrap: wrap;
			justify-content: center;
		}

	}

}