/*
    Project:    Darlington.gov.uk 2022 Umbraco on .NET Core
    Version:    1.0
    Date:       14/06/2023
    Author:     Chris Smith (DBC)
    
    Purpose:    This CSS file houses all the core styling for the blocks usedd in the block list and block grids used in the DBC theme.
*/

:root {
    --primary-blue: #007297;
    --primary-grey: #2f2e2e;
    --outline-orange: #d16900;
}


/*--------------------------------------------------------------------------------------------------------*/
/*------------------------------------------Landing Pages-------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------*/


/*------------------------------------------------------------------------------*/
/*-----------------------------Landing Page Banner------------------------------*/
/*------------------------------------------------------------------------------*/

.landingPageNavigationBlocks {
    margin-bottom: 2rem;
}

.landingPageBanner {
    background-color: var(--primary-grey);
    color: #fff;
    margin-bottom: 2rem;
    padding: 1.75rem 1rem 1rem;
}

    .landingPageBanner h1 {
        color: #fff;
    }

/*------------------------------------------------------------------------------*/
/*-----------------------------Landing Page Navigation--------------------------*/
/*------------------------------------------------------------------------------*/

.subPageNavigation {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 5px solid #007297;
}

.navHeader {
    line-height: 1.375rem;
    margin-top: 5px;
}

.navLink {
    display: block;
    font-size: 1.375rem;
    font-weight: 600;
    padding: 2px;
    position: relative;
}

    .navLink:hover,
    .navLink:focus {
        color: #b70b0b;
    }

    .navLink:hover {
        text-decoration: underline;
    }

    .navLink:focus {
        background-color: #FFFDBD;
        outline: 2px#b70b0b solid;
    }

    .navLink:after {
        position: absolute; /* Prevent underline of arrow */
        padding-left: 2px; /* Add a little space between text and arrow */
        content: ">"; /* Unicode hex for » */
        right: 0;
        font-size: 1.875rem;
    }


/*--------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------Alerts-------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------*/

.fa-size{
    font-size: 4rem;
}

.alertIconContainer{
    margin-bottom: 1rem;
}

.alertContentContainer {
    text-align: center;
}

.alertContentContainer h2{
    word-wrap:break-word;
}

/*--------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------Banner Block-------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------*/
.bannerContainer{
    margin-bottom: 1rem;
}

.bannerContainer img {
    aspect-ratio: 77/46;
    background-color: var(--primary-grey);
}

.imageBannerContent{
    background-color: var(--primary-grey);
    padding: 1.5rem 1rem;
}

.imageBannerContent.text-ffffff h1 {
    color: #fff;
}

.imageBannerContent.text-000000 h1 {
    color: #000;
}


.creditTextContainer {
    position: relative;
}

.creditText{
    padding: .25rem .5rem;
}

.creditText p{
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
}

    .creditText.credit-bg-000000 {
        background-color: rgba(0, 0, 0, 0.4);
        color: white;
    }

    .creditText.credit-bg-ffffff {
        background-color: rgba(255, 255, 255, 0.6);
        color: black;
    }

.Top {
    top: 0;
}

.Bottom {
    bottom: 0;
}

.Left {
    left: 0;
}

.Right {
    right: 0;
}


/*--------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------Card Based Blocks--------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------*/

/*-------Glide slider modifications---------*/

.glide .glide__slides{
    padding: 1rem 0 2rem;
}

.glide .glide__slide {
    height: auto;
}

.quickCardCarousel{
    padding: 1rem;
}

 
.btn-dark-default {
    --bs-btn-color: #fff;
    --bs-btn-bg: #2f2e2e;
    --bs-btn-border-color: #2f2e2e;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #424649;
    --bs-btn-hover-border-color: #373b3e;
    --bs-btn-focus-shadow-rgb: 66, 70, 73;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #4d5154;
    --bs-btn-active-border-color: #373b3e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #2f2e2e;
    --bs-btn-disabled-border-color: #2f2e2e;
}

.quickCardCarousel.bg-primary .btn-dark-default,
.quickCardCarousel.bg-danger .btn-dark-default,
.quickCardCarousel.bg-success .btn-dark-default,
.card.text-bg-dark .btn-dark-default,
.card.text-bg-black .btn-dark-default,
.card.text-bg-secondary .btn-dark-default{
    --bs-btn-color: #000;
    --bs-btn-bg: #f8f9fa;
    --bs-btn-border-color: #f8f9fa;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #d3d4d5;
    --bs-btn-hover-border-color: #c6c7c8;
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #c6c7c8;
    --bs-btn-active-border-color: #babbbc;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #f8f9fa;
    --bs-btn-disabled-border-color: #f8f9fa;
}

.btn-light-default {
    --bs-btn-color: #000;
    --bs-btn-bg: #f8f9fa;
    --bs-btn-border-color: #f8f9fa;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #d3d4d5;
    --bs-btn-hover-border-color: #c6c7c8;
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #c6c7c8;
    --bs-btn-active-border-color: #babbbc;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #f8f9fa;
    --bs-btn-disabled-border-color: #f8f9fa;
}

.card.text-bg-black{
    background-color: #000;
    color: #fff;
}

    .card.text-bg-dark h2.card-highlight-text,
    .card.text-bg-black h2.card-highlight-text {
        color: #fff;
    }

/*--------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------LightBox--------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------*/

.lightBoxLink img{
    scale: 1;
}

.lightBoxLink:hover img{
    opacity: .85;
    scale: 1.05;
    transition: scale ease-in 200ms;
}

.lightBoxLink:hover img,
.lightBoxLink:focus img {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.25) !important;
}

.lightBoxLink:focus img {
    outline: 3px solid var(--outline-orange);
}

modal.lightbox .btn-close{
    height: 1.5em;
    width: 1.5em;
}

.lightbox-title{
    padding: .5rem 1rem;
    position: absolute;
    top: 0;
    z-index: 10;
}

.lightbox-caption-container{
    padding: .5rem;
}

    .lightbox-caption-container.text-ffffff{
        background-color: #000;
    }

    .lightbox-caption-container.text-000000 {
        background-color: #fff;
    }

    .lightbox-title.text-000000{
        background-color: #fff;
    }

.lightbox-title.text-ffffff {
    background-color: #000;
}

/*--------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------Form login-----------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------*/

.loginFormBulletText{
    font-size: 1.125rem;
}
/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------Small Tablet View (COL-MD)----------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 768px) {
    /*--------------------------------------------------------------------------------------------------------*/
    /*------------------------------------------Landing Pages (COL-MD)----------------------------------------*/
    /*--------------------------------------------------------------------------------------------------------*/

    .landingPageBanner {
            padding: 2rem 1rem 1.5rem;
        }

        /*--------------------------------------------------------------------------------------------------------*/
        /*-------------------------------------------------Alerts (COL-MD)----------------------------------------*/
        /*--------------------------------------------------------------------------------------------------------*/

        .alertIconContainer {
            margin-bottom: 0;
        }

        .alertContentContainer {
            text-align: initial;
        }


    /*--------------------------------------------------------------------------------------------------------*/
    /*---------------------------------------Banner Block (COL-MD)--------------------------------------------*/
    /*--------------------------------------------------------------------------------------------------------*/
    .bannerContainer img {
        aspect-ratio: 512/175;
    }

        .bannerContainer {
            position: relative;
        }

        .imageBannerContent {
            background-color: transparent;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

            .imageBannerContent h1 {
                font-size: clamp(2rem, 2rem + 1.5vw, 6rem);
                line-height: clamp(2rem, 3.5rem + 1.75vw, 6.5rem);
            }

    .bannerTagLine {
        font-size: clamp(1.25rem, 1.25rem + 1vw, 2rem);
        line-height: clamp(1.25rem, 1.5rem + 1vw, 2rem)
    }

        .creditText {
            position: absolute;
            padding: 5px;
        }


    /*--------------------------------------------------------------------------------------------------------*/
    /*----------------------------------------------LightBox (COL-MD)-----------------------------------------*/
    /*--------------------------------------------------------------------------------------------------------*/


    .modal.lightbox .btn-close {
        height: 2em;
        width: 2em;
    }

    .lightbox.modal{
        --bs-modal-width: 740px;
    }

    /*--------------------------------------------------------------------------------------------------------*/
    /*------------------------------------------Form login (COL-MD)-------------------------------------------*/
    /*--------------------------------------------------------------------------------------------------------*/

    .loginFormBulletText {
        font-size: 1.25rem;
    }

    }
    /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
    /*-------------------------------------------------------------------------- Tablet View (COL-LG)---------------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

    @media only screen and (min-width: 992px) {

        /*-----------------------------------------------------------------------------------------------------------------*/
        /*------------------------------------------Landing Pages (COL-LG)-------------------------------------------------*/
        /*-----------------------------------------------------------------------------------------------------------------*/

        .landingPageNavigationBlocks {
            margin-bottom: 3rem;
        }

        /*--------------------------------------------------------------------------------------------------------*/
        /*-------------------------------------------------Alerts (COL-LG)----------------------------------------*/
        /*--------------------------------------------------------------------------------------------------------*/

        div[data-content-element-type-alias="threeColumnLayout"] .fa-size {
            font-size: 2rem;
        }

        div[data-content-element-type-alias="twoColumnLayout"] .fa-size {
            font-size: 3rem;
        }

        div[data-content-element-type-alias="fourColumnLayout"] .fa-size {
            font-size: 2rem;
        }

        /*--------------------------------------------------------------------------------------------------------*/
        /*----------------------------------------------LightBox (COL-LG)-----------------------------------------*/
        /*--------------------------------------------------------------------------------------------------------*/

            .lightbox.modal
            .modal-lg, .modal-xl {
                --bs-modal-width: 930px;
            }

    }
    /*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
    /*---------------------------------------------------------------------------------- iPad Pro----------------------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

    @media only screen and (min-width: 1024px) {

        /*--------------------------------------------------------------------------------------------------------*/
        /*-------------------------------------Banner Block (iPad Pro)--------------------------------------------*/
        /*--------------------------------------------------------------------------------------------------------*/
        .bannerContainer img {
            aspect-ratio: 192/55;
        }
    }
    /*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
    /*-------------------------------------------------------------------------- Small Desktop View (COL-XL)-----------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

    @media only screen and (min-width: 1200px) {


        /*--------------------------------------------------------------------------------------------------------*/
        /*----------------------------------------------LightBox (COL-XL)-----------------------------------------*/
        /*--------------------------------------------------------------------------------------------------------*/

        .lightbox.modal
        .modal-lg, .modal-xl {
            --bs-modal-width: 1150px;
        }

    }
    /*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
    /*-------------------------------------------------------------------------- Large Desktop View (COL-XXL)----------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

    @media only screen and (min-width: 1400px) {

        /*--------------------------------------------------------------------------------------------------------*/
        /*----------------------------------------------LightBox (COL-XXL)----------------------------------------*/
        /*--------------------------------------------------------------------------------------------------------*/

        .lightbox.modal
        .modal-lg, .modal-xl {
            --bs-modal-width: 1350px;
        }
    }
    /*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
    /*-------------------------------------------------------------------------- Large Desktop View (COL-XXXL)---------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

    @media only screen and (min-width: 1600px) {

        /*--------------------------------------------------------------------------------------------------------*/
        /*---------------------------------------------LightBox (COL-XXXL)----------------------------------------*/
        /*--------------------------------------------------------------------------------------------------------*/

        .lightbox.modal
        .modal-lg, .modal-xl {
            --bs-modal-width: 1550px;
        }
    }
    /*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
    /*-------------------------------------------------------------------------- Large Desktop View (COL-XXXXL)--------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

    @media only screen and (min-width: 1920px) {
    }