#masthead {
    position: relative;
    z-index: 99;
    background-color: white; color: black;
}


body.hashero masthead { background-color: transparent; color: white; }
body.hashero masthead::before { content:""; display: block;  background: linear-gradient(to top, transparent, var(--bg_blue)); width: 100%; height:calc(var(--masthead-height) + 32px);
    position: absolute; top:-16px;
    z-index: 1;}




@media (prefers-color-scheme: dark) {

    #masthead {

        color: #ffffff;
    }
    body:is(.home,.scrolled) #masthead {

    }
    .logo svg {
        fill:white;
    }
}




/*#masthead nav,
#masthead div:not(#search):not(.submenu):not(.form) {
    background: inherit;
}*/
#topbar {  display: flex; align-items: center; height: var(--masthead-height);   padding: 0 var(--section-padding);


    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0.5rem 1rem;

}


#secondary {
    grid-column: 2;
    grid-row: 1;
    display:flex; justify-content: flex-end;
}

#masthead .menuholder {
    grid-column: 2;
    grid-row: 2;
}



@media all and (min-width: 1100px) {
    #masthead:has(.breadcrumbs) #topbar {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

}

    .logo svg {display: block; width:192px; height: 70px; transition: all 0.1s ease; fill:#2f3944;}
#logo {
    position: relative;
    z-index: 1;

    grid-row: 1 / span 2; border: 1px dashed red;
}

#logo a { border-radius: 4px; display: block}
#logo a:hover svg {
    opacity: 0.666; }
#logo a:focus-visible {
    /*background: white;*/
    /* outline:2px solid var(--ttl_error); outline-offset: 2px; */ outline: 3px solid black; box-shadow: 0 0 0 6px white;
/*box-shadow: 0 0 0 3px white , 0 0 0 5px var(--ttl_error);*/
}


#masthead .menuholder { margin-left: auto;}

@media all and (max-width: 1279.98px) {
    #masthead { --section-padding: 20px; }


}
@media all and (max-width: 1199.98px) {


}
@media all and (max-width: 1099.98px) {

}
@media all and (max-width: 1023.98px) {

}
@media all and (max-width: 899.98px) {

}
@media all and (max-width: 599.98px) {
    #footer .logo { margin-top: 20px !important;}

}


#skip-link {

    position: fixed;  background:rgba(0, 0, 0,0.75); height: 100%; width: 100%;
    z-index: 999; top: 0; text-align: center; padding: var(--wrapper-margin);
}
#skip-link span.link {
background-color: var(--hover_blue); border-radius: 300px;
display: inline-block;
padding: 0.75em 1em; font-size: var(--bodytext_size); font-weight: 700;  line-height: 1; color:black;
}
#skip-link .wrapper { height: auto !important; }
#skip-link:not(:active):not(:focus) {

width: 1px !important;
height: 1px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
border: 0 !important;
white-space: nowrap !important;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
color:black;
}

#skip-link:focus {
display: block;
}