/* outfit-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400;
  src: url("/assets/fonts/outfit-v11-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* outfit-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Outfit";
  font-style: normal;
  font-weight: 600;
  src: url("/assets/fonts/outfit-v11-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* outfit-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Outfit";
  font-style: normal;
  font-weight: 700;
  src: url("/assets/fonts/outfit-v11-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* young-serif-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Young Serif";
  font-style: normal;
  font-weight: 400;
  src: url("/assets/fonts/young-serif-v2-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

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

  * {
    margin: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      interpolate-size: allow-keywords;
    }
  }

  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }

  p {
    text-wrap: pretty;
  }
}

:root {
  --c-white: hsl(0, 0%, 100%);
  --c-stone-100: hsl(30, 54%, 90%);
  --c-stone-150: hsl(30, 18%, 87%);
  --c-stone-600: hsl(30, 10%, 34%);
  --c-stone-900: hsl(24, 5%, 18%);
  --c-brown-800: hsl(14, 45%, 36%);
  --c-rose-800: hsl(332, 51%, 32%);
  --c-rose-50: hsl(330, 100%, 98%);
  --color-background: var(--c-stone-100);
  --color-background-recipe: var(--c-white);
  --color-headline-dark: var(--c-stone-900);
  --color-text: var(--c-stone-600);
  --color-background-prep: var(--c-rose-50);
  --color-headline-prep: var(--c-rose-800);
  --color-headline-secondary: var(--c-brown-800);
  --color-border: var(--c-stone-150);

  --ff-base: "Outfit", Arial, Helvetica, sans-serif;
  --ff-accent: "Young Serif", Georgia, "Times New Roman", Times, serif;
}

@layer base {
  body {
    font-family: var(--ff-base);
    font-size: 1rem;
    background-color: var(--color-background);
  }
  h1,
  h2 {
    font-family: var(--ff-accent);
  }
  ul,
  ol {
    padding-inline-start: 1.125rem;
    li {
      line-height: 1.6;
      padding-inline-start: 0.875rem;
      margin-block: 0.375rem;
      @media (min-width: 68.75rem) {
        padding-inline-start: 1.25rem;
      }
    }
  }
  p,
  ul li,
  ol li {
    color: var(--color-text);
  }
  ol li::marker {
    font-weight: bold;
    color: var(--c-brown-800);
  }
}

@layer components {
  img {
    /* height change base on width avoid stretch - good aspect ratio  */
    height: auto;
  }
  h1 {
    font-size: 2.25rem;
    margin-block-end: 1.25rem;
    color: var(--color-headline-dark);
    font-weight: 400;

    @media (min-width: 68.75rem) {
      font-size: 2.75rem;
      margin-block-end: 1.5rem;
    }
  }
  h2 {
    font-size: 1.6rem;
    color: var(--color-headline-secondary);
    margin-block-end: 1rem;
    font-weight: 400;
  }
  p {
    line-height: 1.3;
    color: var(--color-text);

    @media (min-width: 68.75rem) {
      font-size: 1.15rem;
    }
  }
  .recipe {
    margin-inline: auto;
    background-color: var(--color-background-recipe);

    @media (min-width: 68.75rem) {
      margin-block: 6rem;
      max-width: 52rem;
      border-radius: 0.75rem;
      padding: 2.25rem;
    }
  }
  .recipe__image {
    @media (min-width: 68.75rem) {
      border-radius: 0.75rem;
      margin-block-end: 2rem;
    }
  }
  .recipe__content {
    padding: 1.875rem 1.5rem;
    @media (min-width: 68.75rem) {
      padding: initial;
    }
    .prep {
      margin-block: 1.5rem;
      background-color: var(--color-background-prep);
      padding: 1.25rem;
      border-radius: 0.75rem;
      h2 {
        color: var(--color-headline-prep);
        font-size: 1.2rem;
        font-family: var(--ff-base);
        margin-block-end: 0.5rem;
        font-weight: 700;
      }
    }
  }

  .ingredients,
  .instructions {
    margin-block-end: 1.875rem;
    padding-block-end: 1.5rem;
    border-bottom: 0.125rem solid var(--color-border);
  }
  .nutrition {
    .nutrition-note {
      margin-block-end: 0.75rem;
    }
    table {
      border-collapse: collapse;
    }
    table,
    tbody {
      width: 100%;
      text-align: left;
      tr {
        display: flex;
        padding-block: 0.5rem;
        th[scope="row"] {
          color: var(--color-text);
          font-weight: 600;
          width: 50%;
        }
        td {
          width: 50%;
          color: var(--c-brown-800);
          font-weight: 700;
        }
      }
      tr:not(:last-child) {
        border-bottom: 0.0625rem solid var(--color-border);
      }
    }
  }
}