/*
 * Velominati — Frontend Admin Bar
 * Applied only when the WP admin bar is visible on the public site.
 * Keeps the brand logo sized correctly and the bar on-brand
 * without touching any of the site's own styles.
 */

/* ── Brand logo ──────────────────────────────────────────────────────── */

.velominati-adminbar-logo {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    object-fit: contain !important;
    opacity: 0.88;
    transition: opacity 0.15s;
}

#wp-admin-bar-velominati-brand > .ab-item {
    display: flex !important;
    align-items: center !important;
    padding: 0 10px !important;
}

#wp-admin-bar-velominati-brand:hover .velominati-adminbar-logo {
    opacity: 1;
}

/* ── Admin bar base ──────────────────────────────────────────────────── */

#wpadminbar {
    background: #111111;
}

#wpadminbar .ab-item,
#wpadminbar a.ab-item,
#wpadminbar .ab-icon::before,
#wpadminbar .ab-item::before {
    color: rgba(255, 255, 255, 0.55);
}

#wpadminbar .ab-top-menu > li:hover > .ab-item,
#wpadminbar .ab-top-menu > li.hover > .ab-item {
    background: #1A1A1A !important;
    color: rgba(255, 255, 255, 0.9);
}

/* ── Dropdowns ───────────────────────────────────────────────────────── */

#wpadminbar .ab-sub-wrapper,
#wpadminbar .menupop .ab-sub-wrapper {
    background: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-top: none !important;
    border-radius: 0 0 6px 6px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
    min-width: 160px !important;
    overflow: hidden !important;
}

/* User name label at the top of profile dropdown */
#wpadminbar #wp-admin-bar-user-info .ab-item {
    padding: 14px 18px 18px !important;
}

#wpadminbar #wp-admin-bar-user-info .display-name {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    display: block;
}

#wpadminbar #wp-admin-bar-user-info .username {
    display: none; /* hide the duplicate @username line */
}

/* All dropdown links */
#wpadminbar .ab-submenu .ab-item,
#wpadminbar .ab-submenu a.ab-item {
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 0.82rem !important;
    padding: 10px 18px !important;
    display: block !important;
    transition: background 0.12s, color 0.12s !important;
    border: none !important;
}

#wpadminbar .ab-submenu .ab-item:hover,
#wpadminbar .ab-submenu a.ab-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Divider before Log Out */
#wpadminbar #wp-admin-bar-logout {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-top: 4px !important;
    padding-top: 4px !important;
}

#wpadminbar #wp-admin-bar-logout > .ab-item {
    color: rgba(200, 50, 26, 0.8) !important;
}

#wpadminbar #wp-admin-bar-logout > .ab-item:hover {
    color: #e05a42 !important;
    background: rgba(200, 50, 26, 0.08) !important;
}

/* ── Count pills ─────────────────────────────────────────────────────── */

#wpadminbar #wp-admin-bar-updates .ab-label,
#wpadminbar #wp-admin-bar-comments .ab-label,
#wpadminbar #wp-admin-bar-search .ab-label {
    background: rgba(255,255,255,0.13) !important;
    color: rgba(255,255,255,0.8) !important;
    border-radius: 100px !important;
    padding: 0 7px !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    line-height: 16px !important;
    height: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 3px !important;
    vertical-align: middle !important;
}

/* ── "+ New" button — standard WP item ──────────────────────────────── */
#wpadminbar li#wp-admin-bar-new-content > .ab-item {
    margin: 0 4px !important;
}

/* Kill WP's default blue badge backgrounds */
#wpadminbar .update-plugins,
#wpadminbar .plugin-count,
#wpadminbar .comment-count {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Hide WP logo node if somehow still present */
#wp-admin-bar-wp-logo { display: none !important; }

/* ── Logged-out: Log In + Register links ─────────────────────────────── */

#wp-admin-bar-vel-login > .ab-item,
#wp-admin-bar-vel-register > .ab-item {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    padding: 0 14px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    transition: color 0.15s, background 0.15s;
}

#wp-admin-bar-vel-login > .ab-item {
    color: #e05a42 !important; /* red accent so it pops */
}

#wp-admin-bar-vel-login > .ab-item:hover,
#wp-admin-bar-vel-register > .ab-item:hover {
    color: #fff !important;
    background: #1A1A1A !important;
}

/* Mobile — WP collapses the bar for non-admins at ≤782px.
   Only force display on logged-out users (body:not(.logged-in)) so
   we don't break the WP admin bar layout for logged-in admins. */
@media screen and (max-width: 782px) {
    body:not(.logged-in) #wpadminbar {
        display: flex !important;
        min-height: 46px !important;
        /* position handled by JS scroll-watcher (same scroll-then-pin as logged-in) */
        position: absolute !important;
        top: 0 !important;
        z-index: 99999 !important;
    }

    /* Keep logged-in bar from wrapping — enforce single row */
    body.logged-in #wpadminbar .quicklinks {
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
    }
    body.logged-in #wpadminbar ul#wp-toolbar {
        flex-wrap: nowrap !important;
        white-space: nowrap;
    }

    #wp-admin-bar-vel-login,
    #wp-admin-bar-vel-register {
        display: block !important;
    }
    #wp-admin-bar-vel-login > .ab-item,
    #wp-admin-bar-vel-register > .ab-item {
        height: 46px !important;
        line-height: 46px !important;
    }
}