/*
    A transparent PNG in a Jumbotron, in place of - or above - the heading text.

    Both jumbotron blocks already accept arbitrary markup in their text field, so an <img> has
    always been possible. What was missing is that it had no sizing: dropped in raw it renders at
    its natural pixel size inside .jumbotron-content, which style.min.css caps at max-width 50%
    on wide screens. A 2000px wordmark therefore overflowed on desktop and a 300px one looked
    lost. This gives it one rule so a logo behaves like a logo.

    HEIGHT IS THE CONTROL, NOT WIDTH. A wordmark is recognised by how tall its letters are
    relative to the heading text it replaces, and its width follows from the artwork. Setting a
    width instead makes a long logo shrink to nothing and a square one dominate. The block writes
    max-height inline; width and height stay auto so the aspect ratio is never touched.

    max-width: 100% is what keeps it inside the column on a phone, where a logo tall enough for
    desktop would otherwise run off the side.
*/

.jumbotron-content .jumbotron-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    /*
        No max-height here on purpose. The block sets it inline, because a value that arrives
        through a stylesheet is a value that can fail to arrive - see the comment in
        Jumbotron.cshtml's ContentInlineStyle for the case where exactly that happened.
    */
}

/*
    A logo and a heading can sit together: the image first, the text under it. Without this they
    collide, because .jumbotron-content's children have no spacing of their own.
*/
.jumbotron-content .jumbotron-logo + * {
    margin-top: 20px;
}

/*
    When the logo replaces the heading the block wraps it in an h1, so that the page has a real
    top-level heading and a screen reader announces the product rather than nothing. That is a
    semantic wrapper only - it must not look like a heading, because the artwork already is one.

    h1 in this theme brings its own font-size, margins and line-height; all three would push the
    logo around. Resetting them makes the wrapper invisible in layout, so the hero looks exactly
    as it did when the image stood alone.
*/
.jumbotron-content h1.jumbotron-logo-heading {
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
}