#secondary { display: flex; flex-direction: column; justify-content: center; }
#secondary ul { display: flex; align-items: center; }
#secondary ul li { margin-left: var(--unit); }
/*
body.searchshown #secondary ul li:not(.search),
*/
body.searchshown #secondary ul li
{ pointer-events: none;
opacity: 0;
position: fixed;}
a#closesearch,
a#showsearch { display: block; border: 2px solid var(--black); border-radius: 50%; padding: 14px;}
a#closesearch:hover,
a#showsearch:hover { background:var(--hero-blue); }
a#closesearch::before,
a#showsearch::before { display: block;width: 24px; height: 24px; content:"";
background-size: 24px 24px; background-repeat: no-repeat; background-position: center;
background-image: url('data:image/svg+xml;utf8,');
}
a#closesearch:hover::before,
a#showsearch:hover::before { background-image: url('data:image/svg+xml;utf8,'); }
a#closesearch::before,
body.searchshown a#showsearch::before {
background-image: url('data:image/svg+xml;utf8,');
}
a#closesearch:hover::before,
body.searchshown a#showsearch:hover::before { background-image: url('data:image/svg+xml;utf8,'); }
.hamburger:focus-visible,
a#closesearch:focus-visible,
a#showsearch:focus-visible { box-shadow: 0 0 0 3px white, 0 0 0 5px var(--orange); }
body.navshown .hamburger:focus-visible { box-shadow: 0 0 0 3px var(--hero-blue), 0 0 0 5px var(--orange); }
/*
body.navshown .hamburger:focus-visible,
#showmenu {display: none; }
*/
#menuholder .hamburger,
#showmenu {display: none; }
@media all and (max-width: 899px) {
body.navshown a#showsearch:focus-visible { box-shadow: 0 0 0 3px var(--hero-blue), 0 0 0 5px var(--orange); }
#menuholder .hamburger { display: block; }
#secondary ul li.cta { display: none !important;}
a#closesearch, a#showsearch { width: 46px !important; min-width: 46px !important; height: 46px !important; padding: 0 !important;
position: relative; }
.hamburger::before,
a#closesearch::before,
a#showsearch::before {
position: absolute; top: 50%; left:50%; transform: translate(-50%,-50%); }
#showmenu { display: block}
.hamburger {
display: block; cursor: pointer;
border: 2px solid var(--black); border-radius: 8px;
height: 46px; width: 50px;
position: relative;
background: none; outline: none;
}
.hamburger::before {
display: block;
width: 24px;
height: 24px;
content: "";
background-image: url('data:image/svg+xml;utf8,');
}
body.navshown #secondary .hamburger {
border: 2px solid white;
}
body.navshown #secondary .hamburger::before {
background-image: url('data:image/svg+xml;utf8,');
}
body.navshown a#showsearch {
border: 2px solid white;
}
body.navshown a#showsearch::before {
background-image: url('data:image/svg+xml;utf8,');
}
}