/* Center the navigation to screen width and prevent overlap */
.header_inner_left {
    /* Ensure the container with the logo takes up only as much space as it needs */
    flex: 0 1 auto !important;
    max-width: 30% !important;
}

.header_inner_right {
    /* Allow the right side (where navigation usually lives in Stockholm) to grow and center its content */
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: center !important;
}

nav.main_menu {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    display: flex !important;
    justify-content: center !important;
}

nav.main_menu ul {
    /* Center the items */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    /* Prevent shrinking below minimum required space to avoid squishing near the logo */
    flex-wrap: wrap; 
}

/* Add margin to the left of the menu if it's placed next to the logo (Stockholm theme specific adjustments might be needed based on actual HTML structure) */
/* This is a general safeguard */
.header_bottom nav.main_menu {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Fluid typography for scaling text on smaller screens */
nav.main_menu > ul > li > a {
    font-size: clamp(14px, 1.5vw, 18px) !important;
    padding: 0 15px !important; /* adjust padding instead of fixed margins */
}

@media screen and (max-width: 1024px) {
    /* Ensure no overlap on medium screens */
    .header_inner_left {
        max-width: 25% !important;
    }
    nav.main_menu > ul > li > a {
        padding: 0 10px !important;
    }
}

@media screen and (max-width: 768px) {
    nav.main_menu {
        padding: 0 10px;
    }
    nav.main_menu > ul > li > a {
        font-size: clamp(12px, 2.5vw, 16px) !important;
        padding: 0 8px !important;
    }
}