/* === defaults === */

@import url("assets/css/reset.css") layer(reset);
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&family=Titan+One&display=swap');


:root {
	--font-face: 'Roboto', Arial, ui-sans-serif, sans-serif;
	--font-size-default: 18px;
	--font-size-large: calc(var(--font-size-default) + 4px);
	--font-color-dark: #333;
	--font-color-light: whitesmoke;
	--font-color-accent: rgb(86, 170, 86);
	--link-color-light: var(--font-color-accent);
	--link-color-dark: var(--font-color-dark);
	--border-radius-sm: 1rem;
	--border-radius-md: 2rem;
	--border-radius-lg: 4rem;
	
	scroll-behavior: smooth;
}

html {
	font-size: var(--font-default);
	font-family: "Rubik", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
}

body {
	background-color: var(--font-color-dark);
	background-image: url('/assets/img/body-bg_green.webp');
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
}

h1, h2, h3, h4 {
	font-family: "Titan One", sans-serif;
	font-weight: 400;
	font-style: normal;
	text-transform: uppercase;
}

h1 {
	color: var(--font-color-light);
	text-shadow: 0 6px 0 rgba(0, 0, 0, 0.25);
}

/* === utilities === */

.wrapper {
	width: min(100% - 1rem, 1960px);
	margin-inline: auto;
}

.flex-row {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.flex-column {
	display: flex;
	flex-flow: column nowrap;
	align-content: center;
	justify-items: space-between;
}

.larger {
	font-size: calc(1rem + 2dvw);
}

.center {
	text-align: center;
	margin-inline: auto;
}

.grid_2 {
	display: grid;
	grid-template-columns: 1fr 3fr;
}

/* === colors === */

.default {
	background-image: linear-gradient(var(--font-color-accent), rgb(93, 149, 93));
}

.silver {
	background-image: linear-gradient(lightgray, gray);
	.section-header {
		text-shadow: 0 4px 0 rgba(0, 0, 0, 0.5)!important;
	}
}

.gold {
	background-image:linear-gradient(35deg, #B38728, #e9ca87, #BF953F);
	.section-header {
		text-shadow: 0 4px 0 rgba(0, 0, 0, 0.5)!important;
	}
}

.pie {
	background-image:
		linear-gradient(
			35deg,
				rgb(156, 133, 193), 
				rgb(244, 80, 82), 
				rgb(160, 207, 136)
			);
}

.smalls {
	background-image: 
	linear-gradient(rgb(156, 133, 193), rgb(120, 85, 178));
}

.snowcaps {
	background-image: 
	linear-gradient(rgb(133, 153, 193), rgb(52, 174, 236));
}

/* === header ===*/

header#header_main {
	padding: 1rem 0;
	color: var(--font-color-light);
	& .flex-row {
		align-items: center;
	}
	& .flex-row * {
		width: 33%;
		flex-grow: 1;
	}
	
	img.logo {
		margin-left: 1rem;
		max-width: 20ch;
	}
	.right {
		text-align: right;
		padding-right: 1rem;
		.btn {
			display: inline-flex;
			align-items: center;
			width: fit-content!important;
			color: var(--font-color-light);
			border-radius: var(--border-radius-lg);
			corner-shape: squircle;
			margin-inline: 0.5rem 0;
			padding: 0.5rem 1rem;
			box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
			transition: 
				background-color 200ms ease-out, 
				border-radius 200ms ease-out,box-shadow 200ms ease-out;
			outline: 1px solid rgba(255, 255, 255, 0.5);
			text-decoration: none;
			
			
			&:hover {
				background-color: var(--link-color-light);
				color: var(--font-color-light);
				box-shadow: 0 6px 0 rgba(0, 0, 0, 0.1);
				transition: 
					background-color 200ms ease-in, 
					border-radius 200ms ease-in, 
					box-shadow 200ms ease-in,
					outline 200ms ease-in;
				outline: 1px solid rgba(255, 255, 255, 0.1);
			}
			
		}
		.btn::after {
			content: "⤓";
			display: inline-block;
			margin-left: 1ch;
			font-size: 1.5rem;
		}
	}

	nav#header_nav {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: flex-end;
		gap: 0;
		background-color: var(--font-color-light);
		margin-inline: 0.5rem auto;
		width: fit-content;
		border-radius: 2rem;
		corner-shape: squircle;
		overflow: hidden;
		outline: 1px solid rgba(255, 255, 255, 0.25);
		&:hover {
			box-shadow: 0 6px 0 rgba(0, 0, 0, 0.1);
		}
		
		a[href] {
			font-weight: 500;
			text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
			width: fit-content;
			color: var(--font-color-dark);
			text-decoration: none;
			display: inline-block;
			padding: 1rem 2rem;
			box-shadow: 0 0 0 rgba(0, 0, 0, 0);
			background-color: transparent;
			transition: 
				background-color 250ms ease-out;
			text-align: center;
			
			&:hover {
				background-color: var(--font-color-accent);
				color: var(--font-color-light);
				text-decoration-color: var(--font-color-accent);
				transition: 
				background-color 200ms ease-in;
			}
		}
	}
	
}

/* === main === */

main {
	min-height: 100dvh;
	background-color: rgba(255, 255, 255, 0.25);
	border-radius: var(--border-radius-lg);
	corner-shape: squircle;
	margin-inline: auto;
	padding: 1rem;
}

h1 {
	text-align: center;
	font-size: 4rem;
}

p.description {
	font-size: calc(1rem + 4px);
	width: min(100%, 65ch);
	margin-inline: auto;
	color: var(--font-color-light);
	text-shadow: 0 2px 0 rgba(0, 0, 0, 0.33);
	&:last-of-type {
		margin-block-end: 4rem;
	}
	a[href] {
		color: var(--font-color-light);
		text-decoration-color: yellow;
		&:hover {
			text-decoration: none;
			color: yellow;
		}
	}
}

section#flower .grid_2 {
	position: relative;
	
	aside.sidebar_flower {
		background-color: var(--font-color-light);
		position: sticky;
		inset: 1rem 0 1rem 0;
		outline: 1px solid rgba(0, 0, 0, 0.1);
		border-radius: 2rem;
		corner-shape: squircle;
		padding: 1rem 1.33rem 2rem 1.33rem;
		margin: 0 1rem 2rem 0;
		scroll-margin-top: 2rem;
		height: fit-content;
		box-shadow: 0 6px 0 rgba(0, 0, 0, 0.1);
		
		h3 {
			font-size: 2rem;
			text-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
		}
		
		ol {
			padding-inline-start: 1rem;
		}
		
		nav a[href],
		ol a[href] {
			color: var(--font-color-dark);
			font-weight: bold;
			display: block;
			padding-block: 0.25rem;
			text-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
			width: fit-content;
			text-decoration-color: var(--font-color-accent);
			&:hover {
				text-decoration: none;
			}
			
			li {
			}
		}
	}
}

article header.header_price-level {
	background-size: cover;
	background-position: top center;
	margin-block-end: 2rem;
	box-shadow: 0 6px 0 rgba(0, 0, 0, 0.1);
	display: flex;
	flex-flow: row;
	align-items: flex-end;
	justify-content: center;
	min-height: 25ch;
	border-radius: 2rem;
	corner-shape: squircle;
	
	h2 {
		flex-grow: 1;
		margin-block: 0;
		margin-inline: auto;
		font-size: 3rem;
		text-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
		color: var(--font-color-dark);
		padding: 1rem;
		background-color: rgba(255, 255, 255, 0.75);
		backdrop-filter: blur(5px) brightness(150%);
		border-radius: 2rem;
		corner-shape: squircle;
		max-width: 100%;
		text-align: center;
	}
}

article:is(#supreme) header.header_price-level {
	background-image: url('/assets/img/section-bg_ultra-supreme.webp');
}

article:is(#ultra-ex) header.header_price-level {
	background-image: url('/assets/img/section-bg_ultra-ex.webp');
}

article:is(#aaaplusplus) header.header_price-level {
	background-image: url('/assets/img/section-bg_aaaplusplus.webp');
}

article:is(#aaaplus) header.header_price-level {
	background-image: url('/assets/img/section-bg_aaaplus.webp');
}

article:is(#aaa) header.header_price-level {
	background-image: url('/assets/img/section-bg_aaa.webp');
}

article:is(#prem-indoor-ex) header.header_price-level {
	background-image: url('/assets/img/section-bg_prem-indoor-ex.webp');
	background-position: bottom center;
}

article:is(#light-assist) header.header_price-level {
	background-image: url('/assets/img/section-bg_light-assist-prem.webp');
	background-position: bottom center;
}

article:is(#light-dep) header.header_price-level {
	background-image: url('/assets/img/section-bg_light-dep-aaa.webp');
	background-position: bottom center;
}
article:is(#ex-smalls) header.header_price-level {
	background-image: url('/assets/img/section-bg_ex-smalls.webp');
	background-position: bottom center;
}
article:is(#prem-smalls) header.header_price-level {
	background-image: url('/assets/img/section-bg_prem-smalls.webp');
	background-position: bottom center;
}
article:is(#snowcaps-65) header.header_price-level {
	background-image: url('/assets/img/section-bg_snowcaps-65.webp');
	background-position: bottom center;
}
article:is(#snowcaps-45) header.header_price-level {
	background-image: url('/assets/img/section-bg_snowcaps-45.webp');
	background-position: bottom center;
}

.price-level {
	border-radius: var(--border-radius-md);
	corner-shape: squircle;
	margin-block-end: 2rem;
	box-shadow: 0 6px 0 rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.prices {
	padding: 1rem;
}

.photos {
	filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.1));
}

.photos.flower {
	img {
		border-radius: 2rem;
		corner-shape: squircle;
		width: min(50%, 30ch)!important;
	}
}

.photos.single {
	text-align: center;
	img {
		width: 50%;
		margin-inline: auto;
	}
}

.price-wrapper .flex-row {
	justify-content: center;
	&.photos {
		margin-block: 2rem;
		img {
			display: block;
			width: min(50%, 20ch);
		}
}
}

.price-wrapper .box {
	display: inline-flex;
	flex-flow: column;
	border-radius: var(--border-radius-lg);
	corner-shape: squircle;
	outline: 1px solid lightgray;
	box-shadow: 0 6px 0 rgba(0, 0, 0, 0.10);
	width: min(33%, 23ch);
	flex-grow: 1;
	justify-content: flex-end;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.5);
	overflow: hidden;
	
	.header_size {
		text-transform: lowercase;
		padding: 0;
		font-size: 2rem;
		font-weight: bolder;
		text-shadow: 0 2px 0 white;
		margin-block: 1rem;
	}
	.price {
		font-size: clamp(2rem, 5dvw, 3rem);
		line-height: 1rem;
		color: red;
		font-weight: 900;
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: center;
		padding: 1rem;
		background-color: white;
		border-radius: 2rem 2rem 0 0;
		min-height: 5ch;
		sup {
			font-size: clamp(1rem, 4dvw, 2rem);
			
		}
	}
}


/* === footer === */

footer#footer_main {
	padding: 2rem;
	text-align: center;
	background-color: var(--font-color-dark);
	color: var(--font-color-light);
	text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}