/**
 * Hide Empty Top Bar CSS
 * Hides top bar when it doesn't contain login/register content
 */

/* Hide top bar marked as empty by JavaScript */
#top-bar.hidden-empty-topbar,
.top-bar.hidden-empty-topbar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Remove spacing when top bar is hidden */
body:has(#top-bar.hidden-empty-topbar),
body:has(.top-bar.hidden-empty-topbar) {
    padding-top: 0 !important;
}

/* Fallback for browsers without :has() */
body.topbar-hidden {
    padding-top: 0 !important;
}

/* Adjust header positioning when topbar is hidden */
.hidden-empty-topbar + header,
.hidden-empty-topbar ~ header,
body:has(.hidden-empty-topbar) header {
    margin-top: 0 !important;
}

/* Mobile specific hiding */
@media (max-width: 767px) {
    /* If login/register is shown elsewhere on mobile, hide topbar */
    body.mobile-menu-has-account #top-bar,
    body.mobile-menu-has-account .top-bar {
        display: none !important;
    }
}

/* Smooth transition when hiding */
#top-bar,
.top-bar {
    transition: height 0.3s ease, opacity 0.3s ease;
}

/* When being hidden */
#top-bar:not(.hidden-empty-topbar):empty,
.top-bar:not(.hidden-empty-topbar):empty {
    opacity: 0;
    height: 0;
}

/* Common empty states to hide */
#top-bar:has(> *:empty:only-child),
.top-bar:has(> *:empty:only-child) {
    display: none !important;
}

/* Hide if only contains whitespace */
#top-bar:not(:has(*)),
.top-bar:not(:has(*)) {
    display: none !important;
}

/* Responsive hiding for different devices */
@media (max-width: 480px) {
    /* Extra small devices */
    #top-bar:not(:has(.login)):not(:has(.register)),
    .top-bar:not(:has(.login)):not(:has(.register)) {
        display: none !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    /* Small devices */
    #top-bar:not(:has(.account)),
    .top-bar:not(:has(.account)) {
        display: none !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    /* Tablets */
    #top-bar:empty,
    .top-bar:empty {
        display: none !important;
    }
}

/* Prevent layout shift */
#top-bar:not(.hidden-empty-topbar) {
    min-height: 0;
}

/* Override theme styles that might force display */
.site-header:has(+ #top-bar.hidden-empty-topbar),
.site-header:has(+ .top-bar.hidden-empty-topbar) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}