---
---

@import "bootstrap_variables";
@import "boilerplate/colors";
@import "boilerplate/mixins";
@import "common/article";

#title {

    h1 {
        margin-bottom: 0;
    }

    h2 {
        a {
            vertical-align:     middle;
        }
    }

    p {
        margin-top: 0;
    }
}

.frontpage-card {
    @include drop-shadow;

    width:      13rem;
    max-width:  13rem;
    max-height: 9rem;

    margin:     0.5rem;
    border:     0;

    color: black;

    .card-body {
        display:    flex;
        flex-flow:  column nowrap;

        .badge {
            margin: 0.1rem;
        }

        a {
            margin-top: auto;
        }
    }
}

.howto-col {
    display: grid;
    grid-template-columns: 1fr 1fr  1fr  1fr  1fr;
    
    max-width: 500rem !important;
    padding-top: 0rem !important;

    @include medium-is-phone {
        grid-template-columns: 1fr;
    }

    .info-box {
        padding: 0.5rem;
    }

    .btn-outline-primary {
        border: none;
    }
}

.info-col {
    display: grid;
    grid-template-columns: 1fr 1fr;

    @include medium-is-phone {
        grid-template-columns: 1fr;
    }

    .info-box {
        padding: 1rem;
    }

    .btn-outline-primary {
        border: none;
    }
}

.frontpage-jumbotron {
    padding-right:  0;
    padding-left:   0;
    border-radius:  0;

    margin-top:     0;
    margin-bottom:  0;

    background-position:    center;
    background-size:        cover;

    background-color:   $color-content-light-gray;
    color:              $color-helmholtz-blue;

    text-align: center;

    h1, h2, h3 {
        @include font-heading;

        margin-top:     0.55rem;
        margin-bottom:  0.25rem;
    }

    /* NOTE consider moving this to common/_general.scss and fix the articles */
    section > * {
        margin-left:    auto;
        margin-right:   auto;
        max-width:      60rem;
    }

    .flex-content-wrapper {
        display:            flex;
        flex-flow:          wrap;
        justify-content:    center;
    }

    .toast {
        color: black;
    }
}

.frontpage-wide-jumbotron {
    @extend .frontpage-jumbotron;

    section > * {
        margin-left:    auto;
        margin-right:   auto;

        max-width: fit-content;
        max-width: -moz-fit-content;
    }
}

.transition-block {
    filter: drop-shadow(-.1rem -.1rem .1rem rgba(0,0,0,0.1));

    .transition_on_top {
        margin-bottom: -1px;
        .fill_right {
            fill: lighten($color-helmoltz-gray, 55%);
        }
    }
}

.frontpage-mission-jumbotron {
    @extend .frontpage-jumbotron;

    // Ensure that the base jumbotron always ends below the footer.
    padding-bottom:     $transition-max-height;
    margin-bottom:      -$transition-max-height;

    position:               relative;
    background-color:       lighten($color-helmoltz-gray, 55%);
    color:                  darken($color-helmoltz-gray, 20%);
}

.btn-logo {
    display: flex;
    align-items: center;

    width:10rem;
    height:6rem;

    margin: 0.5rem;
}