/***************************************************************************
 *                          main.css
 *                          --------
 *   begin                : 28-Apr-2023
 *   modified             : 05-May-2023
 *   copyright            : (C) 2023 Daniel Julivert
 *   email                : ghoulwiz@gmail.com
 *   description          : Main CSS
 *
 ***************************************************************************/


/***************************************************************************
    General page classes
 ***************************************************************************/

* {
  box-sizing: border-box;
}

body {
    /*font-family: "Trebuchet MS", sans-serif;*/
    font-family: Georgia,Verdana,Arial,sans-serif;
    background-color: #2e2613;
    color: #ffefc4;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
}

a {
    color: #ffc77c;
    text-decoration: none;
}
a:hover {
    color: white;
}

.loadingIcon {
    position: fixed;
    right: 1em;
    bottom: 1em;
    display: none;
    animation-name: beat;
    animation-duration: .75s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    z-index: 1;
}
@keyframes beat {
    from { opacity: .25; transform: scale(2); }
    to   { opacity: .65; transform: scale(2.5); }
}

.maxHeight50vh {
    max-height: 50vh;
}
.ui-icon-background.ui-state-checked, .ui-state-active .ui-icon-background.ui-state-checked {
    background-color: #82793a;
    
}


/***************************************************************************
    General layout
 ***************************************************************************/

body > header {
    order: 1;
    text-align: center;
    height: 2em;
    line-height: 2em;
    border-bottom: 1px solid #ffefc4;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 2;
    background-color: #2e2613;
}
body > section {
    order: 2;
    margin-top: 2em;
    margin-right: 13em;
    padding: 1em 1em 1em 3em;
    min-height: calc(100vh - 8em);
}
body > footer {
    order: 3;
    text-align: center;
    height: 6em;
    background: black;
    padding-top: 2em;
    color: #5a4c29;
}
body > menu {
    display: none;
    position: fixed;
    width: 2em;
    height: 2em;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    z-index: 2;
}
body > menu:before {
    display: block;
    width: 2em;
    height: 2em;
    line-height: 2em;
    text-align: center;
    content: '\002630';
}
body > nav {
    position: fixed;
    padding: .5em 0;
    right: 0;
    top: 2em;
    height: calc(100vh - 8em);
    width: 13em;
}
body > nav > a {
    display: block;
    width: 100%;
    padding: .5em 1em;
}
body > nav > a:hover {
    background-color: #675423;
}


/***************************************************************************
    Recipes
 ***************************************************************************/

.recipeDetails2Column {
    position: relative;
    display: flex;
    flex-direction: row;
}
.recipeDetails2Column > div {
    width: 50%;
}
.recipeDetails2Column > .recipeData {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: .5em 1em;
}
.recipeDetails2Column > .recipeExpand {
    position: absolute;
    top: 0;
    right: .3em;
}

.mealTypeIcon { float: right; }
.recipeFilter .mealTypeIcon { float: left; }


/***************************************************************************
    Ingredient search
 ***************************************************************************/

.multiColumn {
    column-count: 5;
}
.multiColumn > label {
    display: block;
    margin-bottom: .3em;
    break-inside: avoid-column;
}

.recipeFilter {
    border: 0;
    border-top: 1px solid #ffefc4;
    font-size: .8em;
    padding: 1em 0;
    margin-top: .5em;
}
.recipeFilter label {
    display: block;
    margin-bottom: 1em;
}


/***************************************************************************
    Recipe search
 ***************************************************************************/

.controlGroupFullWidth {
    width: 100%;
}
.controlGroup input[type=text] {
    height: 3em;
    width: calc(100% - 20.7em);
}


/***************************************************************************
    Responsive
 ***************************************************************************/

@media only screen and (max-width: 1330px) {
    .multiColumn { column-count: 4; }
}

@media only screen and (max-width: 1200px) {
    .multiColumn { column-count: 3; }
}

@media only screen and (max-width: 950px) {
    .multiColumn { column-count: 2; }
    .recipeDetails { flex-direction: column; }
    .recipeDetails > div { width: 100%; }
}

@media only screen and (max-width: 750px) {
    .multiColumn { column-count: 1; }
}

@media only screen and (max-width: 600px) {
    body > nav {
        display: none;
        order: 2;
        position: fixed;
        padding: initial;
        left: 0;
        right: 0;
        top: 0;
        height: initial;
        width: initial;
        text-align: center;
        padding-top: 2em;
        z-index: 1;
        background-color: #2e2613;
        max-height: 100vh;
        overflow: auto;
    }
    body > menu {
        display: block;
    }
    body > section {
        order: 3;
        margin-right: 0;
        padding: 0 1em 1em 1em;
    }
    body > footer {
        order: 4;
    }
    body > section > h1 {
        text-align: center;
    }
    body > section > a.ui-button {
        display: block;
    }
    .recipeFilter {
        padding: 1em .5em 0 .5em;
        border-bottom: 1px solid #ffefc4;
        margin-bottom: .5em;
    }
    .ui-accordion .ui-accordion-content.recipeDetails {
        padding-top: 1.6em;
        padding-left: 1em;
        padding-right: 1em;
        font-size: .9em;
    }
    .recipeDetails > .recipeData {
        font-size: .8em;
    }
    .controlGroup input[type=text] {
        width: 100%;
    }
}