/* Anwers to reflection questions:

1. I approached this project with desktop-first design and then moved to the mobile version. 
I created wireframes first, just to get an idea how I would be placing my elements in the page. 
https://www.figma.com/design/cLAb11IILJlnt2S93r00tU/-SHARED--INST-630?node-id=0-1

2. As per the original HTML, the description came after the meta information. But I felt that
it should come below the title itself to give an idea of what this recipe is about and then interested people
can view how much time it takes, no. of servings it has etc. As shown in Figma above, I kept a header part that has
2 sections side-by-side: image on the left and title, description, meta info together on the right. Then below that
I wanted to keep the ingredients and instructions side by side to check off the list. In mobile version,
nothing comes side-by-side. Everything is in a vertical scroll.

3. I faced a little bit challenge in handling image present in the header. But then fixed it with flex shrink, grow and basis.
I am using an online image from unsplash. I really hope it runs on other computers as well.

Easter egg: Please feel free to explore the tags in the footer (I just did it out of fun, to be honest). It might take you somewhere!
*/




/* IMPORTING FONTS for body and title */
/* Nunito for Body */ @import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
/* Delius for Title */ @import url('https://fonts.googleapis.com/css2?family=Delius&family=Great+Vibes&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

/* Josh's Custom CSS Reset https://www.joshwcomeau.com/css/custom-css-reset/ */ 
*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}

html {
  font-size: 20px; /* Setting Base Font for desktop version */
}

body {
    font-family: 'Nunito', sans-serif;
}

.recipe-container {
    display: flex;
    flex-direction: column;
    flex: 0 0 100%;
    font-family: 'Nunito', sans-serif;
    background-color: white;
}

/* HEADER SECTION */
.recipe-header {
    display: flex;
    gap: 1.5rem;
    background-color: #f2eae3;
    padding: 1rem;
}

.recipe-image {
    width: 15rem;
    height: 15rem;
    border-radius: 50%;
    flex: 0 0 auto;
}

.tile_meta_desc{ /* Div containing image, title, description and meta */
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.recipe-title {
    font-family: 'Delius', sans-serif;
    color: #812d00;
    font-size: 3.25rem;
    font-weight: 700;
    text-align: center;
}

.recipe-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.meta-item{
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.875rem;
    align-items: center;
}

.recipe-description {
    font-size: 1rem;
    color: #1E1E1E;
    text-align: center;
}

.ingredients-instructions{ /* Div containing ingredients and instructions both. For Desktop version, ingredients and instructions come side-by-side, hence, using this flexbox */
    display: flex;
    padding: 0 1rem;
    gap: 1rem;
    background-image: linear-gradient( /* Trying to add an image as a background and then adding an overlay over it (Trying something new, had to take help from MDN Docs, W3Schools, and Stack Overflow.) */
                          rgba(255, 255, 255, 0.8),  /* Top gradient color */
                          rgba(255, 255, 255, 0.8)   /* Bottom gradient color */
                      ),
    url("https://images.unsplash.com/photo-1597733153203-a54d0fbc47de?q=80&w=1690&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
    background-size: cover;
}

/* INGREDIENTS */
.ingredients-section {
    background-color: #f5f2f0;
    margin: 1rem 0;
    padding: 1rem;
    font-size: 1rem;
    border-radius: 0.5rem;
    width: 35%;
    flex: 0 0 auto;
}

input[type="checkbox"] { /* Changing the checkbox color in the Ingredients list to brown to maintain consistency. Understood the idea from https://www.w3schools.com/cssref/css4_pr_accent-color.php */
  accent-color: #812d00; 
}

.ingredients-list {
    list-style: none;
    padding: 0;

}

.ingredients-list li {
    padding: 0.188rem 0; /* I want some vertical spacing between each list item */
}

/* INSTRUCTIONS */
.instructions-section {
    background: linear-gradient( /* Adding an additional overlay to keep the text readable */
                          rgba(255, 255, 255, 0.8),  /* Top gradient color */
                          rgba(255, 255, 255, 0.8)   /* Bottom gradient color */
                      );
    border-radius: 0.5rem;
    margin: 1rem 0;
    padding: 1rem;
    font-size: 1rem;
}

.instruction-step {
    padding: 0.313rem 0;
}

.instructions-list{
    padding-left: 1.25rem;
}

/* FOOTER */
.recipe-footer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background-color: #f2eae3;
    padding: 1rem;
    text-align: center;
    font-size: 0.875rem;
}
.tags{
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}
.chip{
    text-decoration: none; /* Each chip is a link which redirects to a separate website having different recipes of that type. */
    padding: 0.125rem 0.5rem;
    background-color: #812d00; /* Checked the contrast ratio on WebAim Checker. It passes AA and AAA with 9.09:1 as contrast ratio. */
    color: white;
    border-radius: 1.25rem;
    flex: 0 0 auto;
}

/* RESPONSIVENESS */

/* For Tablets */
@media screen and (max-width: 1024px) {
        html {
            font-size: 18px;
        }
        .recipe-header {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .recipe-meta{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1.5rem;
        }
        .ingredients-instructions{
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            background-size: cover;
            background-position: bottom;
            padding: 1rem;
        }
        .ingredients-section {
            width: 100%;
            margin: 0;
        }
    }

    /* For mobile devices */
    @media screen and (max-width: 767px) {
        html {
            font-size: 16px;
        }
        .recipe-header {
            text-align: center;
            width: 100%;
        }
        .instructions-section{ 
            margin: 0;
        }
    }