/* 
    Header

    TODO (header):
        - Add a (non-functioning) search bar (and maybe a navigation tab). This should influence the sticky header decision
*/
header {
    /* position: sticky; */
    background: #272727; /* TODO: Change color scheme */
    margin-right: auto;
    margin-left: auto;
    max-width: 60rem;
    min-width: 320px;
    top: 0;
    margin-top: 0;
    padding: 0;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    z-index: 10; /* Places header on top */
}

h1.headerText {
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5rem;
    margin-bottom: 0rem;
    margin-top: 0rem;
    padding-top: 0;
}

head {
    padding: 0;
    margin: 0;
}





/*
    Body

    TODO (body):
        - Refactor the center page + element divs? These could be moved into specific elements if needed
        - Figure out color scheme
        - Figure out art direction
        - Select a font family for the page (under "body")
*/
#center_page {
    margin-right: auto;
    margin-left: auto;
    max-width: 60rem;
    min-width: 320px;
}

#center_element {
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    max-width: 60rem;
    min-width: 320px;
}

h1 {
    color: #1a0209;
    font-size: 24pt;
    margin-bottom: 0px;
}

h2 {
    margin-top: 0;
    margin-bottom: 4px;
}

h3 {
    margin-top: 0;
    margin-bottom: 4px;
}

p {
    margin-top: 0;
    margin-bottom: 0;
}

ul {
    margin-top: 0;
}

body {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    background-color: #f3f3f3; /* 8CC084 was nice but looks weird */
    color: #3a4750;
    font-family: Roboto, Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

ol {
    padding-left: 0rem;
    padding-right: 0rem;
}





/*
    Recipe Block Formatting
*/

#recipeTitle {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 800;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

#recipeBlock {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 300;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: #fcfcfc;
}

/* Not sure if this is still being used. Can probably remove this */
#recipeHeader {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 300;
    padding-bottom: 1rem;
    background-color: #fcfcfc;
}

/* Investigate using media queries to change the number of columns for smaller screens.
   Not sure if this is needed, but the grid begins to look weird on smaller screens.
   Media query would be to reduce the grid-template-columns: repeat() from 4 to 2 */
#recipeHeaderGridContainer {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(5, minmax(0, 8rem));
    box-sizing: border-box;
}

#recipeHeaderGridItem {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 300;
    background-color: #fcfcfc;
    padding-bottom: 1rem;
}

#recipeHeaderGridItemTitle {
    font-size: 1.25rem;
    font-weight: 800;
}

#recipeHeaderGridItemValue {
    font-size: 1.25rem;
}

li.recipeIngredients{
    text-align: left;
    margin-right: auto;
    margin-left: auto;
    max-width: 90%;
    position: relative;
    padding-left: 2.25rem;
}

li.recipeIngredients:before {
    display: flex;
    font-size: 1.5rem;
    width: 6rem;
    height: 0rem;
    content: "•";
    margin-left: -1.25rem;
    font-weight: 800;
}

ol.recipeIngredients {
    list-style: none;
}

li.recipeInstructions{
    text-align: left;
    margin-right: auto;
    margin-left: auto;
    max-width: 90%;
    position: relative;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}

li.recipeInstructions:before {
    display: flex;
    font-size: 1.5rem;
    width: 10rem;
    height: 1rem;
    content: "Step " counter(instructionCount) ":";
    counter-increment: instructionCount;
    /* margin-left: -2rem; */ /* Temporarily removing this as it looks more professional */
    margin-bottom: 1rem;
    font-weight: 800;
}

ol.recipeInstructions {
    list-style: none;
    counter-reset: instructionCount;
}

p.recipeBlock {
    margin-right: auto;
    margin-left: auto;
    max-width: 90%;
}

img.recipeBlock {
    margin-right: auto;
    margin-left: auto;
    max-width: 95%;
    max-height: 40rem;
}

hr.recipeBlock{
    max-width: 95%;
    height: 0.125rem;
    background-color: #000000;
}

#recipeNutritionGridContainer {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(3, minmax(0, 16.75rem)); /* This probably will be reduced to 1?*/
    box-sizing: border-box;
    font-size: 1.25rem;
    max-width: 60rem;
    min-width: 320px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 1rem;
}

#recipeNutritionGridItem {
    display: grid;
    grid-template-columns: 10rem 6rem;
    justify-content: center;

    text-align: center;
    font-weight: 300;
    background-color: #fcfcfc;
    padding: 0.2rem;
    /* margin-left: 0.25rem;
    margin-right: 0.25rem; */

    border: 1px solid black;
}

#recipeNutritionGridItemKey {
    font-weight: 800;
    text-align: left;
    /* padding-left: 1rem; */
    /* padding-right: 0.5rem; */
}

#recipeNutritionGridItemValue {
    text-align: right;
}



/*

    Media queries

*/

@media screen and (max-width: 700px) {
    #recipeHeaderGridContainer {
        grid-template-columns: repeat(3, minmax(0, 8rem));
    }
    #recipeNutritionGridContainer {
        grid-template-columns: repeat(1, minmax(0, 16.5rem));
        font-size: 1.1rem;
    }
}



/*

    Unused (may be removed later on)

*/
a.noUnderLine {
    text-decoration: none;
}