#search-icon {
    color: var(--text);
}


.main-content {
    width: clamp(20rem, 90%, 96vw);
}

.navbar-brand {
    font-size: 1.1rem;
    padding: 0.25rem;
    background-color: var(--geoblazor-secondary);
    border-radius: 2rem;
}

.side-bar {
    background: var(--background-grey-2);
    width: 100%;
    left: 0;
    right: 0;
    height: 100%;
    position: relative;
    border: unset;
}

.side-bar a {
    color: var(--text-emphasis);
}

#site-nav {
    background-color: var(--background-grey-2);
}

#lower-nav-container {
    position: absolute;
    top: 6rem;
    left: 0;
    right: 0;
    background-color: var(--background-grey-2);
    width: 20rem;
    height: calc(100vh - 6rem);
    overflow-y: auto;
    margin: 0;
}

#lower-nav-container a {
    color: var(--text-emphasis);
    width: 100vw;
}

#lower-nav-toggle {
    display: none;
    background-color: var(--geoblazor-accent);
}

@media (prefers-color-scheme: light) {
    #lower-nav-container {
        background: linear-gradient(var(--background-grey-1), var(--background-grey-1)) padding-box,
        var(--geoblazor-gradient-vertical) border-box;
    }
}

.oi {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: 2px;
}

.oi img {
    height: 18px;
}

.nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

.nav-item img {
    height: 1.1rem;
}

.nav-item:first-of-type {
    padding-top: 1rem;
}

.nav-item:last-of-type {
    padding-bottom: 1rem;
}

.nav-item a {
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
}

nav {
    position: relative;
    width: 100vw;
    overflow: visible;
    background-color: var(--background-grey-1);

    .mobile {
        display: none;
    }

    .navbar__container {
        overflow: hidden;
        width: 100vw;
        height: 6rem;
        min-height: 6rem;
        background-color: var(--background-grey-1);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        max-width: 1200px;
        padding: 1rem 0;
        margin: 0 auto;

        .navbar__logo {
            height: 100%;
            width: 250px;
            background-image: url('../images/GeoBlazor-by-dymaptic-White.svg');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
        }

        @media (prefers-color-scheme: light) {
            .navbar__logo {
                background-image: url('../images/GeoBlazor-by-dymaptic-Purple.svg');
            }

            .navbar__menu-item:hover {
                background: var(--background-grey-1);
            }
        }
    }

    .navbar__menu-container {
        display: none;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .collapse {
        display: none;
    }

    .navbar__menu-item-container {
        display: flex;
        flex-direction: row;
        gap: 2rem;
        align-items: center;
        margin-left: 282px;

        .navbar__menu-item {
            color: var(--text-emphasis);
            font-family: 'Aller', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 1rem;
            font-weight: 400;
            text-decoration: none;
            padding: 0.5rem 1rem;
            border-radius: var(--box-radius);
            transition: background-color 0.2s ease, color 0.2s ease;
        }

        .navbar__menu-item:hover {
            background: var(--background-grey-3);
            color: var(--geoblazor-accent);
            text-decoration: none;
        }

        .navbar__menu-item.selected {
            background: var(--background-grey-3);
        }

        .navbar__menu-item__text {
            color: inherit;
            font-family: inherit;
            font-size: inherit;
            font-weight: inherit;
        }
    }

    i.icon {
        width: 40px;
        height: 40px;
        cursor: pointer;
    }

    .icon.hamburger-icon {
        background-image: url('../images/menu.svg');
        width: 3.75rem;
        height: 3.75rem;
        cursor: pointer;
        display: inline-block;
        background-size: cover;
        background-position: center;
    }

    .navbar__logo-container {
        position: absolute;
        top: 0;
        left: 0.5rem;
        height: 70px;
        width: auto;
        margin: 1rem;
    }

    #contact__link {
        padding: 0.125rem 1.875rem;
    }

    #signin__link {
        padding: 0.125rem 1.875rem;
    }

    .btn.btn-signin {
        background-color: unset;
        background: linear-gradient(var(--background-grey-1), var(--background-grey-1)) padding-box,
        var(--geoblazor-gradient-horizontal-reverse) border-box;
        border: 0.125rem solid transparent;
        padding: 0.75rem 3.75rem;
        margin: 0.5rem;
        color: var(--text);
    }

    .btn.btn-signin:hover,
    .btn.btn-signin:active,
    .btn.btn-signin:focus,
    .btn.btn-signin:focus-visible,
    :not(.btn-check) + .btn.btn-signin:active, /* Bootstrap override */
    .btn.btn-signin:first-child:active {
        background: linear-gradient(var(--geoblazor-gradient-dark-hover),
        var(--geoblazor-gradient-dark-hover)) padding-box,
        var(--geoblazor-gradient-horizontal-hover-reverse) border-box;
        color: var(--text-emphasis);
    }

    .btn.btn-contact {
        background: linear-gradient(var(--background-grey-1), var(--background-grey-1)) padding-box,
        var(--torchy-gradient-horizontal) border-box;
        border: 0.125rem solid transparent;
        padding: 0.75rem 3.75rem;
        color: var(--text);
        margin: 0.5rem;
    }

    .btn.btn-contact:hover,
    .btn.btn-contact:active,
    .btn.btn-contact:focus,
    .btn.btn-contact:focus-visible,
    :not(.btn-check) + .btn.btn-contact:active, /* Bootstrap override */
    .btn.btn-contact:first-child:active {
        background: linear-gradient(var(--geoblazor-gradient-dark-hover),
        var(--geoblazor-gradient-dark-hover)) padding-box,
        var(--torchy-gradient-horizontal-hover) border-box;
        color: var(--text-emphasis);
    }
}

@media (prefers-color-scheme: light) {

    nav {
        .navbar__container {
            .btn-gradient {
                color: var(--geoblazor-accent);
            }

            .btn-gradient:hover,
            .btn-gradient:active,
            .btn-gradient:focus,
            .btn-gradient:focus-visible,
            :not(.btn-check) + .btn.btn-gradient:active, /* Bootstrap override */
            .btn-gradient:first-child:active {
                color: var(--geoblazor-primary);
            }

            .btn-gradient-dark {
                color: var(--geoblazor-primary);
            }

            .btn-gradient-dark:hover,
            .btn-gradient-dark:active,
            .btn-gradient-dark:focus,
            .btn-gradient-dark:focus-visible,
            :not(.btn-check) + .btn.btn-gradient-dark:active, /* Bootstrap override */
            .btn-gradient-dark:first-child:active {
                color: var(--geoblazor-secondary);
            }
        }
    }

    nav {
        background: linear-gradient(var(--background-grey-1), var(--background-grey-1)) padding-box,
        var(--geoblazor-gradient-vertical) border-box;
    }
}

/***********************/
/***  NAVBAR MOBILE  ***/
/***********************/

@media only screen and (max-width: 1075px) {
    nav:not(.breadcrumb-nav) {
        /* Blazor doesn't always generate isolated css correctly for the first rule within nested css.
           Putting this here to force the following rules to be generated correctly... */

        #nested-css-fix {
            display: none;
        }
        
        #lower-nav-container {
            position: relative;
            top: 0;
            bottom: 0;
            width: 100%;
            height: fit-content;
            max-width: unset;
        }

        .site-nav {
            display: block;
        }

        #lower-nav-container.collapsed {
            display: none;
        }

        #lower-nav-toggle {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            text-align: end;
            border: none;
            padding: 0.6rem 2rem;
            border-radius: 0;
        }

        #lower-nav-toggle.collapse {
            display: none;
        }

        #lower-nav-toggle span {
            color: var(--text-white);
            font-size: 1.25rem;
        }

        .oi-chevron-down {
            height: 2rem;
            background-image: url('../images/down-carat.svg');
            background-position: center;
        }

        .nav-list .nav-list-item {
            text-align: center;
        }

        display: flex;
        flex-direction: column;
        z-index: 100;

        .desktop {
            display: none;
        }

        .mobile {
            display: unset;
        }

        .navbar__container {
            height: unset;
            overflow: visible;
            width: 100%;
            position: relative;
            flex-direction: column;

            .navbar__logo {
                width: 250px;
                max-width: calc(100vw - 8rem);
            }

            .navbar__menu-container {
                display: flex;
                flex-direction: row;
                position: absolute;
                right: 1rem;
                top: 1.25rem;
            }

            .navbar__logo-container {
                width: 100%;
            }

            .navbar__menu-item-container {
                flex: 1 1 auto;
                flex-direction: column;
                position: absolute;
                top: 100%;
                width: 100%;
                z-index: 100;
                left: 0;
                gap: 0;
                background: var(--background-grey-1);
                margin: 0;
            }

            .navbar__menu-item {
                border-radius: 0;
                width: 100%;
                text-align: center;
                justify-content: center;
                padding: 1rem;
                background: var(--background-grey-3);
                border-bottom: 1px solid var(--background-grey-4);
            }

            .navbar__menu-item-container.collapse {
                display: none;
            }

            .navbar__menu-item:hover, #contact__link.btn.btn-contact:hover, #signin__link.btn.btn-signin:hover {
                background: var(--geoblazor-primary);
                color: var(--text-emphasis);
            }

            #contact__link.selected, #signin__link.selected {
                background: var(--background-grey-3);
            }

            #contact__link.btn.btn-contact, #signin__link.btn.btn-signin {
                width: 100%;
                margin: 0;
                text-align: center;
                background: var(--background-grey-3);
                border-top: none;
                border-left: none;
                border-right: none;
                border-bottom: 1px solid var(--background-grey-4);
                padding: 1rem;
                border-radius: 0;
                color: var(--text-emphasis);
                font-family: 'Aller', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                font-size: 1rem;
                font-weight: 400;
                text-decoration: none;
                transition: background-color 0.2s ease, color 0.2s ease;
            }
        }
        .lower-collapse {
            display: none;
        }
    }

    @media only screen and (prefers-color-scheme: light) {

        nav {
            #nested-css-fix {
                display: none;
            }
            
            .navbar__container {
                .navbar__menu-item, #contact__link.btn.btn-contact, #signin__link.btn.btn-signin {
                    background: var(--background-grey-2);
                }
            }
        }
    }
}