/* ================================================== NAV TOP */

/* ---------- Logo + Search */

#nav-top, #logo-search, #main-pages-links, #breadcrumbs-links {
    display: flex;
    align-items: center;
}

#nav-top {
    width: 100%;
    height: var(--nav-height);
    padding: 0 var(--nav-padding);
    background-color: #fff;
    justify-content: space-between;
    position: fixed;
    top: 0; left: 0;
    z-index: 100;
    transition: box-shadow .4s;
}
body.search-open #nav-top {box-shadow: var(--shadow-bottom)}

#logo-search {position: relative}

#website-logo {
    position: relative;
    color: #000;
    z-index: 2;
}
body.search-open #website-logo {pointer-events: none}

#website-logo svg {
    height: calc(var(--nav-height) - 30px);
    padding: 5px;
    border: 1px solid #000;
    border-radius: 100%;
    vertical-align: middle;
}

#logo-visage-emilie {transition: opacity .4s}
body.search-open #logo-visage-emilie {opacity: 0}

#logo-plus-une-miette-dans-lassiette {
    transform-origin: center;
    transition: fill .4s;
}
body.search-open #logo-plus-une-miette-dans-lassiette {
    fill: #fff;
    animation: logo_text_rotation 24s infinite linear;
}
@keyframes logo_text_rotation {
    0% {transform: rotate(0deg)}
    100% {transform: rotate(360deg)}
}

#search-bar,
#search-placeholder {
    font-size: 18px;
}

#search-bar {
    width: 0;
    margin-left: 80px;
    padding: 5px 0;
    border: none;
    border-bottom: 1px solid #000;
    opacity: 0;
    outline: none;
}

.search-open #search-bar {
    width: 400px;
    max-width: 100%;
    margin-left: 25px;
    opacity: 1;
    transition: .4s;
    padding-right: 58px;
}

#search-icon {
    width: 40px;
    height: 40px;
    background-color: #000;
    color: #fff;
    border-radius: 100%;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: calc(var(--nav-height) - 15px); top: 50%;
    transform: translateY(-50%);
    transition: .3s;
}
#search-icon svg {width: 16px}

.search-open #search-icon {
    width: calc(var(--nav-height) - 36px);
    height: calc(var(--nav-height) - 36px);
    left: 3px;
}

#search-placeholder {
    opacity: .5;
    position: absolute;
    left: calc(var(--nav-height) - 30px + 80px); top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    cursor: text;
    transition: opacity .4s;
}

#search-placeholder:hover {opacity: .8}
.search-open #search-placeholder {display: none}

#searchbar-buttons {
    padding: 0;
    position: absolute;
    top: 50%; right: 0;
    transform: translateY(-50%);
    transition: .4s;
}


#searchbar-buttons button {
    padding: 0;
    background: none;
    border: none;
}
#searchbar-buttons button:not(:last-child) {margin-right: 8px}
body:not(.search-open) #searchbar-buttons {
    display: none;
    opacity: 0;
    transition: unset;
}
#searchbar-buttons svg {
    width: 18px;
    height: 12px;
}

/* ---------- Search results */

#search-results {
    width: 100vw;
    background-color: #fff;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    position: fixed;
    top: var(--nav-height); left: 0;
    z-index: 95;
}
#search-results:not(:empty) {
    padding: 0 var(--nav-padding) 20px calc(var(--nav-padding) + var(--nav-height) - 5px);
    box-shadow: var(--shadow-bottom);
}
.search-open #search-results {display: flex}

#search-results a:not(.results-more-recipe),
#search-results p {
    margin-bottom: 12px;
    color: #000;
    font-size: 18px;
}
#search-results a {font-weight: bold}
#search-results a:not(.results-more-recipe):hover {color: var(--main-color)}
#search-results p {margin-top: 12px}

.results-more-recipe {
    margin-top: 12px;
    padding: 10px 20px;
    background-color: #000;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 50px;
}
.results-more-recipe:hover {background-color: var(--main-color)}

#close-search,
#close-burger {
    width: 100%;
    height: 100vh;
    background-color: #fff;
    display: none;
    position: fixed;
    top: 0; left: 0;
    z-index: 90;
    opacity: 0;
    transition: .4s;
}
.burger-open #close-burger,
.search-open #close-search {
    display: unset;
    opacity: .8;
}

/* ---------- Nav links */

#nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#nav-links a {color: #000}
#nav-links :not(.current_page_item):not(.current) > a:hover {color: var(--main-color)}

#main-pages-links,
#breadcrumbs-links {
    list-style-type: none;
    margin: 0;
}

#main-pages-links li,
#breadcrumbs-links li {
    font: italic 20px/1 var(--title-font);
    text-align: center;
}

#main-pages-links li,
#breadcrumbs-links li {
    position: relative;
    transition: .4s;
}

/* Current link */

#nav-links li.current_page_item a,
#breadcrumbs-links li.current {
    font-weight: bold;
    text-decoration: underline;
}
#main-pages-links li.current_page_item::before,
#breadcrumbs-links li.parent-page::before {
    content: "";
    width: 8px;
    height: 8px;
    background-color: #000;
    border-radius: 100%;
    display: block;
    position: absolute;
    top: calc(50% - 4px); left: -15px;
}

#breadcrumbs-links li.parent-page::after {
    content: "";
    width: 9px;
    height: 9px;
    border: solid #000;
    border-width: 2px 2px 0 0;
    display: inline-block;
    transform: rotate(45deg);
}

/* ================================================== ASIDE INFOS */

#aside-infos {transition: .4s}
#aside-infos.fade-in {
    margin-top: 100px;
    opacity: 0;
}

#aside-infos > div {width: 100%}

#aside-infos .infos,
#aside-infos .annonce {
    margin-bottom: var(--spacing);
    padding-bottom: var(--spacing);
    border-bottom: 1px solid var(--grey);
}

#aside-infos > div:not(:last-child) {margin-bottom: var(--spacing)}

#instagram-feed {
    width: 100%;
    height: 200px;
    margin-bottom: var(--spacing);
    background-color: var(--light-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.newsletter h2 {
    margin-bottom: 10px;
    font: 400 italic 20px/1 var(--title-font);
    text-align: center;
}

.newsletter-form-input {position: relative}
.newsletter-form-input::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 36"><path d="M46,36H4C1.79,36,0,34.2,0,32V4C0,1.79,1.79,0,4,0H46C48.2,0,50,1.79,50,4V32c0,2.21-1.79,4-4,4ZM4,2c-1.1,0-2,.9-2,2V32c0,1.1,.9,2,2,2H46c1.1,0,2-.9,2-2V4c0-1.1-.9-2-2-2H4Z" /><path d="M24.19,19.22L6.59,9.47c-.48-.27-.66-.88-.39-1.36,.27-.48,.88-.66,1.36-.39l16.67,9.23L42.24,7.71c.49-.25,1.1-.06,1.35,.43s.06,1.09-.43,1.35l-18.96,9.73Z" /></svg>');
    width: 20px;
    position: absolute;
    top: 18px; left: 20px;
}
.newsletter-form-input > input {padding-left: 54px !important}

.newsletter input[type="submit"]:hover {background-color: var(--main-color) !important}

.newsletter-privacy-policy a {
    color: #000;
    text-decoration: underline;
}
.newsletter-privacy-policy a:hover {color: var(--main-color)}

/* ---------- Instagram feed (Smash Balloon) */

#sb_instagram h3 {font-family: var(--text-font)}

/* ================================================== FOOTER */

footer {font-size: 12px}

footer p,
footer,
footer a {color: var(--medium-grey)}
footer a:hover {color: #000}

footer nav {margin: 14px 0}

footer ul.menu {
    margin: 0;
    padding-left: 0;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
}
footer ul.menu li:not(:last-child) {margin-right: 5px}
footer ul.menu li:not(:last-child)::after {
    content: "\b7";
    display: inline-block;
    margin-left: 5px;
}

#footer-social p {margin-bottom: 10px}
footer a.social-network svg {width: 20px}
footer a.social-network:not(:last-child) {margin-right: 8px}

/* ================================================== LOADER */

.pum-loader {
    width: 100%;
    display: flex;
    justify-content: center;
}

.pum-loader > div {
    width: 16px;
    height: 16px;
    margin: 20px 6px;
    background-color: #000;
    border-radius: 100%;
    transition: .4s;
    animation: loader 2s infinite ease;
}

.pum-loader > div:nth-child(2) {animation-delay: .1s}
.pum-loader > div:last-child {animation-delay: .2s}

@keyframes loader {
    0% {transform: translateY(0)}
    14% {transform: translateY(-12px)}
    28% {transform: translateY(6px)}
    42% {transform: translateY(-3px)}
    56% {transform: translateY(1px)}
    70% {transform: translateY(0)}
    100% {transform: translateY(0)}
}

/* Main loader */

body > .pum-loader {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

body > .pum-loader:not(.fade-in) {display: none}

/* ================================================== POST CARDS */

.card-display {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
}

.col hr {
    width: 100%;
    height: 1px;
    margin: 40px 0 50px 0;
    background: var(--grey);
    border: none;
}

.post-card {
    width: 48%;
    margin-bottom: 4%;
    background-color: #fff;
    color: #000;
    border-radius: 5px;
    position: relative;
    box-shadow: var(--shadow);
}
.post-card:hover {transform: scale(1.02)}

.post-card img {
    width: 100%;
    height: unset;
    border-radius: 5px 5px 0 0;
    object-fit: cover;
    object-position: center;
}

.card-infos {
    padding: var(--spacing) calc(var(--spacing) / 2);
    display: flex;
    justify-content: space-between;
}

.card-infos-text {width: calc(100% - 64px - calc(var(--spacing) / 2))}

.card-infos h3,
.card-infos h4 {
    margin: 0;
    font-size: 28px;
    color: var(--grey);
}

/* ---------- Card badge */

.card-badge {
    width: 157px;
    height: 157px;
    padding: 20px;
    background-color: var(--main-color);
    text-align: center;
    border: 7px solid #fff;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 30px; right: 30px;
    box-shadow: var(--shadow);
    transform: rotate(15deg);
    font: bold italic 18px/1.25 var(--title-font);
}

.card-badge::after {
    content: "";
    width: calc(100% - 14px - 2px);
    height: calc(100% - 14px - 2px);
    border: 1px solid #000;
    border-radius: 100%;
    position: absolute;
    top: 7px; left: 7px;
}

.card-badge i {
    font-style: normal;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.card-badge i:first-child {top: 18px}
.card-badge i:last-child {bottom: 18px}

/* ---------- Fade in aniamtion */

.post-card.fade-in {
    margin-top: 100px;
    opacity: 0;
}

/* ================================================== RANDOM RECIPE BUTTON */

a.random-recipe {
    width: 100%;
    max-width: 500px;
    margin: 100px auto;
    padding: 20px;
    color: var(--grey);
    font-family: var(--title-font);
    font-size: 20px;
    border-radius: 50px;
    border: 1px solid;
    display: flex;
    justify-content: center;
    align-items: center;
}

a.random-recipe svg {
    width: 24px;
    margin-right: 15px;
    fill: var(--grey);
}

/* ================================================== COMMENTS SECTION */

span.comment-count {padding: 0 5px}

.goto-respond {
    margin-bottom: 20px;
    padding: 10px 20px;
    background-color: #000;
    color: #fff;
    font-weight: bold;
    text-align: center;
    display: inline-block;
    box-shadow: var(--shadow);
}
.goto-respond:hover {background-color: var(--main-color)}

#comments-list ul {list-style-type: none}
#comments-list > ul {padding-left: 0}

#comments-list li.depth-1 {
    margin-bottom: var(--spacing);
    padding: var(--spacing);
    background-color: var(--light-grey);
    border-radius: 10px;
    box-shadow: var(--shadow);
}

#comments-list ul.children {
    margin-top: 20px;
    padding-top: 20px;
    border-top: dashed 1px rgba(0, 0, 0, .2);
}

#comments-list img.avatar {
    width: 40px;
    height: 40px;
    border-radius: 100%;
}

/* ------------------------------ COMMENT BODY */

.comment-body {position: relative}

.comment-author {
    margin-bottom: 14px;
    display: flex;
}
.comment .fn {
    margin: 0 3px 0 10px;
    font: normal bold 20px/1 var(--title-font);
}
.comment .fn a {
    color: #000;
    text-decoration: underline;
}
.comment .says {display: none}

.comment-meta {
    position: absolute;
    top: 22px; left: 50px;
}
.comment-meta a {
    color: #000;
    font-size: 14px;
    font-weight: 200;
}

.comment-body > p {margin-left: 14px}

.comment .reply {
    margin-top: 18px;
    text-transform: uppercase;
    font-weight: 200;
}
.comment .reply a {color: #000}

.comment-author .fn a:hover,
.comment .reply a:hover
{color: var(--main-color)}

.comment-awaiting-moderation {
    margin: 10px 0;
    display: inline-block;
    opacity: .5;
}

/* ------------------------------ RESPOND FORM */

#commentform {
    margin-top: 20px;
    padding: var(--spacing);
    background-color: var(--light-grey);
}

.comment-notes {font-style: italic}

#commentform > p:not(.comment-notes):not(.comment-form-cookies-consent):not(.logged-in-as) {
    display: flex;
    flex-direction: column;
}

#commentform label {margin: 20px 0 10px 0}
#commentform textarea,
#commentform label + input {
    padding: 5px;
    border: 1px solid var(--grey);
}

p.comment-form-cookies-consent {margin-top: 20px}

#commentform input[type="submit"] {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #000;
    color: #fff;
    border: none;
}
#commentform input[type="submit"]:hover {background-color: var(--main-color)}

/* ---------- If answering to another comment */

li.comment #respond {margin-top: 20px}
li.comment h3#reply-title {
    display: flex;
    flex-direction: column;
}
li.comment h3#reply-title small {margin-top: 10px}

li.comment #commentform {padding: 0}