/*
 * Software by John Liddiard (aka JohntheFish)
 * www.c5magic.co.uk
 *
 * This package contains software copyright and proprietary to John Liddiard
 *
 */

/*
 * Base for the background, shows as a grey if there is no image, or gets masked by the image
 * Image is applied as a style in the view over this
 */
.ccm-block-page-title.dtp-banner{
    position: relative;
    min-height: 30vh;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(27, 47, 69, 0.6);
}
.dtp-banner-60 .ccm-block-page-title.dtp-banner.dtp-has-image,
.dtp-banner-60.ccm-block-page-title.dtp-banner.dtp-has-image{
    min-height: 60vh;
}
.dtp-banner-75 .ccm-block-page-title.dtp-banner.dtp-has-image,
.dtp-banner-75.ccm-block-page-title.dtp-banner.dtp-has-image{
    min-height: 75vh;
}
.dtp-banner-100 .ccm-block-page-title.dtp-banner.dtp-has-image,
.dtp-banner-100.ccm-block-page-title.dtp-banner.dtp-has-image{
    min-height: 100vh;
}

/*
 * A mask color only applied over the optional image
 */
.ccm-block-page-title .dtp-banner-mask-02{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    opacity: 0.2;
    background-color: rgba(27, 47, 69);
}

/*
 * Used within the size maker to force the container to have a size that is big enough for the title
 * The title here is transparent. Gets overridden by the below to add colour in the next layer.
 */
.ccm-block-page-title.dtp-banner .dtp-page-title{
    color: rgba(0, 0, 0, 0);
    padding: 100px 2em 100px 2em;
    margin: 0;
    width:100%;
}

/*
 * Container for the text overlay
 */
.ccm-block-page-title .dtp-banner-text-position{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}


.ccm-block-page-title.dtp-banner .dtp-banner-text-position .dtp-page-title{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--bs-gray-100);
}

.ccm-block-page-title.dtp-banner .dtp-title-size{
    font-weight: 200;
    font-family: var(--bs-body-font-family);
    font-size:200%;
}

.btn-edit {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em .25em;
    color: #000;
    background: transparent url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-pencil-square%22%20viewBox%3D%220%200%2016%2016%22%3E %20%20%3Cpath%20d%3D%22M15.502%201.94a.5.5%200%200%201%200%20.706L14.459%203.69l-2-2L13.502.646a.5.5%200%200%201%20.707%200l1.293%201.293zm-1.75%202.456-2-2L4.939%209.21a.5.5%200%200%200-.121.196l-.805%202.414a.25.25%200%200%200%20.316.316l2.414-.805a.5.5%200%200%200%20.196-.12l6.813-6.814z%22%3E%3C%2Fpath%3E %20%20%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M1%2013.5A1.5%201.5%200%200%200%202.5%2015h11a1.5%201.5%200%200%200%201.5-1.5v-6a.5.5%200%200%200-1%200v6a.5.5%200%200%201-.5.5h-11a.5.5%200%200%201-.5-.5v-11a.5.5%200%200%201%20.5-.5H9a.5.5%200%200%200%200-1H2.5A1.5%201.5%200%200%200%201%202.5v11z%22%3E%3C%2Fpath%3E %3C%2Fsvg%3E") center/1em auto no-repeat;
    border: 0;
    border-radius: .375rem;
    opacity: .5;

    position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	padding: 1.25rem 1rem;
}