/* Navigation: clean Swiss-style glass bar. Flat type, hairline rules, no 3D effects.
   Covers the three nav templates: .site-header .navbar, .ck-nav and nav.nav. */

/* ---------- Main template (.site-header .navbar) ---------- */
html body .site-header .navbar {
    background: rgba(255, 255, 255, .64) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -20px rgba(15, 23, 42, .18) !important;
    transition: background .3s ease, box-shadow .3s ease !important;
}
html body .site-header.scrolled .navbar {
    background: rgba(255, 255, 255, .8) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 16px 36px -22px rgba(15, 23, 42, .24) !important;
}
html body .site-header .navbar .container { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-radius: 0 !important; }

/* Logo: bare mark + wordmark */
html body .site-header .logo { gap: 10px !important; }
html body .site-header .logo-icon {
    width: auto !important; height: 32px !important; background: none !important; border: 0 !important; border-radius: 0 !important;
    padding: 0 !important; box-shadow: none !important; filter: none !important; mix-blend-mode: normal !important; object-fit: contain;
}
html body .site-header .logo-text { color: #0f172a !important; font-family: 'DM Sans', -apple-system, sans-serif !important; font-size: 17px !important; font-weight: 600 !important; letter-spacing: -.02em !important; }

/* Refer & Earn */
.nav-referral { display: inline-flex !important; align-items: center; gap: 6px; }
.nav-referral .nav-referral-icon { display: none; }
.nav-referral .nav-referral-tag {
    padding: 1px 6px; border: 1px solid #2563eb; border-radius: 4px; background: none;
    color: #2563eb !important; font-size: 10px; font-weight: 600; letter-spacing: .04em; line-height: 1.4; text-transform: uppercase;
}

@media (min-width: 992px) {
    html body .site-header .nav-links {
        gap: 28px !important; padding: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important;
    }
    html body .site-header .nav-links > li > a {
        position: relative; display: inline-flex; align-items: center; padding: 6px 0 !important; border-radius: 0 !important;
        background: none !important; box-shadow: none !important; transform: none !important;
        color: #475569 !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: -.005em; line-height: 1.2;
        transition: color .2s ease !important;
    }
    html body .site-header .nav-links > li > a::before { display: none !important; }
    /* Thin rule under the current page; grows in on hover */
    html body .site-header .nav-links > li > a::after {
        content: '' !important; display: block !important; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
        background: #2563eb !important; transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
        border-radius: 0 !important; width: auto !important; opacity: 1 !important;
    }
    html body .site-header .nav-links > li > a:hover { color: #0f172a !important; background: none !important; box-shadow: none !important; transform: none !important; }
    html body .site-header .nav-links > li > a:hover::after { transform: scaleX(1); }
    html body .site-header .nav-links > li > a.active,
    html body .site-header .nav-links > li > a[aria-current="page"] { color: #0f172a !important; background: none !important; box-shadow: none !important; transform: none !important; }
    html body .site-header .nav-links > li > a.active::after,
    html body .site-header .nav-links > li > a[aria-current="page"]::after { transform: scaleX(1); }
    html body .site-header .nav-links > li > a.nav-referral { color: #0f172a !important; }
    html body .site-header .nav-links > li > a.nav-referral::after { display: none !important; }

    /* Flat CTA */
    html body .site-header .nav-cta-btn {
        padding: 9px 16px !important; border-radius: 8px !important; border: 0 !important;
        background: #0f172a !important; color: #fff !important; font-size: 14px !important; font-weight: 500 !important;
        box-shadow: none !important; transform: none !important; filter: none !important; transition: background .2s ease !important;
    }
    html body .site-header .nav-cta-btn:hover { background: #2563eb !important; transform: none !important; box-shadow: none !important; }
    html body .site-header .nav-cta-btn:active { transform: none !important; box-shadow: none !important; }
}

@media (max-width: 991px) {
    html body .site-header .logo-icon { height: 28px !important; }
    html body .site-header .nav-toggle {
        width: 40px !important; height: 40px !important; padding: 12px 10px !important; border-radius: 8px !important;
        background: transparent !important; border: 1px solid rgba(15, 23, 42, .12) !important; box-shadow: none !important; transform: none !important;
    }
    html body .site-header .nav-links > li > a.nav-referral { color: #0f172a !important; font-weight: 600 !important; }
}

html body .site-header :is(.nav-links a, .nav-cta-btn):focus-visible { outline: 2px solid #2563eb !important; outline-offset: 3px; }

/* ---------- Article template (.ck-nav) and legacy template (nav.nav) ---------- */
html body .ck-nav a.nav-referral,
html body nav.nav .nav-links a.nav-referral { color: #0f172a !important; font-weight: 600; text-decoration: underline; text-decoration-color: #2563eb; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }

@media (prefers-reduced-motion: reduce) {
    html body .site-header .nav-links > li > a::after { transition: none !important; }
}