.navbar-brand img {
    max-height: 60px; /* Adjust as needed */
    width: auto;
}



/* Align Logo and Menu next to each other on the left */
@media (min-width: 992px) {
    .container-header {
        display: flex; /* Switch from Grid to Flex for easier "side-by-side" */
        align-items: center; /* Keep them vertically centered */
        gap: 30px; /* This creates the exact space between logo and menu */
    }

    .container-header .container-nav {
        flex: 0 1 auto; /* Don't force it to take up all the space */
        justify-content: flex-start; /* Follow the logo immediately */
    }
   
    /* Optional: If the menu still feels too far, remove any auto margins */
    .navbar {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Align Logo and Site Title on the same line */
.navbar-brand {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px; /* Spacing between logo and text */
}

/* Ensure the title text doesn't drop below */
.navbar-brand .site-title {
    margin: 0 !important;
    line-height: 1 !important;
}

/* If you want the tagline next to the title as well */
.navbar-brand .site-description {
    margin: 0 0 0 10px !important;
    display: inline-block !important;
}

/* Ensure logo size is contained */
.navbar-brand img {
    width: auto;
    max-height: 50px; /* Adjust to fit your header height */
}

/* Change the color of the Site Tagline */
.navbar-brand .site-description {
    color: #FFFFFF !important; /* Pure White */
    opacity: 1 !important;     /* Removes any transparency */
    font-weight: 600;          /* Makes it a bit bolder */
}

/* Optional: If you want a "Gold" color to match your star logo */
.navbar-brand .site-description {
    color: #F7D700 !important; 
}

/* Move the edit icon down so it doesn't block the text */
.btn.j-edit-button {
    margin-top: 10px !important;
    z-index: 10 !important;
}

/* Ensure the menu has a higher priority */
header, .sp-megamenu-wrapper {
    z-index: 999 !important;
    position: relative;
}
/* Target the specific Joomla front-end edit button container */
div.j-edit-button, 
.btn.j-edit-button,
a.j-edit-button {
    top: 60px !important;    /* Pushes it down 60px from the top */
    right: 10px !important;  /* Keeps it 10px from the right edge */
    position: absolute !important;
    z-index: 1 !important;   /* Put it behind the menu layer */
}

/* Ensure your Menu Header stays on top of everything */
#sp-header, .sp-megamenu-wrapper, header {
    z-index: 9999 !important;
    position: relative !important;
}