/* One shared header system for every Veloq page. */
:root { --veloq-header-height: 76px; }

.site-header {
    height: var(--veloq-header-height);
    font-family: 'Manrope', sans-serif;
}

.site-header .header-inner {
    height: 100%;
    min-width: 0;
    padding: 0 clamp(1.5rem, 4vw, 3rem) !important;
}

.site-header .header-brand {
    flex: 0 0 104px;
    font-size: 1.25rem !important;
    line-height: 1;
}

/* Brand treatment belongs to the shared header so it never disappears on a
   page that does not load a page-specific theme stylesheet. */
.site-header .veloq-metallic {
    display: inline-block;
    color: transparent !important;
    background: linear-gradient(112deg, #050607 0%, #2a3138 17%, #090b0d 34%, #e1e5e8 49%, #171b20 61%, #4b535b 79%, #060708 100%);
    background-size: 220% 100%;
    background-position: var(--veloq-shimmer-x, 0%) 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 1px 8px rgba(255, 255, 255, .22);
}
html.dark .site-header .veloq-metallic {
    background-image: linear-gradient(112deg, #e9edf0 0%, #ffffff 20%, #9ba4ad 42%, #ffffff 57%, #b7c0c8 76%, #f9fbfc 100%);
    text-shadow: 0 1px 11px rgba(255, 225, 237, .42);
    filter: brightness(1.12);
}

.site-header .header-navigation {
    height: 100%;
    gap: 2rem !important;
}

.site-header .header-navigation a {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 !important;
    border: 0 !important;
    white-space: nowrap;
}

.site-header .header-navigation a[aria-current='page'] { color: #111318 !important; }
.site-header .header-navigation a[aria-current='page']::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 17px;
    left: 0;
    height: 1px;
    background: currentColor;
}

.site-header .header-actions {
    flex: 0 0 285px;
    justify-content: flex-end;
    height: 100%;
    gap: 1.4rem !important;
}
.site-header .header-actions > * { flex: 0 0 auto; }
.site-header .header-actions > a { margin-left: .4rem !important; }

@media (max-width: 1023px) {
    :root { --veloq-header-height: 68px; }
    .site-header .header-brand { flex-basis: auto; }
    .site-header .header-actions { flex-basis: auto; gap: .85rem !important; }
    .site-header .header-actions > a { margin-left: 0 !important; }
}

@media (max-width: 520px) {
    .site-header .header-inner { padding: 0 1.1rem !important; }
    .site-header .header-actions { gap: .55rem !important; }
}