/*
    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 styling for the masterview and commonly reused styles from across the leisure services pages.
*/

:root {
    --primary-blue: #007297;
    --primary-grey: #2f2e2e;
    --bright-purple: #a1007d;
    --primary-green: #789904;
    --primary-orange: #e87722;
    --dull-purple: #84344e;
    --primary-blue-10: #e4eff3;
    --primary-blue-20: #cae1e9;
    --primary-blue-30: #afd3de;
    --primary-blue-40: #94c5d4;
    --primary-blue-50: #78b6ca;
    --primary-blue-60: #59a8c0;
    --primary-blue-70: #329bb5;
    --primary-blue-80: #008dab;
}


/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------Mobile View----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.required{
    color: #d60000;
}



/*----------------------------Header-----------------------------------------*/

header{

}

/*-----------------------------Search-----------------------------------*/
.btn-search {
    color: #fff;
}

    .btn-search:hover,
    .btn-search:focus {
        color: #ffc107;
    }


.searchFormContainer {
    background-color: var(--bright-purple);
    color: #fff;
    opacity: 0;
    padding: 2rem .5rem;
    scale: .5;
    transition: opacity linear 200ms, width linear 600ms, scale linear 600ms, left linear 200ms;
    width: 0;
    z-index: 1020; /*1 higher than bootstrap navbar*/
    position: absolute;
    left: -80px;
    top: 0;
}

    .searchFormContainer.show {
        left: 0;
        opacity: 1;
        scale: 1;
        width: 100%;
    }

button#js-closeSearchWindow {
    margin-top: -.75rem;
}

.searchFormContainer .h3,
.searchFormContainer .btn-link{
    color: #fff;
}

    .searchFormContainer .btn-link:hover,
    .searchFormContainer .btn-link:focus {
        color: #F3DC44;
    }

    .searchFormContainer .btn-link:focus {
        outline-color: #F3DC44;
    }

.fa-sizer{
    font-size: 2rem;
}
/*----------------------------Footer---------------------------*/

footer{
    background-color: #141313;
    bottom: 0;
    color: #fff;
    height: 470px;
    margin-top: 2rem;
    padding: 2rem 1rem 1rem;
    position:absolute;
    width: 100%;
}

footer li {
    list-style: none;
    margin-bottom: 11px;

}

footer a{
    color: #fff;
    font-size: 1.375rem;
    padding: 6px 4px;
    text-decoration: none;
}

footer a:hover,
footer a:focus{
    color: var(--primary-orange);
}

footer a:focus{
    outline: 3px solid var(--primary-orange);
}

footer a:hover{
    text-decoration: underline;
}

.footerLinks{
    padding: 0;
}


.footerSocialIcons {
    text-align: center;
}

.socialLinks{
    margin-bottom: 0;
}

.footerSocialIcons a {
    display: inline-block;
    font-size: 2.5rem;
    width: 2.5rem;
}

.footerLogoContainer{
    text-align: center;
}

.footerLogoLink{
    display: inline-block;
}

.footerLogoLink:hover img{
    opacity: .8;
}

.mainContent{
    padding-bottom: 1rem;
}


/*------------Sidebar-------------*/

.sidebarNavigation h2 {
    background: var(--primary-blue);
    font-size: 1rem;
    font-weight: 600;
    margin: 20px 0 0 0;
    padding: 9px;
}

    .sidebarNavigation h2 a {
        color: #fff;
        padding: 2px;
        text-decoration: none;
    }

        .sidebarNavigation h2 a:hover {
            color: var(--primary-yellow);
            text-decoration: underline;
        }

        .sidebarNavigation h2 a:focus-visible {
            color: var(--primary-yellow);
            outline: 3px solid var(--primary-yellow);
        }


            .sidebarNav {
                list-style: none;
                padding: 0;
            }

.sidebarNav li {
    border-bottom: 1px solid var(--primary-blue);
}

    .sidebarNav li a {
        color: #000;
        display: block;
        padding: 10px 16px;
        text-decoration: none;
    }

.sidebarNav li a:hover {
    background: #f6f3f3;
    color: var(--primary-blue);
    font-weight: bold;
}

.sidebarNav li a:focus-visible {
    background: #f6f3f3;
    color: var(--primary-blue);
    font-weight: bold;
    outline: 3px solid var(--primary-blue);
}



/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------iPhone 12Pro (390px)----------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 390px) {
    footer {
        height: 470px;
    }
}


/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------iPhone XR (414px)----------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 414px) {
    footer {
        height: 470px;
    }
}

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------iPhone 14Pro Max (430px)--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 430px) {
    footer {
        height: 480px;
    }
}


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



    footer {
        height: 250px;
    }



    .socialLinks .fa-brands{
        font-size: 2rem;
    }


}

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------Small Tablet (COL-LG)----------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 992px) {

    span.fa-sizer {
        font-size: 1.875rem;
    }

    footer a {
        font-size: 1.65rem;
    }

    .footerSocialIcons a{
        width: 3rem;
    }

    .socialLinks .fa-brands {
        font-size: 2.5rem;
    }


    /*------------------------------------------------------------------------------------------------------*/
    /*-----------------------------------Sports Activity Directory (COL-LG)---------------------------------*/
    /*------------------------------------------------------------------------------------------------------*/
    
    .activityFormButtons{
        margin-top: 32px;
    }



}