// Style
$sticky-shadow: .1rem .1rem 1rem 0 rgba($black, .2);

.page-header {
    background-color: $green;
    background: $hsg-gradient;
    transition: $transition-base;

    .row {
        width: 100vw;
    }

    .navbar-brand {
        display: flex;
        align-items: center;
        height: 100%;
        margin: 0;

        &-logo-normal {
            border-radius: 50%;
            background: $white;
            box-shadow: $box-shadow;
            padding: 4px;
        }
    }

    // mobile
    @include media-breakpoint-down(md) {
        box-shadow: $sticky-shadow;
        position: sticky;
        top: 0;
        z-index: 1000;

        .navbar-brand {
            padding: $grid-gutter-width/2 $grid-gutter-width;

            &-logo-normal {
                height: 70px;
                width: 70px;
            }
        }

        .navbar-toggler-wrap {
            align-items: center;
            display: flex;
            padding: 0 30px;
            justify-content: flex-end;
        }

        .navbar-toggler-icon,
        .navbar-toggler-icon::before,
        .navbar-toggler-icon::after {
            width: 30px;
        }

        .navbar-toggler {
            color: $white;
        }
    }

    // desktop
    @include media-breakpoint-up(lg) {
        &.sticky {
            @include position(fixed, 0 0 null);
            box-shadow: $sticky-shadow;
            z-index: 1000;

            .navbar-brand-logo-normal {
                transform: scale(.7);
            }

            #mainnavigation {
                .nav-top {
                    display: none;
                }

                .nav-bottom {
                    border-top: none;
                }
            }
        }

        .navbar-brand {
            justify-content: center;

            &-logo-normal {
                position: absolute;
                transition: transform .3s ease-in-out;
            }
        }

        .navigations-wrap {
            border-left: 1px solid rgba($white, .1);
        }
    }
}

@include media-breakpoint-down(md) {
    body {
        padding-top: 0 !important;
    }
}