/*
 * Susret.app P2-04 brand layer.
 * Site-owned asset delivery and neutral navigation icon treatment only.
 * UNA markup, routes and functional semantics remain unchanged.
 */
:root {
    --sus-icon-neutral: #3D5A6B;
    --sus-icon-active: #1E3A4D;
}

.dark {
    --sus-icon-neutral: #E6E2DB;
    --sus-icon-active: #F6F2EC;
}

.dark body.bx-artificer a:not(.bx-btn) {
    color: var(--sus-text-muted);
}

.dark body.bx-artificer a:not(.bx-btn):hover,
.dark body.bx-artificer a:not(.bx-btn):focus-visible {
    color: var(--sus-text);
}

/* Replace the upstream Artificer/Social artwork at render time. The JS layer
 * also updates src so the accessible DOM and network source are canonical. */
#bx-logo {
    content: url('/template/brand/susret-logo.svg?v=p2-04-1');
}

#bx-logo-dark {
    content: url('/template/brand/susret-logo-dark.svg?v=p2-04-1');
}

#bx-mark {
    content: url('/template/brand/susret-mark.svg?v=p2-04-1');
}

#bx-mark-dark {
    content: url('/template/brand/susret-mark-dark.svg?v=p2-04-1');
}

#bx-logo,
#bx-logo-dark,
#bx-mark,
#bx-mark-dark {
    object-fit: contain;
    object-position: center;
}

#bx-logo-container > a {
    gap: 0;
}

/* P2-04 horizontal masters already contain the wordmark. */
#bx-logo-container > a::after {
    content: none !important;
}

/* Neutralize only navigation and primary entry-point icons. Semantic status
 * colors in content, safety and moderation surfaces are left untouched. */
#bx-toolbar .sys-icon,
#sys-site .sys-icon,
#bx-menu-toolbar-2-container .sys-icon,
#bx-menu-toolbar-item-account .sys-icon,
#bx-menu-toolbar-item-notifications-preview .sys-icon,
#bx-page-block-27 .sys-icon,
.susret-mobile-nav .sys-icon,
.susret-mobile-nav-icon .sys-icon {
    color: var(--sus-icon-neutral) !important;
}

#bx-toolbar a:hover .sys-icon,
#bx-toolbar a:focus-visible .sys-icon,
#sys-site a:hover .sys-icon,
#sys-site a:focus-visible .sys-icon,
#bx-menu-toolbar-2-container a:hover .sys-icon,
#bx-menu-toolbar-2-container a:focus-visible .sys-icon,
#bx-page-block-27 a:hover .sys-icon,
#bx-page-block-27 a:focus-visible .sys-icon,
.susret-mobile-nav a:hover .sys-icon,
.susret-mobile-nav a:focus-visible .sys-icon,
.susret-mobile-nav button:hover .sys-icon,
.susret-mobile-nav button:focus-visible .sys-icon {
    color: var(--sus-icon-active) !important;
}

#bx-toolbar .sys-icon-svg,
#sys-site .sys-icon-svg,
#bx-menu-toolbar-2-container .sys-icon-svg,
#bx-page-block-27 .sys-icon-svg,
.susret-mobile-nav .sys-icon-svg {
    color: currentColor !important;
    fill: currentColor;
    stroke: currentColor;
}

/* Keep the cover calm and avoid reintroducing the former multicolor gradient. */
.bx-cover-wrapper {
    background: var(--sus-brand-primary) !important;
}

.dark #sys-site > li > a:hover,
.dark #sys-site > li > a:focus-visible,
.dark #sys-site > li.bx-menu-tab-active > a,
.dark #sys-site > li.bx-menu-tab-active > a:hover,
.dark .susret-mobile-nav a:hover,
.dark .susret-mobile-nav a:focus-visible,
.dark .susret-mobile-nav button:hover,
.dark .susret-mobile-nav button:focus-visible,
.dark .susret-mobile-nav a.susret-mobile-nav-active,
.dark .susret-mobile-nav button[aria-expanded="true"] {
    color: var(--sus-text) !important;
}

@media (max-width: 1023px) {
    #bx-logo-container > a {
        min-width: 2.75rem;
    }

    #bx-mark,
    #bx-mark-dark {
        height: 2.5rem !important;
        width: 2.5rem !important;
    }
}