/* 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;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

/* Global Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: #E6EAE5;
    color: #260101;
    line-height: 1.6;
    background-image: url(img/picnic-red-pattern.jpg);
    background-repeat: repeat;
}

#wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #F4D7AF;
    border: 10px solid #D1B89D;
    border-radius: 8px;
}

#wrapper, #ingredients, #steps {
    border: 2px solid #795B43; /* Example for structure visualization */
}

/* Header Section */
header {
    text-align: center;
    padding-bottom: 20px;
}

header h1 {
    font-family: 'Playfair Display', serif;
    font-size: 4rem;
    color: #500B1F;
}

header p {
    font-family: 'Lora', serif;
    font-size: 1.2rem;
    color: #500B1F;
}

/* Main Image */
#fruit-tart-main {
    width: 100%;
    border-radius: 10px;
    margin: 20px 0;
}

/* Recipe Info Section */
#data ul {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

#data li {
    padding: 20px 60px;              /* Increase padding for more space inside the box */
    font-size: 1.4em;           /* Make the text bigger */
    font-color: #FFFFFF;
    text-align: center;
    margin: 2%;              /* Increase the margin between the boxes */
    min-height: 100px;          /* Ensures that the boxes have a larger height */
    background-color: #795B43;  /* Keep the existing background color */
    color: #E6EAE5;             /* Keep the existing text color */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 6px;         /* Keeps the rounded corners */
}


#data span {
    font-weight: bold;
    font-family: Lora, serif;
}


/* Grid Layout for Ingredients and Steps */
#grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3%;
    padding-bottom: 20px;
    border-radius: 8px;
    border-bottom: 7px solid rgba(78, 17, 25, 0.5);
}

#ingredients, #steps {
    padding: 20px;
    background-color: #EEEFE9;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#ingredients h2, #steps h2 {
    font-size: 1.8rem;
    color: #500B1F;
    margin-bottom: 10px;
}

#ingredients ul, #steps ul {
    list-style: none;
}

#ingredients li, #steps li {
    margin-bottom: 10px;
}

#steps span {
    text-decoration: none;
    font-family: Lora, serif;
    font-weight: bold;
    font-size: 1.8em;
    margin-right: 2%;
} 

.subheading {
    font-family: Lora, serif;
    font-size: 1.6rem;
    font-weight: bold;
    margin-top: 20px;
    color: #500B1F;
}

/* Close-up Image */

#image-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two equal columns */
    gap: 20px; /* Space between images */
    justify-items: center; /* Center images in their grid cells */
}

#fruit-tart-closeup,
#fruit-tart-piece {
    width: 100%; /* Make images responsive */
    max-width: 500px; /* Set a maximum width */
    border-radius: 10px; /* Keep rounded corners */
    opacity: 0.75;
}

#fruit-tart-piece {
    margin-top: 4%;
}


/* Footer Section */
footer {
    text-align: center;
    padding-top: 20px;
    font-size: 0.9rem;
    color: #500B1F;
}

footer a {
    color: #8C0B47;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}


    /* Media query for desktop devices */
@media only screen and (min-width: 600px) and (max-width: 2000px) {

h1 {
    margin-top: 20px;
    margin: 12px 9%;
    padding: 9px 0;
    margin-top: 0px;
    font-size: 2.4em;
    border-bottom: 1px solid rgba(78, 17, 25, 0.4);
}

header p {
    margin: 0px 10px;
}

#data ul { 
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns for larger screens */
    grid-gap: 2%;
    margin: 0 2%;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

#data li {
    margin: 2% 2%;
}

#ingredients ul {
    list-style-type: disc;
    font-size: 1.2em;
    border-left: 3px solid rgba(78, 17, 25, 0.5);
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-radius: 0px;
    margin-left: 30px;
    padding: 0px 5px 35% 30px;
}

#ingredients li {
    margin: 0 15%;
}

#steps ul {
    font-size: 1.2em;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1%;
    border-left: 1px solid transparent;
    padding-left: 40px;
}

#step li {
    padding-left: 10px;
    text-indent: 20px;
    margin-bottom: 15px;
}

#fruit-tart-closeup {
    margin-top: 4%;
}

}

/*desktop Styles*/
@media only screen and (min-width:951px) {

    /** {
                border: 1px solid red;
            }*/


    h1 {
        margin-top: 20px;
        margin: 0 auto;
        font-size: 3em;
        padding: 15px 5%;
        border-bottom: 1px solid rgba(78, 17, 25, 0.4);
    }

    #description {
        display: grid;
        grid-template-columns: 1fr 1fr;
        background-color: #EEEFE9;
    }

    #fruit-tart-main {
        display: block;
        width: 100%;
        padding-top: 15px;
        padding-bottom: 15px;
        border-radius: 10px;
        margin: auto;
    }

    header p {
        display: block;
        padding: 10px 20px;
    }

    #data ul {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-gap: 1.5%;
        margin: 0 2%;
        padding-bottom: 5px;
        margin-bottom: 5px;
    }

    #data li {
        margin: 9% 1%;
    }

    #ingredients ul {
        padding-top: 0px;
        padding-bottom: 20%;
        margin: 5px 10% 10% 20%;
        border-left: 3px solid rgba(78, 17, 25, 0.5);
        border-top: 1px solid transparent;
        border-bottom: 1px solid transparent;
        border-radius: 0px;
    }

    #ingredients li {
        margin: 2% 15%;
    }


    #steps ul {
        grid-template-columns: 1fr;
        grid-gap: 3%;
        margin: auto;
        border-left: 1px solid transparent;
    }

    #steps li {
        border-left: 1px solid rgba(78, 17, 25, 0.5);
        justify-content: center;

    }

    #steps span {
        text-decoration: none;
        font-family: Lora, serif;
        font-size: 1.8em;
    }

    #fruit-tart-closeup {
        margin-top: 4%;
    }

    #fruit-tart-piece {
        margin-top: 4%;
    }

    #grid {
        grid-template-columns: 1fr 2fr;
        display: grid;
        border-bottom: 7px solid rgba(78, 17, 25, 0.5);
    }

}

/*mobile */

@media only screen and (max-width: 600px) {

    /* Wrapper */
    #wrapper {
        padding: 10px;
        border: none;
    }

    /* Header */
    header h1 {
        font-size: 2rem;
        margin-bottom: 10px;
    }

    header p {
        font-size: 1rem;
        margin: 0 10px;
        padding: 5px;
    }

    /* Main Image */
    #fruit-tart-main {
        width: 100%;
        border-radius: 8px;
        margin: 10px 0;
    }

    /* Recipe Info Section */
    #data ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 items per row */
        grid-gap: 2%; /* Spacing between the items */
        margin: 0 2%;
        padding-bottom: 5px;
        margin-bottom: 5px;
        list-style-type: none;
    }

    #data li {
        margin: 5%; /* Adjust the margin as needed */
        padding: 15px; /* Add padding for spacing inside the boxes */
        font-size: 1.2em; /* Slightly reduce the font size for better readability */
        min-height: auto; /* Let the height adjust naturally */
    }

    /* Ingredients and Steps - Single Column Layout */
    #grid {
        grid-template-columns: 1fr;
        gap: 3%;
        padding-bottom: 10%;
        border-bottom: 7px solide rgba(78, 17, 25, 0.5);
    }

    #ingredients, #steps {
        padding: 15px;
        margin-bottom: 20px;
    }

    /* Ingredients and Steps Font and List Adjustments */
    #ingredients h2, #steps h2 {
        font-size: 1.5rem;
    }

    #ingredients ul, #steps ul {
        padding-left: 20px;
        font-size: 1rem;
    }

    #ingredients li, #steps li {
        margin-bottom: 2%;
    }

    /* Close-up Images */
    #image-container {
        grid-template-columns: 1fr; /* Stack images vertically */
    }

    #fruit-tart-closeup {
        max-width: 100%; /* Full width for mobile */
        margin-top: 5%;
    }

    #fruit-tart-piece {
        max-width: 100%; /* Full width for mobile */
        margin-top: 5%;
    }


    /* Footer */
    footer {
        padding-top: 15px;
        font-size: 0.8rem;
    }
}