@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Young+Serif&display=swap');

/* Modified CSS reset
	 https://www.joshwcomeau.com/css/custom-css-reset/ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
	padding: 0;
	line-height: calc(1em + 0.5rem);
}

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

p,
h1,
h2 {
	overflow-wrap: break-word;
}

p {
	text-wrap: pretty;
	hyphens: auto;
}

li {
	list-style: none;
}

/* Root Variables */
:root {
	/* Colors */
	--white: hsl(0, 0%, 100%);
	--rose-50: hsl(330, 100%, 98%);
	--rose-800: hsl(332, 51%, 32%);
	--stone-100: hsl(30, 54%, 90%);
	--stone-150: hsl(30, 18%, 87%);
	--stone-600: hsl(30, 10%, 34%);
	--stone-900: hsl(24, 5%, 18%);
	--brown-800: hsl(14, 45%, 36%);

	/* Spacing */
	--s-8: 0.5rem;
	--s-12: 0.75rem;
	--s-16: 1rem;
	--s-24: 1.5rem;
	--s-28: 1.75rem;
	--s-32: 2rem;
	--s-40: 2.5rem;
	--s-124: 7.75rem;

	/* Font Sizes */
	--text-20: 1.25rem;
	--text-28: 1.75rem;
	--text-32: 2rem;
	--text-40: 2.5rem;
	--text-32-40: clamp(var(--text-32), 6vw, var(--text-40));

	/* Font Weights */
	--font-normal: 400;
	--font-semibold: 600;
	--font-bold: 700;

	/* Border Radius */
	--br-12: 12px;

	/* Fluid Border Radius */
	--fl-br-12: clamp(0px, (100vw - 1023px) * 999, 12px);
	--fl-br-24: clamp(0px, (100vw - 1023px) * 999, 24px);

	/* Fluid Spacing */
	--fl-s-32-40: clamp(var(--s-32), 6vw, var(--s-40));
	--fl-s-40: clamp(0px, (100vw - 1023px) * 999, var(--s-40));
	--fl-s-124: clamp(0px, (100vw - 1023px) * 999, var(--s-124));
}

/* SR Only Style */
.visually-hidden:not(:focus):not(:active) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* General Styles */
body {
	display: flex;
	justify-content: center;
	font-family: 'Outfit', sans-serif;
	color: var(--stone-600);
	background-color: var(--stone-100);
	-webkit-font-smoothing: antialiased;
}

main {
	margin-block: var(--fl-s-124);
	border-radius: var(--fl-br-24);
	background-color: var(--white);
}

/* Main Image Styles */
figure {
	padding-block-start: var(--fl-s-40);
	padding-inline: var(--fl-s-40);
}

figure img {
	border-radius: var(--fl-br-12);
}

/* Text Content Styles */
article {
	display: flex;
	flex-direction: column;
	row-gap: var(--s-32);
	padding: var(--text-32-40);
}

header {
	display: flex;
	flex-direction: column;
	row-gap: var(--s-24);
}

/* Headings */
h1,
h2 {
	font-family: 'Young Serif', serif;
	font-weight: var(--font-normal);
}

h1 {
	font-size: var(--fl-s-32-40);
	color: var(--stone-900);
}

h2 {
	font-size: var(--text-28);
	color: var(--brown-800);
}

/* Prep Time */
.prep-time {
	display: flex;
	flex-direction: column;
	row-gap: var(--s-16);
	padding: var(--s-24);
	border-radius: var(--br-12);
	background-color: var(--rose-50);
}

.prep-time h2 {
	font-family: 'Outfit', sans-serif;
	font-weight: var(--font-semibold);
	font-size: var(--text-20);
	color: var(--rose-800);
}

/* This section is quite messy ;-; */
/* Lists (Shared Styles) */
.prep-time ul,
.ingredients ul,
.instructions ol {
	display: flex;
	flex-direction: column;
	row-gap: var(--s-8);
	padding-inline-start: var(--s-12);
}

/* List Items */
.prep-time li,
.ingredients li {
	padding-inline-start: var(--s-28);
}

/* Disc Styles */
.prep-time li::marker {
	content: '•';
	color: var(--rose-800);
	font-weight: var(--font-bold);
}

.ingredients li::marker {
	content: '•';
	color: var(--brown-800);
	font-weight: var(--font-bold);
}

/* Instructions */
.instructions ol {
	counter-reset: steps;
	padding-inline-start: var(--s-24);
}

.instructions li {
	counter-increment: steps;
	padding-inline-start: var(--s-16);
}

.instructions li::marker {
	content: counter(steps) '.';
	font: inherit;
	font-weight: var(--font-bold);
	color: var(--brown-800);
}

/* Shared Styles */
.ingredients,
.instructions {
	display: flex;
	flex-direction: column;
	row-gap: var(--s-16);
	padding-block-end: var(--s-24);
	border-bottom: 1px solid var(--stone-150);
}

/* Nutrition Table */
.nutrition {
	display: flex;
	flex-direction: column;
	row-gap: var(--s-16);
	text-align: left;
}

table {
	border-collapse: collapse;
	width: 100%;
}

caption {
	text-align: left;
	padding-block-end: var(--s-16);
}

th,
td {
	padding: var(--s-12);
	text-align: left;
}

th {
	font-weight: var(--font-normal);
	padding-inline: var(--s-32);
}

td {
	font-weight: var(--font-bold);
	color: var(--brown-800);
	width: 50%;
}

/* Table Border Styles */
tr:not(:last-child) {
	border-bottom: 1px solid var(--stone-150);
}

/* Remove top/bottom padding for first and last rows */
tbody tr:first-child th,
tbody tr:first-child td {
	padding-top: 0;
}

tbody tr:last-child th,
tbody tr:last-child td {
	padding-bottom: 0;
}

@media (min-width: 64em) {
	main {
		max-width: 46rem;
	}
}