.site-header {
    position:               fixed;
    top:                    0;
    left:                   0;
    right:                  0;
    height:                 var(--header-h);
    background:             var(--header-bg);
    border-bottom:          1px solid var(--panel-border);
    z-index:                50;
}

.site-header__inner {
    height:                 100%;
    display:                flex;
    align-items:            center;
    justify-content:        space-between;
    padding-left:           var(--container-pad-x);
    padding-right:          var(--container-pad-x);
    padding-top:            var(--header-pad-y);
    padding-bottom:         var(--header-pad-y);
}

.nav {
    display:                inline-flex;
    align-items:            center;
    gap:                    0.4rem;
}

.site-header__brandlink {
    display:                inline-flex;
    align-items:            center;
    justify-content:        center;
    padding:                var(--nav-link-pad-y) var(--nav-link-pad-x);
    text-decoration:        none;
}

.site-header__brandmark {
    /* height:                 22px;
    width:                  22px; */
    /* height:                 calc(var(--para-gap) * 2); */
    height:                 calc(var(--header-h) - var(--header-pad-y) * 2);
    user-select:            none;
    -webkit-user-drag:      none;
}

.site-header__navlink {
    position:               relative;
    display:                inline-flex;
    align-items:            center;
    padding:                var(--nav-link-pad-y) var(--nav-link-pad-x);
    color:                  rgb(255 255 255 / 0.78);
    text-decoration:        none;
}

/* Selected page: pure white */
.site-header__navlink[aria-current="page"] {
    color:                  rgb(255 255 255 / 1);
}

/* Prevent visited colouring in the header */
.site-header__navlink:visited,
.site-header__brandlink:visited {
    color:                  inherit;
}

/* Hover only on hover-capable devices (prevents sticky hover on touch) */
@media (hover: hover) and (pointer: fine) {
    .site-header__navlink:not([aria-current="page"]):hover,
    .site-header__brandlink:hover {
        color:              var(--accent);
    }
}

/* Keyboard focus */
.site-header__navlink:focus-visible,
.site-header__brandlink:focus-visible {
    color:                  var(--accent);
    outline:                none;
}

/* Selected underline for text links only */
.site-header__navlink[aria-current="page"]::after {
    content:                "";
    position:               absolute;
    left:                   var(--nav-link-pad-x);
    right:                  var(--nav-link-pad-x);
    bottom:                 calc(var(--nav-underline-gap) * -1);
    height:                 var(--nav-underline-h);
    background:             var(--accent);
    opacity:                0.85;
    border-radius:          999px;
}

/* Social icons in header (top-right) */
.site-header__social {
    display:                inline-flex;
    align-items:            center;
    gap:                    var(--social-gap);
    white-space:            nowrap;
}

.site-header__social a {
    display:                inline-flex;
    align-items:            center;
    opacity:                0.60;
    text-decoration:        none;
    color:                  inherit;
}

.site-header__social a:visited {
    color:                  inherit;
}

@media (hover: hover) and (pointer: fine) {
    .site-header__social a:hover {
        opacity:            0.95;
    }
}

.site-header__social img {
    height:                 var(--social-icon-h);
    width:                  auto;
}