/* Shared glass navigation. Style MDUI's actual shadow panel as well as its host. */
html { scroll-padding-top: 94px; }
body { isolation: isolate; }
.custom-app-bar {
    --nav-glass: rgba(255,255,255,.64);
    background: var(--nav-glass) !important;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
}
html[data-theme-resolved="light"] .custom-app-bar { background: rgba(255,255,255,.64) !important; }
html[data-theme-resolved="dark"] .custom-app-bar { background: rgba(18,18,24,.58) !important; }
html[data-theme-resolved] #drawer {
    background: transparent !important;
    border: 0;
    z-index: 1200;
}
#drawer::part(panel) {
    background: rgba(255,255,255,.68);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border-left: 1px solid rgba(128,128,128,.2);
}
html[data-theme-resolved="dark"] #drawer::part(panel) { background: rgba(18,18,24,.64); }
#drawer::part(overlay) { background: rgba(0,0,0,.24); }
@media(max-width: 1000px) {
    .nav-links-container { display: none; }
    .mobile-menu-btn { display: inline-flex !important; }
}
@media(max-width: 600px) {
    .nav-logo { font-size: 1.05rem; gap: 8px; }
}

.nav-logo { text-decoration: none; color: inherit; }

/* MDUI list text and built-in icons use theme tokens inside shadow roots.
   Resolve them from the selected site theme, including light mode on a dark OS. */
html[data-theme-resolved="light"] #drawer {
    --drawer-ink: #111827;
    --mdui-color-on-surface: 17, 24, 39;
    --mdui-color-on-surface-variant: 55, 65, 81;
    color-scheme: light;
}
html[data-theme-resolved="dark"] #drawer {
    --drawer-ink: #f3f4f6;
    --mdui-color-on-surface: 243, 244, 246;
    --mdui-color-on-surface-variant: 209, 213, 219;
    color-scheme: dark;
}
html[data-theme-resolved] #drawer,
html[data-theme-resolved] #drawer mdui-list-item {
    color: var(--drawer-ink) !important;
}
#drawer mdui-list-item::part(container),
#drawer mdui-list-item::part(headline),
#drawer mdui-list-item::part(icon) {
    color: var(--drawer-ink);
}