/* Top navigation styling extracted from main.css */
/* TOPNAV-KEEP: preserve this block to avoid accidental deletion */
.oss-top {
 background: var(--bg-glass);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 border-bottom:1px solid rgba(255,255,255,0.06);
 box-shadow:06px18px rgba(0,0,0,0.45);
 z-index:1000; /* ensure it sits above page content */
}

/* Ensure the oss-bar inside the top uses the glass look and its items inherit readable color */
.oss-top .oss-bar,
.oss-top .oss-bar .oss-bar-item,
.oss-top .oss-bar .oss-button {
 background: transparent;
 color: var(--text-primary);
}

/* Dimmed nav items for less prominent actions */
.nav-dim {
 color: var(--nav-item-color-scrolled);
 opacity:0.75;
}

/* Slight padding for comfortable hit targets in the top area */
.oss-top .oss-bar {
 padding:8px16px;
}

/* Smaller glass effect on small screens to reduce performance cost */
@media (max-width:600px) {
 .oss-top { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
}

/* Transition for top nav when glass effect toggles */
.oss-top-transition {
 transition: background-color .28s ease, backdrop-filter .28s ease, box-shadow .28s ease, border-color .28s ease;
}

/* Slightly stronger glass when scrolled */
.oss-top.scrolled {
 background: rgba(255,255,255,0.08); /* slightly more opaque */
 backdrop-filter: blur(14px);
 -webkit-backdrop-filter: blur(14px);
 border-bottom-color: rgba(255,255,255,0.12);
 box-shadow:06px18px rgba(0,0,0,0.5);
}

/* Logo transition for top nav - prefer opacity animation over display toggling */
.oss-bar-logo-show, .oss-bar-logo-hide {
 display: inline-block !important; /* keep in flow for layout */
 vertical-align: middle;
 transition: opacity .28s ease, transform .28s ease, filter .28s ease;
 opacity:1;
}

/* Hidden state uses low opacity and slight lift */
.oss-bar-logo-hide {
 opacity:0;
 transform: translateY(-4px);
 filter: brightness(0.8);
 pointer-events: none;
}

/* When nav is scrolled, invert which logo shows */
.oss-top.scrolled .oss-bar-logo-show {
 opacity:0;
 transform: translateY(-4px);
 filter: brightness(0.8);
 pointer-events: none;
}
.oss-top.scrolled .oss-bar-logo-hide {
 opacity:1;
 transform: translateY(0);
 filter: none;
 pointer-events: auto;
}

/* Ensure logos are readable and slightly larger when scrolled */
.oss-top.scrolled .oss-bar-logo-hide, .oss-top.scrolled .oss-bar-logo-show {
 transition: opacity .28s ease, transform .28s ease, filter .28s ease;
}

/* Logo color via CSS variable so SVG fill and brand text match */
nav.oss-top {
 --logo-fill: var(--text-primary);
}

/* When scrolled, switch the variable to a contrasting colour */
nav.oss-top.scrolled {
 --logo-fill: rgba(255,255,255,0.7); /* slightly dimmed white for better contrast on glass */
}

/* Inline site logo and brand text styling */
.site-logo { display: inline-flex; align-items: center; gap: .6rem; }
.site-logo svg { width:1.6em; height:1.6em; display: block; }
.site-logo .logo-mark { fill: var(--logo-fill); transition: fill .28s ease, transform .28s ease, filter .28s ease; }
.brand-text { color: var(--logo-fill); font-weight:600; font-family: "Segoe UI", Arial, sans-serif; transition: color .28s ease; font-size:1rem; }

/* Small shadow for logo and brand text to improve contrast */
.site-logo svg {
 width:1.6em;
 height:1.6em;
 filter: drop-shadow(02px4px rgba(0,0,0,0.6));
}

.brand-text {
 color: var(--logo-fill);
 text-shadow:01px2px rgba(0,0,0,0.6);
}

/* Slightly stronger shadow when nav is scrolled (glass brighter) */
nav.oss-top.scrolled .site-logo svg {
 filter: drop-shadow(03px6px rgba(0,0,0,0.65));
}
nav.oss-top.scrolled .brand-text {
 text-shadow:02px4px rgba(0,0,0,0.65);
}

/* Navigation item color variables (left-side items) */
nav.oss-top {
 --nav-item-color: rgba(240,243,246,0.95); /* default light */
 --nav-item-color-scrolled: rgba(240,243,246,0.78); /* slightly darker when scrolled */
}

/* Darken main navigation items on the left (exclude right-aligned items and brand) */
.oss-top .oss-bar .oss-bar-item:not(.oss-right):not(.brand) {
 color: var(--nav-item-color);
 transition: color .18s ease;
}

/* When nav is scrolled, make those items slightly darker (better contrast on glass) */
.oss-top.scrolled .oss-bar .oss-bar-item:not(.oss-right):not(.brand) {
 color: var(--nav-item-color-scrolled);
}

/* Keep hover emphasised using accent color */
.oss-top .oss-bar .oss-bar-item:not(.oss-right):not(.brand):hover {
 color: var(--accent);
}

/* Site logo image sizing */
.site-logo-img {
 width:1.6em;
 height:1.6em;
 display: inline-block;
 vertical-align: middle;
 filter: drop-shadow(02px4px rgba(0,0,0,0.6));
}

/* Match menu transparency when scrolled: make scrolled background slightly stronger but keep glass look */
.oss-top.scrolled {
 background: rgba(255,255,255,0.08); /* slightly more opaque */
 backdrop-filter: blur(14px);
 -webkit-backdrop-filter: blur(14px);
 border-bottom-color: rgba(255,255,255,0.12);
 box-shadow:06px18px rgba(0,0,0,0.5);
}

/* Ensure brand text and logo get the same subtle contrast */
.oss-top.scrolled .brand-text {
 color: rgba(255,255,255,0.94);
 text-shadow:02px4px rgba(0,0,0,0.6);
}
.oss-top.scrolled .site-logo-img {
 filter: drop-shadow(03px6px rgba(0,0,0,0.65));
}

/* Dark-mode logo swapping and brand text contrast */
.theme-dark .site-logo-img {
 content: url('/img/logo-inverted.png');
}

.theme-dark .oss-top.scrolled .site-logo-img,
.oss-top.scrolled .site-logo-img {
 content: url('/img/logo-inverted.png');
}

.site-logo-img { width:1em; height:1em; object-fit:contain; }

.theme-dark .brand-text {
 color: var(--text-primary);
 text-shadow:01px2px rgba(0,0,0,0.6);
}

.oss-top.scrolled .brand-text {
 color: rgba(13,17,23,0.92);
 text-shadow: none;
}