/* Hamburger menu icon */
.hamburger-menu {
    position: fixed;
    top: 30px;
    right: 20px; /* Matches footer padding-right on mobile (<600px) */
    width: 24px;  /* ~20% smaller than original 30px */
    height: 20px; /* ~20% smaller than original 25px */
    cursor: pointer;
    z-index: 2147483647; /* Max z-index possible to ensure it is on top */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

/* Hide hamburger menu on larger screens */
@media (min-width: 600px) {
    .hamburger-menu {
        display: none !important;
    }
}

.hamburger-menu .bar {
    width: 100%;
    height: 3px;
    background-color: white;
    margin: 0; /* Reset global div margin so bars stay inside the 25px container */
    transition: all 0.3s ease-in-out;
}

/* Make bars black on the index page (white background) */
body.body-index .hamburger-menu .bar {
    background-color: black;
}

/* Ensure bars are white when the dark overlay is open, even on the index page */
body.body-index .hamburger-menu.open .bar {
    background-color: white;
}

/* Hamburger menu animation */
.hamburger-menu.open .bar:nth-child(1) {
    transform: rotate(-45deg) translate(-4px, 4px);
}

.hamburger-menu.open .bar:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.open .bar:nth-child(3) {
    transform: rotate(45deg) translate(-4px, -4px);
}

/* Small screens < 600px: use #main-nav as overlay */
@media (max-width: 599px) {
    /* Make the nav container an overlay */
    #main-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        z-index: 10000;
    }

    #main-nav.open {
        opacity: 1;
        visibility: visible;
    }

    /* By default hide these if they aren't overridden */
    #language-switcher-container,
    #sidebar-placeholder {
        display: none;
    }

    /* When menu is open, keep language switcher fixed at top-right (its normal position) */
    #main-nav.open #language-switcher-container {
        display: flex !important;
        position: fixed;
        top: 30px;
        right: 55px; /* Clear of the hamburger icon at right:20px width:24px */
        justify-content: flex-end;
    }

    #main-nav.open #sidebar-placeholder {
        display: flex !important;
        position: static;
        width: auto;       /* Override .sidebar's width: 150px */
        text-align: center; /* Override .sidebar's text-align: right */
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    /* .sidebar-element is the actual class rendered by i18n.js */
    #main-nav.open #sidebar-placeholder .sidebar-element {
        justify-content: center;
        margin: 0;
    }

    #main-nav.open #sidebar-placeholder .sidebar-element a,
    #main-nav.open #sidebar-placeholder .sidebar-element span {
        color: white;
        font-size: 24px;
        text-decoration: none;
        text-align: center;
    }
}