/* ----------- HEADER ------------- */


.csprp-header{
    background-color: var(--csprp-darkblue-900);
}

.csprp-header-upper .wrapper{
    padding-block: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}
.csprp-header-logo a{
    transition: 200ms all;
    display: block;
}


.csprp-header-logo a:focus-visible{
    background: transparent;
    box-shadow: 0 0 0px 3px black;
    outline: 3px solid var(--govuk-focus-colour);
    outline-offset: 3px;
}

.csprp-header-logo-svg{
    display: block;
    width: 25rem;
    transition: width 200ms ease-in-out;
}

.csprp-header-main-buttons nav{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 1rem;
}


@media (max-width: 960px) {
    .csprp-header-logo-svg{
        width: 20rem;
    }
}
@media (max-width: 840px) {
    .csprp-header-logo-svg{
        width: 16rem;
    }
}

@media (max-width: 480px) {
    .csprp-header-logo-svg{
        width: 12rem;
    }
    .csprp-header-upper .wrapper{
        /* flex-direction: column; */
        align-items: flex-start;
        gap: 0.5rem;
    }
}




/* ----------- PRIMARY NAV BUTTONS ------------- */


.csprp-header-main-buttons nav .csprp-button a{
    height: 100%;
}

button#nav-topics,
button#nav-topics::after,
button#nav-menu,
button#nav-menu::after
{
    transition: 100ms all;
}

button#nav-topics[aria-expanded="true"]{
    background-color: var(--csprp-blue-core);
    color: var(--csprp-blue-950) !important;
}
button#nav-topics[aria-expanded="true"]::after{
    rotate: 270deg;
    background-color: var(--csprp-blue-950);

}

button#nav-menu[aria-expanded="true"]{
    background-color: var(--csprp-green-core);
    color: var(--csprp-green-950) !important;
}
button#nav-menu[aria-expanded="true"]::after{
    --_button-icon: url("../images/icons/button-icons/chevron-right-dotted.svg");
    rotate: 270deg;
    background-color: var(--csprp-green-950);
}


@media (max-width: 960px) {
    .csprp-header-main-buttons nav{
        gap: 0.75rem;

    }
    .csprp-header-main-buttons nav button.csprp-button,
    .csprp-header-main-buttons nav .csprp-button a{
        padding-inline: 1.5rem;
    }
}


/* search */
.csprp-button a[href="/?s="]{
    min-height: 2.6rem;
}

/* ------------ SUB NAV TOPICS --------- */

@media (max-width: 960px) {
    .csprp-header-lower-topics .csprp-header-topics-cards{
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}




/* ------------ SUB NAV MENU --------- */

.csprp-header-lower .wrapper{
    padding-block: 1rem;
}


/* Columns  */

.csprp-submenu-columns{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    color: white;
}

.csprp-submenu-col{
    border-left: 3px solid rgb(122, 190, 149, 0.3);
    padding-left: 1.5rem;
    height: fit-content;
}

@media (max-width: 840px) {
    .csprp-submenu-columns{
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}
@media (max-width: 360px) {
    .csprp-submenu-columns{
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}


/* Headings */

.csprp-submenu-col .csprp-heading-s{
    margin-top: 0;
    color: var(--csprp-green-core);
}

.csprp-submenu-col .csprp-heading-s a{
    text-decoration: none;
    color: var(--csprp-green-core);
}
.csprp-submenu-col .csprp-heading-s a:hover{
    text-decoration: underline;
}

/* List */

.csprp-submenu-col ul,
.csprp-submenu-col li{
    padding: 0;
    margin: 0;
    font-size: 1rem;
    list-style: none;
}

.csprp-submenu-col li{
    margin-block: 0.5em;
}

.csprp-submenu-col ul li a{
    color: white; 
    text-decoration: none;
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
}
.csprp-submenu-col ul li a:hover{
    text-decoration: underline;
}

.csprp-submenu-col ul li a::after{
    content: '';
    display: block;
    width: 0.75rem; height: 0.75rem;
    background-color: white; 
    --_chevron-icon: url('../images/icons/button-icons/chevron-right.svg');
    mask-image: var(--_chevron-icon);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    -webkit-mask-image: var(--_chevron-icon);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
}


@media (min-width: 841px) and (max-width: 960px) {
    .csprp-submenu-col ul li a{
        width: 100%;
        justify-content: space-between;
    }
}






/* all submenu buttons */

.csprp-submenu-col a:focus-visible{
    color: black;
}
.csprp-submenu-col ul li a:focus-visible::after{
    background-color: black; 
}

/* concerned button */

/* .csprp-submenu-col a[href*="concerned-about-a-child"] {
    background-color: var(--csprp-darkpink-core);
    padding: 1rem;
    border-radius: 0.5rem;
}
.csprp-submenu-col a[href*="concerned-about-a-child"]:focus-visible {
    color: white;
    box-shadow: 0 0 0px 3px black;
    outline: 3px solid var(--govuk-focus-colour);
    outline-offset: 3px;
} */


.csprp-submenu-concerned-container{
    padding-top: 0.25rem;
    padding-bottom: 0.5rem;
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 840px) {
    .csprp-submenu-concerned-container{
        padding-top: 1rem;
        padding-bottom: 0.25rem;
        justify-content: flex-start;
    }

}
/* 
a.csprp-submenu-concerned-link {
    background-color: var(--csprp-darkpink-core);
    padding: 1rem;
    border-radius: 0.5rem;
    color: white; 
    text-decoration: none;
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
}

a.csprp-submenu-concerned-link::after{
    content: '';
    display: block;
    width: 0.75rem; height: 0.75rem;
    background-color: white; 
    --_chevron-icon: url('../images/icons/button-icons/chevron-right.svg');
    mask-image: var(--_chevron-icon);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    -webkit-mask-image: var(--_chevron-icon);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
}

a.csprp-submenu-concerned-link:hover{
    text-decoration: underline;
    color: white;
}

a.csprp-submenu-concerned-link:focus-visible {
    color: white;
    box-shadow: 0 0 0px 3px black;
    outline: 3px solid var(--govuk-focus-colour);
    outline-offset: 3px;
    background-color: var(--csprp-darkpink-core);
} */


/* ----------- SOCIAL MEDIA ------------- */


.csprp-submenu-col--social{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
/* 
.csprp-header-social-media-container{
    display: flex;
    gap: 2rem;
    margin-top: 1rem;
} */

a.csprp-social-media-link{
    display: flex;
    align-items: center;
    gap: 0.5em;
    color: var(--csprp-white);
    text-decoration: none;
}

a.csprp-social-media-link:hover{
    color: var(--csprp-white);
    text-decoration: underline;
}

a.csprp-social-media-link::before{
    content: '';
    display: block;
    width: 1.5em;
    height: 1.5em;
    background-color: var(--csprp-green-core);
    mask-image: var(--_social-icon);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    -webkit-mask-image: var(--_social-icon);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
}

a.csprp-social-media-link--youtube{
    --_social-icon: url('../images/icons/social/youtube.svg');
}
a.csprp-social-media-link--linkedin{
    --_social-icon: url('../images/icons/social/linkedin.svg');
}
a.csprp-social-media-link--newsletter{
    --_social-icon: url('../images/icons/social/newsletter.svg');
}

a.csprp-social-media-link::after{
    content: '';
    display: block;
    width: 0.75em;
    height: 0.75em;
    background-color: var(--csprp-white);
    --ext-icon: url('../images/icons/button-icons/ext.svg');
    mask-image: var(--ext-icon);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    -webkit-mask-image: var(--ext-icon);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
}

a.csprp-social-media-link:focus-visible{
    color: black;
}
a.csprp-social-media-link:focus-visible::before,
a.csprp-social-media-link:focus-visible::after{
    background-color: black;
}





/* ----------- MOBILE MENU ------------- */
/* here we remove the top level 'learning hub topics' and search buttons so only 'menu' remains on small screen sizes, but we add these back into the main 'menu' dropdown area */


@media (max-width: 480px) {   
    .csprp-header-main-buttons #nav-topics,
    .csprp-header-main-buttons #nav-search{
        display: none;
    }
}

.csprp-header-lower #mobile-only-topics{
    display: none;
    margin-bottom: 1rem;
}

@media (max-width: 480px) {   
    .csprp-header-lower #mobile-only-topics{
        display: block;
    }
    #mobile-only-topics a.csprp-link-card{
        height: 100%;
    }
}


#mobile-only-topics [class*="csprp-heading"]{
    color: var(--csprp-blue-core);
}
#mobile-only-topics .csprp-header-topics-cards{
    gap: 1rem;
}
#mobile-only-topics .csprp-header-topics-cards a.csprp-link-card-blue .csprp-link-card--heading{
    color: white;
}

#mobile-only-topics .csprp-header-topics-cards .csprp-link-card--excerpt{
    display: none;
}

@media (max-width: 480px) {   
    .csprp-submenu-col{
        border-left: 0px solid transparent;
        padding-left: 0;
        padding-right: 1rem;
    }
    .csprp-submenu-col ul li a::after{
        display: none;
    }
}

.csprp-header-lower #mobile-only-search{
    display: none;
}
@media (max-width: 480px) {
    .csprp-header-lower #mobile-only-search{
        display: block;
    }
    .csprp-submenu-concerned-container{
        gap: 1rem;
        flex-wrap: wrap;
    }
}



/* ----------- HEROS ------------- */

.csprp-hero-container{
    padding-block: 4rem;
}

.csprp-breadcrumb-hero-container{
    padding-block: 1rem;
}

.csprp-topic-hero-container{
    padding-block: 4rem;
}


.csprp-topic-hero-container .csprp-body-l{
    margin-bottom: 0;
}



.csprp-hero-container-secondary{
    padding: 1rem 0 2rem 0;
}



/* ----------- BREADCRUMBS ------------- */

.breadcrumb{
    margin-top: 0rem;
    position: relative;
}



.container-breadcrumb{
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.breadcrumb-separator{
    display: block;
    width: 1rem; height: 1rem;
    background-color: var(--csprp-darkblue-core);
    --_breadcrumb-icon: url('https://api.iconify.design/akar-icons:triangle-right-fill.svg');
    mask-image: var(--_breadcrumb-icon);
    mask-repeat: no-repeat;
    mask-size: cover;
    mask-position: center;
    -webkit-mask-image: var(--_breadcrumb-icon);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    -webkit-mask-position: center;
}

.breadcrumb a{
    color: var(--csprp-blue-hyperlink);
}

.breadcrumb a:hover{
    color: var(--csprp-blue-hover);
}
.breadcrumb a:focus{
    color: black;
}






/* colours */

.csprp-bg-orange-core .breadcrumb-separator{
    background-color: var(--csprp-orange-950);
}
.csprp-bg-green-core .breadcrumb-separator{
    background-color: var(--csprp-green-950);
}
.csprp-bg-pink-core .breadcrumb-separator{
    background-color: var(--csprp-pink-950);
}
.csprp-bg-yellow-core .breadcrumb-separator{
    background-color: var(--csprp-yellow-950);
}
.csprp-bg-blue-core .breadcrumb-separator{
    background-color: var(--csprp-blue-950);
}




/* ----------- SITEWIDE BANNER ------------- */

.csprp-sitewidebanner{
    padding-block: 0.5rem;
}

.csprp-sitewidebanner a:active{
    color: inherit;
}
.csprp-sitewidebanner a:focus{
    color: inherit;
}