/* Global rules */

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

    /* Font custom properties */
    --font-young-serif-regular: "Young Serif", serif;
    --font-outfit: "Outfit", sans-serif;

    font-size: 62.5%;
    box-sizing: border-box;

    height: 100vh;
}

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

body {
    /* Fonts */
    font-family: var(--font-outfit);
    font-optical-sizing: auto;
    font-style: normal;
    
    /* Box model */
    margin: 0;
}

main {
    background-color: var(--hsl-stone-color-100);
    
    @media (min-width: 600px) {
        padding: 5rem 0;
    }
}


/* Container Rules  */
.recipe {
    background-color: var(--hsl-white-color);

    @media (min-width: 600px) {
        max-width: 70rem;
        margin: auto;
        border-radius: 1.5rem;
    }
}

.recipe__paragraph,
.recipe__list,
.recipe__table {
    font-size: 1.6rem;
    color: var(--hsl-stone-color-600);
}

/* Hero rules */
.recipe__hero {
    width: 100%;

    @media (min-width: 600px) {
        padding: 3rem 3rem 0 3rem;
    }
}

.recipe__img--main {
    max-width: 100%;

    @media (min-width: 600px) {
        border-radius: 1rem;
    }
}

/* Text content Rules */
.recipe__content {
    padding: 0 3rem;
}

.recipe__title--main,
.recipe__title--section {
    font-family: var(--font-young-serif-regular);
}

.recipe__title--main {
    font-size: 2.5rem;
}

.recipe__title--section {
    font-size: 2rem;
    color: var(--hsl-brown-color-800);
}

/* Section rules  */
.recipe__section {
    border-bottom: .1rem solid var(--hsl-stone-color-600);
    
    &:is(:first-of-type, :last-of-type) {
        border-bottom: initial;
    }
}

.recipe__section--preparation {
    background-color: var(--hsl-rose-color-50);

    /* box-model design */
    margin-top: 2.5rem;
    padding: .1rem 3rem;
    border-radius: 1rem;
}

.recipe__title--preparation {
    font-size: 1.8rem;
    color: var(--hsl-rose-color-800);
}

.recipe__list {
    padding-left: 2rem;
}

.recipe__item {
    padding: 0 0 1rem 1rem;

    &::marker {
        color: var(--hsl-brown-color-800);
        font-weight: 600;
    }
}

.item-subtitle {
    color: var(--hsl-stone-color-900);
    font-weight: 600;
}

.recipe__table {
    margin-top: 1.5rem;
    width: 100%;
    border-collapse: collapse;
}

.recipe__col {
    width: 50%;
}

.recipe__cell {
    border-bottom: .1rem solid var(--hsl-stone-color-600);
    padding: 1rem 0;

    .recipe__row:last-of-type & {
        border-bottom: initial;
    } 
}

.recipe__cell--nutrient {
    text-align: center;

    @media (min-width: 600px) {
        padding-left: 2rem;
        text-align: initial;
    }
}

.recipe__cell--quantity {
    color: var(--hsl-brown-color-800);
    font-weight: 600;
}

.attribution {
    font-size: 1.1rem;
    text-align: center;

    padding: 1.2rem 0;
}

.attribution a {
    color: var(--hsl-brown-color-800);
}