/*
    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 custom styling rules for bootstrap on the leisure services pages.
*/

@import url('https://fonts.cdnfonts.com/css/luna-2');

:root {
    --primary-blue: #007297;
    --primary-grey: #2f2e2e;
    --outline-orange: #d16900;
    --bright-purple: #a1007d;
    --primary-green: #789904;
    --primary-orange: #e87722;
    --dull-purple: #84344e;
    --primary-link-colour: #007297;
    --primary-yellow: #FFFF00;
}



html {
    font-family: 'proxima-nova', Calibri, sans-serif;
    font-size: 16px;
    font-size: 1rem;
    position: relative;
    min-height: 100%;
}

body {
    background-color: #fbfafa;
    color: #313131;
    font-family: 'proxima-nova', Calibri, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 470px;
}

/*-------------------------------------------------------------------------------------------*/
/*----------------------------------------Typography-----------------------------------------*/
/*-------------------------------------------------------------------------------------------*/

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--primary-blue);
    font-family: 'luna', 'proxima-nova', sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1.75;
    margin-top: 1.5rem;
}

h1, .h1 {
    font-size: 1.75rem;
}

h2, .h2 {
    font-size: 1.5rem;
}

h3, .h3 {
    font-size: 1.25rem;
}

p, li, a{
    font-size: 1.375rem;
}

a {
    color: var(--primary-link-colour);
    font-weight: 600;
    word-wrap: break-word;
}

a:hover{
    color: var(--bright-purple);
}

main a:focus {
    background: #fbf3c1;
    outline: 2px solid var(--primary-orange);
}

ul, ol{
    margin-bottom: 1.5rem;
}



/*-------------------------------------------------------------------------------------------*/
/*-----------------------------------------Carousels-----------------------------------------*/
/*-------------------------------------------------------------------------------------------*/

.text-ffffff .carousel-caption h2,
.text-ffffff .carousel-caption {
    color: #fff;
}


    .text-000000 .carousel-caption h2,
    .text-000000 .carousel-caption {
        color: #000;
    }



/*-------------------------------------------------------------------------------------------*/
/*-----------------------------------------Forms---------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/

.umbraco-forms-field.dataconsent .form-check label {
    font-size: 1.25rem!important;
    line-height: 1.375rem;
}

label {
    font-size: 1.25rem;
}

/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------Navigation--------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/

.navbar {
    --bs-navbar-brand-padding-y: 0.45rem;
}

.navbar-brand {
    padding-top: var(--bs-navbar-brand-padding-y);
    padding-bottom: var(--bs-navbar-brand-padding-y);
}



    .navbar-dark {
    --bs-navbar-color: rgba(255, 255, 255, 1);
    --bs-navbar-hover-color: rgba(255, 193, 7, 1);
    --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
    --bs-navbar-active-color: #fff;
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: rgba(255, 193, 7, 1);
    --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.75);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.dropdown-menu {
    --bs-dropdown-color: #fff;
    --bs-dropdown-bg: rgba(21, 21, 21, 0.9);
    --bs-dropdown-link-color: #fff;
    --bs-dropdown-link-hover-color: #000;
    --bs-dropdown-link-hover-bg: #e9ecef;
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: #0d6efd;
    --bs-dropdown-link-disabled-color: #adb5bd;
    --bs-dropdown-header-color: #C6C9CD;
   
    color: var(--bs-dropdown-color);
    background-color: var(--bs-dropdown-bg);
}
.dropdown-item{
    
}

.navbar-brand:focus, 
.navbar-brand:hover {
    color: var(--bs-navbar-brand-hover-color);
}

/*-------------------------------------------------------------------------------------------*/
/*---------------------------------------------Cards-----------------------------------------*/
/*-------------------------------------------------------------------------------------------*/

.card-header h1,
.card-header .h1,
.card-header h2,
.card-header .h2,
.card-header h3,
.card-header .h3 {
    margin-top: .5rem;
}


/*-------------------------------------------------------------------------------------------*/
/*---------------------------------------------tables----------------------------------------*/
/*-------------------------------------------------------------------------------------------*/

table td{
    vertical-align:middle;
}


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

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

}

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

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


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

    body {
        margin-bottom: 250px;
    }

    /*-------------------------------------------------------------------------------------------*/
    /*----------------------------------------Typography-----------------------------------------*/
    /*-------------------------------------------------------------------------------------------*/

    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
        line-height: 1.75;
        margin-top: 1.5rem;
    }

    h1, .h1 {
        font-size: 2.25rem;
    }

    h2, .h2 {
        font-size: 2rem;
    }

    h3, .h3 {
        font-size: 1.375rem;
    }



    /*-------------------------------------------------------------------------------------------*/
    /*-----------------------------------------Forms (COL-MD)------------------------------------*/
    /*-------------------------------------------------------------------------------------------*/

    .umbraco-forms-field.dataconsent .form-check label {
        line-height: 1.75;
    }



    /*-------------------------------------------------------------------------------------------*/
    /*------------------------------------Cards (COL-MD)-----------------------------------------*/
    /*-------------------------------------------------------------------------------------------*/

    .card-title {
        font-size: 1.375rem;
        line-height: 1.75rem;
    }




}


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

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




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

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

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

        .alertContentContainer h2 {
            font-size: 1.375rem;
        }


    }
    /*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
    /*-------------------------------------------------------------------------- Small Desktop View (COL-XL)-----------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

    @media only screen and (min-width: 1200px) {
    }
    /*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
    /*-------------------------------------------------------------------------- Large Desktop View (COL-XXL)----------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

    @media only screen and (min-width: 1400px) {
    }
    /*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
    /*-------------------------------------------------------------------------- Large Desktop View (COL-XXXL)---------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

    @media only screen and (min-width: 1600px) {
    }
    /*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
    /*-------------------------------------------------------------------------- Large Desktop View (COL-XXXXL)--------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

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

.notVisible {
    display: none;
}