/* Navigation Bar Container */
.navbar-container {
    position: fixed;
    top: 10px;
    left: 0;
    width: 100%;
    z-index: 1000;
}


.navbar-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    align-content: start;
    column-gap: 10px;
    margin: auto;
}

/* Common navigation component styles */
.navbar, .language-switcher {
    display: flex;
    flex-direction: row;
    border-radius: 22px;
    background: rgba(var(--color-grey), 0.3);
    transition: all 0.2s ease-in-out;
    overflow: hidden;
    margin: 0 10px;
}

.navbar {
    grid-column: 2;
}

.language-switcher {
    grid-column: 3;
    justify-self: end;
    align-self: start;
    width: auto;
    max-width: 100px;
}

/* Navigation blocks */
.navigation-block {
    display: flex;
    justify-content: center;
    margin: 4px;
    padding: 8px 0;
    border-radius: 18px;
    width: 100px;
    transition: transition 0.2s ease-in-out;
}

/* Link styles */
.navbar a, .language-switcher a {
    text-align: center;
    font-size: 15px;
    font-style: normal;
    font-weight: 590;
    transition: color 0.15s ease;
}

/* Active/hover states */
.active-navbar-link {
    color: rgba(var(--color-light), 1);
    cursor: pointer;
}

.chosen {
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
}

.navigation-block:not(.chosen):hover {
    color: var(--color-light);
}

/* Mobile navigation styles */
@media screen and (max-width: 1000px) {
    .navbar-container {
        align-items: start;
        align-content: start;
        column-gap: 8px;
    }

    /* Base styles for expandable navigation */
    .navbar, .language-switcher {
        position: relative;
        width: auto;
        padding: 0;
    }

    /* Navbar and language switcher when not expanded */
    .navbar:not(.expanded),
    .language-switcher:not(.expanded) {
        width: auto; /* Only as wide as content */
        padding: 4px; /* No extra padding when collapsed */
    }

    .language-switcher {
        max-width: 78px; /* Keep it compact when collapsed */
    }

    /* Expanded navigation */
    .navbar.expanded, .language-switcher.expanded {
        flex-direction: column;
        align-items: stretch;
        z-index: 10;
    }

    /* Hidden navigation blocks should take no space */
    .navbar .navigation-block:not(.chosen),
    .language-switcher .navigation-block:not(.chosen) {
        position: absolute;
        top: 0; /* Position at the top */
        left: 4px; /* Aligned with container padding */
        width: 0;
        height: 0;
        margin: 0;
        padding: 0;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transform: scale(0.0);
        transform-origin: top center; /* Scale from top center */
        transition: all 0.3s ease-out; /* Smoother transition */
    }

    .navbar.expanded .navigation-block:not(.chosen),
    .language-switcher.expanded .navigation-block:not(.chosen) {
        position: static;
        transform: scale(1);
        height: auto;
    }
    /* Chosen navigation block */
    .navbar .navigation-block.chosen,
    .language-switcher .navigation-block.chosen {
        position: static; /* Keep in normal flow */
        width: auto;
        min-width: 70px; /* Minimum width */
        max-height: 36px;
        opacity: 1;
        margin: 0; /* No margin */
        padding: 8px 4px;
        pointer-events: all;
    }

    /* Expanded state */
    .navbar.expanded,
    .language-switcher.expanded {
        padding: 4px;
        flex-direction: column;
        align-items: stretch;
        z-index: 10;
    }
    /* All blocks in expanded state */
    .navbar.expanded .navigation-block,
    .language-switcher.expanded .navigation-block {
        position: static; /* Return to normal flow */
        width: auto;
        max-height: 36px;
        opacity: 1;
        margin: 4px 0; /* Add vertical spacing */
        padding: 8px 4px;
        pointer-events: all;
    }
}