/*
    This file contains the styling for the title image section that comes below
    the header and provides the page title on a fancy backdrop.
*/



div#title {

    position:               relative;
    min-height:             2rem;

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

    .location-info {
        a {
            color: white;

            &:focus,
            &:hover {
                color:      $color-helmholtz-bright-blue;
            }
        }
    }

     /*
        Insert a blind space before the container that covers the area that
        disappears below the header. This makes it easier to configure the title
        image since one does not have to consider the overlapped space anymore.
    */
    .header-offset {
        width:      100%;

        content:    "";
        display:    block;

        @include respond-to-medium(height,  $header-content-min-height);
    }

    img.bg-jumbotron {
        mix-blend-mode: soft-light;
        word-wrap:      break-word;
    }

    .title-content-container {
        display:            flex;
        flex-flow:          row nowrap;
        column-gap:         1rem;
        align-items:        flex-end;
        justify-content:    space-between;

        @include medium-is-tablet-minus {
            flex-flow:          column wrap;
            align-items:        center;
            row-gap:            1rem;
            justify-content:    space-around;
        }

        /*
            Place margins large enough to avoid the content hitting
            the transitions above and below.
        */
        padding-top:     3rem;
        padding-bottom:  2rem;
        padding-left:   $document-side-margin;
        padding-right:  $document-side-margin;

        background:     transparent;
        color:          white;

        /* Specify position attribute or the z-index doesn't work */
        position:   relative;
        z-index:    1;

        .alert {
            margin: 1rem;

            h2 {
                @include font-heading;
            }
        }
    }

    .title-map-container {
        @extend .title-content-container;

        padding:    0;
        @include respond-to-medium(height, 40vh, 50vh, 60vh);
    }

    h1 {
        @include font-heading;
        @include respond-to-medium(font-size,   $title-image-text-size);

        /* Make sure the heading gets enough space if the title box is shared */
        min-width:  40%;
    }

    a {
        color:      white;

        &:focus,
        &:hover {
            color:  $color-helmholtz-bright-blue;
        }
    }

    .transition {

        /* Do not apply the mix-blend mode of the parent */
        isolation: isolate; 
    }
}