@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/***************
      LRDS
 ***************/

/* Basic style */
html {background-color: #292826; background-image: url("../images/background.jpg"); background-position: 50% 0; color: #333; line-height: 1.4; word-wrap: break-word; height: 100%;}
body {font-family: 'Alegreya',Arial,sans-serif; background-color: transparent; line-height: 1.4;}
h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {text-decoration: none; color: #111; font-weight: bold;}
*,*:before,*:after{margin:0;padding:0;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
img,video {max-width: 100%; height: auto; border: 0;}
.content {
    background: #f9f9f9;
    padding: 1em 2.5em;
}

.inner {
    margin: 0 auto 2em;
}

a {
    font-weight: bold;
    transition: all 0.2s ease-in-out;
    color: #cd743e;
}

a:hover {
    color: #333;
}

/* Basic Form */
.form-label, .col-form-label {
    font-weight: bold;
}
select, textarea, input, button, .btn  {
    font-family: "Segoe UI", Roboto, "Helvetica Neue", serif;
}

button, .btn {
    font-weight: 500;
}
/*select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"],
input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"],
input[type="tel"], input[type="color"], .uneditable-inputt, .form-control {padding: 0.5em 0.5em; background: #f8f8f8; box-shadow: inset 0 0 2px rgba(0,0,0,0.1); border-radius: 2px; margin: 0;}
label {display: block; border: 0; padding: 0.75em 0; font-size: 14px; font-weight: normal;}
label span {margin: 0.5em 0; padding-right: 1em; font-weight: bold; display: block; float: left; font-size: initial;}*/

/* Global style */
.wine-icon {
    color: #742f37;
}

/* Login Form */
body.login {
    display: flex;
    align-items: center;
    padding-bottom: 40px;
    height: 100%;
}

body.login main {
    max-width: 330px;
    padding: 15px;
}

body.login h1 {
    color: #fff;
    font-size: 2.5em;
}

.form-signin label {
    font-family: "Segoe UI", Roboto, "Helvetica Neue", serif;
}

.form-signin input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Header & Navigation */
.navbar-brand img {
    width: 200px;
}

.navbar-brand:hover {
    opacity: 0.6;
}

.nav-link {
    color: #9d9d9d;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.75em;
    font-weight: bold;
    transition: all 0.2s ease-in-out;
}

.nav-link:hover {
    /*--bs-navbar-hover-color: rgba(255, 255, 255, 1);*/
    color: rgba(255, 255, 255, 1);
}

.nav-link.active {
    --bs-navbar-active-color: #CD8D5F;
}

/* Footer */
footer {
    color: #999;
    padding: 2em 0;
    font-size: 0.875em;
    font-weight: normal;
    font-style: italic;
    text-align: right;
}

footer #scrollToTop {
    display: none;
}

footer #scrollToTop a {
    font-size: 3.5em;
    text-indent: -9999px;
    opacity: 0.3;
    position: fixed;
    bottom: 50px;
    right: 50px;
}

footer #scrollToTop a:hover {
    color: #999;
}

/* Content Title */
.title {
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    overflow: auto;
    background-position: center;
    background-size: cover;
}

.title img.title-img {
    width: 100%;
}

.title .title-hover {
    position: absolute;
    width: 100%;
    bottom: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.25) 70%, rgba(0, 0, 0, 0) 100%);
}

.title h1 {
    color: #fff;
    font-size: 1.5em;
    margin: 0.25em auto 0.7em auto;
    position: relative;
}

.title h1::after {
    content: "";
    background: rgba(205, 116, 62, 0.8);
    width: 50px;
    margin-left: -25px;
    height: 0.125em;
    position: absolute;
    left: 50%;
    top: 1.4em;
}

.title .meta-title {
    color: #dddddd;
    margin-bottom: 1.5em;
}

.title .meta-title li {
    display: inline-block;
}

/* Content Header/Footer */
.content-header {
    font-weight: bold;
    font-size: 1.3em;
    overflow: auto;
}

.content-footer {
    margin: 2em 0;
    width: 100%;
    border-top: 1px solid #dfdfdf;
}

/* Recipe List */
.recipe-list .card-img-top {
    width: 100%;
    height: 170px;
    object-fit: cover;
}

.recipe-list .card-title {
    font-size: 1.125rem;
    font-weight: bold;
    line-height: 1.2;
}

.recipe-list .card-title a {
    text-decoration: none;
}

.recipe-list .card-subtitle {
    font-size: 0.875em;
    font-weight: 400;
    font-style: italic;
}

.recipe-list .card-text {
    font-size: 1em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.recipe-list .card-footer div {
    display: inline-block;
    font-size:0.9rem
}

    /*.recipe-list {display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin: 1.5em -1em 0 -1em;}
    .recipe-item-wrap {width: 20%; padding: 0 1em; margin-bottom: 2em;display: -webkit-flex; display: -ms-flexbox; display: flex;}
    .recipe-item {width: 100%;text-align:center;border-radius:4px;background:#fcfcfc;box-shadow:0 1px 0 #f2f2f2;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:column nowrap;-moz-flex-flow:column nowrap;-ms-flex-flow:column nowrap;flex-flow:column nowrap;padding-bottom:0.5em}
    .recipe-item:hover {background:#F4F4F4;}
    .recipe-item-img {position: relative; margin-bottom: 1em;}
    .recipe-item-img img {border-radius: 4px 4px 0 0;}
    .recipe-item-title {margin: 0 0 1em 0; font-size: 1em; padding: 0 0.25em; flex: 1 0 auto;}
    .recipe-item-title a {color: #cd8d5f;}
    .recipe-item-meta {position: relative; margin: 0; font-size: 0.8125em; padding: 0 0.25em; width: 100%; white-space: nowrap;}
    .recipe-item-meta div {display: inline-block; margin-right: 1em; font-weight: normal; color: #333; white-space: nowrap;}
    .recipe-item-meta div:last-child {margin-right: 0;}
    .recipe-item-meta .glyphicon {margin-right: 5px;}*/

/* Recipe Show */
.recipe-show .title {
    height: 150px;
    position: relative;
    overflow: hidden;
}

.recipe-show .meta {
    background-color: #f2f2f2;
    font-size: 1em;
    position: relative;
    color: #999;
}

.recipe-show .meta ul.meta-list li {
    padding: 1.25em 2em; /* TODO responsive, bootstrap ? */
    display: inline-block;
    font-style: italic;
}

.recipe-show .meta .meta-content {
    display: block;
    line-height: 1.25;
    font-style: normal;
    font-weight: bold;
    color: #cd743e;
}

.recipe-show .meta::after {
    content: "";
    position: absolute;
    height: 5px;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.15) 25%, rgba(0, 0, 0, 0.05) 80%);
}

.recipe-show .content h2,
.recipe-edit .content h2
{
    font-weight: 400;
}

.recipe-show .description,
.recipe-show .ingredients,
.recipe-show .instructions {
    padding-top: 2em;
}

.recipe-show .description .description-content {
    padding-left: 2.5rem;
    text-align: justify;
}

.recipe-show .ingredients ul.ingredients-list li {
    list-style: none;
    display: block;
    cursor: pointer;
    padding: 0.25em 0.5em;
    color: #666;
}

.recipe-show .ingredients ul.ingredients-list li:hover {
    background: #e7e7e785;
}

.recipe-show .ingredients ul.ingredients-list li:nth-child(2n) {
    background: #f2f2f2;
}

.recipe-show .ingredients ul.ingredients-list li:nth-child(2n):hover {
    background: #dddddd85;
}

.recipe-show .ingredients ul.ingredients-list li.checked span {
    text-decoration: line-through;
    color: #74bf62;
}

.recipe-show .ingredients .ingredient-qty {
    float: right;
    font-weight: bold;
}

.recipe-show .instructions {
    padding-top: 2em;
}
.recipe-show .instructions li {
    border: 0;
    background-color: inherit;
}

.recipe-show .instructions .instruction-number {
    line-height: 1em;
    float: left;
    background-color: #cd743e75;
    border-radius: 50%;
    padding: 2px 15px 7px;
    margin: 5px 15px 0 15px;
    font-size: 2em;
    font-weight: bold;
    text-align: center;
}

.recipe-show .instructions .instruction-content {
    text-align: justify;
    padding-left: 5.5em;
}

.recipe-show .instructions.one-instruction .instruction-number {
    display: none;
}

.recipe-show .instructions.one-instruction .instruction-content {
    padding-left: 1.5rem;
}

.recipe-show .source {
    text-align: right;
    padding-top: 1em;
    font-size: 0.9em;
}

.recipe-show .bottom-section {
    background-color: #f2f2f2;
}

/* Recipe Form */
.recipe-edit #recipe_description {
    min-height: 120px;
}

.recipe-edit #recipe_instructions textarea {
    min-height: 120px;
}

.recipe-edit #recipe_instructions fieldset:first-of-type button {
    display: none;
}

/*form#recipe {width: 60%;margin: 0 auto;padding: 3em 0 2em;}
form#recipe input, form#recipe textarea {width: 60%;}
form#recipe textarea {min-height: 125px; max-width: 60%; min-width: 60%;}
form#recipe input[name="people_nb"] {width: 10%;text-align: center;}
form#recipe input[name="people_nb"] + span {float: none; display: inline; margin: 0.5em;}
form#recipe label span {width: 30%;}
form#recipe fieldset.ingredients fieldset:first-of-type button, form#recipe fieldset.steps fieldset:first-of-type button {display:none;}
form#recipe fieldset.ingredients fieldset, form#recipe fieldset.steps fieldset {padding: 0.75em 0; border: 0; border-bottom: 1px solid #f2f2f2;}
form#recipe fieldset.ingredients fieldset:last-child, form#recipe fieldset.steps fieldset:last-child {border-bottom: none;}
form#recipe fieldset.ingredients fieldset input, form#recipe fieldset.steps fieldset textarea {margin-right: 1em;}
form#recipe fieldset.ingredients fieldset.ui-state-highlight, form#recipe fieldset.steps fieldset.ui-state-highlight { height: 1.5em; line-height: 1.2em; }*/

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .title h1 {
        font-size: 2.5em;
    }

    .recipe-show .title {
        height: 200px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .title h1 {
        font-size: 3.5em;
    }

    .inner {
        width: 60%; /* TODO responsive, bootstrap ? */
    }

    .recipe-show .title {
        height: 320px;
    }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}

/* Portrait tablet to landscape and desktop */
/*@media (min-width: 768px) and (max-width: 979px) {*/
/*	!* Mobile header & navigation *!*/
/*	.navbar nav {padding: 0;}*/
/*	!* Recipe List *!*/
/*	.recipe-list {margin: 0.5em -0.5em 0 -0.5em;}*/
/*	.recipe-item-wrap {width: 25%; padding: 0 0.5em; margin-bottom: 1em;}*/
/*}*/

/*!* Landscape phone to portrait tablet *!*/
/*@media (max-width: 767px) {*/
/*	!* Mobile header & navigation *!*/
/*	.navbar nav {padding: 0;}*/
/*	!* Recipe List *!*/
/*	.recipe-list {margin: 0 -0.25em;}*/
/*	.recipe-item-wrap {width: 33.33%;}*/
/*}*/

/*!* Landscape phones and down *!*/
/*@media (max-width: 480px) {*/
/*	!* Mobile header & navigation *!*/
/*	.navbar nav {padding: 0;}*/
/*	!* Recipe List *!*/
/*	.recipe-list {margin: 0 -0.25em	;}*/
/*	.recipe-item-wrap {width: 50%;}*/
/*}*/