/* === DESIGN SYSTEM === */
:root {
	/* Colors */
	--color-main: #ef93ae;
	--color-border: #98C6FE;
	--color-text: #D54E33;
	--color-buttons: #f8e776;
	--color-buttons-secondary-disabled: #f4eab6;
	--color-cards: #FFF9EC;
	--color-disabled-text: #ffcfcf;
	--color-disabled-border: #c4dfff;

	/* Typography */
	--font-body: "SN Pro", sans-serif;
	--font-header: "rl-horizon", serif;
	--font-size-sm: 1rem;
	--font-size-md: 1.25rem;
	--font-size-ml: 1.5rem;
	--font-size-lg: 4rem;
	--font-size-xl: 4.5rem;
	--font-weight-bold: 600;

	/* Layout */
	--space-sm: 0.5rem;
	--space-md: 1.5rem;
	--space-ml: 2rem;
	--space-lg: 4rem;
	--space-xl: 6rem;
	
	--radius: 0.5rem;
	--border: 0.15rem;
	--border-sm: 0.1rem;
	--button: 3rem;
	--button-wide: calc(var(--button) * 3);
	--image-size: clamp(4.8rem, 10vw, 5.8rem);
	--card-inline-size: clamp(20rem, 50vw, 26rem);
	--card-block-size: clamp(27rem, 70vh, 42rem);

	/* Card Rotation */
	--card-rotate-1: 9deg;
	--card-rotate-2: 6deg;
	--card-rotate-3: 3deg;

}

/* === BASE STYLES === */
body {
	block-size: 100svh;
	overflow: hidden;
	inline-size: 100%;
	color: var(--color-text);
	background-color: var(--color-text);

	a {
		text-decoration: underline;
	}

	p {
		line-height: 1.3;
		font-size: var(--font-size-sm);
		font-family: var(--font-header);
	}
}

main {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-md);
	padding: var(--space-sm);
	block-size: 100svh;
	background-position: center;
}

/* === STEPS === */
.steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-md);
	padding-block-start: var(--space-md);
	border-radius: var(--button);
	font-family: var(--font-body);
	font-size: var(--font-size-md);

	.step {
		border-radius: 50%;
		display: flex;
		inline-size: var(--space-sm);
		block-size: var(--space-sm);
		background-color: var(--color-disabled-text);
	}

	.step-active {
		border-radius: 50%;
		align-items: center;
		justify-content: center;
		inline-size: var(--space-sm);
		block-size: var(--space-sm);
		background-color: var(--color-text);
	}
}

/* === NAVIGATION/BUTTONS === */
.navigation {
	inline-size: 100%;
	display: flex;
	position: absolute;
	padding-block-start: var(--space-md);
	justify-content: center;
	align-items: center;
	grid-column: 1;
	grid-row: 2;
	margin-block-start: var(--space-md);
	inset-inline-start: 0;


	button {
		color: var(--color-text);
		border-radius: var(--radius);
		block-size: var(--button);
		inline-size: var(--button-wide);
		text-align: center;
		background-color: var(--color-buttons);
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-bold);
		border: var(--border) solid var(--color-border);
		font-family: var(--font-body);
		cursor: pointer;
		transition: opacity 0.15s ease;
		/* source https://www.w3schools.com/css/css3_transitions.asp and https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/easing-function. Here's also my source for cursor states: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/cursor. Also found this really cool resource for hover states for later https://prismic.io/blog/css-hover-effects. */

		&:hover:not(:disabled) {
			opacity: 0.8;
		}

		&:active:not(:disabled) {
			opacity: 0.6;
		}

		&:disabled {
			background-color: var(--color-buttons-secondary-disabled);
			color: var(--color-disabled-text);
			border: var(--border) solid var(--color-disabled-border);
			cursor: not-allowed;
		}
	}

	.back-button {
		background-color: var(--color-buttons-secondary-disabled);
		aspect-ratio: 1;
		inline-size: var(--button);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-inline-end: var(--space-sm);

		svg {
			inline-size: var(--space-md);
			block-size: var(--space-md);
		}
	}
}

/* Hiding next button and replacing it with create plate buttons on sweet screen */
#create-plate {
	display: none;
}

/* Tried visibility hidden - to fix spacing here https://stackoverflow.com/questions/20663712/css-display-none-not-working */
.Plate:has(.Sweet.modal.current) {
	.next-button {
		display: none;
		inline-size: 0;
		padding: 0;
		border: none;
	}

	#create-plate {
		display: block;
	}
}

.Plate:has(.home.modal.current) {
	.back-button {
		display: none;
	}

	.navigation {
		margin-block-start: calc(var(--space-xl) * -0.5);
		inset-block-end: var(--space-lg);
		z-index: 100;
	}
}

/* === CARD / MODAL === */
.modal {
	display: none;
	border-radius: var(--radius);
	border: var(--border) solid var(--color-border);
	background-color: var(--color-cards);
	list-style: none;
	gap: var(--space-sm);
	min-block-size: var(--card-block-size);
	inline-size: var(--card-inline-size);
	justify-content: center;
	padding: var(--space-md);
	max-block-size: var(--card-block-size);

	.category-title {
		display: flex;
		flex-direction: column;
		gap: var(--space-sm);


		h3 {
			font-family: var(--font-header);
			font-size: var(--font-size-ml);
			font-weight: var(--font-weight-bold);
			text-align: center;
			padding-block-end: var(--space-ml);
		}
	}

	/* === HOME PAGE === */
	&.home {
		justify-content: center;

		.home-content {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
		}

		h1 {
			max-inline-size: 6ch;
			margin-inline: auto;
			font-family: var(--font-header);
			font-size: var(--font-size-xl);
			font-weight: var(--font-weight-bold);
			color: var(--color-main);
			line-height: 0.9;
			-webkit-text-stroke: var(--border-sm) var(--color-text);
			text-align: center;

			/* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/-webkit-text-stroke */
		}

		h2 {
			font-family: var(--font-body);
			font-size: var(--font-size-sm);
			padding-block-start: var(--space-md);
			font-weight: var(--font-weight-bold);
			text-wrap: balance;
		}
	}

	/* === ANIMATIONS === */
	&.current {
		display: flex;
		flex-direction: column;
		animation: slide-in 0.2s ease-out;

		/* animation none https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation */
		&:last-child {
			animation: none;
		}
	}
}

body:has(.home.modal.current, .Output.modal.current) {
	background-color: var(--color-text);

	main {
		background:
			repeating-linear-gradient(0deg,
				var(--color-main) 0,
				var(--color-main) var(--space-lg),
				transparent 2vh,
				transparent 8vh),
			var(--color-text);
	}
}
/* Resource for gradient background https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/gradient/repeating-linear-gradient*/
/* https://claude.ai/share/da9b2718-d050-490e-82a4-88e4321a78ea */

/* references for slide in animation https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Transitions/Using and this youtube video for the swipe style animation https://www.youtube.com/watch?v=jdB-PQY5j-I*/

@keyframes slide-in {
	from {
		transform: translateX(10%);
	}

	to {
		transform: translateX(0);
	}
}

/* === IMAGE/GRID === */
.Plate {
	position: relative;
	inline-size: var(--card-inline-size);
	block-size: var(--card-block-size); 
	display: grid;
	justify-items: center;
	align-items: start;
	grid-template-rows: auto auto;
	margin-block-end: var(--space-lg);
}

#data-list {
	position: absolute;
	inset-block-start: 0;
	inline-size: 100%;
	z-index: 1;


	ul {
		display: grid;
		grid-template-columns: repeat(3, var(--image-size)); 
		gap: var(--space-md);
		padding-block-end: var(--space-md);
		justify-content: center;
		justify-items: center;
		align-items: center;
		margin-inline: auto;
		

		li {
			display: flex;
			inline-size: var(--image-size);
			block-size: var(--image-size); 
			align-items: center;
			justify-content: center;
			border: var(--border) solid transparent;
			/* added an invisable border here so that the items don't jump around inside the li when selected*/
			border-radius: var(--radius);
			overflow: hidden;
			aspect-ratio: 1;

			img {
				inline-size: 100%;
				block-size: 100%;
				object-fit: contain;
			}

			&.active {
				border-color: var(--color-border);
			}
		}
	}
}

/* === DECORATIVE CARDS BEHIND === */
.decorative-cards {
	position: relative;
	block-size: var(--card-block-size);
	inline-size: var(--card-inline-size);
	grid-column: 1;
	grid-row: 1;
	z-index: 0;


	.card-1,
	.card-2,
	.card-3 {
		position: absolute;
		inset: 0;
		/* Relative units way to write top:0, bottom: 0 https://claude.ai/share/c47f41d0-b4f3-4895-a482-01396888f163 */
		border-radius: var(--radius);
		border: var(--border) solid var(--color-border);
		background-color: var(--color-cards);
		z-index: 0;
	}

	.card-1 { transform: rotate(var(--card-rotate-1)); }
	.card-2 { transform: rotate(var(--card-rotate-2)); }
	.card-3 { transform: rotate(var(--card-rotate-3)); }
}
/* Since thee cards are decorative - and the modals and cards are siblings, I thought about using the has selector here to remove it when the user gets to sweets, learnt this from previous projects and used the MDN resource to figure out how to write it properly https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:has*/

.Plate:has(:is(.Crunch, .Sweet, .Output).modal.current) .card-1,
.Plate:has(:is(.Sweet, .Output).modal.current) .card-2,
.Plate:has(.Output.modal.current) .card-3 {
	display: none;
}

/* === OUTPUT === */
.Output.modal {
	align-items: center;
	justify-content: center;
	gap: var(--space-md);
	text-align: center;
	color: var(--color-main);
	border: var(--border) solid var(--color-border);


	#vibe-name {
		text-transform: capitalize;
		font-family: var(--font-header);
		font-size: var(--font-size-lg);
		font-weight: var(--font-weight-bold);
		color: var(--color-main);
		line-height: 0.9;
		-webkit-text-stroke: var(--border-sm) var(--color-text);
		letter-spacing: 0.1rem;
	}

	.output {
		position: relative;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-sm);
		border: var(--border) solid var(--color-disabled-text);
		border-radius: var(--radius);
		inline-size: 80%;
		margin-inline: auto;
		padding: var(--space-sm);
		background-color: var(--color-main);

		li {
			overflow: hidden;
		}

		img {
			display: block;
			aspect-ratio: 1;
			border: var(--border-sm) solid var(--color-disabled-text);
			border-radius: var(--radius);
			background-color: var(--color-buttons-secondary-disabled);
			inline-size: 100%;
			max-block-size: 30vh;
			object-fit: contain;
		}

		p {
			display: none;
		}
	}

	.category-title {
		align-items: center;
		display: flex;
		flex-direction: column;


		/* "Girl Dinner Vibe" label */
		.vibe-label {
			padding-block-end: var(--space-sm);
			font-family: var(--font-body);
			font-size: var(--font-size-md);
			color: var(--color-text);
			font-weight: var(--font-weight-bold);
		}
	}

	.plate-description {
		color: var(--color-text);
		font-family: var(--font-body);
		font-size: var(--font-size-md);
		font-weight: var(--font-weight-bold);
		max-inline-size: 30ch;
		text-wrap: balance;
	}
	/* https://claude.ai/share/49155ede-3852-46de-8d97-e76df4bbbb0b and https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:has for selecting the body background on only the output modal */
}


/* === RESPONSIVE DESIGN === */
/* changing sizing for older/smaller phones */
@media (300px <=width <=390px) {
	:root {
		--font-size-xl: 3.5rem;
		--font-size-lg: 2.5rem;
		--font-size-md: 1rem;
		--font-size-ml: 1.25rem;
	}

.modal {
		padding: 0;
	}
}

@media ( width <=420px) {
	:root {
		--font-size-xl: 4.5rem;
		--font-size-lg: 3rem; 
		--font-size-ml: 1.25rem;
		--image-size: 3.75rem;
		--card-rotate-1: 4.5deg;
		--card-rotate-2: 3deg;
		--card-rotate-3: 1.5deg;
	}
	
	body:has(.home.modal.current, .Output.modal.current) {
		main {
		background:
			repeating-linear-gradient(0deg,
				var(--color-text) 0,
				var(--color-text) var(--space-md),
				transparent 2vh,
				transparent 8vh),
			var(--color-main);
	}
	}
	.steps {
		padding-block-start: var(--space-md);
	}

	.navigation {
		margin-block-start: calc(var(--space-sm) * -0.5);
	}

}

@media (width >= 768px) and (width < 900px) {
	:root {
		--button: 3rem;
	}
		.Output.modal {
		.output {
			inline-size: 65%;
		}
	}
}
body:has(.home.modal.current, .Output.modal.current) {
		main {
		background:
			repeating-linear-gradient(0deg,
				var(--color-text) 0,
				var(--color-text) var(--space-md),
				transparent 2vh,
				transparent 8vh),
			var(--color-main);
	}
}
/* My dots and content go outside the grid when phones are wider, and less tall, Adding a media query here to account for small heights https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/height */

@media (height <=1000px) {
	/* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/column-gap */

	--root {
		--image-size: clamp(2.5rem, 15svh, 3.5rem);
		--card-block-size: clamp(20rem, 75svh, 30rem);
	}

	#data-list ul {
		row-gap: var(--space-sm);
		column-gap: var(--space-md);
	}

	.modal .category-title h3 {
		padding-block-end: 0;
	}
}

@media (width >=900px) {
	:root {
	--border-sm: 0.15rem;
	--font-size-sm: 1.25rem;
	--font-size-md: 1.25rem;
	--font-size-ml: 2rem;
	--font-size-lg: 5rem;
	--font-size-xl: 7rem;
	--button: 4rem;
	--card-rotate-1: 4.5deg;
	--card-rotate-2: 3deg;
	--card-rotate-3: 1.5deg;
	--card-inline-size: clamp(50rem, 70vw, 60rem);
	--card-block-size: clamp(35rem, 50vh, 80rem);
	--image-size: clamp(7rem, 7vw, 10rem);
	}
	#data-list ul {
	grid-template-columns: repeat(5, var(--image-size));

	}
	.navigation {
		margin-block-start: var(--space-ml);
	}
	 .Output.modal .output {
	inline-size: 50%;
	}
	h2 {
			max-inline-size: 50ch;
			margin-inline: auto;
			line-height: 1.5;
		}
}

@media (width >=1100px) {
	:root {
		--font-size-sm: 1.25rem;
		--font-size-md: 1.25rem;
		--font-size-ml: 2.25rem;
		--font-size-lg: 5rem;
		--font-size-xl: 8rem;
		--button: 4rem;
		--space-xl: 12rem;
		--space-lg: 3rem;
	 }

	.modal.home {
		h1 {
			font-size: var(--font-size-xl);
		}
		.home-content {
			transform: translateY(calc(var(--space-md) * -1));
		}
		.navigation {
		padding-block-start: var(--space-xl);
		margin-block-start: calc(var(--space-xl) * -0.5);
		inset-block-end: var(--space-sm);
		z-index: 100;
	}
	}
		

	#data-list ul {
	grid-template-columns: repeat(5, var(--image-size));
	gap: var(--space-md);
	}
	body:has(.home.modal.current, .Output.modal.current) {
	background-color: var(--color-text);
}
}


@media (width >=1600px) {
	 :root {
		--font-size-sm: 1.5rem;
		--font-size-lg: 6.5rem;
		--button: 4rem;
		--card-inline-size: clamp(60rem, 65vw, 80rem);
		--card-block-size: clamp(40rem, 55vh, 90rem);
		--image-size: clamp(7rem, 6vw, 10rem);
		--space-lg: 5rem;
	 }
#data-list ul {
		gap: var(--space-lg);
		max-inline-size: 75vw;
	}
	 .Output.modal .output {
	inline-size: 55%;
	}
}

@media (width >=2400px) {
	 :root {
		--font-size-sm: 2rem;
		--font-size-md: 1.5rem;
		--font-size-ml: 2.5rem;
		--font-size-lg: 8rem;
		--font-size-xl: 10rem;
		--button: 6rem;
	 }
	 .Output.modal .output {
	inline-size: 55%;
	}
}

/*CSS Organization - https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Organizing, https://claude.ai/share/d88a981a-c2ea-41fc-b3da-aea6661cd832 and https://claude.ai/share/2e9f3a0a-cda3-412e-bdbd-7979159f46ff*/