/* ============================================================================
   HERO VISIBILITY CONTROL
   Shows hero only on search tab, hides on report, stats, and map tabs
   ============================================================================ */

/* By default, hide the hero section */
.hero {
    display: none !important;
}

/* Show hero only when search tab is active */
body.tab-search .hero {
    display: block !important;
}

/* Explicitly hide hero on other tabs */
body.tab-register .hero,
body.tab-report .hero,
body.tab-stats .hero,
body.tab-map .hero {
    display: none !important;
}

/* Alternative approach using CSS attribute selectors */
/* When search tab is active, show hero */
.tab-content#search-tab.active ~ .hero,
.hero:has(~ .tab-content#search-tab.active) {
    display: block !important;
}

/* When other tabs are active, hide hero */
.tab-content#register-tab.active ~ .hero,
.tab-content#report-tab.active ~ .hero,
.tab-content#stats-tab.active ~ .hero,
.tab-content#map-tab.active ~ .hero,
.hero:has(~ .tab-content#register-tab.active),
.hero:has(~ .tab-content#report-tab.active),
.hero:has(~ .tab-content#stats-tab.active),
.hero:has(~ .tab-content#map-tab.active) {
    display: none !important;
}

/* JavaScript-based approach fallback */
/* Add these classes via JavaScript when tabs change */
.show-hero .hero {
    display: block !important;
}

.hide-hero .hero {
    display: none !important;
}

/* ============================================================================
   END HERO VISIBILITY CONTROL
   ============================================================================ */