/* Mobile Header Styles */

/* Desktop: Hide mobile header */
@media (min-width: 769px) {
    .mobile-app-header {
        display: none !important;
    }
}

/* Mobile: Show mobile header */
@media (max-width: 768px) {
    .mobile-app-header {
        display: flex !important;
    }

    /* HIDE HEADER ON MOBILE - MAXIMUM SPECIFICITY */
    body header,
    body #header,
    body .header,
    body .header-inner,
    body .breadcrumb,
    body .page-header,
    body .site-header,
    html body header,
    html body #header,
    html body .header-inner,
    .header-container,
    .top-bar,
    .navigation-bar,
    .nav-header,
    .main-header,
    .site-navigation,
    .site-navigation,
    .header-content,
    #home-content .app-store-link,
    /* Exclude our new header */
    [id*="header"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        top: -9999px !important;
        left: -9999px !important;
        z-index: -9999 !important;
    }

    /* Additional selectors for stubborn headers and navigation */
    nav:not([class*="mobile"]),
    .navbar,
    .nav-bar,
    .navigation,
    .site-nav,
    .main-nav,
    #nav,
    #navigation,
    #main-nav {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
    }

    /* HIDE ANY POTENTIAL PAGE INDICATORS OR BREADCRUMBS */
    .current-page,
    .page-indicator,
    .location-indicator,
    .breadcrumb-item.active,
    .nav-breadcrumb {
        display: none !important;
    }

    /* Hide any elements that might contain "Home" text */
    .page-title,
    .current-page-title,
    .breadcrumb-current,
    .active-page {
        display: none !important;
    }

    /* New Mobile Header Style - Based on fixes */
    .mobile-app-header {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start !important;
        padding: 20px 24px 10px 24px !important;
        margin-top: 40px !important;
        /* Space for status bar */
        width: 100%;
        box-sizing: border-box;
    }

    .brand-title {
        display: block !important;
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        color: #4b5563 !important;
        /* Zinc-600 Grey to match logo */
        margin: 0 !important;
        line-height: 1.2 !important;
    }

    /* Dark mode override for header */
    body.dark .brand-title {
        color: #ffffff !important;
    }

    /* Brand Highlight: NeuroLogic Pink */
    .brand-highlight {
        color: #ff2d55 !important;
        /* Matches the User's "Logic" pink color */
    }

    /* Exclude brand title from h1 hiding */
    h1:not(.brand-title) {
        display: none !important;
    }
}