/*-----General styling-----*/

@media (min-width: 992px) {
    main h1:not(.has-subtitle):not(.blurb-title),
    main .h1:not(.has-subtitle) {
        margin-top: -1rem;
    }
}

.bg-light-x {
    background-color: $light-x;
}

// Light gray background on the left
@media (min-width: 992px) {
    body:not(:has(.landingpage)) {
        .anchorjs-link {
            font-size: 0.7em !important;
            padding-top: 0.3em;
        }

        #layout {
            gap: 0 !important;
        }
        header nav.navbar {
            margin-bottom: 0 !important;
        }
        aside#sidebar {
            padding-top: $spacer * 3;
            padding-right: 0.9rem;
        }
        main#main {
            padding-top: $spacer * 3;
            padding-left: 2.1rem;
            background-color: $white;
        }
        background-image: url("../img/background.svg"); /* The image used */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Do not repeat the image */
        background-size: cover; /* Resize the background image to cover the entire container */
    }
}

@media (max-width: 992px) {
    .sidebar-collapse {
        background-color: $light;
    }
}

#main {
    min-height: 100vh;

    h2,
    .h2-like {
        font-weight: 600;
        margin-top: $spacer * 2.5;
        margin-bottom: $spacer * 0.5;
    }

    h3 {
        font-weight: 600;
    }
}

.octicon {
    margin-right: 0.25em;
}

/*-----Sidebar-----*/

//RDM wheel in sidebar
.sidebar_rdm {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 992px) {
    .sidebar_rdm {
        width: 200px;
    }
}

#side-nav .btn.sidebar-title {
    border: 0;
    border-bottom: 0.2rem solid $primary !important;
    font-weight: bold;
    padding-bottom: $input-btn-padding-y - 0.2rem;
}

#side-nav > ul {
    margin-top: $spacer * 0.5;
}

/* -----Homepage----- */

.landingpage, .ways-to-contribute  {
    .card {
        &:hover {
            box-shadow: $box-shadow;
        }

        .card-img-top {
            width: unset;
            padding: $card-spacer-x $card-spacer-x 0 $card-spacer-x;
        }
    }

    h1 {
        font-size: 2.2rem;
        font-weight: 200;
        text-align: center;
    }

    h2 {
        font-weight: 700;
        font-family: $font-family-theme;
    }

    h3 {
        font-weight: 600;
        font-family: $font-family-theme;
    }
}

// Icon sizing

.h-icon-8 {
    height: 8em;
}
.h-icon-6 {
    height: 6em;
}
.h-icon-5 {
    height: 5em;
}
.h-icon-4 {
    height: 4em;
}

// Search box

section#search-section {
    form {
        max-width: 600px;
    }

    #search-results {
        right: unset;
    }
    .input-group-text {
        font-size: 1.5rem;
    }
}

// Counters on landing page

.count-number {
    font-size: 4em;
    font-weight: 700;
}

/*-----Section navigation tiles-----*/

.navigation-tiles {
    .card,
    .btn {
        &:hover {
            box-shadow: $box-shadow;
        }
    }
}

#search-label-tiles {
    background-color: $light;
}


/*-----Top navigation-----*/

.navbar-nav .nav-item > a {
    white-space: nowrap;
    &.active {
        background-color: $primary;
        border-radius: $border-radius;
    }
}

/*-----Better tools-----*/
.tool {
    border-radius: 1rem;
    padding-right: 0.5rem;
}

/*-----New Icons-----*/

// Calender
i.far.fa-calendar {
    background: url("../img/section-icons/calendar.svg") center no-repeat;
    width: 17px;
    height: 17px;
    margin-bottom: -2px;
    &:before {
        content: "";
    }
}

i.fa-solid.fa-map-marker-alt {
    background: url("../img/section-icons/pin.svg") center no-repeat;
    width: 17px;
    height: 17px;
    margin-bottom: -2px;
    &:before {
        content: "";
    }
}

// Fork
i.fa-solid.fa-code-branch {
    background: url("../img/section-icons/git.svg") center no-repeat;
    width: 20px;
    height: 20px;
    margin-bottom: -2.5px;
    &:before {
        content: "";
    }
}

// Search
nav #search-label,
.landingpage #search-label,
nav #search-input {
    background-color: $white;
}
i.fa-solid.fa-magnifying-glass {
    background: url("../img/section-icons/search.svg") center no-repeat;
    width: 30px;
    height: 30px;
    &:before {
        content: "";
    }
}

// Tool snippet

i.fa-solid.fa-wrench {
    background: url("../img/section-icons/info2.svg") center no-repeat;
    &:before {
        content: "";
    }
    width: 1.2rem;
    height: 1.2rem;
    margin-bottom: -0.25rem;
}

a.citation span {
    font-size: small;
}
