/*
    Adjustable strength for the Jumbotron's existing overlay gradient.

    The block's overlay is an image - overlay-dark.png under light text, overlay-light.png
    under dark text - a diagonal gradient measured at alpha 247 (97%) in the top left falling
    to 3 (1%) in the bottom right. Over an already-dark background image that peak is heavier
    than it needs to be, and there was no way to turn it down.

    This scales THAT gradient rather than replacing it, so the shape and direction are exactly
    as before and only the peak moves. A synthesized CSS gradient would not match: the PNG's
    falloff is faster than linear (its centre measures 93, where linear interpolation would
    give about 185).

    Why a pseudo-element: opacity has to apply to the gradient alone. The block renders
    .jumbotron-content INSIDE .overlay, so setting opacity on .overlay would fade the heading
    with it. The ::before carries the image and takes the opacity; the content is untouched.

    It is positioned against .jumbotron, which is already position:relative - deliberately not
    against .overlay, since making .overlay positioned would re-parent the absolutely
    positioned .jumbotron-content and move the text.

    Scoped to .has-jumbotron-dim, which the block only adds when the parameter is set, so the
    jumbotrons already on the site are untouched.
*/

.jumbotron.has-jumbotron-dim > .overlay {
    /* The gradient moves to the pseudo-element, so the element itself carries none. */
    background-image: none;
}

.jumbotron.has-jumbotron-dim > .overlay::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url('../../Images/overlay-dark.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* Set inline by the block; 1 keeps the original strength if it is ever missing. */
    opacity: var(--jumbotron-dim, 1);
    pointer-events: none;
}

/* Dark text sits on a light image, so its overlay lightens rather than darkens. */
.jumbotron.jumbotron-dark.has-jumbotron-dim > .overlay::before {
    background-image: url('../../Images/overlay-light.png');
}