/* ═══════════════════════════════
   Liquid glass header
   Sticky floating pill shared by every page (.site-nav / .cs-nav).
   Layers: frosted backdrop, specular rim, inner glow, soft shadow.
   js/glass.js adds .lg-refract on Chromium for real edge refraction.
═══════════════════════════════ */
html { scroll-padding-top: 92px; }
body { overflow-x: clip; }

.site-nav,
.cs-nav {
    position: sticky;
    top: 12px;
    z-index: 100;
    width: calc(100% - 24px);
    max-width: 680px;
    height: auto;
    margin: 12px auto 0;
    padding: 0;
    border: 0;
    border-radius: 28px;
    isolation: isolate;
    background: rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(10px) saturate(170%) brightness(1.03);
    backdrop-filter: blur(10px) saturate(170%) brightness(1.03);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.06),
        0 10px 30px rgba(0, 0, 0, 0.10),
        0 2px 6px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s ease, background 0.3s ease;
}

/* Chromium: real refraction of whatever scrolls underneath */
.site-nav.lg-refract,
.cs-nav.lg-refract {
    -webkit-backdrop-filter: url(#lg-filter) blur(4px) saturate(170%) brightness(1.03);
    backdrop-filter: url(#lg-filter) blur(4px) saturate(170%) brightness(1.03);
}

/* Specular rim: bright on the top-left and bottom-right edges */
.site-nav::before,
.cs-nav::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.15) 32%,
        rgba(255, 255, 255, 0.05) 60%,
        rgba(255, 255, 255, 0.85) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
}

/* Inner glow and top highlight */
.site-nav::after,
.cs-nav::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.95),
        inset 0 -1px 1px rgba(255, 255, 255, 0.45),
        inset 0 0 14px 1px rgba(255, 255, 255, 0.22);
    pointer-events: none;
}

/* Page-specific nav contents sit inside the pill */
.site-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 18px;
}

.cs-nav-inner,
.nav-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 4px 20px;
    align-items: center;
}

.nav-links { justify-content: center; gap: 0 22px; width: auto; }

.nav-links a, .nav-back, .cs-back, .cs-nav-cta, .nav-center, .nav-right, .cs-nav-label {
    color: #1a1a1a;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.nav-links a,
.nav-back,
.cs-back,
.cs-nav-cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
}

@media (max-width: 640px) {
    .site-nav, .cs-nav { top: 8px; margin-top: 8px; width: calc(100% - 16px); }
    .site-nav { padding: 2px 14px; }
    .cs-nav-inner, .nav-inner { padding: 2px 16px; }
    .nav-links { gap: 0 16px; }
}

@media (prefers-reduced-transparency: reduce) {
    .site-nav, .cs-nav, .site-nav.lg-refract, .cs-nav.lg-refract {
        background: rgba(255, 255, 255, 0.92);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* ═══════════════════════════════
   Glass buttons (blog reader)
═══════════════════════════════ */
.modal-close,
.modal-nav-btn,
.mf-btn,
.glass-btn {
    position: relative;
    isolation: isolate;
    border: 0;
    border-radius: 999px;
    min-height: 40px;
    padding: 0 18px;
    color: #1a1a1a;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(10px) saturate(170%) brightness(1.03);
    backdrop-filter: blur(10px) saturate(170%) brightness(1.03);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.06),
        0 6px 18px rgba(0, 0, 0, 0.10),
        0 1px 4px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.5, 1), box-shadow 0.25s ease, background 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}

/* Specular rim */
.modal-close::before,
.modal-nav-btn::before,
.mf-btn::before,
.glass-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.15) 32%,
        rgba(255, 255, 255, 0.05) 60%,
        rgba(255, 255, 255, 0.85) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
}

/* Inner glow and top highlight */
.modal-close::after,
.modal-nav-btn::after,
.mf-btn::after,
.glass-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.95),
        inset 0 -1px 1px rgba(255, 255, 255, 0.45),
        inset 0 0 12px 1px rgba(255, 255, 255, 0.22);
    pointer-events: none;
}

.modal-close:hover,
.modal-nav-btn:hover:not(:disabled),
.mf-btn:hover:not(:disabled),
.glass-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.26);
    color: #000;
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.07),
        0 10px 24px rgba(0, 0, 0, 0.14),
        0 2px 6px rgba(0, 0, 0, 0.08);
}

.modal-close:active,
.modal-nav-btn:active:not(:disabled),
.mf-btn:active:not(:disabled),
.glass-btn:active:not(:disabled) {
    transform: scale(0.96);
}

.modal-nav-btn:disabled,
.mf-btn:disabled { opacity: 0.35; }

/* Reader bars let text scroll underneath so the glass has something to bend */
.modal-nav {
    background: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0.85) 55%, rgba(255, 255, 255, 0) 100%);
    height: 72px;
    align-items: flex-start;
    padding-top: 14px;
}

@media (max-width: 640px) {
    .modal-footer {
        background: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 0) 100%);
        padding-top: 22px;
    }
    .mf-btn { min-height: 48px; }
}

.modal-nav-counter {
    padding: 6px 12px;
    border-radius: 999px;
    color: #1a1a1a;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(10px) saturate(170%);
    backdrop-filter: blur(10px) saturate(170%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Disabled: dim the label, keep the glass itself intact */
.modal-nav-btn:disabled,
.mf-btn:disabled {
    opacity: 1;
    color: rgba(26, 26, 26, 0.38);
    text-shadow: none;
    cursor: not-allowed;
}