@font-face {
  font-family: 'YoungSerif';
  src: url('./assets/fonts/young-serif/YoungSerif-Regular.ttf');
  font-weight: 400;
}
@font-face {
  font-family: 'Outfit';
  src: url('./assets/fonts/outfit/Outfit-VariableFont_wght.ttf');
  font-weight: 400, 600, 700;
}

:root {
  --color-White: hsl(0, 0%, 100%);
  --color-Stone-100: hsl(30, 54%, 90%);
  --color-Stone-150: hsl(30, 18%, 87%);
  --color-Stone-600: hsl(30, 10%, 34%);
  --color-Stone-900: hsl(24, 5%, 18%);
  --color-Brown-800: hsl(14, 45%, 36%);
  --color-Rose-800: hsl(332, 51%, 32%);
  --color-Rose-50: hsl(330, 100%, 98%);

  --1px: 0.0625rem;
  --4px: 0.25rem;
  --8px: 0.5rem;
  --11px: 0.6875rem;
  --12px: 0.75rem;
  --16px: 1rem;
  --20px: 1.25rem;
  --24px: 1.5rem;
  --28px: 1.75rem;
  --32px: 2rem;
  --36px: 2.25rem;
  --40px: 2.5rem;
  --48px: 3rem;
  --128px: 8rem;
  --max-width-table: calc(616rem / 16);
  --max-width-desktop: calc(736rem / 16);

  --spacing-50px: 4px;
  --spacing-100px: 8px;
  --spacing-150px: 12px;
  --spacing-200px: 16px;
  --spacing-300px: 24px;
  --spacing-400px: 32px;
  --spacing-500px: 40px;
  --spacing-600px: 48px;
  --spacing-1600px: 128px;

  --spacing-50rem: calc(4rem / 16);
  --spacing-100rem: calc(8rem / 16);
  --spacing-150rem: calc(12rem / 16);
  --spacing-200rem: calc(16rem / 16);
  --spacing-300rem: calc(24rem / 16);
  --spacing-400rem: calc(32rem / 16);
  --spacing-500rem: calc(40rem / 16);
  --spacing-600rem: calc(48rem / 16);
  --spacing-1600rem: calc(128rem / 16);

  --text-preset-1: 400 var(--40px) / 1 'YoungSerif', sans-serif;
  --text-preset-1-mobile: 400 var(--36px) / 1 'YoungSerif', sans-serif;
  --text-preset-2: 400 var(--28px) / 1 'YoungSerif', sans-serif;
  --text-preset-3: 600 var(--20px) / 1 'Outfit', sans-serif;
  --text-preset-4: 400 var(--16px) / 1.5 'Outfit', sans-serif;
  --text-preset-4-bold: 700 var(--16px) / 1.5 'Outfit', sans-serif;
}

* {
  margin: 0;
  padding: 0;
}

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

body {
  background-color: var(--color-Stone-100);
  color: var(--color-Stone-600);
  font: var(--text-preset-4);
  letter-spacing: 0;
}

.container {
  position: relative;
  width: fit-content;
  margin: 0 auto;
  @media (min-width: calc( 768rem/16)) {
    margin-block: var(--spacing-1600rem);
  }
}

main {
  width: fit-content;
}

article {
  width: 100%;
  padding: 0 32px var(--spacing-500rem);
  background-color: var(--color-White);

  @media (min-width: calc( 768rem/16)) {
    max-width: var(--max-width-table);
    padding-block: var(--spacing-500rem);
    padding-inline: var(--spacing-500px);
    border-radius: var(--spacing-300px);
  }
  @media (min-width: calc( 1440rem/16)) {
    max-width: var(--max-width-desktop);
  }

  /* header {
    margin-top: 40px;
    margin-bottom: 32px;
  } */

  img {
    /* negative spacing */
    --spacing--400px: calc(-1 * var(--spacing-400px));

    /* Using negative margins & increase the width to expand through the article's inline paddings  */
    margin-block: 0 var(--spacing-500rem);
    margin-inline: var(--spacing--400px);
    width: calc(100% + (2 * var(--spacing-400px)));

    /* margin: 0 -32px calc(40rem / 16) -32px;
    width: calc(100% + (2 * 32px)); */

    @media (min-width: calc( 768rem/16)) {
      margin-inline: 0;
      width: 100%;
      height: 300px;
      border-radius: var(--spacing-150px);
    }
  }

  h1 {
    margin-bottom: var(--spacing-300rem);
  }

  .recipe-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-300rem);
  }

  /* add top padding start from the 3rd div */
  .recipe-info:nth-of-type(n + 3) {
    padding-top: var(--spacing-400rem);
  }
  /* add border and bottom padding start from the 2nd div and doesn't include the last div */
  .recipe-info:nth-of-type(n + 2):not(:last-of-type) {
    /* figma border line is inside the padding */
    border-bottom: 1px solid var(--color-Stone-150);
    padding-bottom: var(--spacing-400rem);
  }

  .preparation {
    margin-block: var(--spacing-400rem);
    padding: var(--spacing-300rem) var(--spacing-300px);
    background-color: var(--color-Rose-50);
    border-radius: var(--spacing-150px);

    h2 {
      font: var(--text-preset-3);
      margin-bottom: var(--spacing-200rem);
    }
  }
}

img {
  height: auto;
  display: block;
  object-fit: cover;
}

h1 {
  font: var(--text-preset-1-mobile);
  color: var(--color-Stone-900);

  @media (min-width: calc(768rem/16)) {
    font: var(--text-preset-1);
  }
}

h2 {
  font: var(--text-preset-2);
  color: var(--color-Rose-800);
}

ul {
  list-style: none;

  li {
    display: flex;
    align-items: center;
  }

  /* Custom bullet */
  li::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;

    /* Circle bullet*/
    width: var(--4px);
    height: var(--4px);
    margin-left: var(--8px);
    margin-right: calc(var(--32px) - var(--4px));
    border-radius: var(--4px);
    background-color: var(--color-Rose-800);
  }
}

ol li {
  margin-left: calc(var(--16px) + var(--8px));
  padding-left: var(--16px);
}

li {
  + li {
    margin-top: var(--8px);
  }
}

::marker {
  color: var(--color-Rose-800);
  font-weight: 700;
}

table {
  border-collapse: collapse;

  th,
  td {
    width: 50%;
  }

  th {
    padding-inline: var(--spacing-400rem) var(--spacing-100rem);
    font: var(--text-preset-4);
    text-align: left;
  }

  td {
    padding-inline: var(--spacing-100rem) var(--spacing-400rem);
    color: var(--color-Rose-800);
    font: var(--text-preset-4-bold);
  }

  /* Padding & border don't work on `tr` but do work on `th` and `td` */
  tr:not(:first-of-type) :is(th, td) {
    padding-top: var(--spacing-150rem);
  }

  tr:not(:last-of-type) :is(th, td) {
    /* figma border line is inside the padding */
    border-bottom: 1px solid var(--color-Stone-150);
    padding-bottom: var(--spacing-150rem);
  }
}

.attribution {
  border-top: 1px dashed var(--color-Stone-600);
  padding-block: var(--spacing-150rem);
  background-color: #f4f4f4;
  font-size: var(--11px);
  text-align: center;

  a {
    /* color: hsl(228, 45%, 44%); */
    font-weight: 600;
    color: var(--color-Stone-900);
  }

  @media (min-width: calc( 768rem/16)) {
    /* On tablet & desktop, set position to absolute in order to remove the additional height on the bottom caused by this attribution element */
    position: absolute;
    left: 0;
    right: 0;

    border: none;

    /* Didn't know when using absolute positioning, padding still has an effect */
    padding-block: var(--spacing-300rem);
    background-color: transparent;
  }
}