/* --- START: FINAL COOKIE POPUP CSS --- */
#cookiePopup {
    visibility: hidden;
    /* Hide it completely */
    opacity: 0;
    /* Make it fully transparent */
    background-color: #ffffff;
    position: fixed;
    /* CRITICAL: Sticks to the browser window */
    z-index: 999;
    /* CRITICAL: Ensures it's on top of all other content */
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    /* A better way to center the popup */
    width: 90%;
    max-width: 550px;
    /* Looks better on wide screens */
    box-shadow: 0 4px 15px rgba(5, 0, 31, 0.2);
    font-family: "Poppins", sans-serif;
    line-height: 1.6em;
    padding: 1.5em;
    border-radius: 8px;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}

/* This is the visible state that the JavaScript adds */
#cookiePopup.show {
    visibility: visible;
    /* Make it visible */
    opacity: 1;
    /* Make it fully opaque */
}

#cookiePopup p {
    text-align: center;
    margin: 0 0 1em 0;
}

#cookiePopup button {
    background-color: #6859fe;
    border: none;
    color: #ffffff;
    font-size: 1em;
    padding: 0.8em 1.2em;
    display: block;
    margin: 0 auto;
    border-radius: 5px;
    cursor: pointer;
}

#cookiePopup a {
    color: #6859fe;
}

/* --- END: FINAL COOKIE POPUP CSS --- */


.fade-in-element {
    opacity: 0;

    transform: translateY(45px) rotateX(-20deg);
    transform-style: preserve-3d;
    transition: opacity 1s ease, transform 1s ease;
}

.fade-in-element.is-visible {
    opacity: 1;
    transform: translateY(0) rotateX(0);
    /* Return to original position */
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100dvh;
    font-family: "Inter", sans-serif;
    line-height: 2;
    display: flex;
    flex-direction: column;
    background-color: rgb(249, 247, 243);
    font-weight: 300;
}

main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Lora", serif;
}

/* utility classes */
.inner-container {
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 2rem;
}

.flex-container {
    display: flex;
}

.fs-xxl {
    font-size: 2.986rem;
}

.fs-xl {
    font-size: 2.488rem;
}

.fs-lg {
    font-size: 2.074rem;
}

.fs-med {
    font-size: 1.728rem;
}

.fs-medsmall {
    font-size: 1.44rem;
}

.fs-small {
    font-size: 1.2rem;
}

.fs-xsm {
    font-size: .85rem;
}


/* font weight */
.fw-bold {
    font-weight: 600;
}

.fw-light {
    font-weight: 500;
}

.fw-xlight {
    font-weight: 400;
}

.fw-xbold {
    font-weight: bold;
}

/* page colours */
.light-green {
    background-color: #f0f5c4;
}

.light-purple {
    background-color: #efedfa;
}

.light-cyan {
    background-color: #e8f5fa;
}

.light-blue {
    background-color: #e5f7f3;
}

.light-red {
    background-color: #feefc9;
}

.light-pink {
    background-color: #ffeae3;
}

.gray {
    color: #5c5c5c;
}

.black {
    color: black;
}

.dark {
    color: #1b2629
}

/* HEADER */
header {
    margin-top: 1rem;
}

header svg {
    width: 2.5rem;
}

header .flex-container {
    justify-content: space-between;
}

/* HERO */

.hero {
    padding: 0 .9rem;
    margin: 0 auto;
}

.hero>p:first-of-type {
    margin-bottom: 2rem;
}

.recipe h2 {
    text-align: center;
    /* font-size: clamp(2.074rem, 1.9454rem + 0.6431vw, 2.488rem);
    font-size: clamp(1.728rem, 1.6205rem + 0.5375vw, 2.074rem);
    font-size: clamp(1.728rem, 1.4919rem + 1.1806vw, 2.488rem); */
    /* font-weight: 500; */
}

/* TOGGLE NAVIGATION */
header nav {
    position: fixed;
    left: 0;
    top: 0;
    transform: translateX(-100%);
    transition: .5s ease;
    background-color: rgb(249, 247, 243);
    /* background-color: blueviolet; */
    width: 70%;
    padding: 2rem 0rem;
    ;
    z-index: 1;
    height: 100vh;
    font-size: 1.5rem;
    line-height: 2.5;
    /* color: blue; */
    font-weight: 400;
    text-align: center;
}

nav a {
    display: block;
}

header button {
    display: flex;
}

.toggle-nav {
    transform: translateX(0);
}

nav ul li a:hover {
    text-decoration: underline;

}

nav ul li a:active {
    transform: translateY(1px);
}







/* restore default inner-container padding values at regular sized screens */
@media (min-width: 375px) {
    .hero {
        padding: 0 1.75rem;
    }
}

/* MAIN */
/* recipe search box */
.recipe-search-box {
    background-color: #ffffff;
    padding: 1.25rem;
    border-radius: .75rem;
    color: #94a3b8;
    align-items: center;
    margin-bottom: 2rem;
}

.recipe-search-box svg {
    width: 1.6rem;
    color: #94a3b8;
    margin-right: .5rem;
}

/* first section in main */
main section h2 {
    /* text-align: center; */
    margin: 2rem 0 2rem 0;
    font-size: clamp(2.49rem, calc(2.249rem + 1.190vw), 2.99rem);
    line-height: 1.3;
    /* padding-left: .5rem; */
}

/* link bubble buttons */

.link-bubble-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    max-width: fit-content;
    margin: 0 auto;
    margin-bottom: 2rem;
}

.link-bubble-flex {
    display: flex;
    gap: 1rem;
    margin: 0 auto;
}

.link-bubble {
    padding: .5rem 1.25rem;
    border-radius: 3rem;
    letter-spacing: 2.5008px;
    color: rgb(80, 77, 99);
    text-align: center;
}

/* recipe section */

.call-to-action {
    /* text-align: center; */
}

/* .recipe h3 {
    font-size: 2.074rem;
} */

.recipe>div>div {
    /* text-align: center; */
}

.call-to-action img {
    border-radius: 1.65rem;
    margin-bottom: 1rem;
}

.recipe p:first-of-type {
    margin-bottom: 2rem;
}

.recipe a {
    display: block;
    border: 1px solid black;
    border-radius: .5rem;
    width: 10rem;
    margin: 2rem 0 2rem 0;
    padding: 1rem 0;
    text-align: center;
}

/* recipe prep */
.recipe-prep>div svg {
    width: 1.75rem;
    color: rgb(213, 199, 199);
}

.recipe-prep>div>.flex-container {
    gap: 3rem;

    flex-wrap: wrap;
}

.recipe-prep .share {
    letter-spacing: .1875rem;
}

.recipe-prep>div span {
    letter-spacing: normal;
}

.recipe-prep-para {
    margin-bottom: 2rem;
}

.recipe-prep>div>div>.flex-container {
    gap: 1rem;
    align-items: flex-start;
}

.share-container {
    margin-top: 2rem;
}

.recipe-prep {
    margin-bottom: 2rem;
    margin: 0 auto;
}

.recipe-prep ul li img {
    width: 2rem;
}

.share {
    letter-spacing: normal;
}

/* prep */
.prep {
    align-items: center;
}

.prep {
    flex-wrap: wrap;
}

.recipe-prep img {
    border-radius: 1.65rem;
    margin-top: 2rem;
}

.recipe-prep-social img {
    margin: unset;
}

.recipe-prep-social ul {
    gap: 1rem;
}

.recipe-prep-social>img {
    margin: 2rem 0;
}

.recipe-prep-social .flex-container {
    display: flex;
}


/* ingredients section */

.ingredients {
    background-color: white;
    border-radius: 1.65rem;
    padding: 2rem;
    margin: 2rem 0 2rem 0;
}

.ingredients h3 {
    margin-bottom: 1rem;
}

.ingredients ul {
    flex-direction: column;
    gap: 1.5rem;
}

.ingredients ul li::before {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: .5px solid black;
    border-radius: 50%;
    margin-right: 1rem;
    vertical-align: middle;
}

.ingredients ul li::marker {
    font-size: 2rem;
}

/* directions section */

.directions ol {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    list-style-type: decimal;
    padding-left: 2rem;
    line-height: 1.75;
}

.directions h4 {
    margin-bottom: .75rem;
}

/* .directions {
    line-height: 1.75;
} */

/* FOOTER */

footer {
    background-color: #ffffff;
    text-align: center;
    margin-top: 2rem;
}

.footer-para {
    margin: 2rem 0;
}

.recipe-subscribe {
    flex-direction: column;
}

button {
    display: block;
}

footer h6 {
    margin: 2rem 0 2rem 0;
}

footer input {
    background-color: rgb(249, 247, 243);
    padding: 1.25rem 0;
    border-radius: .5rem;
    color: gray;
    text-align: left;
    padding-left: 1.5rem;
    margin-bottom: 2rem;
}

footer button {
    display: block;
    background-color: #9c702a;
    padding: 1.25rem 0;
    border-radius: .5rem;
    color: white;
    margin-bottom: 2rem;
}

.footer-nav p:first-of-type {
    /* border-top: .25px solid rgb(235, 227, 227); */
    padding: 2rem 0 2rem 0;
}

.footer-nav p:nth-of-type(2) {
    margin-bottom: 2rem;
    /* line-height: 2; */
}

.footer-nav {
    text-align: left;
}

.footer-nav .inner-container p {
    max-width: 85ch;
}

.footer-ul {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-ul img {
    width: 30px;
}

.footer-nav p:last-of-type {
    letter-spacing: 3px;
}

.footer-nav ul:last-of-type {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 2rem;
    font-family: "Lora", serif;
}

footer .line-design {
    border-top: 1px solid black;
    width: 1.25rem;
    /* height: 1rem; */
    background-color: black;
    margin: .35rem 0 1rem 0;
}

footer .line-design-maxwidth {
    border-top: .25px solid rgb(235, 227, 227);
}

/* chili info section */
.chili-info {
    margin-top: 2rem;
}

.chili-info img {
    border-radius: 1.65rem;
    margin: 2rem 0;
}

.chili-info>.inner-container h3 {
    /* margin-bottom: 2rem; */
}

.chili-info>.inner-container p {
    margin-bottom: 2rem;
}

/* other recipes */
.other-recipes {
    padding-bottom: 2rem;
    border-radius: 1.65rem;
    margin-top: 2rem;
}

.other-recipes h4 {
    font-size: 20px;
}

.other-recipes img {
    border-radius: 1.65rem;
    margin: 0 0 2rem 0;

}

.other-recipes a {
    display: block;
    background-color: rgb(255, 223, 165);
    margin-top: 1.5rem;
    width: fit-content;
}

.other-recipes:last-of-type a {
    background-color: rgb(247, 166, 166);
}

/* lower footer */

.lower-footer {
    flex-direction: column;
    gap: 1rem;
    padding-top: 1rem;
    border-top: .25px solid rgb(235, 227, 227);
    margin-bottom: 1rem;
}

.inner-container-ingredients {
    width: 100%;
}

/* Scroll to top postion element */
.scroll-to-top {
    position: fixed;
    bottom: 2rem;
    right: 0;
    /* visibility: hidden;
opacity: 0; */
    display: none;
}

.scroll-to-top svg {
    width: 2.25rem;
}

.visible {
    /* opacity: 1;
    visibility: visible; */
    display: block;
}

/* Media queries */
@media (width > 800px) {
    .recipe-flex {
        display: flex;
        gap: 4rem;
    }

    .recipe-para {
        flex: 1 1 60%;
    }

    .recipe-prep {
        flex: 1 1 40%;
        position: relative;
        padding-top: 4rem;
        /* padding-right: 2rem; */
        /* padding-left: 1rem; */
        /* padding-left: 4rem; */
        display: flex;
        flex-direction: column;
        /* align-items: flex-end; */
        /* border-left: .25px solid gray; */

    }

    .recipe-p {
        padding-right: 1.5rem;
    }

    .recipe-prep .flex-container {
        gap: 1rem;
    }

    /* .recipe-prep::before {
        content: '';
        position: absolute;
        left: 0;
        top: 25%;
        height: 50%;
        width: .25px;
        background-color: gray;
    } */

    /* .design-line {
        border-left: .25px solid gray;
    } */

    .recipe-para {}


}

/* ASIDE */
.friend-link {
    text-decoration: underline;
    /* background-color: rgb(204, 204, 237); */
    /* padding: 1rem; */
    /* margin-top: 2rem; */
    /* display: block; */
    width: fit-content;
    border-radius: 1rem;
    text-decoration: underline;
}

.friend-link:hover {
color: blue;
}

aside h2 {
    /* font-size: clamp(1.728rem, 1.6205rem + 0.5375vw, 2.074rem); */
}

aside p {
    margin-bottom: 1rem;
}