.site-header {
    --brand-height: 2rem;
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: var(--sensbook-header-height);
    padding: .75rem max(1.5rem, calc((100% - 1300px) / 2));
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    gap: 1rem;
    color: #f3f4f6;
    background: #1F3864;
    border-bottom: 1px solid rgb(243 244 246 / 15%);
    box-sizing: border-box;
}
.logo {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    flex: none;
}
.logo img {
    display: block;
    width: 30px;
    flex: none;
    max-width: 100%;
    height: 30px;
    object-fit: contain;
}
.logo-name { font-family: 'Roboto', sans-serif; font-size: 20px; line-height: 1; font-weight: 700; letter-spacing: .3px; color: #fff; }
.header-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    justify-self: end;
}
.site-header .signin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--brand-height);
    min-height: var(--brand-height);
    padding: 0 1rem;
    color: #243247;
   font-size: 0.960rem;
    background: #F6C85F;
    border: none;
}
.site-header .signin-btn:hover {
    color: #243247;
    background: #f3f4f6;
}
.site-header :focus-visible, .site-sidebar :focus-visible {
    outline-color: var(--sensbook-accent);
}
.nav-toggle { display: none; min-height: 2.75rem; padding: .5rem .75rem; border: none; border-radius: var(--sensbook-radius-sm); background: transparent; color: #f3f4f6; cursor: pointer; }
.nav-links {
    display: flex;
    justify-self: center;
    align-items: center;
    flex-direction: row;
    margin: 0;
    padding: 0;

}
.nav-links ul{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-links li{
    margin: 0;
    padding: 0;
}
.nav-links a {
    display: flex;
    align-items: center;
    color: white;
    font-size: .905rem;
    font-weight: 500;
    text-decoration: none;
}
.nav-links a:hover {
    color: #F6C85F;
}
@media (max-width: 1100px) {
    .site-header .logo img { width: 36px; height: 36px; }
    .site-header .logo-name { font-size: 17px; }
}
@media (max-width: 760px) {
    .site-header .logo img { width: 34px; height: 34px; }
}
@media (max-width: 48rem) {
    :root { --sensbook-header-height: 3.75rem; }
    .site-header { min-height: 3.75rem; padding: .5rem 1.5rem; gap: 0 .75rem; grid-template-columns: minmax(0, 1fr) auto; }
    .site-header .logo { grid-column: 1; grid-row: 1; min-width: 0; }
    .site-header .logo img { min-width: 0; }
    .site-header .logo { gap: .5rem; }
    .site-header .logo-name { font-size: 1.0625rem; }
    .site-header .header-actions { grid-column: 2; grid-row: 1; gap: .5rem; }
    .site-header .header-signin { display: inline-flex; justify-content: center; width: 76px; min-height: var(--brand-height); padding: 0 .5rem; font-size: .8125rem; white-space: nowrap; }
    .site-header .header-signin-home { display: none; }
    .js .site-header .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; min-height: 36px; padding: .25rem; font-size: 1.25rem; }
    .site-header .nav-links { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; margin-top: .5rem; border-top: 1px solid rgb(243 244 246 / 20%); padding-top: .5rem; }
    .js .site-header .nav-links:not(.is-open) { display: none; }
    .site-header .nav-links ul {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .site-header .nav-links a
    {
        min-height: 44px;
        padding: .5rem .25rem;
        white-space: nowrap;
    }
}