/* Shared site header for demo pages – matches the main site header 1:1 */

/* Load Inter locally (same files as the main page) */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.kib-site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(229, 231, 235, 0.6);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.kib-site-header * { box-sizing: border-box; }

.kib-site-header .kib-nav-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.kib-site-header .kib-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0f172a;
    font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
}
.kib-site-header .kib-logo-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 50%, #06b6d4 100%);
    color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 6px 14px -4px rgba(79, 70, 229, 0.5);
}
.kib-site-header .kib-logo-text {
    font-weight: 800;
    letter-spacing: -0.02em;
    font-size: 18px;
    line-height: 1.2;
}
.kib-site-header .kib-nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.kib-site-header .kib-nav-links a {
    color: #475569;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.6;
    text-decoration: none;
    transition: color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    white-space: nowrap;
}
.kib-site-header .kib-nav-links a:hover { color: #0f172a; }
.kib-site-header .kib-nav-links a.kib-current {
    color: #0f172a;
    font-weight: 600;
}

.kib-site-header .kib-nav-links a.kib-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 999px;
    background: transparent;
    color: #475569;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    border: 1px solid transparent;
    transition: color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.kib-site-header .kib-nav-links a.kib-btn:hover {
    color: #0f172a;
}

@media (max-width: 860px) {
    .kib-site-header .kib-nav-links { gap: 20px; }
    .kib-site-header .kib-nav-links a { font-size: 15px; }
}
@media (max-width: 720px) {
    .kib-site-header .kib-nav-container { height: 64px; padding: 0 16px; }
    .kib-site-header .kib-nav-links { gap: 14px; }
    .kib-site-header .kib-nav-links a:not(.kib-btn):not(.kib-current) { display: none; }
    .kib-site-header .kib-logo-text { display: none; }
}