/* Two separate search bars - one for desktop, one for mobile */

/* Desktop - Show desktop search bar with full width, hide mobile search bar */
@media (min-width: 768px) {
    /* Show desktop search bar (next to buttons) */
    #wo_home_search_desktop {
        display: inline-block !important;
        flex: 1 1 auto !important;
        max-width: none !important;
        margin: 0 20px !important;
        width: 25% !important;
    }
    
    #wo_home_search_desktop .search-container {
        width: 100% !important;
    }

    #wo_home_search_desktop .w-full {
        width: 100% !important;
    }
    
    #wo_home_search_desktop .navbar-form {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    #wo_home_search_desktop .form-group {
        width: 100% !important;
        margin: 0 !important;
    }
    
    #wo_home_search_desktop .inner-addon {
        width: 100% !important;
    }
    
    #wo_home_search_desktop .form-control {
        width: 100% !important;
    }
    
    /* Hide mobile search bar */
    #wo_home_search {
        display: none !important;
    }
}

/* Mobile - Hide desktop search bar, show mobile search bar below buttons */
@media (max-width: 767px) {
    /* Hide desktop search bar */
    #wo_home_search_desktop {
        display: none !important;
    }
    
    /* Show and style mobile search bar */
    /* Prevent horizontal scroll */
    .navbar-fixed-top,
    .navbar-fixed-top .header-fixed1000 {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        max-width: 100vw !important;
    }
    
    /* Extend the white header background to include search bar */
    .navbar-fixed-top,
    .navbar-fixed-top .header-fixed1000,
    .navbar-fixed-top .container-fluid {
        min-height: auto !important;
        height: auto !important;
        overflow-y: visible !important;
    }
    
    /* Prevent container from overflowing */
    .navbar .container-fluid {
        max-width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }
    
    /* Add margin to body to prevent content being hidden under fixed header */
    body {
        padding-top: 100px !important;
        overflow-x: hidden !important;
    }
    
    /* Position search bar below all header buttons with full width */
    #wo_home_search {
        width: 100% !important;
        padding: 0 15px 12px 15px !important;
        margin: 0 !important;
        clear: both !important;
        display: block !important;
        float: none !important;
        order: 999 !important;
        box-sizing: border-box !important;
    }
    
    #wo_home_search .search-container {
        width: 100%;
        display: block;
        max-width: 100%;
    }
    
    #wo_home_search .navbar-form {
        width: 100%;
        margin: 0;
        padding: 0;
        border: none;
        max-width: 100%;
    }
    
    #wo_home_search .form-group {
        width: 100%;
        margin: 0;
        max-width: 100%;
    }
    
    #wo_home_search .inner-addon {
        width: 100%;
        position: relative;
        max-width: 100%;
    }
    
    /* Better search input styling */
    #wo_home_search .mobile-search-input,
    #wo_home_search .search-input {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 15px !important;
        padding: 12px 12px 12px 42px !important;
        border-radius: 8px !important;
        border: 1px solid #e0e0e0 !important;
        background-color: #f5f5f5 !important;
        box-sizing: border-box !important;
    }
    
    #wo_home_search .mobile-search-input:focus,
    #wo_home_search .search-input:focus {
        background-color: #fff !important;
        border-color: #1877f2 !important;
        outline: none !important;
    }
    
    /* Search icon positioning - make it visible */
    #wo_home_search .glyphicon {
        position: absolute !important;
        left: -5px !important;
        top: 30% !important;
        transform: translateY(-50%) !important;
        z-index: 2 !important;
        pointer-events: none !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    #wo_home_search .glyphicon svg {
        display: block !important;
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Make container-fluid use flexbox to control order */
    .navbar .container-fluid {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        padding: 0 8px !important;
    }
    
    /* Ensure left side (hamburger + logo + nav buttons) stays on left, no wrap */
    .wow_hdr_innr_left {
        display: flex !important;
        align-items: center !important;
        order: 1 !important;
        flex: 0 0 auto !important;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
    }

    /* Hide logo text on very small screens to save space */
    .wow_hdr_innr_left .header-brand img {
        max-width: 36px !important;
        width: 36px !important;
    }

    /* Nav buttons (Home, grid) — keep compact */
    .wow_hdr_innr_left .nav.navbar-nav {
        flex-wrap: nowrap !important;
        display: flex !important;
    }

    .wow_hdr_innr_left .nav.navbar-nav > li > a {
        padding: 8px 6px !important;
        font-size: 13px !important;
    }
    
    /* Ensure header right buttons stay on same row, no wrap */
    #head_menu_rght {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
        align-items: center !important;
        order: 2 !important;
        flex: 1 1 auto !important;
        margin-left: auto !important;
        min-width: 0 !important;
    }

    /* Make each icon button compact */
    #head_menu_rght > li,
    #head_menu_rght .dropdown {
        flex-shrink: 0 !important;
    }

    #head_menu_rght > li > a,
    #head_menu_rght .dropdown > a {
        padding: 8px 6px !important;
    }

    /* Prevent the header from being taller than one row */
    .navbar-fixed-top .header-fixed1000 {
        min-height: 50px !important;
    }
}


/* ── Group/Page edit button cut-off fix ─────────────────────────────────────── */
.wo_group_profile .card.hovercard .info,
.wo_page_profile .card.hovercard .info {
    overflow: visible !important;
}
.wo_group_profile .options-buttons,
.wo_group_profile .card.hovercard .options-buttons {
    position: relative !important;
    margin: 10px 10px 0 !important;
    margin-left: auto !important;
    overflow: visible !important;
    z-index: 10;
}
.wo_group_profile .btn-glossy > a,
.wo_group_profile .btn-glossy > button {
    white-space: nowrap;
}

/* ── "Colleagues" → "Connections" sidebar label fix ─────────────────────────── */
/* The friends_btn lang key is now "Connections" via english.php */

/* ── Network page — ensure connections section is visible ───────────────────── */
.friends-nearby-container .my-connections-section {
    display: block !important;
}

/* ── Profile sidebar connections heading — prevent cut-off ──────────────────── */
.wo_page_hdng_innr {
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: unset !important;
}
.wo_page_hdng_innr a {
    white-space: nowrap;
}

/* ── Group/Page settings header — prevent button cut-off ────────────────────── */
.wo_settings_page ~ .page-margin .popular_posts_hdr,
.page-margin .popular_posts_hdr[style*="space-between"] {
    overflow: visible !important;
}