/*
    Project:    Darlington.gov.uk 2025 Umbraco 13+
    Version:    1.0
    Date:       19/11/2024
    Author:     Chris Smith (DBC)
    
    Purpose:    This CSS file houses all the core block styling for the leisure services pages.
*/

:root {
    --primary-blue: #007297;
    --primary-grey: #2f2e2e;
    --outline-orange: #d16900;
    --bright-purple: #a1007d;
    --primary-green: #789904;
    --primary-orange: #e87722;
    --dull-purple: #84344e;
    --offBlack: #1c1d1d;
}


/*-------------------------------------------------------*/
/*---------------------Utilities-------------------------*/
/*-------------------------------------------------------*/

.opacity-100{
    opacity: 1;
}

.opacity-90{
    opacity: .9;
}

.opacity-80{
    opacity: .8;
}

.opacity-70 {
    opacity: .7;
}
.opacity-60 {
    opacity: .6;
}
.opacity-50 {
    opacity: .5;
}

.text-000000 {
    color: #000;
}

.text-ffffff {
    color: #fff;
}

/*-------------------------------------------------------*/
/*--------------------Home Page-------------------------*/
/*-------------------------------------------------------*/


/*--------------------------------------------------------------------------------------------------------*/
/*----------------------------------Home Page Navigation Block--------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------*/


.leisureNavLinkContainer{
    overflow: hidden;
    position: relative;
}

.leisureNavLinkText {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 600;
    left: 50%;
    line-height: 2.5rem;
    position: absolute;
    text-align: center;
    top: 50%;   
    transform: translate(-50%, -50%)
}

.leisureNavLink{
    display: block;
}


.leisureNavLink,
.leisureNavLinkImage {
    transition: all ease-in 300ms;
}

.leisureNavLinkImage {
    object-fit: cover;
    transform: scale(1);
}

.leisureNavLink:hover .leisureNavLinkImage{
transform: scale(1.02);
}

.leisureNavLink:hover,
.leisureNavLink:focus-visible {
    opacity: .8;

}

    .leisureNavLink:focus-visible:after {
        content: "";
        height: 95%;
        outline: 14px solid var(--bright-purple);
        position: absolute;
        bottom: 5px;
        left: 5px;
        right: 54px;
        width: 97%;
        z-index: 99999;
    }




/*---------------------------------------------------------------------------------------*/
/*----------------------------------RTE Block--------------------------------------------*/
/*---------------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------------------*/
/*----------------------------------Hero Banner Block--------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/

.heroBanner{
    margin-bottom: 1rem;                 
}

.heroBannerContent{
    padding: 1rem;
}

.heroBannerBlurb {
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 1.5rem;
}



.bg-a1007d {
    background-color: var(--bright-purple);
    color: #fff;
}

    .bg-a1007d h1, .bg-a1007d .h1,
    .bg-a1007d h2, .bg-a1007d .h2,
    .bg-a1007d h3, .bg-a1007d .h3 {
        color: #fff;
    }

.bg-000000 {
    background-color: #000;
    color: #fff;
}

    .bg-000000 h1, .bg-000000 .h1,
    .bg-000000 h2, .bg-000000 .h2,
    .bg-000000 h3, .bg-000000 .h3 {
        color: #fff;
    }

.bg-ffffff {
    background-color: #fff;
    color: var(--primary-blue);
}

    .bg-ffffff h1, .bg-ffffff .h1,
    .bg-ffffff h2, .bg-ffffff .h2,
    .bg-ffffff h3, .bg-ffffff .h3 {
        color: var(--primary-blue);
    }

.bg-007297 {
    background-color: var(--primary-blue);
    color: #fff;
}

    .bg-007297 h1, .bg-007297 .h1,
    .bg-007297 h2, .bg-007297 .h2,
    .bg-007297 h3, .bg-007297 .h3 {
        color: #fff;
    }


.bg-789904 {
    background-color: var(--primary-green);
    color: #000;
}

    .bg-789904 h1, .bg-789904 .h1,
    .bg-789904 h2, .bg-789904 .h2,
    .bg-789904 h3, .bg-789904 .h3 {
        color: #000;
    }

.bg-e87722 {
    background-color: var(--primary-orange);
    color: #000;
}

    .bg-e87722 h1, .bg-e87722 .h1,
    .bg-e87722 h2, .bg-e87722 .h2,
    .bg-e87722 h3, .bg-e87722 .h3 {
        color: #000;
    }

.bg-84344e {
    background-color: var(--dull-purple);
    color: #fff;
}

    .bg-84344e h1, .bg-84344e .h1,
    .bg-84344e h2, .bg-84344e .h2,
    .bg-84344e h3, .bg-84344e .h3 {
        color: #fff;
    }


/*--------------------------------------------------------------------------------------------------------*/
/*----------------------------------Insert Umbraco Forms Block--------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------*/

.formPicker{
    padding: 1rem 0;
}

/*--------------------------------------------------------------------------------------------------------*/
/*----------------------------------------CTA Solid Block-------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------*/

.ctaBannerContentSolid,
.ctaBannerContentImage {
    padding: 4.625rem 2.5rem 4.6875rem;
    text-align: center;
}

.ctaHeader {
    margin-bottom: 2.125rem;
    text-transform: uppercase;
}

.ctaBannerBlurb {
    margin-bottom: 2.25rem;
}

.bg-000000 .btn-outline-cta,
.bg-007297 .btn-outline-cta,
.bg-a1007d .btn-outline-cta,
.bg-84344e .btn-outline-cta {
    --bs-btn-color: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #212529;
    --bs-btn-focus-shadow-rgb: 33,37,41;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #212529;
    --bs-btn-active-border-color: #212529;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #212529;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #212529;
    --bs-gradient: none;
    --bs-btn-font-size: 1.25rem;
    /* border-radius: .375rem; */
    --bs-btn-border-width: 3px;
    --bs-btn-padding-x: 2rem;
}

.bg-789904 .btn-outline-cta,
.bg-e87722 .btn-outline-cta {
    --bs-btn-color: #000;
    --bs-btn-border-color: #000;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #000;
    --bs-btn-hover-border-color: #212529;
    --bs-btn-focus-shadow-rgb: 33,37,41;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #212529;
    --bs-btn-active-border-color: #212529;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #212529;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #212529;
    --bs-gradient: none;
    --bs-btn-font-size: 1.25rem;
    /* border-radius: .375rem; */
    --bs-btn-border-width: 3px;
    --bs-btn-padding-x: 2rem;
}

.bg-ffffff .btn-outline-cta {
    --bs-btn-color: #007297;
    --bs-btn-border-color: #007297;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #007297;
    --bs-btn-hover-border-color: #212529;
    --bs-btn-focus-shadow-rgb: 33,37,41;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #212529;
    --bs-btn-active-border-color: #212529;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #212529;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #212529;
    --bs-gradient: none;
    --bs-btn-font-size: 1.25rem;
    /* border-radius: .375rem; */
    --bs-btn-border-width: 3px;
    --bs-btn-padding-x: 2rem;
}



/*--------------------------------------------------------------------------------------------------*/
/*----------------------------------------Ticker Block----------------------------------------------*/
/*--------------------------------------------------------------------------------------------------*/
.scroller-container {
    background-color: var(--offBlack);
    margin-block: -1rem 1rem;
}

.scroller {
    max-width: 96%;
}

    .scroller[data-animated="true"] {
        overflow: hidden;
        -webkit-mask: linear-gradient(90deg, transparent, #1c1d1d 20%, #1c1d1d 80%, transparent);
        mask: linear-gradient(90deg, transparent, #1c1d1d 20%, #1c1d1d 80%, transparent);
    }

        .scroller[data-animated="true"] .scroller-inner {
            flex-wrap: nowrap;
            animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;
            width: max-content;
        }

.scroller-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0;
    padding-block: 1rem;
}

.scroller-item {
    color: #fff;
    margin-right: .5rem;
}

.scroller .fa-size{
    font-size: 1rem;
    margin-right: 1rem;
}

.scroller[data-direction="Right"] {
    --_animation-direction: reverse;
}

.scroller[data-direction="Left"] {
    --_animation-direction: forwards;
}

.scroller[data-speed="Fast"] {
    --_animation-duration: 35s;
}

.scroller[data-speed="Slow"] {
    --_animation-duration: 60s;
}

@keyframes scroll {
    to {
        transform: translate(calc(-50% - 0.5rem));
    }
}

.tickerLink {
    color: #fff;
    font-weight: 600;
}

.scroller .tickerLink:hover,
.scroller .tickerLink:focus {
    color: var(--primary-green);
}

.scroller-container.Primary-orange .scroller-item {
    color: var(--primary-orange);
}

.scroller-container.Primary-orange .tickerLink {
    color: var(--primary-orange);
}

    .scroller-container.Primary-orange .tickerLink:hover,
    .scroller-container.Primary-orange .tickerLink:focus{
        color: #fff;
    }


.scroller-container.Primary-green .scroller-item {
    color: var(--primary-green);
}

.scroller-container.Primary-green .tickerLink {
    color: var(--primary-green);
}

    .scroller-container.Primary-green .tickerLink:hover,
    .scroller-container.Primary-green .tickerLink:focus {
        color: #fff;
    }


/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------Small Tablet View (COL-MD)----------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 768px) {






    /*-----------------------------------------------------------------------------------------------*/
    /*------------------------------Hero Banner Block (COL-MD)---------------------------------------*/
    /*-----------------------------------------------------------------------------------------------*/

    .heroBannerBlurb {
        font-size: 1.75rem;
        font-weight: 600;
        line-height: 2.25rem;
    }

    .heroBlurb{
        margin-bottom: .25rem;
    }

}


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

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


    /*--------------------------------------------------------------------------------------------------------*/
    /*------------------------------Home Page Navigation Block (COL-LG)---------------------------------------*/
    /*--------------------------------------------------------------------------------------------------------*/


    .leisureNavLink:focus-visible:after {
        bottom: 7px;
        left: 7px;
    }


    .leisureNavLinkText {
        font-size: 3rem;
        line-height: 3rem;
    }


    /*---------------------------------------------------------------------------------------*/
    /*----------------------------------RTE Block (COL-LG)-----------------------------------*/
    /*---------------------------------------------------------------------------------------*/

    .rTEBlock{
        padding-right: 4rem;
    }

    div[data-content-element-type-alias="threeColumnLayout"] .rTEBlock {
        padding-right: .75rem;
    }

    div[data-content-element-type-alias="fourColumnLayout"] .rTEBlock {
        padding-right: .5rem;
    }



    /*-----------------------------------------------------------------------------------------------*/
    /*------------------------------Hero Banner Block (COL-LG)---------------------------------------*/
    /*-----------------------------------------------------------------------------------------------*/

    .heroBannerBlurb {
        position: relative;
        top: 50%;
        -ms-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }


    /*---------------------------------------------------------------------------------------*/
    /*--------------------------------Alert Block (COL-LG)-----------------------------------*/
    /*---------------------------------------------------------------------------------------*/

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


    /*--------------------------------------------------------------------------------------------------------*/
    /*------------------------------------CTA Solid Block (COL-LG)--------------------------------------------*/
    /*--------------------------------------------------------------------------------------------------------*/

    .ctaHeader{
        font-size: 2.5rem;
    }

    .ctaBannerBlurb p{
        font-size: 1.5rem;
    }

}




/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------- 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) {

    /*--------------------------------------------------------------------------------------------------------*/
    /*------------------------------Home Page Navigation Block (COL-XL)---------------------------------------*/
    /*--------------------------------------------------------------------------------------------------------*/

    .leisureNavLink:focus-visible:after {
        bottom: 7px;
        left: 9px;
    }

    .leisureNavLinkText {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }

    /*---------------------------------------------------------------------------------------*/
    /*----------------------------------RTE Block (COL-XL)-----------------------------------*/
    /*---------------------------------------------------------------------------------------*/

    .rTEBlock {
        padding-right: 6rem;
    }

    /*--------------------------------------------------------------------------------------------------------*/
    /*------------------------------------CTA Solid Block (COL-XL)--------------------------------------------*/
    /*--------------------------------------------------------------------------------------------------------*/

    .ctaHeader {
        font-size: 2.75rem;
    }

    .ctaBannerBlurb p {
        font-size: 1.675rem;
    }

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

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


    /*--------------------------------------------------------------------------------------------------------*/
    /*------------------------------Home Page Navigation Block (COL-XXL)--------------------------------------*/
    /*--------------------------------------------------------------------------------------------------------*/


    .leisureNavLink:focus-visible:after {
        bottom: 9px;
        left: 10px;
    }

    .leisureNavLinkText {
        font-size: 3rem;
        line-height: 3rem;
    }


    /*---------------------------------------------------------------------------------------*/
    /*----------------------------------RTE Block (COL-XXL)----------------------------------*/
    /*---------------------------------------------------------------------------------------*/

    .rTEBlock {
        padding-right: 8rem;
    }
}
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------- Large Desktop View (COL-XXXL)---------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

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

    /*--------------------------------------------------------------------------------------------------------*/
    /*------------------------------Home Page Navigation Block (COL-XXXL)-------------------------------------*/
    /*--------------------------------------------------------------------------------------------------------*/

    .leisureNavLink:focus-visible:after {
        bottom: 10px;
        left: 12px;
    }



    /*---------------------------------------------------------------------------------------*/
    /*---------------------------------RTE Block (COL-XXXL)----------------------------------*/
    /*---------------------------------------------------------------------------------------*/

    .rTEBlock {
        padding-right: 14rem;
    }

    div[data-content-element-type-alias="twoColumnLayout"] .rTEBlock {
        padding-right: 7rem;
    }

    div[data-content-element-type-alias="threeColumnLayout"] .rTEBlock {
        padding-right: 1rem;
    }

    div[data-content-element-type-alias="fourColumnLayout"] .rTEBlock {
        padding-right: .75rem;
    }

    /*--------------------------------------------------------------------------------------------------------*/
    /*-----------------------------------CTA Solid Block (COL-XXXL)-------------------------------------------*/
    /*--------------------------------------------------------------------------------------------------------*/

    .ctaHeader {
        font-size: 3rem;
    }

    .ctaBannerBlurb p {
        font-size: 1.875rem;
    }
}
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------- Large Desktop View (COL-XXXXL)--------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

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

    /*--------------------------------------------------------------------------------------------------------*/
    /*-----------------------------Home Page Navigation Block (COL-XXXXL)-------------------------------------*/
    /*--------------------------------------------------------------------------------------------------------*/

    .leisureNavLink:focus-visible:after {
        bottom: 12px;
        left: 14px;
    }

    .leisureNavLinkText {
        font-size: 3.5rem;
        line-height: 3.5rem;
    }
    /*---------------------------------------------------------------------------------------*/
    /*---------------------------------RTE Block (COL-XXXL)----------------------------------*/
    /*---------------------------------------------------------------------------------------*/

    .rTEBlock {
        padding-right: 18rem;
    }

    div[data-content-element-type-alias="twoColumnLayout"] .rTEBlock {
        padding-right: 10rem;
    }


}