@import url('root.css');

/* =========================================
   HEADER
   ========================================= */
header{
    position: sticky;
    top: 0;
    z-index: 10;

    .header-bar{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 12px 60px;
        background-color: var(--bone);

        /* LOGO */
        .logo{
            display: flex;
            flex-direction: row;
            align-items: center;
            text-decoration: none;

            img{
                width: 65px;
            }

            h2{
                color: var(--green);
                font-family: var(--heading-font);
                font-size: 30px;
                margin: 0;
                padding-left: 12px;
            }
        }

        /* NAVIGATION */
        .nav-links{
            display: flex;
            flex-direction: row;
            align-items: center;

            a{
                color: var(--green);
                font-family: var(--body-font);
                font-size: 18px;
                text-decoration: none;
                padding-left: 18px;
                padding-right: 18px;
                transition: color 0.2s ease;

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

            .book-btn{
                margin-left: 12px;
                padding: 10px 28px;
                background-color: var(--goldenrod);
                color: var(--bone);
                border-radius: 30px;
                transition: background-color 0.2s ease;

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

        /* PHONE MENU TOGGLE - hidden on bigger screens */
        #menu-toggle{
            display: none;
        }

        .menu-icon{
            display: none;
        }
    }

    /* WIGGLE LINE - soft goldenrod wave under the header */
    .header-line{
        height: 14px;
        background-color: var(--goldenrod);

        -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,0 L1440,0 L1440,40 C1200,100 1000,30 720,70 C420,100 240,20 0,60 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,0 L1440,0 L1440,40 C1200,100 1000,30 720,70 C420,100 240,20 0,60 Z' fill='black'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
    }
}

/* =========================================
   PHONE VIEW
   ========================================= */
@media (max-width: 767px){
    header{
        .header-bar{
            flex-wrap: wrap;
            padding: 10px 20px;

            /* LOGO */
            .logo{
                img{
                    width: 42px;
                }

                h2{
                    font-size: 22px;
                    padding-left: 10px;
                }
            }

            /* PHONE MENU TOGGLE - three line icon */
            .menu-icon{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                width: 28px;
                height: 20px;
                margin: 0;
                cursor: pointer;

                span{
                    height: 3px;
                    width: 100%;
                    background-color: var(--green);
                    border-radius: 3px;
                }
            }

            /* NAVIGATION - drops down under the logo when the icon is tapped */
            .nav-links{
                display: none;
                flex-direction: column;
                width: 100%;
                padding-top: 15px;
                padding-bottom: 10px;

                a{
                    width: 100%;
                    text-align: center;
                    font-size: 17px;
                    padding-top: 10px;
                    padding-bottom: 10px;
                }

                .book-btn{
                    width: auto;
                    margin-left: 0;
                    margin-top: 10px;
                    padding: 10px 34px;
                }
            }

            #menu-toggle:checked ~ .nav-links{
                display: flex;
            }
        }
    }
}

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


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