_title.scss

/*
    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-box-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 padding 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%;

        /* Reduce the amount of space required for the header part */
        margin-bottom:  0;
        margin-top:     0;
    }

    a {
        color:      white;

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

    .transition {

        /* Do not apply the mix-blend mode of the parent */
        isolation: isolate; 
        
        /* Properly overlapping the title content requires some extra work */
        position:   absolute;
        left:       0;

        /* Rounding by the browser introduces an occasional 1px line 
         * on bottom and right side. Drag in the transition to prevent this.
         */
        bottom:     -1px;
        right:      -1px;
        z-index:    100;
    }
}