@charset "UTF-8";

.header {
    position: fixed;
    left: 0;
    top: 0;
    background-color: #fff;
    width: 100%;
    z-index: 99;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 0.3em 0.3em rgba($black, 0.1);
    &__hamburger {
        display: none;
    }
    &__name {
        background-color: #fff;
        h1 {
            color: $green-d;
            font-weight: 500;
            font-size: 2.5em;
            margin: 0;
        }
    }
    &__nav {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1.9em 0 2.2em;
        &__close {
            display: none;
        }
        &__item {
            position: relative;
            text-decoration: none;
            display: inline-block;
            margin: 0 2.3em;
            cursor: pointer;
            p {
                font-weight: 500;
                color: $green-d;
                font-size: 1.1em;
                line-height: 1;
                transition: 0.5s;
                cursor: pointer;
            }
            &:hover {
                p {
                    color: $blue-l;
                    transform: scale(1.2);
                    margin-top: -0.5em;
                }
            }
            &.active {
                .header__nav__item__line {
                    position: absolute;
                    bottom: -1em;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 100%;
                    height: 0.1em;
                    background-color: rgba($green-d, 0.5);
                    &::before, &::after {
                        content: "";
                        display: block;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 0.5em;
                        height: 0.5em;
                        border-radius: 50%;
                    }
                    &::before {
                        left: 0;
                        background-color: $green-d;
                    }
                    &::after {
                        right: 0;
                        background-color: $green-d;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 992px) {
    .header {
        display: block;
        &__hamburger {
            display: block;
            position: absolute;
            width: 4.2em;
            height: 3.6em;
            // border: 1px solid green;
            right: 3.2em;
            top: 50%;
            transform: translateY(-50%);
            z-index: 2;
            &::before, &::after {
                content: "";
                display: block;
                width: 100%; 
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                height: 0.4em;
                background-color: $green-d;
                transition: 0.3s;
            }
            &::before {
                top: 0;
            }
            &::after {
                bottom: 0;
            }
            &__line {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 100%;
                height: 0.4em;
                background-color: $green-d;
            }
            &.active {
                .header__hamburger__line {
                    opacity: 0;
                }
                &::before, &::after {
                    top: 50%;
                    transform-origin: center center;
                } 
                &::before {
                    transform: translate(-50%, -50%) rotate(45deg);
                } 
                &::after {
                    transform: translate(-50%, -50%) rotate(-45deg);
                } 
            }
        }
        &__name {
            padding: 2.5em 3.2em;
            position: relative;
            z-index: 1;
            h1 {
                font-weight: 400;
                font-size: 3.5em;
            }
        }
        &__nav {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: auto;
            padding: 0;
            display: flex;
            align-items: flex-start;
            flex-direction: column;
            box-shadow: 0 0.3em 0.3em rgba($black, 0.1);
            &__close {
                display: block;
                position: absolute;
                left: 0.5em;
                top: 0.5em;
                width: 3em;
                height: 3em;
                color: $green-d;
                &::before, &::after {
                    content: "";
                    display: block;
                    width: 100%;
                    height: 0.1em;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    background-color: $green-d;
                    transform-origin: center center;
                }
                &::before{
                    transform: translate(-50%, -50%) rotate(45deg);
                }
                &::after {
                    transform: translate(-50%, -50%) rotate(-45deg);
                }
            }
            &__item {
                display: inline-block;
                width: 100%;
                background-color: #fff;
                border-bottom: 1px solid rgba(#000, 0.1);
                margin: 0;
                padding: 2.9em 1em 2.9em 6.9em;
                p {
                    color: $black;
                    display: inline-block;
                    text-align: left;
                    font-size: 3.5em;
                    font-weight: 400;
                }
                &:last-child {
                    border-bottom: none;
                }
                &.active {
                    .header__nav__item__line {
                        display: none;
                    }
                    p {
                        position: relative;
                        &::before, &::after {
                            content: "";
                            position: absolute;
                            top: 50%;
                            transform: translateY(-50%);
                            display: block;
                            width: 0.4em;
                            height: 0.4em;
                            border-radius: 50%;
                        }
                        &::before {
                            left: -0.9em;
                            background-color: $green-d;
                        }
                        &::after {
                            right: -0.9em;
                            background-color: $green-d;
                        }
                    }
                }
            }
            &.active {
                .header__nav__close {
                    
                    
                }
            }
        }
        
    }
}