/* ---------- MENU TOGGLE BUTTON ------ */

.menu-toggle-v2{
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    text-align: right;
    padding: 0;
    
    
    text-decoration: none;
    color: white;
    display: none; /* Hidden by default */
}

/* Hide expanded nav on desktop by default */
.eic-header--expanded-nav {
    display: none;
}

/* Show mobile menu button on smaller screens */
@media (max-width: 768px) {
    .menu-toggle-v2 {
        display: block;
    }

    .eic-main-nav {
        display: none; /* Hide main nav on mobile */
    }

    /* Show expanded nav when opened on mobile */
    .eic-header--expanded-nav {
        display: block;
    }
}

/* Force hide mobile menu on desktop */
@media (min-width: 769px) {
    .eic-header--expanded-nav {
        display: none !important;
    }
}
 



.menu-toggle-items,
a.eic-header--expanded-nav--close{
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.menu-toggle-items::before, 
a.eic-header--expanded-nav--close::before{
    content: '';
    display: inline-block;
    min-width: 1em; min-height: 1em;
    background-color: var(--eic-red-950);
    --_open_icon: url('../images/icons/nav-cross--white.svg');
    mask-image: var(--_open_icon);
    mask-size: 2em;
    mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-image: var(--_open_icon);
    -webkit-mask-size: 2em;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    transition: 200ms;
}
  
  .menu-toggle-items:focus::before, 
  a.eic-header--expanded-nav--close:focus::before{
    --_open_icon: url('../images/icons/nav-cross--black.svg');

  }

  
  [aria-expanded="true"] .menu-toggle-items::before,
  a.eic-header--expanded-nav--close::before {
      transform: rotate(-45deg);
  }

/* -----------------  EXPANDED NAVIGATION ----------------- */
.eic-header--expanded-nav{
    width: 100%;
    transition: opacity 200ms;
    --_gap: 2rem;
    background-color: var(--eic-green-950);
    color: white;
    padding: 1rem 0;
    /* display is controlled by media queries above */
}
.eic-header--expanded-nav[data-state="closed"]{
    opacity: 0;
}
.eic-header--expanded-nav[data-state="open"]{
    opacity: 1;
}
.eic-header--expanded-nav--columns{
    padding-top: 0;
    padding-bottom: var(--_gap);
    display: flex;
    flex-direction: row;
    gap: var(--_gap);
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: nowrap;
}
@media (max-width: 768px) {
    .eic-header--expanded-nav--columns{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    .eic-header--expanded-nav{
        --_gap: 1.5rem;
    }
}
@media (max-width: 480px) {
    .eic-header--expanded-nav--columns{
        grid-template-columns: repeat(2, 1fr);
    }
    .eic-header--expanded-nav{
        --_gap: 1.25rem;
    }
}
@media (max-width: 320px) {
    .eic-header--expanded-nav--columns{
        grid-template-columns: 1fr;
    }
    .eic-header--expanded-nav{
        --_gap: 1rem;
    }
    .eic-header--expanded-nav--columns .eic-heading-s{
        margin-top: 0;
        margin-bottom: 1rem;
    }
}

.eic-header--expanded-nav--base-row{
    display: flex;
    justify-content: space-between;
    gap: var(--_gap);
    padding-bottom: 1rem;
}
@media (max-width: 480px) {
    .eic-header--expanded-nav--base-row{
        display: flex;
        flex-direction: column-reverse;
    }
}

.eic-header--expanded-nav--social{
    display: flex;
    gap: 0 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
@media (min-width: 768px) {
    .eic-header--expanded-nav--social{
        font-size: 1.125rem;
    }
}
.eic-header--expanded-nav--social-list{
    --social-size: 2em;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.eic-nav-sub {
    list-style: none;
    padding: 0;
    margin: 0;
}

.eic-nav-sub li {
    margin-bottom: 0.5rem;
}

.eic-nav-sub a {
    color: white;
    text-decoration: none;
}

.eic-nav-sub a:hover {
    text-decoration: underline;
}

/* Theme-aware navigation link colors for expanded nav */
.eic-header.eic-theme-main-navy .eic-nav-sub a,
.eic-header.eic-theme-red .eic-nav-sub a,
.eic-header.eic-theme-main-navy .eic-heading-s,
.eic-header.eic-theme-red .eic-heading-s 
{
    color: var(--theme-text-primary);
}

.eic-heading-s {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: white;
}

.eic-button-mobile-close {
    margin-bottom: 0;
}

/* -----------------  NAVIGATION ----------------- */

.casey-header-nav{
    width: 100%; 
    background-color: var(--casey-navy-100);
    color: var(--casey-navy-900);
}

.casey-header-nav .wrapper{
    padding: 0 1em;
    position: relative;
}

.casey-primary-navigation-social--container{
    display: flex;
    gap: 2em;
    justify-content: space-between;
    align-items: center;
}



ul.casey-primary-navigation {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    gap: 1.25rem;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: flex-start;
    transition: 200ms;
}

ul.casey-primary-navigation[aria-hidden="true"]{
    opacity: 0;
    pointer-events: none;
    cursor: default;  
}
ul.casey-primary-navigation[aria-hidden="false"]{
    opacity: 1;
}

ul.casey-primary-navigation > li{
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.25em;
    /* padding: 1em 0.25em; */
}

ul.casey-primary-navigation > li > a:not(.has-sub-pages){
    color: var(--casey-blue-800);;
    text-decoration: underline;
    font-weight: 500;
}

ul.casey-primary-navigation > li > a:not(.has-sub-pages):hover{
    text-decoration-thickness: max(3px, .1875rem, .12em);
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none;
    -webkit-text-decoration-skip: none;
    text-decoration-skip: none;
}


ul.casey-primary-navigation > li > a:focus-visible,
.casey-expanded-nav .expanded-nav-section a:focus-visible{
    outline: 3px solid transparent;
    text-decoration: none;
    color: black;
    background-color: var(--govuk-focus-colour);
    box-shadow: 0 -2px var(--govuk-focus-colour), 0 4px black;
}



/* ul.casey-primary-navigation > li > a.has-sub-pages:focus::after{
    background-color: black;
}


ul.casey-primary-navigation > li > a.main-nav-link:hover::before,
ul.casey-primary-navigation > li > a.no-link:hover::before,
ul.casey-primary-navigation > li.current_page > a.main-nav-link::before{
    content: '';
    width: 100%;
    height: 5px;
    background-color: white;
    position: absolute;
    bottom: 0;
    left: 0;
}
 */


ul.casey-primary-navigation > li > a.has-sub-pages{
    display: block;
    width: 1em; height: 1em;
    --_chevron: url('../images/icons/nav-chevron--white.svg');  
    mask-image: var(--_chevron);
    mask-size: 1em;
    mask-repeat: no-repeat;
    mask-position: cover;
    background-color: var(--casey-blue-700);
    rotate: 270deg;
}

ul.casey-primary-navigation > li > a.has-sub-pages:focus-visible{
    --_chevron: url('../images/icons/nav-chevron--white.svg');  
    mask-image: var(--_chevron);
    mask-size: 1em;
    mask-repeat: no-repeat;
    mask-position: cover;
    outline: 3px solid transparent;
    background-color: #ffdd00;
    box-shadow: none;
}








.casey-header-lower > .wrapper{
    padding-block: 0;
}



.casey-header--expanded-nav{
    /* padding-block: 1rem; */
    width: 100%;
    transition: opacity 200ms;

    --_gap: 2rem;

}
.casey-header--expanded-nav[data-state="closed"]{
    opacity: 0;
}
.casey-header--expanded-nav[data-state="open"]{
    opacity: 1;
}


.casey-header--expanded-nav--columns{
    padding-top: 0;
    padding-bottom: var(--_gap);
    display: flex;
    flex-direction: row;
    gap: var(--_gap);
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: nowrap;
}

@media (max-width: 768px) {
    .casey-header--expanded-nav--columns{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    .casey-header--expanded-nav{
        --_gap: 1.5rem;
    }
}
@media (max-width: 480px) {
    .casey-header--expanded-nav--columns{
        grid-template-columns: repeat(2, 1fr);
    }
    .casey-header--expanded-nav{
        --_gap: 1.25rem;
    }

}
@media (max-width: 320px) {
    .casey-header--expanded-nav--columns{
        grid-template-columns: 1fr;
    }
    .casey-header--expanded-nav{
        --_gap: 1rem;
    }
    .casey-header--expanded-nav--columns .casey-heading-s{
        margin-top: 0;
        margin-bottom: 1rem;
    }


}




ul.casey-nav-sub{
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

ul.casey-nav-sub li{
    margin-block: 0.5em;
}



ul.casey-nav-sub a {
    color: var(--govuk-link-colour);
}

ul.casey-nav-suba:visited {
    color: unset;
}


#expanded-navigation{
    scroll-behavior: unset;
    scroll-padding-top: 150px;
} 
 


a.eic-header--expanded-nav--close { 
    

    text-decoration: none;
    color: var(--eic-green-950);
    cursor: pointer;
    
    

a.eic-header--expanded-nav--close:visited{
    color: white;
}

a.eic-header--expanded-nav--close:hover{
    background-color: rgb(var(--clr-navy-rgb));
}

a.eic-header--expanded-nav--close:focus{
    background-color: #ffdd00;
    color: #0b0c0c;
    box-shadow: unset;
    border-color: #0b0c0c;
}




@media (max-width: 640px) {
    .expanded-nav-container{
        grid-template-columns: repeat(2, auto);
    }
    .expanded-nav-container .expanded-nav-section .heading {
        font-size: 1.1rem;
    }
}
@media (max-width: 320px) {
    .expanded-nav-container{
        grid-template-columns: repeat(1, auto);
    }
}





.casey-header--expanded-nav--base-row{
    display: flex;
    justify-content: space-between;
    gap: var(--_gap);
    padding-bottom: 1rem
}

@media (max-width: 480px) {
    .casey-header--expanded-nav--base-row{
        display: flex;
        flex-direction: column-reverse;
    }
}







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


.casey-header--expanded-nav--social{
    display: flex;
    gap: 0 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}


@media (min-width: 768px) {
    .casey-header--expanded-nav--social{
        font-size: 1.125rem;
    }
}

.casey-header--expanded-nav--social-list{
    --social-size: 2em;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    flex-wrap: wrap;
}


a.social-icon{
    display: flex;
    gap: 0.25rem;
    align-items: center;
    flex-wrap: nowrap;
}


.social-icon:hover > .svg-social,
.social-icon:focus > .svg-social{
    background-color: rgb(var(--clr-navy-rgb));
}


.svg-social{
    mask-image: var(--_social_icon_svg);
    -webkit-mask-image: var(--_social_icon_svg);
    mask-position: center;
    mask-size: calc( (var(--social-size) / 1.33) );
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: calc( (var(--social-size) / 1.33) );
    -webkit-mask-repeat: no-repeat;
    width: var(--social-size); 
    height: var(--social-size);
    display: block;
    background-color: var(--govuk-link-colour);
}
}