@import 'vars.css';
@import 'home-page.css';
@import 'buttons.css';
@import 'hero.css';
@import 'testimonials.css';

@view-transition {
    navigation: auto;
}

html {
    --scrollbar-width: 15px !important;
}

body {
    font-size: 16px;
    line-height: 1.3;
    font-size: var(--font-size-p);
    font-family: var(--geist);
    background-color: var(--white-1);
    color: var(--text-1);
    /* width:100vw; This might become a problem with gsap stuff*/
    overflow-x: hidden;
    /*padding-right: 14px;!* This is weird but don't question it until things go bad*!*/
}

body {
    .site-grid {
        margin-top: 150px;
    }
}

body.home-page {
    .site-grid {
        margin-top: 100px;
        /*padding-right: 15px;*/
    }
}

a {
    transition: all 0.2s ease-in;
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

h1, h2, h3, h4 {
    font-family: var(--instrument) !important;
    margin-bottom: 0.5em;
}

h1, .h1 {
    font-size: var(--font-size-h3);
    letter-spacing: -2%;
    line-height: 100%;
}

h2, .h2 {
    font-size: var(--font-size-h4);
    letter-spacing: -1.75%;
    line-height: 110%;
}

h3, .h3 {
    font-size: var(--font-size-h5);
    letter-spacing: -1.5%;
    line-height: 120%;
}

h4, .h4 {
    font-size: var(--font-size-h6);
    letter-spacing: -1.25%;
    line-height: 130%;
}

h5, .h5 {
    font-size: var(--font-size-h6);
    line-height: 130%;
}

h6, .h6 {
    font-size: var(--font-size-h6);
    line-height: 130%;
}

.instrument {
    font-family: var(--instrument);
}

.geist {
    font-family: var(--geist);
}

.section-padding {
    padding-block: var(--section-padding-6);
}

.basic-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-flow: row wrap;
}

.default-article {
    display: grid;
    grid-template-columns:1fr 1fr;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    margin-top: 0;
    margin-bottom: 0;
    /*max-width: 100vw;
    width: 100vw;*/
    /*padding-inline: 0.5em;*/

    .article-content {
        padding-inline: 4vw;
        padding-bottom: 4vw;
        background: var(--white-1);
        position: relative;
        z-index: 3;
    }

    p:first-child {
        margin-bottom: 2rem;
        margin-top: -7px;
    }

    .page-header-wrap {
        display: grid;
        grid-template-columns:1fr 1fr;
        gap: 3rem;
        margin-bottom: 3rem;
        padding-bottom: 3rem;

        p {
            margin-block: 0;
            align-self: center;
        }

        .page-header {
            /*background: var(--red-1);*/
            border: solid 1px var(--red-6);
            color: var(--red-1);
            padding: 1rem 2rem;
            display: grid;
            align-items: center;
            max-width: 400px;
            max-height: 400px;

            h1, h2 {
                margin-block: 0;
                color: var(--red-1);
            }
        }

        border-bottom: solid 1px var(--red-6);
    }

    h2.h3 {
        margin-top: 64px;
    }

    .left.item-image, .article-slideshow-wrap {
        float: none;
        position: sticky;
        height: fit-content;
        top: 170px;

        &::before {
            position: absolute;
            top: -20px;
            left: -40px;
            content: "";
            height: 40px;
            width: 80px;
            background: var(--white-1);
            box-shadow: 0 -6px 9px -8px #333;
            transform: rotate(135deg);
            z-index: 10;
        }

        &::after {
            position: absolute;
            bottom: -20px;
            right: -40px;
            content: "";
            height: 40px;
            width: 80px;
            background: var(--white-1);
            box-shadow: 0 -6px 9px -8px #333;
            transform: rotate(45deg);
            left: -40px;
            z-index: 10;
        }

        img {
            position: relative;
            width: 100%;
            max-height: calc(100vh - 200px);
            object-fit: cover;
            object-position: center;
        }
    }

    .article-slideshow-wrap {
        margin-bottom: 3rem;

        img {
            width: 100%;
            position: relative;
            object-fit: cover;
            object-position: center;
            max-height: calc(100vh - 200px);
        }
    }

    &.article-slideshow {
        grid-area: 1 / 2 / 2 / 3;
    }
}

.columns-3 {
    columns: 3;
}

#fullscreenInfoContent {
    .location-details {
        display: grid;
        row-gap: 10px;

        .location {
            display: grid;
            grid-template-columns:32px 1fr;
        }
    }

    .icons-box {
        margin-bottom: 10px;
    }
}

.main-bottom-divider {
    margin-top: calc(var(--section-padding-6) / 2);
    margin-bottom: var(--section-padding-6);
    border-shape: shape(from 0 10px, curve to 4.17% 6px with 2.78% 6px, curve to 6.94% 3.5px with 5.56% 6px, curve to 9.72% 8px with 8.33% 1px, curve to 12.5% 17.5px with 11.11% 15px, curve to 15.28% 11px with 13.89% 20px, curve to 18.06% 8px with 16.67% 2px, curve to 20.83% 9px with 19.44% 14px, curve to 23.61% 4px with 22.22% 4px, curve to 26.39% 2px with 25% 4px, curve to 29.17% 3.5px with 27.78% 0px, curve to 31.94% 4.5px with 30.56% 7px, curve to 34.72% 8px with 33.33% 2px, curve to 37.5% 9px with 36.11% 14px, curve to 40.28% 11px with 38.89% 4px, curve to 43.06% 9.5px with 41.67% 18px, curve to 45.83% 10px with 44.44% 1px, curve to 48.61% 18px with 47.22% 19px, curve to 51.39% 12.5px with 50% 17px, curve to 54.17% 10.5px with 52.78% 8px, curve to 56.94% 9.5px with 55.56% 13px, curve to 59.72% 5.5px with 58.33% 6px, curve to 62.5% 10.5px with 61.11% 5px, curve to 65.28% 16.5px with 63.89% 16px, curve to 68.06% 11.5px with 66.67% 17px, curve to 70.83% 3px with 69.44% 6px, curve to 73.61% 5px with 72.22% 0px, curve to 76.39% 11px with 75% 10px, curve to 79.17% 11px with 77.78% 12px, curve to 81.94% 10.5px with 80.56% 10px, curve to 84.72% 13.5px with 83.33% 11px, curve to 87.5% 11px with 86.11% 16px, curve to 90.28% 12.5px with 88.89% 6px, curve to 93.06% 15px with 91.67% 19px, curve to 95.83% 9.5px with 94.44% 11px, curve to 100% 10px with 97.22% 8px);
    border: 4px solid var(--green-1);
}

.circle-repeat {
    --columns: 12;
    --rows: 12;
    --size: 2rem;
    --bg: blueviolet;

    background-image: radial-gradient(ellipse, var(--bg) 0%, var(--bg) 30%, transparent 34%);
    background-size: var(--size) var(--size);
    background-repeat: repeat;
    width: calc(var(--columns) * var(--size));
    height: calc(var(--rows) * var(--size));
}

.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.icons-box {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 1rem;

    a {
        color: var(--red-1);
    }
}

/* Headroom.js */
.headroom {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    z-index: 1030 !important;
    will-change: transform;
    transition: transform 200ms linear;
}

.headroom--pinned {
    transform: translateY(0%);
}

.headroom--unpinned {
    transform: translateY(-100%);
}

/*
.headroom--not-bottom.headroom--pinned.headroom--top {
    background:red !important;
}*/

.header.container-header.full-width.headroom.headroom--not-bottom.headroom--not-top.headroom--pinned {
    background-color: var(--white-1) !important;
    box-shadow: 0 0 4px rgba(3, 3, 3, 0.25);

    .container-company-info {
        p, a {
            color: var(--text-1) !important;
        }

        a:hover {
            color: var(--red-1) !important;
        }
    }
}

.container-header {
    background-image: none;
    background-color: rgba(255, 255, 255, 0);
    transition: background-color 0.4s ease;

    .grid-child {
        padding: 0;
    }
}

.container-header {
    .container-nav {
        max-width: calc(100% - 8vw);
        margin-left: auto;
        margin-right: auto;
        display: grid;
        grid-template-columns:80px 1fr 270px;
        padding: 20px 0;
        gap: 20px;

        .menuBtnWrap {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        p {
            margin: 0;
        }

        & > div {
            display: flex;
            align-items: center;
        }

        .navbar-brand {
            width: 80px;
            margin-inline-end: unset;
            padding: 0;
            margin-left: -10px;
        }

        .container-company-info {
            margin-right: auto;
        }

        .container-menu-btn {
            margin-left: auto;
        }
    }
}

.site-grid {
    .container-banner {
        position: relative;
        z-index:999;
        margin-top: var(--banner-margin-top);
        margin-bottom: 0;

        .carousel-indicators {
            bottom: 70px;
        }
    }
}

.divider {
    position: relative;
    z-index: 2;
    /*    rgba(160, 32, 47, 1) background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNGRkZGRkYiPjxwYXRoIGQ9Ik0xMjgwIDMuNEMxMDUwLjU5IDE4IDEwMTkuNCA4NC44OSA3MzQuNDIgODQuODljLTMyMCAwLTMyMC04NC4zLTY0MC04NC4zQzU5LjQuNTkgMjguMiAxLjYgMCAzLjRWMTQwaDEyODB6IiBmaWxsLW9wYWNpdHk9Ii4zIi8+PHBhdGggZD0iTTAgMjQuMzFjNDMuNDYtNS42OSA5NC41Ni05LjI1IDE1OC40Mi05LjI1IDMyMCAwIDMyMCA4OS4yNCA2NDAgODkuMjQgMjU2LjEzIDAgMzA3LjI4LTU3LjE2IDQ4MS41OC04MFYxNDBIMHoiIGZpbGwtb3BhY2l0eT0iLjUiLz48cGF0aCBkPSJNMTI4MCA1MS43NmMtMjAxIDEyLjQ5LTI0Mi40MyA1My40LTUxMy41OCA1My40LTMyMCAwLTMyMC01Ny02NDAtNTctNDguODUuMDEtOTAuMjEgMS4zNS0xMjYuNDIgMy42VjE0MGgxMjgweiIvPjwvZz48L3N2Zz4=)*/
    background-image: url('data:image/svg+xml,<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"><defs><path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path></defs><g class="parallax"><use xlink:href="%23gentle-wave" x="48" y="0" fill="rgba(254,254,254,0.7)"></use><use xlink:href="%23gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)"></use><use xlink:href="%23gentle-wave" x="48" y="5" fill="rgba(254,254,254,0.3)"></use><use xlink:href="%23gentle-wave" x="48" y="7" fill="rgba(254,254,254,1)"></use></g></svg>');
    background-size: 100% 100px;
    bottom: 0;
    height: 100px;
    z-index: 10;
    transform: scale(1, 1);
    margin-top: -100px;
}

.article-grid {
    display: grid;
    grid-template-columns:2fr 1fr;
    position: relative;
    column-gap: 6vw;

    &.home-top {
        margin-top: -300px;
        z-index: 1;
        min-height: 600px;
        grid-template-rows: 50% 30% 20%;
    }

    & > div {
        display: grid;
    }

    .article-grid-content {
        align-items: end;
        grid-area: 2 / 1 / 4 / 2;
    }

    .article-grid-image {
        align-items: center;
        grid-area: 1 / 2 / 4 / 3;

        img {
            max-width: 400px;
        }
    }

    &.reversed {
        grid-template-columns:1fr 2fr;

        .article-grid-content {
            grid-area: 2 / 2 / 4 / 3;
        }

        .article-grid-image {
            grid-area: 1 / 1 / 4 / 2;
        }
    }

    &.equal-columns-2 {
        grid-template-columns:1fr 1fr;

        img {
            max-width: 100%;
            object-fit: cover;
            object-position: center;
        }
    }
}

.flex {
    display: flex;
}

.fullwidth {
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%);
    margin-top: 0;
    margin-bottom: 0;
    max-width: 100vw;
    width: 100vw;

    .fullwidth-inner {
        max-width: 1340px;
        margin-inline: auto;
    }
}

.container-bottom-b {
    .fullwidth-inner {
        display: grid;
        gap: 6vw;
        grid-template-columns:1fr 1fr;
        max-width: 1340px;
        margin-inline: auto;
    }

}

.contactForm {
    .page-header {
        max-width: 100%;
        float: none;
        margin-bottom: 4vw;
        margin-right: 0;

        h1, h2 {
            color: var(--red-1);
        }
    }

    input, textarea, button {
        border-radius: 0;
    }

    button {
        background: var(--green-1);
        border: none;
        padding: 10px 20px;

        &:hover, &:active, &:focus {
            background: var(--red-1);
            border: none;
        }
    }
}

input, textarea {
    caret-color: var(--blue-1);
    caret-shape: block;
}

input, textarea, button {
    border-radius: 0 !important;
}

.formControlLabel {
    margin-bottom: 0.5em;
}

.form-check-input:checked {
    background-color: var(--blue-1) !important;
    border-color: var(--blue-1) !important;
}

.form-check-input:focus {
    border-color: var(--blue-2);
    outline: 0;
    box-shadow: 0 0 0 .25rem var(--blue-2);
}

.bg-red-1 {
    background: var(--red-1);
    color: var(--white-1);

    h1, h2, h3 {
        color: var(--white-1);
    }
}

.container-footer {
    margin-top: 0;
    background: var(--blue-1);
    color: var(--white-1);
    padding-inline: 1em;

    .grid-child {
        display: flex;
        padding-inline: 0;
        justify-content: space-between;
        align-items: center;
        gap: 20px;

        .mod-menu {
            flex-flow: row wrap;
            gap: 20px;
            justify-content: center;
            margin-bottom: 20px;

            a {
                color: var(--white-1);

                &:hover {
                    color: var(--orange-1);
                }
            }
        }
    }

    .copyright-container {
        font-size: var(--font-size-tiny);
    }
}

#back-top {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 48px;
    width: 48px;
    border-color: var(--red-1);
    border-radius: 100vh;
    color: var(--red-1);
    text-decoration: none;

    a {

    }

    &:hover, &:active, &:focus {
        background: var(--red-1);
        border-color: var(--red-1);
        color: var(--white-1);
    }
}

@media screen and ( width < 1600px ) {
    .default-article {
        .page-header-wrap {
            display: grid;
            grid-template-columns:1fr;
            gap: 3rem;
            margin-bottom: 3rem;
            padding-bottom: 3rem;

            .page-header {
                /*background: var(--red-1);*/
                border: solid 1px var(--red-6);
                color: var(--red-1);
                padding: 1rem 2rem;
                display: grid;
                align-items: center;
                max-width: unset;
                max-height: unset;
            }
        }
    }
}

@media screen and ( width < 1377px ) {
    .fullwidth-inner-content {
        margin-inline: 1em;
    }

    .container-bottom-b {
        .fullwidth-inner {
            margin-inline: 1em;
        }
    }
}

@media screen and ( width < 1320px ) {
    #fullscreenmenuOuter {
        #fullscreenmenuWrap {
            grid-template-columns: 1fr 1fr;
            grid-template-rows:auto 1fr;

            #fullscreenImg {
                grid-area: 1 / 1 / 3 / 2;
            }

            #fullscreenmenuBox {
                grid-area: 1 / 2 / 2 / 3;
            }

            #fullscreenInfoWrap {
                grid-area: 2 / 2 / 3 / 3;
            }
        }
    }

}

@media screen and ( width < 1000px ) {
    body.home-page {
        & .garden-bg {
            & .fullwidth-inner {
                .fullwidth-inner-content {
                    grid-template-rows: 1fr;
                }
            }
        }
    }
}

@media screen and ( width < 800px ) {
    .container-header {
        .container-nav {
            max-width: calc(100% - 40px);
            grid-template-columns:80px 1fr;
            grid-template-rows:1fr auto;
            padding: 20px 0;
            gap: 20px;

            .menuBtnWrap {
                margin-left: auto;
            }

            .navbar-brand {
                grid-area: 1 / 1 / 2 / 2;
            }

            .container-menu-btn {
                grid-area: 1 / 2 / 2 / 3;
                margin-left: auto;
                min-width: 0;
            }

            .container-company-info {
                grid-area: 2 / 1 / 3 / 3;
                justify-content: center;
                min-width: 0;

            }
        }
    }

    .intergen-carousel {
        & .carousel-item {
            & .slide-content {
                .carousel-caption {
                    grid-area: 1 / 1 / 2 / 2;
                    max-width: calc(100% - var(--content-padding)) !important;
                    margin-left: calc(var(--content-padding) / 2);
                }
            }
        }
    }

    .cakes-deserts {
        .article-grid-image {
            align-items: start;

            img {
                max-width: 250px !important;
            }
        }
    }
}

@media screen and ( width < 768px ) {
    .article-grid {
        & .article-grid-image {
            img {
                max-width: 100%;
            }
        }

        &.reversed {
            grid-template-columns: 1fr 1fr;
        }
    }

    .container-bottom-b {
        .fullwidth-inner {
            grid-template-columns: 1fr;
            gap: 8vw;
        }
    }

    .default-article {
        grid-template-columns: 1fr;
        padding-inline: 0.5rem;

        .article-content {
            order: 2;
            padding: 8vw 4vw;
        }

        .left.item-image, .article-slideshow-wrap {
            order: 1;
            margin: 1em;
            top: 2rem;
        }
    }

    body {
        .site-grid {
            margin-top: 200px;
        }
    }

}

@media screen and ( width < 685px ) {
    #fullscreenmenuOuter {
        #fullscreenmenuWrap {
            grid-template-columns: 1fr 1fr;
            grid-template-rows:auto 1fr;

            #fullscreenImg {
                grid-area: 2 / 1 / 3 / 3;
            }

            #fullscreenmenuBox {
                grid-area: 1 / 1 / 2 / 2;
            }

            #fullscreenInfoWrap {
                grid-area: 1 / 2 / 2 / 3;
            }
        }
    }
}

@media screen and ( width < 650px ) {
    .article-grid {
        &.home-top {
            margin-top: 0px;
            z-index: 5;
            min-height: unset;
            grid-template-rows: 1fr;
            grid-template-columns: 1fr;
            padding-block: var(--section-padding-3);

            .article-grid-image {
                display: none;
            }

            .article-grid-content {
                align-items: end;
                grid-area: 1 / 1 / 2 / 2;
            }
        }
    }

    body.home-page {
        .article-grid-wrap:has(.home-top) {
            margin-bottom: 0;
        }
    }

    .article-grid.cakes-deserts {
        grid-template-columns: 1fr;
        gap: 40px;

        .article-grid-content, .article-grid-image {
            grid-area: unset;
        }

        .article-grid-content {
            order: 2;
        }

        .article-grid-image {
            order: 1;

            img {
                margin-inline: auto;
                max-width: 100% !important;
            }
        }
    }

    .bg-red-1 {
        .article-grid {
            grid-template-columns: 1fr;
            gap: 40px;

            .article-grid-content, .article-grid-image {
                grid-area: unset;
            }

            .article-grid-content {
                order: 2;
            }

            .article-grid-image {
                order: 1;

                img {
                    margin-inline: auto;
                    max-width: 100% !important;
                }
            }
        }
    }
}

@media screen and ( width < 600px ) {
    body.home-page {
        & .garden-bg {
            & .fullwidth-inner {
                .fullwidth-inner-content {
                    color: var(--white-1);
                    display: grid;
                    grid-template-columns: 1fr;
                    grid-template-rows: 1fr;

                    .garden-image {
                        grid-area: 1 / 1 / 2 / 2;
                    }

                    #fullwidth-inner-content-really {
                        grid-area: 1 / 1 / 2 / 2;
                        margin: 4vw;
                    }
                }
            }
        }
    }
}

@media screen and ( width < 500px ) {
    #fullscreenmenuOuter {
        #fullscreenmenuWrap {
            grid-template-columns: 1fr 1fr;
            grid-template-rows:auto auto auto;
            top: 190px;

            #fullscreenImg {
                grid-area: 3 / 1 / 4 / 3;
            }

            #fullscreenmenuBox {
                grid-area: 1 / 1 / 2 / 3;
            }

            #fullscreenInfoWrap {
                grid-area: 2 / 1 / 3 / 3;
            }
        }
    }

    .container-header {
        .container-nav {
            .container-company-info {
                grid-area: 1/2/2/3;
            }

            .container-menu-btn {
                width: 100%;
                grid-area: 2 / 1 / 3 / 3;
                justify-content: center;
            }
        }
    }

    .header.container-header.full-width.headroom.headroom--top.headroom--not-bottom {
        .menuBtnWrap {
            .icons-box {
                a {
                    color: var(--white-1) !important;

                    &:hover, &:active, &:focus {
                        color: var(--red-1);
                    }
                }
            }
        }
    }

    .header.container-header.full-width.headroom.headroom--not-bottom.headroom--not-top.headroom--pinned,
    .header.container-header.full-width.headroom.headroom--not-bottom.headroom--pinned.headroom--top {
        .icons-box {
            a {
                color: var(--red-1);

                &:hover, &:active, &:focus {
                    color: var(--red-2);
                }
            }
        }
    }
}