/*------------------------------------------------------------------
[7 - Layout]
*/
/*------------------------------------------------------------------
[7.1 - Header]
*/
.navbar {
    background: white;
    box-shadow: 0px 2px 10px rgba(var(--color-1-rgb),.05);

    @media (min-width: $breakpoint-large) {
        &-nav {
            .nav-link {
                position: relative;
                color: var(--color-2) !important;
                font-size: 1.125rem;
                font-weight: 600;
                padding: .75rem 1.125rem !important;

                &:hover::after {
                    opacity: 1;
                }

                &::after {
                    content: "";
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    left: 0;
                    top: 0;
                    background-color: var(--color-3);
                    border-radius: 1rem;
                    opacity: 0;
                    @include transition(opacity .5s ease);
                    z-index: -1;
                }
            }
        }
    }

    &-toggler:focus {
        box-shadow: none;
    }

    @media (max-width: $breakpoint-sm) {
        .btn-color-1 {
            padding: .75rem;
        }
    }
}

.language-select {
    .dropdown-menu {
        min-width: unset !important;
    }
}

.user-menu-alert {
    color: var(--color-2);
    background: var(--color-3);
    border-radius: 1rem;
}

/*------------------------------------------------------------------
[7.2 - Mobile menu]
*/
#side-menu {
    max-width: 80%;
    border: 0;
    @include transition(all 1s ease);
}

#side-menu {
    ul > .nav-item {
        &:not(:first-child) {
            margin-top: 1rem;
        }

        > .nav-link {
            font-size: 1.25rem;
            font-weight: 500;
            color: var(--color-2) !important;
        }
    }

    .submenu {
        list-style: none;
        padding-left: 1rem;
        padding-right: 1rem;

        > li > a {
            color: rgba(var(--color-2-rgb),.75);
            font-size: 1.125rem;
        }
    }
}

/*------------------------------------------------------------------
[7.3 - Page header]
*/
.page-header {
    .container {
        z-index: 2;
    }

    .title {
        font-weight: 700;
        color: white;
    }

    .upper-title {
        font-weight: 700;
        color: white;

        @media (min-width: $breakpoint-medium) {
            font-size: 1.5rem;
        }

        @media (min-width: $breakpoint-small) and (max-width: $breakpoint-md) {
            font-size: 1.25rem;
        }
    }

    img {
        height: auto;
        line-height: 1;
    }
}

/*------------------------------------------------------------------
[7.4 - Main]
*/
main:not(.auth-main):not(.notice-main):not(.install-main) {
    margin-top: 83px;
    overflow-x: hidden;
}

.small-container {
    @media (min-width: $breakpoint-small) {
        max-width: 660px;
    }
}

.medium-container {
    @media (min-width: $breakpoint-small) {
        max-width: 990px;
    }
}

/*------------------------------------------------------------------
[7.5 - Footer]
*/
footer {
    .subscription-card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        &-area {
            background: var(--color-3);
        }

        &-heading {
            p:not(.text-md) {
                color: var(--color-1);
                font-weight: 700;

                @media (min-width: $breakpoint-medium) {
                    font-size: 1.5rem;
                }

                @media (min-width: $breakpoint-small) and (max-width: $breakpoint-md) {
                    font-size: 1.25rem;
                }
            }

            h2 {
                color: var(--color-2);
                font-weight: 800;

                @media (min-width: $breakpoint-medium) {
                    font-size: 2.5rem;
                }

                @media (min-width: $breakpoint-small) and (max-width: $breakpoint-md) {
                    font-size: 2rem;
                }
            }
        }

        .subscription-form {
            padding: .5rem;
            background: white;
            border-radius: 1rem;
        }

        input {
            border: 0;

            @media (min-width: $breakpoint-small) {
                width: 25rem;
                font-size: 1.125rem;
            }
        
            @media (max-width: $breakpoint-sm) {
                width: 15rem;
            }
        }

        button {
            padding: .5rem 1rem;
        }
    }

    .footer-inner {
        .footer-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--color-2);

            &::after {
                content: "";
                position: absolute;
                width: 2rem;
                height: .25rem;
                right: 0;
                bottom: 0;
                background: var(--color-1);
                border-radius: 1rem;
            }
        }

        .footer-bottom {
            border-top: 1px solid rgba(var(--color-2-rgb),.1);
        }

        .footer-text {
            font-size: 1.125rem;
            color: rgba(var(--color-2-rgb),.8);
        }
    
        .footer-link {
            font-size: 1.125rem;
            color: rgba(var(--color-2-rgb),.8);

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

        .footer-icon {
            color: var(--color-2);
        }

        .social a {
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            color: white !important;
            background: var(--color-2);
            display: flex;
            @include transition(all .25s ease-out);

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

        > .row {
            padding-bottom: 7rem;
        }
    }
}
