/* Source of truth: site-shell.js selects a visual style and provides these variables. */
.site-header[data-visual-style]{
  background:var(--shell-background)!important;
  border-bottom:1px solid color-mix(in srgb,var(--shell-accent) 38%,transparent)!important;
  color:var(--shell-foreground)!important;
}

.site-header[data-visual-style] .brand-logo{filter:var(--shell-logo-filter);}
.site-header[data-visual-style] nav a{color:var(--shell-foreground)!important;}
.site-header[data-visual-style] nav a:first-child{color:var(--shell-muted)!important;}
.site-header[data-visual-style] nav a:first-child:after{background:var(--shell-accent)!important;}
.site-header[data-visual-style] .language{color:var(--shell-accent)!important;}
.site-header[data-visual-style] .language span{color:var(--shell-muted)!important;}
.site-header[data-visual-style] nav a:hover,.site-header[data-visual-style] nav a:focus{color:var(--shell-accent)!important;}

@media (max-width:800px){
  .site-header[data-visual-style] nav{background:var(--shell-background)!important;}
}