:root {
	--grey: rgb(241 240 234 / 1);
	--green: rgb(103 115 72 / 1);
	--blue: rgb(69 106 135 / 1);
	--lightblue: rgb(75 115 145 / 0.5);
	--headline: rgb(21 47 62 / 1);
	--text: rgb(21 47 62 / 1);
	--darktext: rgb(21 43 53 / 1);
	--content-width: 1024px;
	font-size: 18px;
}

body {		
	font-family: "Roboto", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 200;
  	font-style: normal;
	color: var(--darktext);
	margin: 0;
	padding: 0;
	line-height: 1.85;
}

a {
	color: var(--blue);
	text-underline-offset: 2px;

	&:hover, &:focus-visible {
		text-decoration-thickness: 2px;
	}
}

h1, h2 {
	font-size: 1.5rem;
}

h1 + h2 {
	font-size: 1.17rem;
	padding-top: 0.51rem;
}

h1, h2, h3 {
	color: var(--headline);
	font-weight: 200;
	line-height: 1.35;
	text-wrap: pretty;
}

h2 + h3 {
	padding-top: 0.51rem;
}

.hide-on-small {
	display: none;
	@media (width > 920px) {
		display: block;
	}

}

p {
	text-wrap: pretty;
}

div.separator {
	display: flex;
	justify-content: center;
	padding: 2rem 0;
	@media (width > 650px) {
		margin: auto;
	}

	&.dark-light{
		background: white;
		background: linear-gradient(0deg, white 0%, white 50%, var(--grey) 50%, var(--grey) 100%)
	}
	
	&.light-dark  {
		background: var(--grey);
		background: linear-gradient(0deg, var(--grey) 0%, var(--grey) 50%, white 50%, white 100%)
	}
	
	&.left {
		padding-left: 0;
		@media (width > 650px) {
			padding-left: 1rem;
			justify-content: start;
		}
	}
	&.right {
		padding-right: 0;
		@media (width > 650px) {
			padding-right: 1rem;
			justify-content: end;
		}
	}

	img {
		max-width: 100%;
	}
}
img {
		max-width: 100%;
	}


header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: center;

	margin: auto;
	max-width: var(--content-width);
	line-height: 1.5;

	padding-block: 1rem;
	padding-inline: 2rem;

	span {
		display: block;
		font-weight: 500;
		color: var(--blue);
	}

	flex-direction: column;
	font-size: 0.8rem;

	@media (width > 374px) {
		font-size: 1rem;
	}

	@media (width > 650px) {
		flex-direction: row;
		font-size: inherit;
	}
}

footer {
	background-image: url('assets/images/footer-bg.jpg');
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 800px;
	position: relative;

	#footer-content {
		bottom: 4rem;
		position: absolute;
		margin-block: auto;
		width: 100%;
		line-height: 1.5;

		#footer-details {
			background-color: white;

			>div:first-of-type {
				display: flex;
				justify-content: space-between;
				align-items: center;

				flex-direction: column;
				align-items: start;
				gap: 1rem;
				padding-bottom: 2rem;

				@media (width > 920px) {
					flex-direction: row;
					align-items: center;
					gap: 2rem;
					padding-block: 0.5rem;
				}

				margin: auto;
				max-width: var(--content-width);

				padding-inline: 2rem;

				>div {
					display: flex;
					flex-direction: column;
					max-width: calc(100% - 2rem);

					img {
						margin-block: 1rem;
						@media (width > 920px) {
							max-width: 200px;
						}
					}

					span {
						font-size: 0.9rem;
					}

					span:first-of-type {
						font-weight: 500;
						font-size: 1rem;
					}
					
					a {
						color: var(--text);
						text-underline-offset: 2px;
					}
				}
			}
		}
	}

	#footer-copyright {

		>div {
			background-color: rgb(0 0 0 / 0.66);
			color: white;
			margin: auto;
			
			padding: 0.5rem 2rem;
			@media (width > 650px) {
				padding: 0.25rem 0.5rem;
			}
			

			width: fit-content;
			font-size: 0.8rem;

			a {
				color: white;
				font-weight: 300;
			}

			span {
				display: inline-block;
			}
		}

	}
}

div[role="article"] {

	>div:not(.banner) {
		display: flex;
		flex-direction: column;

		margin: auto;
		max-width: var(--content-width);

	}

	h1, h2, h3 {
		text-align: center;
		margin: 0;
		span {
			display: block;
		}
		@media (width > 650px) {
			span {
				display: inline;
			}
		}
		span + span {
			display: block;
		}
	}

	padding-block: 0;
	padding-inline: 2rem;

	.padded-bottom {
		padding-bottom: 2rem;
		@media (width > 650px) {
			padding-bottom: 6rem;
		}
	}

	.padded-top {
		padding-top: 2rem;
		@media (width > 650px) {
			padding-top: 6rem;
		}
	}

	.padded-block {
		padding-block: 2rem;
		@media (width > 650px) {
			padding-block: 6rem;
		}
	}

	.two-column {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
		gap: 1rem;
		@media (width > 780px) {
			gap: 3rem;
		}
		max-width: calc(var(--content-width) - 160px);
		margin-inline: auto;
		margin-top: 2rem;

		>div {
			overflow: auto;

			p:first-of-type {
				margin-top: 0;
			}
			p:last-of-type {
				margin-bottom: 0;
			}
		}

		img {
			min-width: 66%;
			margin: 3rem auto;
		}

		div:last-of-type {
			p:last-of-type::after {
				content: '';
				display: inline-block;
				aspect-ratio: cos(30deg);
				clip-path: polygon(-50% 50%,50% 100%,150% 50%,50% 0);
				background: var(--lightblue);
				position: relative;
				height: 0.75rem;
				width: 0.66rem;
				margin-left: 0.33rem;
			}
		}
	}
}

#hero {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	padding-inline: 1rem;

	background-image: url('assets/images/hero-bg.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	
	background-position: 40% top;
	min-height: 45vh;
	@media (width > 720px) {
		background-position: center top;
		min-height: 800px;
	}
	@media (width > 1200px) {
		background-position: right top;
	}

	>div:first-child {
		margin: 2rem auto 0 0;
		max-width: 130px;
		@media (width > 720px) {
			margin: 2rem auto auto 12%;
			max-width: 100%;
		}
		@media (width > 1200px) {
			margin: 2rem 12% auto auto;
		}
	}
	
	ul {
		--_hero-text-shadow: 
			0 0 1rem rgb(0 0 0 / 1), 
			0 0 0.75rem rgb(0 0 0 / 0.75), 
			0 0 0.5rem rgb(0 0 0 / 0.5), 
			0 0 0.25rem rgb(0 0 0 / 0.25);
		background-color: rgba(0, 0, 0, 0.2);
		color: white;
		padding: 0;
		
		font-family: "Bodoni Moda", serif;
		font-optical-sizing: none;
		
		display: flex;
		justify-content: space-between;
		align-items: center;

		font-size: 0.85rem;
		font-style: normal; 
		font-weight: 100;
		text-transform: uppercase;
		letter-spacing: 0.35rem;
		line-height: 1.35;
		margin: 2rem auto;
		white-space-collapse:break-spaces;

		@media (width > 375px) {
			font-size: 1rem;
		}
		
		@media (width > 720px) {
			font-size: 2.5rem;
			letter-spacing: 0.5rem;
			margin: 6rem auto;
		}
		
		@media (width > 1220px) {
			font-size: 3rem;
			letter-spacing: 0.85rem;
			margin: 5rem auto;
		}
		
		list-style: none;
		li {
			text-shadow: var(--_hero-text-shadow);
			display: inline-block;

			&.hex {
				content: '';
				aspect-ratio: cos(30deg);
				clip-path: polygon(-50% 50%,50% 100%,150% 50%,50% 0);
				background: white;
				position: relative;
				
				margin-left: .25rem;
				margin-right: .5rem;
				height: 0.5rem;
				width: 0.5rem;

				@media (width > 650px) {
					margin-left: .75rem;
					margin-right: 1.25rem;
					height: 1rem;
					width: 0.85rem;
				}

				@media (width > 1220px) {
					margin-left: 1.25rem;
					margin-right: 2rem;
					height: 1.5rem;
					width: 1.25rem;
				}
			}
		}
	}
}

#brand-story-1 {
	background-color: var(--grey);
}

#brand-story-2 {
	h2::before { 
		content: open-quote;
		font-size: 2rem;
		position: relative;
		top: 0.25rem;
		opacity: 0.75;
	}
	h2 span:last-of-type {
		line-height: 1;

		&::after { 
			content: close-quote; 
			font-size: 2rem;
			position: relative;
			top: 0.25rem;
			opacity: 0.75;
		}
	}
}

#honey {
	background-color: var(--grey);

	span[lang='it'] {
		color: var(--blue);
		display: inline;
		font-family: "Bodoni Moda", serif;
		font-style: italic;
		font-weight: 300;
		font-optical-sizing: none;
	}

	#honey-jar {
		max-width: 280px;

		img {
			margin: 2rem auto 0;
		}
	}
}

#orchard {

}

#location {
	background-color: var(--grey);
}

.banner {
	background-position: center top;
	background-repeat: repeat-x;
	min-height: 300px;
	position: relative;
	width: 100%;

	background-size: cover;
	@media (width > 1536px) {
		background-size: auto;
	}
}

.orchard-banner {
	background-image: url('assets/images/orchard-banner-2.jpg');
}

.location-banner {
	background-image: url('assets/images/location-banner-2.jpg');
}