/* ---------- CSS BY NAME: -------- */

/* Sebastian Meza-Torres
    GIT337 */

/* ---------- IMPORTED FONTS: ------ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:ital,wght@0,400;0,700;1,400&display=swap');


/* ----------- CSS RESET: ---------- */

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* ---------- ROOT VARIABLES: -------- */

:root {
    font-family: "Habibi", serif;
    font-size: 1.25em;
    --green:#06A816;
    --orange:#E75D02;
    --black:#000000;
    --white:#ffffff;
}

/* -------- GLOBAL STYLES (mobile-first/small 414px:) ----- */

html {
    background-color: rgba(122,191,191,.5);
}

body {
    background-color: #F2F2F2;
    width: 414px;
    margin: 0 auto;
}

main {
    display: flex;
    flex-direction: column;
}

/* ---- Header styles ----- */
/* The SVG icons also have a hover element to them.*/
/* Added a padding top to make room for the search bar. */
header {
    text-align: center;
    padding-top: 130px;
    
}

h1 {
    font-size: 40px;
    font-family: 'Bebas Neue';
    font-weight: 400;
}

header p {
    padding: 10px;
    text-align: left;
}

menu {
    display: flex;
    list-style-type: none;
    padding: 10px;
    justify-content: space-between;
}

header img {
    width: 100%;
}
/* This style is for the save, share, print, and jump to recipe SVG's. */
.svg-menu-links a {
    text-decoration: none;
    color: #EB5428;
    transition: background-color 1s;
}

.svg-menu-links li a:hover {
    background-color: #EB5428;
    color: #ffffff;
}
/* This style is for the logo for the project. */
#logo {
    background-color: #EB5428;
    min-width: 100%;
    display: flex;
    position: absolute;
    top: 2px;
    left: 128px;
    padding: 3px;
}
/* This style is for the sign-in logo for the header. */
#sign-in {
    display: flex;
    position: absolute;
    top: 2px;
    left: 263px;
    padding: 10px;
    min-width: 100%;
    
}

/* ---- Navigation styles ---- */
/* The original min width for the nav was 414px */
/* For the nav element, the position was "fixed". I changed it to absolute position to closely resemble the Loom video.*/
/* The navigation links are orange in the Loom video, currently they're blue.*/
nav {
    grid-area: nav;
    min-width: 10px;
    background-color: #ffffff;
    box-shadow: 0px 3px 3px #bbb;
    position: absolute;
    top: 0;
    z-index: 5;
}

nav ul {
    grid-area: hamburger;
    padding: 0;
    margin: 0;
    list-style: none;
    overflow: hidden;
    max-height: 0;
}

nav li img {
    display: none;
}

nav li a {
    display: block;
    padding: 20px;
    text-decoration: none;
    color: #EB5428;
}
/*Added the nav li a:hover element, if anything goes wrong delete it. */
nav li a:hover {
    background-color: #EB5428;
    color: #ffffff;
    transition: background-color .5s;
}

nav label {
    cursor: pointer;
    display: inline-block;
    user-select: none;
    position: relative;
    bottom: 5px;
    left: 30px;
}

nav span {
    display: block;
    position: relative;
}

nav label svg {
    display: block;
}

label span:before, label span after {
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
}

nav input {
    display: none;
}

nav input:checked ~ ul {
    max-height: 550px;
}

nav h2 {
    visibility: hidden;
    height: 1px;
    width: 1px;
}

/* ----- The main section ----- */

h2 {
    font-size: 30px;
    font-family: 'Bebas Neue';
    font-weight: 400;
}

h3 {
    font-size: 25px;
    font-family: 'Bebas Neue';
    font-weight: 400;
}
/* Details styles */


.details h2 {
    text-align: center;
    padding: 10px;
}

.details dt dd {
    font-size: 16px;
}

.details dt {
    font-family: 'Montserrat';
    font-weight: bold;
}

.details dd {
    font-family: 'Montserrat';
    font-weight: normal;
}

.details dl{
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 20px;
    
}

/* Ingredients styles */

.ingredients h2 {
    text-align: center;
    padding: 7px;
}

.ingredients li {
    list-style-type: square;
    padding: 6px;
    margin-left: 20px;
}

/* Directions styles */

.directions h2 {
    text-align: center;
}

.directions ol li {
    padding: 6px;
}

.directions li {
     list-style: decimal-leading-zero;
     margin-left: 40px;
}
/* For the ordered list, I couldn't seem to find the standard number list. I resorted to the decimal leading zero to take its place for now. */

main p {
    padding: 10px;
    
}

/* The aside section styles */
/* Note: the aside section has an orange hover element to it. I tried using the orange palate from the tips and hints but it didn't really match the color from the Loom video, the closest color to it was the hex code #e8ad0c;*/
/* In the Loom video, I think the transition is set to .5s rather than 1s, I will just stick with .5s for now.*/
/* Figcaption is the caption for the image.*/
aside {
    background-color: #7ABFBF;
}

aside h2 {
    text-align: center;
    padding: 10px;
}

.dishes-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;

}

.dish {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 15px;
    align-items: center;
}

.dish img {
    width: 80%;
    object-fit: cover;
    
}

.side-dishes {
    padding: 5px;
    margin: 0 auto;

}

.dish:hover {
    background-color: #e8ad0c;
    color: #000000;
    transition: background-color .5s;
}

/* This class targets the ratings for the aside content. */
.icon-tabler-star {
    fill: orangered;
}
/* Styles for the search bar */
.search-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    margin-left: 50px;
    position: absolute;
    top: 70px;

}

.search-bar input {
    width: 250px;
    padding: 9px;
    border: 2px solid #EB5428;
    border-radius: 3px;
}

.search-bar button {
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;

}



/* ---- Styles for the footer ---- */
/* The social media links have a hover element to them as well. */

footer {
    font-family: 'Bebas Neue';
    font-size: 20px;
}

footer ul {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding-bottom: 15px;
}

footer li:hover {
    background-color: #e8ad0c;
    color: #ffffff;
    transform: scale(1.1);
    transition: all 0.3s ease;
}

/* The only way I was able to center the footer image was by making the width be 100% of the content and adjust the height to auto.*/
footer img {
    width: 100%;
    height: auto;
}

footer p {
    text-align: center;
    font-weight: 700;
}


/* Before proceeding to the medium viewport media query of 768px, try to fix the hamburger menu logo, its blocking the header tag, fix the direction ordered list, fix the details dl list, fix the aside section, give the svg icons in the header area a hover element, and add the home logo and sign in logos at the top of the header. */

@media screen and (min-width: 768px) {
    body {
        width: 768px;
    }

    main {
        display: grid;
    
    }

    /* Changed padding from 8px to 10 for the h1 (medium viewport)*/
    /* Added a padding-top to the h1 to push it down a little bit to make room for the nav width. It was 30 previously.*/
    h1 {
        text-align: left;
        padding-top: 80px;
        padding-left: 15px;
    }

    /* The search bar needed a Z-index to be positioned on top of the navigation. It was hiding behind the navigation width and height. */
    .search-bar {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        display: flex;
        gap: 5px;
    }

/* For the nav, the nav link and image all have a hover. */
/* Gave the nav a min width of 72% and 11% for the height. */
/* The nav li a has a padding top of 70px for now as it was the only thing I can think of to bring the links down until I can figure out how to fix the search bar as its currently behind the nav min-width and height. */
/* I changed the min-width of the nav to 30% and the height to 15% as I noticed that in the browser, it looks more accurate than the live preview. */
/* The Nav min width was set to 30% previously and is now set to 100%. The reason why I had to change this is because when I would check the website using the developer tools for chrome, the min-width was far too short, so I changed it to 100% to fill in the rest of the space.*/
/* Change the min width and height for the nav in px rather than percentage. */

    
    nav {
        min-width: 767px;
        height: 187px;
        

    }
        
     
    nav ul {
        overflow: visible;
        max-height: 50px;
        max-width: 50px;
        display: flex;
        position: absolute;
        top: 0px;
        
    }
        
     
    nav li img {
        visibility: visible;
        display: inline-block;
        width: 50px;
        object-fit: cover;

    }
    /* the nav li a was a display of inline-block */
    /* Added a position of relative and a top of 80px to the nav li a. My reasoning for this is because when I originally added a padding-top, the links were pushed down which was what I wanted but the sign in svg icon was also pushed and I didn't want it to be affected. */
    /* Added a boldness to the nav li a selector as well as the font size for the nav li a, */
    nav li a {
        position: relative;
        top: 80px;
        font-size: 19px;
        font-weight: bold;
        
    }
    /* The nav below this point is completed, all of them only need a none */
    nav label {
        display: none;
        
        
    }

    nav label span {
        display: none;
    }

    nav label svg {
        display: none;
    }

    label span:before, label span:after {
        display: none;
    }

    nav input {
        display: none;
    }

    /* The sign in text is black not orange make sure to change it to the other viewports when finished with everything. */
    #sign-in {
        margin-left: 399px;
        color: #000000;
        font-weight: bold;
        
        
    }

    #logo {
        position: absolute;
        top: 0px;
        left: 0px;
        height: auto;
        z-index: 10;
    }

    menu {
        padding-top: 20px;
        
        
    }




    .details {
        padding: 10px;
        grid-column: span 2;
    }

    .details dl {
        display: grid;
        align-items: center;
        gap: 8px 16px;
        margin-left: 250px;

    }

    .ingredients {
        grid-column: 1;
        grid-row: 2;
    
    }

    .ingredients h2 {
        text-align: left;
    }

    .directions {
        display: grid;
        grid-column: 2;
        grid-row: 2;
        
        
    }


    .dish {
        display: grid;
    }

    .side-dishes {
        display: grid;
        
    }

    .dishes-grid {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
    }

    footer {
        display: flex;
        flex-direction: column;
        padding: 20px 0;
        
    }

    footer ul {
        margin-right: 20px;

    }


    footer img {
        width: 150px;
        margin-left: 50px;
       
    }

    footer p {
        text-align: left;
        margin-left: 80px
        
    }

    
}
/* Before proceeding to the last viewport (1280px), make sure to fix the directions list to be near the ingredients, fix the aside section, fix the footer section, add a blur filter around the top of the page like the one in the mockup, add the navigation min-width/height like in the mockup, and fix the navigation on top of the page including the SVG icons. */
/* The only thing left to do for the medium viewport is to add the blur that is around the svg icons. */
@media screen and (min-width: 1280px) {
    body {
        width: 1280px;
    }

    main {
        display: block;
    }
    /* Added grid area for the h1*/
    h1 {
        text-align: center;
        margin-top: 40px;
        display: inline-block;
        grid-area: h1;
        
        
    }

    header {
        display: grid;
        grid-template-areas:
        "h1 h1 h1"
        "menu tacos intro";
        
    }


    nav {
        min-width: 1280px;
        height: 129px;
    }

    nav ul {
        justify-content: space-between;
        

    }

    nav li a {
        position: relative;
        margin-right: 20px;
        top: 10px;
        left: 200px;
        
    }

    #logo {
        position: absolute;
        height: 123px;
        width: 90px;
    }


    #sign-in {
        margin-left: 880px;

    }

    .search-bar {
        top: 190px;
        justify-content: center;
        margin-right: 89px;

    }
    /* Added static position to the menu */
    /* Changed the width from fit content to 120px*/
    /* Height was 600px*/
    /* Added a grid area of menu for the menu*/
    menu {
        display: block;
        position: static;
        width: 120px;
        border: 2px solid #EB5428;
        height: 680px;
        grid-area: menu;

    }
     /*Added a grid area for the intro*/
     /*Add a grid area to this id*/
    #intro {
        display: block;
        grid-area: intro;
        
        
    }
    /*This is the new ID I created for the street tacos image to position the header for this viewport.*/
    /* Added a grid area that matches the header grid area.*/
    #tacos {
        width: 100%;
        grid-area: tacos;

    }

    .details {
        color: #7ABFBF;
        background-color: #000000;
        
    }
    /* This is the part of the definition list where I struggled as well. I managed to get them to be horizontal like in the mockup but I couldn't figure out how to move the dt tags on top of the dd tags.*/
    /* Never mind, all I had to do was add a display of block to the dl. */

    .definition-list dl {
        margin: auto;
        display: block;
    }

    #facts {
        grid-template-columns: .5fr 2fr;
        grid-template-rows: .2fr 1fr;
    }

    .definition-list {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        justify-items: center;
    }

    .definition-list dl {
        margin: auto;
    }

    .definition-list dt, .definition-list dd {
        display: block;
        text-align: center;
    }
     /* I couldn't figure out how to push the directions list up, the only time I was able to push it up was when I added a div to the directions and ingredients list. When things looked alright, I was checking my other viewports and noticed that I had disorganized the direction list for every other viewport so I had to remove the divs so it wouldn't impact the other viewport. */
    .directions {
        display: grid;
    
    }

    /* This is a list of the different classes I have for the side dishes: aside class of side-dishes, a div class of dishes-grid, a div class of dish, and a div class of description-dish. */

    .dishes-grid {
    display: flex;
    justify-content: space-between;

    }

    .dish {
      display: block;
    }


    .dish img {
        width: 200px;
    }

    footer {
        justify-content: space-between;
    }

    footer ul {
        width: 60%;
    }

    footer img {
        margin: 10px;
        width: 300px;
    }

    
    /* No floats were used for the images.*/
    /* Fix the sign in icon when you get the chance.*/
    /*The end of the code.*/
    
}