/* Cross-site network bar — structural CSS shared across all three themes;
   only the brand variables and positioning block below differ per site. */
.network-bar {
    --nb-bg: #F5F0E8;
    --nb-accent: #AF6D04;
    --nb-accent-text: #FFFFFF;
    --nb-active: #13294B;
    --nb-muted: #9a948a;
    --nb-btn-font: 'Domine', serif;
    --nb-name-font: 'Work Sans', sans-serif;

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--network-bar-height, 44px);
    z-index: 5;
background-color: var(--nb-bg);
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    box-sizing: border-box;
}

.network-bar__inner {
    max-width: var(--container-max-width, 1200px);
    height: 100%;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.network-bar__sites {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.network-bar__sites::-webkit-scrollbar { display: none; }

.network-bar__site {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
    text-decoration: none;
    white-space: nowrap;
    font-family: var(--nb-name-font);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--nb-muted);
    transition: color 0.2s ease, opacity 0.2s ease;
}

.network-bar__icon {
    height: 20px;
    width: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Inactive sites: greyed icon, muted text, clickable */
a.network-bar__site .network-bar__icon { filter: grayscale(1); opacity: 0.5; }
a.network-bar__site:hover { color: inherit; }
a.network-bar__site:hover .network-bar__icon { filter: none; opacity: 1; }

/* Current site: full colour, not a link */
.network-bar__site.is-current { color: inherit; cursor: default; }
.network-bar__site.is-current .network-bar__icon { filter: none; opacity: 1; }

.network-bar__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.6rem;
    background-color: var(--nb-accent);
    color: var(--nb-accent-text);
    font-family: var(--nb-btn-font);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    border-radius: 50px;
    transition: filter 0.2s ease;
}

.network-bar__btn:hover { filter: brightness(1.08); }

/* Mobile: list side-scrolls; tighten the gap between the list and the button */
@media (max-width: 900px) {
    .network-bar__inner { padding: 0 1rem; gap: 0.75rem; }
    .network-bar__sites { gap: 1.25rem; }
    .network-bar__btn { padding: 0.45rem 1.1rem; font-size: 0.78rem; }
}

/* Sit below the WP admin bar when logged in (header offset accounts for this too) */
.admin-bar .network-bar { top: 32px; }