/* CSS RESET */
html {
  box-sizing: border-box;
  font-size: 16px;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ol,
ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}


/* Root Declarations */
:root {
  /* Colors */
  --clr-white: hsl(0, 0%, 100%);
  --clr-stone-100: hsl(30, 54%, 90%);
  --clr-stone-150: hsl(30, 18%, 87%);
  --clr-stone-600: hsl(30, 10%, 34%);
  --clr-stone-900: hsl(24, 5%, 18%);

  --clr-brown-800: hsl(14, 45%, 36%);

  --clr-rose-50: hsl(330, 100%, 98%);
  --clr-rose-800: hsl(332, 51%, 32%);

  /* Font Size */
  --fs-100: 1rem;
  --fs-150: 1.5rem;
  --fs-175: 1.75rem;
  --fs-200: 2rem;
  --fs-250: 2.5rem;
  --fs-300: 3rem;

  /* Font Weight */
  --fw-reg: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* General Formatting */
  --border-radius: 24px;
  --spacing-lt: 1rem;
  --spacing-reg: 1.8rem;
}

/* Fonts */
@font-face {
  font-family: "Young Serif";
  src:
    url(assets/fonts/young-serif/YoungSerif-Regular.ttf) format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@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;
}

/* Styling */
body {
  background-color: var(--clr-stone-100);
  color: var(--clr-stone-600);

  font-family: "Outfit";
  font-size: var(--fs-100);
}

.container {
  padding: 7.5em 10em;
}

.wrapper {
  background-color: var(--clr-white);
  width: 46.5%;
  max-width: 1440px;
  margin-inline: auto;
  padding: 2.5em;
  border-radius: var(--border-radius);
}

.section-header {
  font-family: "Young Serif";
}

.section__title {
  color: var(--clr-brown-800);

  font-size: var(--fs-175);

  margin-bottom: 1.25rem;
}

.hero__image {
  border-radius: 0.8rem;
  margin-bottom: var(--spacing-reg);
}

.hero__title {
  color: var(--clr-stone-900);
  font-size: var(--fs-250);
  margin-bottom: var(--spacing-lt);
}

.hero__content {
  line-height: 150%;
  margin-bottom: 2rem;
}

.prep {
  background-color: var(--clr-rose-50);

  padding: 1.5rem;
  border-radius: 0.8rem;

  margin-bottom: 2rem;
}

.prep__title {
  color: var(--clr-rose-800);

  font-size: 1.25rem;
  font-weight: var(--fw-semibold);
  font-family: "Outfit";

  margin-bottom: 1rem;
}

.prep__list {
  padding-left: 0;
  margin-left: 0;
}

.prep__list--step {
  position: relative;

  line-height: 1.5rem;

  margin-bottom: 0.5em;
  margin-inline: 2.5em;
}

.prep__list--step::before {
  position: absolute;
  color: var(--clr-rose-800);
  font-weight: var(--fw-bold);

  content: "\2022";
  left: -2em;
}

/* .prep__list {
  list-style: disc;
}

.prep__list--step {
  margin-left: 1.5rem;
  margin-bottom: 0.8rem;
}

.prep__list--step::marker {
  color: var(--clr-rose-800);

  font-size: 0.75rem;
}

.prep--strong {
  margin-left: 1.25rem;
} */

.ingredient {
  border-bottom: 1px solid var(--clr-stone-150);

  margin-bottom: 2rem;
}

/* .ingredient__list {
  list-style: square inside none;

  margin-bottom: 1.5rem;
}

.ingredient__list--item {
  margin-left: 0.75rem;
  margin-bottom: .75rem;
}

.ingredient__list--item::marker {
  color: var(--clr-brown-800);

  font-size: 0.70rem;
} */

.ingredient__list {
  margin-left: 0;
  padding-left: 0;
}

.ingredient__list--item {
  position: relative;

  line-height: 1.5rem;

  margin-bottom: 0.5em;
  margin-inline: 2em;
}

.ingredient__list--item::before {
  position: absolute;
  color: var(--clr-brown-800);
  font-weight: var(--fw-bold);

  content: "\25AA";
  left: -1.6em;
}

.instruct {
  border-bottom: 1px solid var(--clr-stone-150);

  margin-bottom: 1.5rem;
}

/*

Leaving this old code in here for reference
I am disappointed to find out that you truly cannot add space
between the marker and the list item uniformly... at least currently

*/

/* .instruct__list {
  list-style: decimal;
  list-style-position: inside;

  margin-bottom: 1rem;
}

.instruct__list--item::marker {
  color: var(--clr-brown-800);
  font: normal 700 1rem/1.5 "Outfit";
} */

.instruct__list {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}

.instruct__list--item {
  position: relative;

  line-height: 1.5rem;

  margin-bottom: 0.5em;
  margin-inline: 2em;
}

.instruct__list--item::before {
  position: absolute;
  color: var(--clr-brown-800);
  font-weight: var(--fw-bold);

  content: counter(item) ". ";
  counter-increment: item;
  left: -1.6em;
}

.marker-spacing {
  position: relative;
  left: 1rem;
}

.list-end-spacing {
  margin-bottom: 2rem;
}

.nutrition {
  margin-bottom: 2rem;
}

.nutrition__content {
  margin-bottom: 1.5rem;
}

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

.nutrition__table--row {
  border-bottom: 1px solid var(--clr-stone-150);
}

.last-row {
  border-bottom: none;

}

.nutrition__table--label,
.nutrition__label--value {
  padding: 0.75rem 0;
  width: 50%;
}

.nutrition__table--label {
  padding-left: 2rem;
}

.nutrition__table--value {
  color: var(--clr-brown-800);

  font-weight: var(--fw-bold);
}

/* .nutrition__table--label,
.nutrition__table--value {
  border-bottom: 1px solid var(--clr-stone-150);
} */

.attribution {
  font-size: 11px;
  text-align: center;
}

.attribution a {
  color: hsl(228, 45%, 44%);
}

@media screen and (max-width: 1161px) {
  .recipe-wrapper {
    padding-inline: 2rem;
  }

  .wrapper {
    margin: 0;
    padding: 0;
    border-radius: 0;

    margin-inline: auto;
  }

  .hero__image {
    border-radius: 0;
  }

  .hero__title {
    font-size: 2.3rem;
  }
}