@import url('root.css');

/* =========================================
   SCROLL OFFSET
   ========================================= */
/* stops the sticky header from covering the top of a section when a link scrolls to it */
#booking, #services, #mission, #vision{
    scroll-margin-top: 90px;
}

/* =========================================
   HERO SECTION
   ========================================= */
.hero{
    height: 100vh;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    margin-top: -8px;

    .left{
        height: 100vh;
        width: 700px;
        background-color: var(--green);

        .content{
            position: relative;
            background-color: var(--goldenrod);
            color: whitesmoke;
            padding: 15px;
            align-content: center;
            justify-content: center;
            text-align: center;

            width: 700px;

            margin-top: 150px;
            margin-left: 120px;

            z-index: 2;

            border-radius: 5px;

            h1{
                font-family: var(--heading-font);
                font-size: 70px;
            }
            p{
                font-family: var(--body-font);
                font-size: 22px;
            }
        }

        .services{
            display: flex;
            flex-direction: row;
            margin-top: 5px;
            padding-top: 20px;
            margin-left: 390px;

            .service-item{
                padding-left: 12px;
                padding-right: 12px;

                img{
                    filter: invert(100);
                    width: 70px;
                }

                h2{
                    font-size: 15px;
                    color: whitesmoke;
                    text-align: center;
                }
            }
        }
    }

    .right{
        height: 100vh;
        width: calc(100vw - 700px);
        background-image: url('../images/hero.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        z-index: 0
    }
}

/* =========================================
   WIGGLE LINE - between hero and booking
   ========================================= */
.wiggle-line{
    position: relative;
    z-index: 4;
    height: 100px;
    margin-top: -30px;
    /* top half lets the hero show through, bottom half blends into the booking section */
    background: linear-gradient(to bottom, transparent 50%, transparent 50%);

    &::before{
        content: "";
        position: absolute;
        inset: 0;
        background-color: var(--goldenrod);

        /* wavy band shape - wiggle on the top and bottom edge */
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,18 C240,40 420,0 720,14 C1000,28 1200,2 1440,20 L1440,80 C1200,100 1000,70 720,86 C420,100 240,64 0,84 Z' fill='black'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,18 C240,40 420,0 720,14 C1000,28 1200,2 1440,20 L1440,80 C1200,100 1000,70 720,86 C420,100 240,64 0,84 Z' fill='black'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
    }
}

/* =========================================
   BOOKING SECTION
   ========================================= */
.booking{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -38px;
    padding: 90px 20px 60px;
    background-image: url('../images/stones.jpg');
    background-size: cover;
    background-position: center;

    .content{
        text-align: center;
        padding: 25px 40px;
        background-color: rgba(245, 245, 245, 0.575);
        border-radius: 20px;

        h2{
            color: var(--green);
            font-family: var(--heading-font);
            font-size: 40px;
            margin-bottom: 20px;
        }

        .book-btn{
            display: inline-block;
            padding: 12px 34px;
            background-color: var(--goldenrod);
            color: var(--bone);
            font-family: var(--body-font);
            font-size: 18px;
            text-decoration: none;
            border-radius: 30px;
            transition: background-color 0.2s ease;

            &:hover{
                background-color: var(--clay-brown);
            }
        }
    }
}

/* =========================================
   MOVING BANNER
   ========================================= */
.banner{
    overflow: hidden;
    background-color: var(--clay-brown);
    padding-top: 14px;
    padding-bottom: 14px;

    .banner-track{
        display: flex;
        flex-direction: row;
        width: max-content;
        animation: banner-scroll 40s linear infinite;

        /* keeps the text sharp while it moves - gives the track its own graphics layer */
        will-change: transform;
        backface-visibility: hidden;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

        /* pauses the banner when you hover over it */
        &:hover{
            animation-play-state: paused;
        }
    }

    .banner-words{
        display: flex;
        flex-direction: row;

        span{
            color: var(--bone);
            font-family: var(--heading-font);
            font-size: 24px;
            white-space: nowrap;

            /* goldenrod dot between each word */
            &::after{
                content: "\2022";
                color: var(--goldenrod);
                padding-left: 28px;
                padding-right: 28px;
            }
        }
    }
}

/* moves the track left by one full copy of the words, then starts again */
@keyframes banner-scroll{
    from{
        transform: translate3d(0, 0, 0);
    }
    to{
        transform: translate3d(-50%, 0, 0);
    }
}

/* stops the movement for visitors who have "reduce motion" turned on */
@media (prefers-reduced-motion: reduce){
    .banner .banner-track{
        animation: none;
    }
}

/* =========================================
   SERVICES SECTION
   ========================================= */
/* "section.services" so these rules don't also hit the .services row inside the hero */
section.services{
    display: grid;
    grid-template-columns: repeat(3 , 1fr);
    min-height: 500px;

    .left, .middle, .right{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 40px 20px;

        h2{
            font-family: var(--heading-font);
            font-size: 55px;
            text-align: center;
        }

        p{
            font-size: 20px;
            font-family: var(--body-font);
            text-align: center;
            padding: 15px;
        }

        /* SEE MORE BUTTON - goldenrod outline that fills in on hover */
        .see-more-btn{
            display: inline-block;
            margin-top: 10px;
            padding: 10px 30px;
            border: 2px solid var(--goldenrod);
            border-radius: 30px;
            font-family: var(--body-font);
            font-size: 18px;
            text-decoration: none;
            transition: background-color 0.2s ease, color 0.2s ease;

            &:hover{
                background-color: var(--goldenrod);
                color: var(--bone);
            }
        }
    }

    .left, .right{
        background-color: var(--green);

        h2, p, .see-more-btn{
            color: whitesmoke;
        }
    }

    .middle{
        background-color: whitesmoke;

        h2, p, .see-more-btn{
            color: var(--green);
        }
    }
}

/* =========================================
   WIGGLE LINE 0 - between services and mission
   (also used between mission and vision)
   ========================================= */
.wiggle-line0{
    position: relative;
    z-index: 4;
    height: 100px;
    margin-top: -46px;
    /* top half lets the section above show through, bottom half blends into the next section */
    background: linear-gradient(to bottom, transparent 50%, transparent 50%);

    &::before{
        content: "";
        position: absolute;
        inset: 0;
        background-color: var(--goldenrod);

        /* wavy band shape - tighter, more frequent wiggles than the first line */
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,22 C120,2 240,2 360,22 S600,42 720,22 S960,2 1080,22 S1320,42 1440,22 L1440,78 C1320,98 1200,98 1080,78 S840,58 720,78 S480,98 360,78 S120,58 0,78 Z' fill='black'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,22 C120,2 240,2 360,22 S600,42 720,22 S960,2 1080,22 S1320,42 1440,22 L1440,78 C1320,98 1200,98 1080,78 S840,58 720,78 S480,98 360,78 S120,58 0,78 Z' fill='black'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
    }
}

/* =========================================
   MISSION SECTION
   ========================================= */
.mission{
    padding:0;
    margin-top: -38px;
    display: grid;
    grid-template-columns: repeat(3 , 1fr);
    z-index: 0;

    background-color: whitesmoke;

    .left, .middle, .right{
        min-height: 600px;
    }

    .left{
        background-image: url('../images/left.jpg');
        background-size: cover;
        background-position: center;
    }

    .middle{
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 20px;
        padding-right: 20px;

        h2{
            color: var(--clay-brown);
            font-family: var(--heading-font);
            text-align: center;
            font-size: 55px;
            padding-top: 25px;
        }

        p{
            color: var(--clay-brown);
            font-size: 20px;
            font-family: var(--body-font);
            padding-top: 25px;
            text-align: center;
        }
    }

    .right{
        background-image: url('../images/right.jpg');
        background-size: cover;
    }
}

/* =========================================
   VISION SECTION
   ========================================= */
.vision{
    display: flex;
    min-height: 470px;
    background-image: url('../images/vision_bg.jpg');
    background-size: cover;
    margin-top: -40px;
    justify-content: center;
    align-items: center;

    img{
        position: absolute;
        width: 200px;
    }

    .content{
        width: 800px;
        height: 300px;
        background-color: rgba(245, 245, 245, 0.575);
        border-radius: 20px;
        padding-left: 20px;
        padding-right: 20px;

        h2{
            color: var(--green);
            font-family: var(--heading-font);
            text-align: center;
            font-size: 55px;
            padding-top: 25px;
        }
        p{
            color: var(--green);
            font-size: 20px;
            font-family: var(--body-font);
            padding-top: 25px;
            text-align: center;
        }
    }
}

/* =========================================
   WIGGLE LINE 1 - below vision
   ========================================= */
.wiggle-line1{
    position: relative;
    z-index: 4;
    height: 100px;
    margin-top: -46px;
    /* top half lets the vision show through, bottom half blends into the next section */
    background: linear-gradient(to bottom, transparent 50%, transparent 50%);

    &::before{
        content: "";
        position: absolute;
        inset: 0;
        background-color: var(--clay-brown);

        /* wavy band shape - long, gentle sweeps like the first line, but flowing the opposite way */
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,12 C260,0 460,38 760,20 C1040,4 1240,36 1440,10 L1440,84 C1240,64 1040,98 760,82 C460,66 260,100 0,78 Z' fill='black'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,12 C260,0 460,38 760,20 C1040,4 1240,36 1440,10 L1440,84 C1240,64 1040,98 760,82 C460,66 260,100 0,78 Z' fill='black'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
    }
}

/* =========================================
   PHONE VIEW
   ========================================= */
@media (max-width: 767px){
    /* HERO */
    .hero{
        height: auto;
        min-height: 100vh;
        flex-direction: column-reverse;

        .left{
            height: auto;
            width: 100%;
            flex: 1;
            padding: 0 20px 50px;

            .content{
                width: 100%;
                margin-top: -70px;
                margin-left: 0;
                padding: 25px 18px;
                border-radius: 8px;
                box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);

                h1{
                    font-size: 40px;
                    line-height: 1.1;
                    margin-bottom: 12px;
                }
                p{
                    font-size: 17px;
                    line-height: 1.5;
                    margin-bottom: 0;
                }
            }

            .services{
                justify-content: center;
                margin-left: 0;
                padding-top: 35px;

                .service-item{
                    flex: 1;
                    max-width: 110px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    padding-left: 8px;
                    padding-right: 8px;

                    img{
                        width: 55px;
                        margin-bottom: 8px;
                    }

                    h2{
                        font-size: 13px;
                        line-height: 1.3;
                    }
                }
            }
        }

        .right{
            height: 45vh;
            width: 100%;
        }
    }

    /* WIGGLE LINE */
    .wiggle-line{
        height: 70px;
        margin-top: -21px;
    }

    /* BOOKING */
    .booking{
        margin-top: -26px;
        padding: 70px 20px 45px;

        .content{
            padding: 20px 22px;

            h2{
                font-size: 30px;
            }
        }
    }

    /* MOVING BANNER */
    .banner{
        padding-top: 10px;
        padding-bottom: 10px;

        .banner-words{
            span{
                font-size: 18px;

                &::after{
                    padding-left: 18px;
                    padding-right: 18px;
                }
            }
        }
    }

    /* SERVICES */
    section.services{
        grid-template-columns: 1fr;

        .left, .middle, .right{
            padding: 30px 20px;

            h2{
                font-size: 40px;
                margin-bottom: 0;
            }

            p{
                font-size: 17px;
                line-height: 1.6;
                margin-bottom: 0;
            }
        }
    }

    /* WIGGLE LINE 0 */
    .wiggle-line0{
        height: 70px;
        margin-top: -14px;
    }

    /* MISSION */
    .mission{
        margin-top: -16px;
        grid-template-columns: 1fr;

        .left, .right{
            min-height: 220px;
        }

        .middle{
            min-height: auto;
            padding: 30px 20px 40px;

            h2{
                font-size: 40px;
                padding-top: 10px;
                margin-bottom: 0;
            }

            p{
                font-size: 17px;
                line-height: 1.6;
                padding-top: 18px;
                margin-bottom: 0;
            }

            img{
                margin-top: 25px !important;
            }
        }

        .right{
            background-position: center;
        }
    }
}

/* =========================================
   TABLET VIEW
   ========================================= */


/* =========================================
   BIGGER SCREEN SIZES VIEWS
   ========================================= */