/* 1. ---General Styles--- */
@font-face {
    font-family: "Kotton";
    src: url(../fonts/Kotton.woff) format('woff');
}

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

body {
    font-family: "Roboto", Helvetica, sans-serif;
}


/* Defaults */
nav ul {
    list-style: none;
}
nav ul li a {
    text-decoration: none;
}


/* Utility Classes */
.overlap {
    grid-row: 1/-1;
}

.order-1 {
    order: -1;
}

.top-layer {
    z-index: 40;
}

.decorated-bg {
    background-color: #DFDBE5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%239C92AC' fill-opacity='0.4'%3E%3Cpath fill-rule='evenodd' d='M11 0l5 20H6l5-20zm42 31a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM0 72h40v4H0v-4zm0-8h31v4H0v-4zm20-16h20v4H20v-4zM0 56h40v4H0v-4zm63-25a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM53 41a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-30 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-28-8a5 5 0 0 0-10 0h10zm10 0a5 5 0 0 1-10 0h10zM56 5a5 5 0 0 0-10 0h10zm10 0a5 5 0 0 1-10 0h10zm-3 46a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM21 0l5 20H16l5-20zm43 64v-4h-4v4h-4v4h4v4h4v-4h4v-4h-4zM36 13h4v4h-4v-4zm4 4h4v4h-4v-4zm-4 4h4v4h-4v-4zm8-8h4v4h-4v-4z'/%3E%3C/g%3E%3C/svg%3E");
}

.cool-frame {
    border: 3px solid #000;
    box-shadow: 0.5rem 0.5rem 0 black;
}

/* 2. ---Design System--- */

/* 2.1. Buttons */

.btn {
    display: grid;
    place-items: center;
    text-transform: uppercase;
    padding: 0 0.625rem;
    color: white;
    text-decoration: none;
    text-align: center;
    background-color: #692891;
    font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    transition: background-color ease-in-out 0.5s;
}

.btn:hover {
    background-color: #a340ff;
}

.btn-s {height: 1.5rem}
.btn-m {height: 1.8rem;}
.btn-m1 {height: 2.375rem;}
.btn-l {height: 3rem;}
.btn-xl {height: 3.75rem;}

#story-btn {
    background-color: #fff;
    color: #47006D;
    border: 2px solid black;
    cursor: pointer;
}

/* 2.2. Icons */
.ico {
    aspect-ratio: 1/1;
    width: 2rem;
}

.social-icon {
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    cursor: pointer;
}

.social-icon a {
    display: block;
    text-decoration: none;
    color: white;
}

.social-icon:hover a {
    color: #a340ff;
}


/* 2.3. Fonts */
:root {
    font-size: clamp(16px, 2vw, 17px);
}

.h-text {
    font-family: "Kotton", Helvetica, sans-serif;
    font-size: 1.75rem;
    color:#692891;
    letter-spacing: 0.1ch;
}

p {
    font-family: 'Roboto Condensed', Arial, sans-serif;
    font-size: 1.2rem;
    line-height: 3.2ch;
}

.p-xline {
    line-height: 3.5ch;
    margin: 3ch 0 4ch;
}

.h-text + p {
    margin-top: 1.25rem;
}


.cap-text {
    font-family: "Kotton", Helvetica, sans-serif;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: -2%;
}

a {
    color: #47006D;
    transition: all 0.5s ease-in-out;
}

a:not(.btn):hover {
    color: #a340ff;
}

.emph{
    font-family: "Kotton", Helvetica, sans-serif;
}

.price-tag {
    color: green;
    font-size: 2.5rem;
    font-family: "Kotton", Arial, sans-serif;
    margin: 1ch 0;
}

#red-text {
    color: #FF0026;
}

#green-text {
    color: green;
}

.text-left {text-align: left;}
.text-right {text-align: right;}
.text-center {text-align: center;}

.text-s {font-size: 0.75rem;}
.text-m {font-size: 1.25rem;}
.text-l {font-size: 1.5rem;}
.text-xl {font-size: 2.25rem;}
.text-2xl {font-size: 2.5rem;}
.text-3xl {font-size: 3rem;}
.text-4xl {font-size: 4rem;}
.text-5xl {font-size: 4.5rem;}


/* 2.4. Forms & Fields */
    .form-field-go {
        display: grid;
        grid-template-columns: auto min(20%, 5rem);
    }

    .form-field-go input:first-child {
        grid-row: 1/1;
        grid-column: 1/3;
    }
    .form-field-go input:last-child {
        grid-row: 1/1;
        grid-column: 2/3;
    }


    input[type="email"], .std-input {
        appearance: none;
        caret-color: #47006D;
        border: #692891 2px solid;
        height: 3rem;
        padding: 0 1rem;
        font-size: 1rem;
        transition: 0.5s ease-in-out all;
    
        &:hover {
            border: #D2A3FF 2px solid;
        }
    }


    input[type="submit"] {
        border: none;
        appearance: none;
        cursor: pointer;
        background-color: #692891;
        color: white;
        display: grid;
        place-items: center;
        font-size: 1.125rem;
        transition: 0.5s ease-in-out all;
    }
    input[type="submit"]:hover {
        background-color: #a340ff;
    }

    input[type="checkbox"] {
        appearance: none;
        width: 2rem;
        aspect-ratio: 1/1;
        border: #692891 2px solid;
        transition: all 0.5s ease-in-out;
        display: grid;
        place-items: center;

        &:hover {
            background-color: #E8C1FF;
        }

        &:checked::after {
            content: "";
            width: 2rem;
            height: 2rem;
            margin-left: 0.3rem;
            grid-area: 1/-1;
            background-image: url(../images/tick.svg);
            background-repeat: no-repeat;
            background-size: 100%;
        }
    }

    textarea.std-input {
        display: block;
        height: 10rem;
        resize: none;
        padding: 0.8rem;
    }

    .checker {
        display: flex;
        align-items: center;
    }

    .checker label {
        order: 1;
        margin-left: 1rem;
    }

/* 3. ---Main Nav--- */
#main-header {
    background-color: #fff;
    padding-bottom: 10px;
}

#main-header > div {
    align-items: center;
    padding-top: 10px;
}

#main-logo {
    display: flex;
    justify-content: center;
}
    #main-logo img {
        height: 60px;
    }


#burger {
    background-image: url(../images/burger_menu.svg);
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: contain;
    border: 0;
    cursor: pointer;
}
    #burger.clicked {
        transform: rotate(90deg);
    }

#main-nav {
    order: 4;
}

#burger-con {
    display: none;
    justify-content: space-evenly;
}
    #burger-con li {
        border-radius: 50px;
    }
    #burger-con li:hover {
        background-color: #c3c3c3;
    }
    #burger-con li a {
        display: block;
        padding: 10px 20px;
        color: #692891;
        font-weight: 600;
    }

#func-btn {
    display: flex;
    width: 70%;
    justify-self: end;
    align-items: center;
    justify-content: space-between;
}

#func-btn .ico{
    width: clamp(32px, 8vw, 48px);
}

#search-btn {
    display: none;
}


.collapsible {
    display: flex !important; 
    margin-top: 10px;
}



/* 4. ---Hero Section--- */
#hero {
    max-height: 85vw;
    overflow-y: hidden;
    background-color: gray;
    background-blend-mode: difference;
}

#hero-bg {
    position: relative;
}
    #hero-bg img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 100%;
    }

#hero-main {
    padding-top: 2.5rem;
    z-index: 3;
}

#hero-big-text p.emph {
    font-size: 15vw;
    color: white;
    text-align: center;
    filter:  drop-shadow(0.5rem 0rem 1.2rem black);
    margin: 1rem 3rem;
    user-select: none;
}

#hero-shop-now-btn {
    margin-bottom: 1.75rem;
}

#hero-fg {
    filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.462));
}

#hero-fg {
    align-self: end;
    margin-top: 25%;
}

#hero-fg img {
    display: block;
    margin: 0 auto;
    width: 80%;
}

/* 4. ---About Section--- */
.up-wave {
    position: relative;
    overflow: hidden;
    --bg-col: #FFF793;
    --wave-margin: 12vw;
    z-index: 4;
    margin-top: calc(-1*var(--wave-margin));
}
/* courtesy of James Auble */
.wavy-top {
    width: 100%;
    height: var(--wave-margin);
    overflow: hidden;
}

.wavy-top::after{
    content: "";
    display: block;
    width: 100vw;
    height: 100vw;
    clip-path: url(#wave);
    background-color: var(--bg-col);
}

.wave-content {
    width: 100%;
    padding-top: 2rem;;
    padding-bottom: 18rem;
    top: var(--wave-margin);
    background-color: var(--bg-col);
}

.up-wave .wave-content {
    background-image: url(../images/halftones_w.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-origin: bottom;
}


.wave-info {
    align-content: center;
}

.img-comp {
    width: 100%;
    display: grid;
    justify-items: center;
    align-self: bottom;
}

.img-comp img {
    grid-area: 1/-1;
}


#about-img {
    aspect-ratio: 567/571;
    margin-top: 3rem;
}

#about-splash {
    width: 85%;
    margin-top: 25%;
}

#about button {
    border: 2px solid #47006D;
}

#about button:hover {
    background-color: #E8C1FF;
    color: #692891;
}

/* 4. ---Products Section--- */
.down-wave {
    background-image: url(../images/halftones_c.svg);
    background-size: 100vw;
    background-repeat: no-repeat;
    background-position: 50% 100%;
}

#products {
    margin-top: 5rem;
}

#products-info {
    margin-bottom: 3rem;
}

.product-img {
    aspect-ratio: 1/1;
    overflow: hidden;
    background-image: url(../images/bottle-frame.png);
    margin: 5%;
    cursor: pointer;

    &:hover {
        animation: wiggle 0.2s ease-in-out .2s;
    }
}

.product-img img {
    transform: rotate(20deg) scale(130%) translateY(10%);
    filter: brightness(150%);
}

#products-con {
    grid-template-rows: auto auto;
    margin-bottom: 20rem;
}

#big-bottle {
    grid-row: 1/-1;
}


/* 5. ---Real Fruits Section--- */
#real-fruits .wave-content {
    background-position: 50% 35%;
}

#froots-art {
    width: 80%;
}


/* 6. ---Video Section--- */
#video {
    padding: 0rem 0 16rem;
}
#video-con {
    margin-top: 2.1rem;
}
#video video {
    width: 100%;
}

/* 8. ---Newsletter Section---  */
#newsletter .wave-content {
    background-size: 0%;
    padding-bottom: 10rem;
}

#newsletter-main {
    border: none;
    box-shadow: none;
}

#newsletter-info {
    margin-left: 1rem;
}

#newsletter h2 {
    margin: 3rem 0 2rem;
    font-size: 3rem;
    line-height: 2ch;
}

#newsletter p {
    font-size: 1.2rem;
    line-height: 2.5ch;
}

#newsletter form {
    margin: 3rem 0rem;
}

#newsletter-poster {
    text-align: center;
    margin-top: 3rem;
}

    #newsletter-poster img {
        transform: rotate(10deg);
        border: #a340ff solid 10px;
        filter: drop-shadow(0.3rem 0.3rem 0rem black);
        width: 67%;
    }

#newsletter.shop-newsletter {
    margin-bottom: 10rem;
}

/* 9. ---Footer--- */
#main-footer {
    padding: 2rem 0 2.5rem;
    min-height: 300px;
    background-color: #E8C1FF;
    z-index: 41;
}

#footer-nav {
    padding: 0;
    font-size: 1.2rem;
    line-height: 2rem;
}

#social-links {
    display: flex;
    justify-content: space-evenly;
}

.social-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: black;
}

#footer-logo {
    margin-top: 2.5rem;
    text-align: center;
}
#footer-logo img {
    max-width: 200px;
}
#contact-us {
    line-height: 2rem;
    margin-bottom: 20px;
}

#contact-us p {
    font-size: 1.2rem;
    line-height: 2.5rem;
}

#contact-us .company-name {
    font-size: 1.3rem;
}

/* A1. ---Shop Page Hero--- */
.page-hero {
    overflow-y: hidden;
}
#shop-hero {
    height: 45rem;
}

#shop-hero-bg {
    background-color: #FFF793;
}

.hero-info {
    margin-top: 3rem;
}

.hero-info h2.h-text {
    line-height: 4rem;
}

.hero-info p {
    font-size: 1.2rem;
}

.hero-bg {
    display: flex;
    align-items: end;
}
.hero-bg img {
    transform: scaleX(-1) translateY(5rem);
}

.hero-fg {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: end;
    z-index: 2;
}



/* A2. ---Shop Page List--- */
.shop-wave .wave-content {
    background-size: cover;
    background-position: 50% 15rem;
    background-blend-mode: hard-light;
    padding-bottom: 10rem;
}

.cloud-img {
    margin-top: 40%;
}

.bottle-img {
    margin-right: 20%;
    filter: drop-shadow(0.2rem 0.2rem 0.1rem black);
}


#berry-section {          
    --bg-col: #B0F0FF;
    --text-col: #2E1DA4;
}

#orange-section {
    --bg-col: #FFEB93;
    --text-col: #FF6A00;
}

#cherry-section {
    --bg-col: #FFCCD4;
    --text-col: #FF0026;
}

#berry-section .wave-content {
    background-image: url(../images/halftones_b.svg);
}
#orange-section .wave-content {
    background-image: url(../images/halftones_o.svg);
}
#cherry-section .wave-content {
    background-image: url(../images/halftones_w.svg);
    background-position: 50% 5rem;
}


.shop-img > div{
    grid-row: 1/-1;
    height: 30rem;
}

.shoplist-info {
    align-content: center;

    h2 {
        color: var(--text-col);
        font-size: min(7vw,80px);
        line-height: 1.8ch;
    }

    p {
        line-height: 2.2ch;
        margin-top: 2rem;
    }

    .btn {
        background-color: var(--text-col);
        transition: filter 0.5s ease-in-out;
    }

    .btn:hover {
        filter: brightness(215%);
    }
}

/* B1. ---Contact Us Hero--- */
#contact-hero-bg {
    background-color: #FFF793;
}

#contact-hero-info h2 {
    max-width: 80%;
    line-height: 2ch;
    margin-bottom: 2ch;
}

#contact-hero-fg {
    display: flex;
    align-items: flex-end;
    padding: 4% 7%;
}

/* B2. ---Contact Us Form--- */
#form-section {
    --bg-col: #fff;
}

#form-section .std-input {
    display: block;
    width: 100%;
}

#form-section .wave-content {
    background-image: none;
    padding-bottom: 6rem;
}

#form-info {
    margin-right: 2rem;
    margin-bottom: 4rem;
}

.form-field {
    margin-bottom: 1.2rem;
}
.form-field label+.std-input {
    margin-top: 0.3rem;
}

#form-section input[type="submit"] {
    width: 80%;
    font-size: 1.5rem;
}

.form-field+input[type="submit"] {
    margin-top: 2rem;
}


/* C. ---Lightbox--- */
#litebox {
    width: 100vw;
    min-height: 100vh;
    position: fixed;
    inset: 0;
    z-index: 50;
    background-image: url(../images/lightbox-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 5vw;
}

#litebox > div {
    align-content: space-around;
    grid-row: 1/-1;
}

#litebox article {
    padding-top: 2rem;
    align-content: start;
}

#litebox h2, #litebox p {
    color: #fff;
}

#litebox p {
    margin-block: 2rem;
}

#litebox article a {
    margin-inline: 15%;
}

#litebox-img {
    transform: scale(1.4) rotate(5deg);
    padding: 10rem 3rem;
}

#litebox-img img {
    width: 100%;
}

div:has(#close-btn) {
    order: -1;
    grid-row: 1/-1;
    align-self: start;
}
#close-btn {
    font-size: 2rem;
    background-color: transparent;
    border: none;
    color: #fff;
    transition: 0.5s ease-in-out all;
    cursor: pointer;

    &:hover {
        color: #ff0000;
    }
}


/* 10. ---Responsiveness--- */
@media screen and (min-width: 768px) {
    /* 1. ---General Styles--- */
    :root {
        font-size: clamp(16px, 1.2vw, 24px);
    }

   .m-text-left {text-align: left;}
   .m-text-right {text-align: right;}
   .m-text-center {text-align: center;}

   .m-overlap {
    grid-row: 1/1;
   }

   .p-xline {
        line-height: 3.8ch;
   }

    .btn {
        font-size: 1.125rem;
    }


    /* 3. ---Main Nav--- */

    #burger {
        display: none;
    }

    #main-logo {
        order: -1;
    }

    #main-nav {
        order: unset;
    }

    #burger-con {
        display: flex;
    }

    #search-btn {
        display: block;
    }


    /* 4. ---Hero Section--- */
    #hero {
        max-height: 65vw;
    }

    #hero-bg img {
        width: 100%;
        height: unset;
    }

    #hero-big-text p.emph {
        font-size: min(14vw,7rem);
    }

    #hero-big-text {
        margin-top: 12%;
    }

    #hero-fg {
        margin-top: 32%;
    }


    @keyframes wiggle {
        20% {transform: rotate(7deg);}
        40% {transform: rotate(0deg);}
        60% {transform: rotate(-7deg);}
        80% {transform: rotate(0deg);}
        100% {transform: rotate(0deg);}    
    }

    /* 5. ---About Section--- */


    /* 6. ---Products Section--- */
    .down-wave {
        background-size: unset;
    }


    /* 7. ---Real Fruits Section--- */

    #real-fruits-info {
        order: 1;
    }

    #real-fruits .wave-content {
        background-position: 50% 20%;
    }

    /* 8. ---Video--- */
    #video {
        padding: 4rem 0 20rem;
    }
    #video-con {
        margin-top: 2rem;
    }

    /* 9. ---Newsletter--- */

    #newsletter .wave-content {
        background-size: cover;
        padding-bottom: 18rem;
    }
    #newsletter-main {
        margin-top: 4rem;
        background-color: white;
        border: 3px solid black;
        box-shadow: 0.5rem 0.5rem 0 black;
    }

    #newsletter-info {
        margin-left: 2rem;
    }

    #newsletter h2 {
        font-size: 2.25rem;
    }


    #newsletter p {
        font-size: min(1.5rem,24px);
        line-height: 2.3ch;
    }

    #newsletter form {
        max-width: 80%;
    }

    #newsletter input[type="email"] {
        height: 2.5rem;
    }

    #newsletter-poster{
        justify-self: end;
        text-align: right;
        margin-top: 0;
    }

    #newsletter-poster img {
        transform: translateY(-15%) rotate(10deg);
        width: 87%;
    }

    #newsletter.shop-newsletter #newsletter-main {
        background-color: #FFEB93;
    }



    /* 9. ---Footer--- */
    #main-footer {
        padding: 1.25rem 0;
        margin-top: 8rem;        
    }

    #footer-logo {
        margin: 0;
    }

    div:has(#footer-logo) {
        order: -1;
    }

    #main-footer > .grid-con {
        grid-row: 1/1;
        align-content: center;
    }

    #contact-us {
        order: 1;
    }

    #contact-us p {
        font-size: 1rem;
        line-height: unset;
    }

    
    /* A1. ---Shop Page Hero--- */
    #shop-hero {
        height: 35rem;
    }

    .hero-bg img {
        transform: scaleX(-1) translateY(15rem);
    }

    .hero-bg h2 {
        font-size: 4rem;
    }

    /* A2. ---Shop Page List--- */   
    .shop-wave .wave-content {
        min-height: 54rem;
    }


    /* B1. ---Contact Page Hero--- */
    #contact-hero-fg {
        align-items: center;
    }

    /* B2. ---Contact Page Form--- */
    textarea.std-input {
        height: 7rem;
    }

    /* C. ---Lightbox--- */

    #litebox > div {
        align-content: center;
    }

    #litebox article {
        padding-top: 0;
        align-content: center;
    }

    #litebox article a {
        margin-left: 0;
        margin-right: 10%;
        max-width: 25rem;
    }

    #litebox-img {
        order: -1;
        transform: none;
        padding: 0;
    }
}

/* 11. ---Desktop Styles--- */

@media screen and (min-width: 1200px) {
   .l-text-left {text-align: left;}
   .l-text-right {text-align: right;}
   .l-text-center {text-align: center;}

    #shop-hero-info h2 {
        font-size: min(4rem,70px);
        line-height: min(4.2rem,78px);
    }

    #shop-hero-fg {
        align-items: start;
        margin-top: 12vw;
    }

    #contact-hero {
        height: 28rem;
    }

    #contact-hero-info h2 {
        font-size: min(4rem,60px);
        line-height: min(4.2rem,78px);
        margin-bottom: 1rem;
    }

    #contact-hero-info p {
        font-size: 1rem;
    }

    #contact-hero-fg {
        align-items: start;
        padding-top: 5rem;
    }
}

@media screen and (min-width: 3000px) {
    #hero {
        max-height: unset;
    }
    .up-wave {
        margin-top: calc(-0.7*var(--wave-margin));
    }

    #shop-hero-fg {
        align-items: start;
        margin-top: 5vw;
    }

}