/* 
 * Header Fix CSS
 * This file contains styles to:
 * 1. Move Instagram and Yelp logos to the far right in desktop view
 * 2. Align heading, social media buttons, and dropdown menu on the same line in mobile view
 */

/* Desktop view styles */
@media (min-width: 992px) {
    /* Move social icons to the far right */
    .d-none.d-lg-flex.social-icons,
    .navbar .d-none.d-lg-flex {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
    }
    
    /* For pages with social icons as nav-items (like contact.html) */
    .navbar-nav .nav-item.nav-link .fab.fa-instagram,
    .navbar-nav .nav-item.nav-link .fab.fa-yelp {
        position: relative;
        z-index: 1000;
        font-size: 2rem !important; /* Increased size for desktop view */
    }
    
    /* Move Instagram icon to the right */
    .navbar-nav .nav-item.nav-link .fab.fa-instagram {
        position: absolute;
        right: 60px;
        top: 50%;
        transform: translateY(-50%);
    }
    
    /* Move Yelp icon to the right */
    .navbar-nav .nav-item.nav-link .fab.fa-yelp {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
    }
    
    /* For pages with different structure (like about.html) */
    .navbar .instagram-icon {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
    }
    
    /* Make social media icons bigger in desktop view */
    .navbar .instagram-icon .fab.fa-instagram,
    .navbar .instagram-icon .fab.fa-yelp,
    .d-none.d-lg-flex .fab.fa-instagram,
    .d-none.d-lg-flex .fab.fa-yelp {
        font-size: 2rem !important; /* Increased size for desktop view */
    }
    
    /* When there are two icons, position the second one */
    .navbar .instagram-icon + .instagram-icon {
        right: 60px;
    }
    
    /* Adjust navbar brand to make room for social icons */
    .navbar-brand {
        margin-right: 100px;
    }
}

/* Mobile view styles */
@media (max-width: 991.98px) {
    /* Create a flex container for the navbar */
    .navbar {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    /* Adjust the brand to take less space */
    .navbar-brand {
        flex: 0 0 auto;
        width: auto;
        margin-right: 0;
    }
    
    /* Make the heading text smaller on mobile */
    .navbar-brand h1 {
        font-size: 1.2rem;
        margin: 0;
        white-space: nowrap;
    }
    
    /* Position mobile social icons in the middle */
    .mobile-social-icons {
        display: flex;
        align-items: center;
        margin-left: auto;
        margin-right: 10px;
    }
    
    /* Adjust spacing between icons */
    .mobile-social-icons a {
        margin-left: 10px;
    }
    
    /* Make the toggle button smaller */
    .navbar-toggler {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
        margin-right: 0;
    }
    
    /* Hide any desktop social icons that might be visible */
    .navbar .instagram-icon {
        display: none;
    }
}