@import url("styles.css");

.page-header {
	color: white;
	text-shadow: 0 2px 1px black;
	& h2 {
		font-size: 2rem;
		padding-block: 0;
	}
}

@media (max-width: 915px) {
	.page-header h2 {
		padding-block: 0 2rem;
	}
}

.content.menu {
	margin-top: 1rem;
	padding: 0;
}

h3 {
	font-size: 2rem;
	color: black;
	text-shadow: 0 1px 5px rgb(255, 255, 255);
}

h4 {
	text-shadow: 0 1px 0 black;
}

.menu-nav {
	background-color: hsla(123, 50%, 41%, 1);
	background-image: url(img/background-green.png);
	backgrouns-size: cover;	color: white;
	background-position: center;
	font-size: 0.75rem;
	justify-content: center;
	letter-spacing: 1px;
	outline: 1px solid rgba(0, 0, 0, 0.1);
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.66);
	justify-content: space-between;
	border-radius: 0.5rem;
	& a[href] {
		flex-basis: 10%;
		display: block;
		padding: 0.75rem 0.5rem;
		text-decoration: none;
		flex-grow: 1;
		text-align: center;
		&:hover {
			background-color: rgba(255, 255, 255, 0.6);
			color: black;
		}
		
		&:last-child {
			width: 100%;
			text-align: center;
		}
	}
}
@media (max-width: 915px) {
	.menu-nav a[href] {
		padding: 0.5rem 0.25rem;
	}	
}
.others, .exotics, .indoor {
	position: relative;
	.others-nav, .exotics-nav, .indoor-nav {
		position: sticky;
		left: 0;
		right: 0;
		top: 0;
		z-index: 99;
	}
}


.padding {
	padding: 1rem;
}

.exotics .flex-row:first-of-type,
.indoor .flex-row:first-of-type,
.standard .flex-row:first-of-type {
	gap: 0.5rem;
	align-items: flex-start;
}

.indicas {
	background-image: url(img/background-purple.png);
}

.sativas {
	background-image: url(img/background-red.png);
}

.hybrids {
	background-image: url(img/background-green.png);
}

.prices {
	background-image: url(img/background-green.png);
	filter: grayscale(100%);
}

.indicas, .sativas, .hybrids, .prices {
	margin-bottom: 1rem;
	background-position: center;
	background-size: cover;
	padding: 1rem 0.5rem 3rem 0.5rem;
	border-radius: 0.5rem;
	min-width: calc(50% - 0.25rem);
	flex-grow: 1;
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.66);
	& h4 {
		color: whitesmoke;
		padding-top: 0;
	}
}

@media (max-width: 915px) {
	.indicas, .sativas, .hybrids, .prices {
	width: 100%;
	}
}

.prices {
	outline: 1px solid rgba(0, 0, 0, 0.1);
	
	& .strain span {
		flex-grow: 1;
	}
	& .list {
	align-items: flex-start;
	padding: 0.5rem;
	gap: 1rem;
	& .jars, .lbs {
		flex-grow: 1;
		& span:first-of-type {
			font-weight: bold;
			text-transform: lowercase;
		}
	}
}
}

@media (max-width: 515px) {
	.strain-name {
		font-size: 11px;
	}
	
	h5 {
		font-size: 11px;
	}
}

.strain-body {
	text-transform: uppercase;
	& header {
		padding-bottom: 0.5rem;
	}
}

.strain-body, .body {
	background-color: whitesmoke;
	padding: 1rem 0;
	border-radius: 0.5rem;
	font-size: 0.75rem;
	
	& h5 {
		text-transform: uppercase;
		width: calc(22.5% - 0.5rem);
		padding: 0;
		margin: 0;
		text-align: center;
		&:first-of-type {
			width: calc(55% - 0.25rem);
			text-align: left;
			padding-left: 0.75rem;
		}
	}
	& .strain-list {
		padding-inline: 0.5rem;
		flex-wrap: nowrap;
		letter-spacing: 0.5px;
		& p {
			font-weight: bold;
		}
	}
	& .strain {
		padding: 0.25rem;
		& span {
			display: block;
			text-align: center;
			width: calc(22.5% - 0.5rem);
		}
		& span:first-of-type {
			width: calc(55% - 0.25rem);
			text-align: left;
			font-weight: bold;
		}
	}
	
	& .strain:nth-of-type(even) {
		background-color: rgba(0, 0, 0, 0.05);
		border-radius: 0.25rem;
	}
}

main {
	padding-bottom: 2rem;
}