/* =========================================================
   1. SELF-HOSTED FONTS
   ========================================================= */
/* Young Serif */
@font-face {
  font-family: "Young Serif";
  src: url("/assets/fonts/young-serif/YoungSerif-Regular.ttf")
    format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Outfit*/
@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/outfit/Outfit-VariableFont_wght.ttf")
    format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   2. CSS VARIABLES (DESIGN TOKENS)
   ========================================================= */

:root {
  /* Fonts */
  --FF: "Outfit", sans-serif;

  /* Colors */
  --COLOR-ROSE-DARK: #7a284e;
  --COLOR-ROSE-LIGHT: #fff7fb;

  --COLOR-STONE-DARK: #312e2c;
  --COLOR-STONE-MEDIUM: #5f564d;
  --COLOR-STONE-LIGHT: #e3ddd7;
  --COLOR-STONE-VERY-LIGHT: #f3e5d7;

  --COLOR-BROWN: #854632;

  --COLOR-WHITE: #ffffff;
}

/* =========================================================
   3. CSS RESET
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

/* =========================================================
   4. GENERAL STYLES
   ========================================================= */
/* 1rem: 10px */
html {
  font-size: 62.5%;
}

body {
  font-family: var(--ff);
  background-color: var(--COLOR-STONE-VERY-LIGHT);
}

/* Text Preset 1 */
.text-preset-1 {
  font-family: "Young Serif";
  font-size: 3.6rem;
  line-height: 100%;
  letter-spacing: 0px;
}

.text-preset-2 {
  font-family: "Young Serif";
  font-size: 2.8rem;
  line-height: 100%;
  letter-spacing: 0px;
}

.text-preset-3 {
  font-family: "Outfit";
  font-size: 2rem;
  line-height: 100%;
  letter-spacing: 0px;
  font-weight: 600;
}

.text-preset-4 {
  font-family: "Outfit";
  font-size: 1.6rem;
  line-height: 150%;
  letter-spacing: 0px;
}

.text-preset-4-bold {
  font-family: "Outfit";
  font-size: 1.6rem;
  line-height: 150%;
  letter-spacing: 0px;
  font-weight: 700;
}

.margin-bottom-12 {
  margin-bottom: 1.2rem;
}

.margin-bottom-16 {
  margin-bottom: 1.6rem;
}

.margin-bottom-24 {
  margin-bottom: 2.4rem;
}

.margin-bottom-32 {
  margin-bottom: 3.2rem;
}

.divider {
  border: none;
  height: 1px;
  background-color: var(--COLOR-STONE-LIGHT);
}

/* =========================================================
   5. COMPONENT STYLES
   ========================================================= */

.recipe-page {
  background-color: var(--COLOR-WHITE);
  max-width: 73.6rem;
  margin: 0 auto;
}

.container {
  padding: 4rem 3.2rem;
}

.image {
  width: 100%;
}

.intro {
}

.intro__title {
  color: var(--COLOR-STONE-DARK);
}

.intro__description {
  color: var(--COLOR-STONE-MEDIUM);
}

.prep-time {
  background-color: var(--COLOR-ROSE-LIGHT);
  padding: 2.4rem;
  border-radius: 10px;
}

.prep-time__title {
  color: var(--COLOR-ROSE-DARK);
}

.prep-time__list {
  list-style-type: none;
}

.prep-time__item {
  color: var(--COLOR-STONE-MEDIUM);
}

/* Custom list item marker to set space between marker and item text */
.prep-time__item::before {
  content: "•";
  color: var(--COLOR-ROSE-DARK);
  font-size: 1.5rem;
  margin-right: 1.6rem;
}

.prep-time__item + .prep-time__item {
  margin-top: 0.8rem;
}

.ingredients {
}

.ingredients__title {
  color: var(--COLOR-BROWN);
}

.ingredients__list {
}

.ingredients__item {
  color: var(--COLOR-STONE-MEDIUM);
  margin-left: 2rem;
  padding-inline-start: 1.6rem;
}

.ingredients__item + .ingredients__item {
  margin-top: 0.8rem;
}

.ingredients__item::marker {
  color: var(--COLOR-BROWN);
  font-family: "Outfit";
  font-size: 1.6rem;
  line-height: 150%;
  letter-spacing: 0px;
  font-weight: 700;
}

.instructions {
}

.instructions__title {
  color: var(--COLOR-BROWN);
}

.instructions__list {
}

.instructions__item {
  margin-left: 2rem;
  padding-inline-start: 1.6rem;
}

.instructions__item + .instructions__item {
  margin-top: 0.8rem;
}

.instructions__item::marker {
  color: var(--COLOR-BROWN);
  font-family: "Outfit";
  font-size: 1.6rem;
  line-height: 150%;
  letter-spacing: 0px;
  font-weight: 700;
}

.nutrition {
}

.nutrition__title {
  color: var(--COLOR-BROWN);
}

.nutrition__description {
  color: var(--COLOR-STONE-MEDIUM);
}

.nutrition__table {
  width: 100%;
  border-collapse: collapse;
}

.nutrition__table-row {
}

.nutrition__property {
  color: var(--COLOR-STONE-MEDIUM);
  padding-left: 3.2rem;
}

.nutrition__value {
  color: var(--COLOR-BROWN);
}

/* Horizontal lines between rows of data */
.nutrition__property,
.nutrition__value {
  padding-bottom: 1.2rem;
  width: 50%;
  border-bottom: 1px solid var(--COLOR-STONE-LIGHT);
}

/* No horizontal line after last row of data */
.nutrition__table-row:last-child .nutrition__property,
.nutrition__table-row:last-child .nutrition__value {
  border-bottom: none;
}

@media (min-width: 500px) {
  .recipe-page {
    border-radius: 20px;
    width: 80%;
    margin-top: 12.8rem;
    margin-bottom: 12.8rem;
  }

  .image {
    border-radius: 50px;
    padding: 4rem 4rem 4rem 4rem;
  }

  .container {
    padding: 0 4rem 4rem 4rem;
  }
}