body {
			font-family: Arial, sans-serif;
			max-width: 1600px; /* Content max width */
			margin: 0 auto;    /* Center content */
			padding: 0 20px 20px 20px; /* Side/bottom padding */
            /* Corrected background image path */
			background-image: url('Artwork/Background3.jpg');
			background-repeat: repeat;
			background-attachment: fixed;
			background-color: #fcfaeb; /* Fallback */
            /* Increased padding top slightly for more buffer */
            padding-top: 175px;
            position: relative;
		}

        /* --- Logo Styling --- */
        #logo-container {
            position: fixed;
            top: 15px;
            left: 20px;
            z-index: 30; /* Below search */
        }
        #logo-container img {
            max-height: 160px;
            width: auto;
            display: block;
        }

		/* --- Top Bar Styling (BACKGROUND ONLY) --- */
        #top-bar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 165px; /* Should be tall enough for logo */
            /* Corrected background image path */
			background-image: url('Artwork/Background3.jpg');
			background-repeat: repeat-x;
			background-attachment: fixed;
			background-color: #fcfaeb;
            z-index: 10; /* Low z-index for background */
        }

        /* --- Menu Panel Styling --- */
        #menu-panel {
            position: fixed;
            top: 1px;         /* Adjusted top slightly */
            right: 50px;
            z-index: 25; /* Below logo and search */
            background-color: transparent;
            box-shadow: none;
            border-radius: 5px;
            padding: 10px 25px;
            box-sizing: border-box;
        }
        #menu-panel nav ul { list-style-type: none; padding: 0; margin: 0; display: flex; gap: 30px; }
        #menu-panel nav ul li a {
            text-decoration: none;
            color: #000; /* Black text */
            font-weight: normal;
            padding: 5px 0;
            font-size: 17px;
            transition: color 0.3s ease;
            display: block;
            border-bottom: 2px solid transparent;
         }
        #menu-panel nav ul li a:hover { color: #333; }
        #menu-panel nav ul li a.active { color: #000; font-weight: bold; }

        /* --- Search Controls Styling (Search.html ONLY) --- */
        #search-controls {
            position: fixed;
            /* Corrected top positioning: 165 (bar height) - 10 (bottom space) - ~45 (est element height) = ~110 */
            top: 100px;
            left: 50%;
            transform: translateX(-50%);
            width: 60%;
            max-width: 700px;
            z-index: 35; /* HIGHEST z-index */
            display: flex;
            align-items: center;
            background-color: rgba(252,250,235,0.8);
            border-radius: 5px;
            padding: 10px 15px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            box-sizing: border-box;
        }
        #search-input {
			padding: 8px 12px; font-size: 15px; border: 1px solid #ddd; border-radius: 5px; margin-right: 15px; flex-grow: 1; min-width: 150px;
		}
		.sort-container { display: flex; align-items: center; flex-shrink: 0; }
        .sort-label { font-size: 15px; margin-right: 8px; color: #555; flex-shrink: 0; }
		#sort-select { padding: 7px 8px; font-size: 14px; border: 1px solid #ddd; border-radius: 5px; background-color: white; flex-shrink: 0; }


        /* --- Main Content Area --- */
        #results, .main-content {
             position: relative;
             z-index: 1;
        }
        .main-content {
             background-color: rgba(252, 250, 235, 0.92); padding: 30px 40px; border-radius: 8px; border: 1px solid #e0e0e0; min-height: 60vh; box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        .main-content h1 { margin-top: 0; color: #333; border-bottom: 2px solid #ccc; padding-bottom: 10px; margin-bottom: 25px; font-size: 28px; }
        .main-content p { line-height: 1.7; color: #444; margin-bottom: 18px; }
        .main-content a { color: #0056b3; text-decoration: none; }
        .main-content a:hover { text-decoration: underline; }
        .embedded-iframe-container { position: relative; overflow: hidden; width: 100%; height: 75vh; margin-top: 25px; border: 1px solid #ccc; border-radius: 5px; }
        .embedded-iframe-container iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; }
        body.page-cue-sheet .embedded-iframe-container { height: 78vh; }
        body.page-contact .embedded-iframe-container { height: 85vh; }

        /* Results Area Specifics (Search.html) */
		#results {
            display: flex; flex-direction: column; padding: 0;
        }
		.result-row { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 20px; padding: 15px; border: 1px solid #e0e0e0; border-radius: 8px; background-color: rgba(252,250,235,0.9); position: relative; box-shadow: 0 1px 3px rgba(0,0,0,0.05); overflow: hidden; }
		.artwork { width: 100px; height: 100px; object-fit: cover; margin-right: 20px; border-radius: 4px; flex-shrink: 0; margin-bottom: 10px; }
		.track-info { flex-grow: 1; min-width: 250px; margin-right: 15px; margin-bottom: 10px; }
		.track-name { font-weight: bold; font-size: 20px; margin-bottom: 4px; }
		.artist { color: #557; font-size: 15px; margin-bottom: 5px; }
		.isrc { color: #557; font-size: 14px; line-height: 1.4; }
		audio { max-width: 350px; min-width: 280px; width: auto; height: 45px; flex-shrink: 0; position: relative; z-index: 1; margin-right: 15px; margin-bottom: 10px; }
		.download-buttons { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex-shrink: 0; }
		.download-button { display: inline-block; padding: 5px; background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 3px; text-decoration: none; line-height: 0; }
		.download-button:hover { background-color: #e0e0e0; }
		.download-button img { width: 30px; height: 30px; vertical-align: middle; }
		.show-versions { padding: 6px 12px; border: 1px solid #668; background-color: #f8f8f8; color: #333; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease; margin-left: 10px; margin-bottom: 10px; flex-shrink: 0; }
        .show-versions:hover { background-color: #e8e8e8; }
        #pagination-controls { display: flex; justify-content: center; align-items: center; margin-top: 30px; margin-bottom: 30px; flex-wrap: wrap; }
        .page-link, .page-ellipsis { padding: 8px 12px; margin: 2px 3px; border: 1px solid #ccc; background-color: #f0f0f0; color: #333; text-decoration: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease; font-size: 14px; }
        .page-link:hover { background-color: #e0e0e0; }
        .page-link.active { background-color: #668; color: white; border-color: #668; cursor: default; }
        .page-link.disabled { color: #aaa; background-color: #f8f8f8; border-color: #ddd; cursor: not-allowed; }
        .page-ellipsis { border: none; background: none; cursor: default; padding: 8px 5px; }



/* --- Styles for Modal (Used in Search.html) --- */
.modal { display: none; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); }

.modal-content {
    background-color: #fcfaeb; /* Match site background color */
    margin: auto;
    padding: 0;
    border: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    width: 90%;
    max-width: 1500px; /* Increased max-width */
    max-height: 85vh;
    height: auto;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    box-sizing: border-box;
}

.modal-header-info {
    padding: 20px 25px 15px 25px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
    background-color: #fcfaeb;
    position: relative; /* Needed for absolute positioning of close button */
}
.modal-header-info h2 { margin-top: 0; margin-bottom: 5px; font-size: 24px; color: #333; }
.modal-header-info .artist { margin-bottom: 0; font-size: 14px; color: #557; line-height: 1.4; }

.modal-layout {
    display: flex;
    width: 100%;
    flex-grow: 1;
    min-height: 0;
    align-items: flex-start;
    padding: 20px 0;
    box-sizing: border-box;
    background-color: #fcfaeb;
}

.album-cover {
    flex: 0 0 500px; /* Adjusted size */
    width: 500px;
    height: 500px;
    overflow: hidden;
    padding: 10px;
    box-sizing: border-box;
    margin-left: 25px;
    margin-right: 15px;
}
.album-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}

.modal-info {
    flex: 1;
    padding: 0px 25px 0px 10px;
    overflow-y: auto;
    align-self: stretch; /* Make it take full height */
    max-height: calc(85vh - 120px); /* Adjust max-height based on header/padding */
}

/* --- Version Row Styling (Using DIVs and Flexbox) --- */
.version-row {
    display: flex;
    flex-wrap: nowrap; /* Keep items on one line on desktop */
    justify-content: space-between; /* Pushes name left and actions right */
    align-items: center; /* Vertically center items */
    margin-bottom: 15px;
    padding: 12px;
    background-color: #f9f9f9;
    border-radius: 5px;
    border: 1px solid #eee;
    gap: 15px; /* Add gap between name and actions */
}

.version-row .version-name {
    /* flex: 0 0 auto; */ /* Let it take natural width */
    font-size: 15px;
    font-weight: bold;
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px; /* Adjust max-width as needed */
    margin-right: auto; /* Helps push actions to the right */
}

.version-row .version-actions {
    display: flex;
    align-items: center; /* Align audio and buttons */
    flex-shrink: 0; /* Prevent this container from shrinking */
    gap: 15px; /* Gap between audio and download buttons */
}

.version-row audio {
    /* flex: 1 1 auto; */ /* Remove flex grow/shrink */
    max-width: 350px; /* Adjust max-width */
    min-width: 250px; /* Adjust min-width */
    height: 40px;
    /* margin-right: 15px; */ /* Use gap in parent instead */
    /* margin-bottom: 0; */ /* Remove bottom margin */
}

.version-row .download-buttons {
    display: flex; /* Already flex */
    gap: 10px; /* Keep gap */
    align-items: center; /* Keep alignment */
    /* margin-left: auto; */ /* Remove margin-left: auto */
    /* margin-bottom: 0; */ /* Remove bottom margin */
    white-space: nowrap;
}

/* Keep download button image styles */
.download-button { display: inline-block; padding: 5px; background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 3px; text-decoration: none; line-height: 0; }
.download-button:hover { background-color: #e0e0e0; }
.download-button img { width: 30px; height: 30px; vertical-align: middle; }

/* Hide version IDs that shouldn't be displayed */
.version-id, .version-row .version-id {
    display: none !important;
}

.close {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    z-index: 101;
    transition: color 0.2s ease;
    background: none; /* Ensure no background */
    border: none; /* Ensure no border */
    padding: 0; /* Ensure no padding */
}
.close:hover, .close:focus {
    color: #333;
    text-decoration: none;
}


/* --- Modal Responsiveness --- */
@media (max-height: 650px) {
    .album-cover {
        flex-basis: 180px;
        width: 180px;
        height: 180px;
    }
    .modal-content {
        max-height: 90vh;
    }
    .modal-info {
         max-height: calc(90vh - 120px); /* Adjust based on new max-height */
    }
}
@media (max-width: 1100px) {
    .album-cover {
        flex-basis: 180px;
        width: 180px;
        height: 180px;
    }
}
@media (max-width: 900px) {
    .modal-content {
        width: 95%;
    }
    .album-cover {
        flex-basis: 160px;
        width: 160px;
        height: 160px;
    }
}

/* --- Mobile Modal Layout --- */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        max-height: 90vh;
    }
    .modal-layout {
        flex-direction: column;
        align-items: center;
        padding: 15px 0;
    }
    .album-cover {
        flex-basis: auto;
        width: 80%;
        max-width: 200px;
        height: auto;
        margin: 0 auto 15px auto;
        padding: 5px;
        /* border-right: none; */ /* Removed as it's not relevant now */
    }
    .album-cover img {
        object-fit: contain;
    }
    .modal-info {
        width: 90%;
        max-height: 50vh; /* Adjust if needed */
        align-self: center;
        padding: 0 10px;
    }
    .modal-header-info h2 {
        font-size: 20px;
    }

    /* --- Version Row Mobile --- */
    .version-row {
        flex-wrap: wrap; /* Allow wrapping */
        justify-content: center; /* Center items when wrapped */
        gap: 10px; /* Reduce gap */
    }
    .version-row .version-name {
        flex: 1 1 100%; /* Take full width */
        text-align: center; /* Center name */
        margin-bottom: 5px;
        margin-right: 0; /* Reset margin */
        max-width: none; /* Remove max-width */
    }
    .version-row .version-actions {
        flex: 1 1 100%; /* Take full width */
        justify-content: center; /* Center audio and buttons */
        flex-wrap: wrap; /* Allow audio/buttons to wrap if needed */
        gap: 10px; /* Reduce gap */
    }
    .version-row audio {
        max-width: 100%; /* Full width */
        min-width: 400px; /* Adjust min-width */
        /* margin-right: 0; */ /* Handled by gap */
        /* margin-bottom: 10px; */ /* Handled by gap */
    }
    .version-row .download-buttons {
        /* width: 100%; */ /* Not needed with flex */
        /* display: flex; */ /* Already flex */
        justify-content: center;
        /* margin-left: 0; */ /* Handled by gap/parent */
    }
}
/* --- End Styles for Modal --- */





        /* --- RESPONSIVENESS --- */
        @media (max-width: 1024px) {
            #search-controls { width: 70%; top: 75px; /* Adjust top */ }
            #menu-panel { right: 30px; top: 5px; /* Adjust position */ }
            #logo-container { left: 10px; }
            #logo-container img { max-height: 100px; }
            #top-bar { height: 140px; } /* Adjust */
            body { padding-top: 150px; } /* Adjust */
        }

         @media (max-width: 768px) {
             #menu-panel { left: 50%; right: auto; transform: translateX(-50%); top: 5px; padding: 8px 15px;}
             #search-controls { width: 90%; padding: 8px 10px; top: auto; top: 80px; /* Move back to bottom? */ }
             #logo-container { top: 5px; left: 10px; }
             #logo-container img { max-height: 80px; }
             #top-bar { height: 130px; } /* Adjust */
             body { padding-top: 140px; } /* Adjust */
         }
        @media (max-width: 550px) {
             #search-controls { flex-direction: column; align-items: stretch; padding: 10px; width: 95%; top: 75px;}
             #search-input { margin-right: 0; margin-bottom: 10px; width: 100%; box-sizing: border-box;}
             .sort-container { justify-content: center; }
             #menu-panel { padding: 6px 10px; top: 5px;}
             #menu-panel nav ul { gap: 10px; }
             #logo-container img { max-height: 70px; }
              #top-bar { height: 120px; } /* Adjust */
             body { padding-top: 130px; } /* Adjust */
        }
		
		/* Style for audio players that fail to load */
        audio.audio-error {
            opacity: 0.5;
            pointer-events: none; /* Make it non-interactive */
            cursor: not-allowed;
        }
		
		
/* --- Homepage Specific Styles --- */

/* Section for featured albums */
.featured-albums {
    margin-bottom: 40px;
}

.featured-albums h2 {
    text-align: center;
    margin-bottom: 25px;
    font-size: 24px;
    color: #444;
    font-weight: normal;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

/* Album grid container */
.album-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin-bottom: 25px;
}

/* Styling for each individual album item (link) */
.album-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    overflow: hidden;
    background-color: #fff;
    box-sizing: border-box;
}

.album-link:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.album-link img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
}

/* Central Welcome Content Block */
.home-welcome-content {
    background-color: rgba(252, 250, 235, 0.9);
    padding: 30px 40px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    margin-bottom: 40px;
    min-height: 150px;
}

/* --- Responsiveness for Homepage Albums --- */
/* Breakpoint 1: Switch to 5 columns */
@media (max-width: 1250px) {
    .album-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* Breakpoint 2: Switch to 4 columns */
@media (max-width: 1000px) {
    .album-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Breakpoint 3: Switch to 3 columns */
@media (max-width: 768px) {
    .album-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
    .home-welcome-content {
        min-height: 150px;
        padding: 20px;
    }
    .featured-albums h2 {
        font-size: 20px;
    }
}

/* Breakpoint 4: Switch to 2 columns */
@media (max-width: 550px) {
    .album-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}


/* --- Hamburger Icon Styling --- */
#hamburger-icon {
    display: none; /* Hidden by default */
    position: fixed;
    top: 20px; /* Adjust position */
    right: 30px;
    z-index: 101; /* Above everything else */
    width: 35px;
    height: 30px;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    /* Simple 3-line styling */
    flex-direction: column;
    justify-content: space-around;
}

#hamburger-icon span {
    display: block;
    width: 100%;
    height: 3px; /* Thickness of lines */
    background-color: #333; /* Color of lines */
    border-radius: 3px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Optional: Animate hamburger to an 'X' when active */
#hamburger-icon.active span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}
#hamburger-icon.active span:nth-child(2) {
    opacity: 0;
}
#hamburger-icon.active span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}


/* --- Mobile Menu Styling --- */
#mobile-menu {
    display: block; /* Use block for transform hiding */
    position: fixed;
    top: 0;
    right: 0;
    width: 280px; /* Width of the slide-out menu */
    max-width: 80%; /* Limit width */
    height: 100vh; /* Full viewport height */
    background-color: #fcf0d8; /* Slightly different background */
    box-shadow: -2px 0 5px rgba(0,0,0,0.2);
    z-index: 100; /* Below hamburger, above other content */
    padding: 80px 20px 20px 20px; /* Padding (top padding to clear header) */
    box-sizing: border-box;
    overflow-y: auto; /* Allow scrolling if links exceed height */

    /* Hide off-screen by default */
    transform: translateX(100%);
    transition: transform 0.4s ease-in-out;
    visibility: hidden; /* Hide completely when off-screen */
}

#mobile-menu.open {
    transform: translateX(0); /* Slide in */
    visibility: visible;
}

#mobile-menu nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; /* Stack links vertically */
}

#mobile-menu nav ul li {
    margin-bottom: 5px; /* Space between links */
}

#mobile-menu nav ul li a {
    display: block; /* Make links take full width */
    padding: 12px 15px; /* Padding for touch targets */
    text-decoration: none;
    color: #333;
    font-size: 18px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

#mobile-menu nav ul li a:hover,
#mobile-menu nav ul li a.active { /* Optional active styling */
    background-color: rgba(0, 0, 0, 0.05);
}


/* --- Responsiveness: Show/Hide Menus --- */
@media (max-width: 768px) { /* Breakpoint where hamburger appears */
    #menu-panel {
        display: none; /* Hide desktop menu */
    }
    #hamburger-icon {
        display: flex; /* Show hamburger */
    }
    /* Optional: Adjust Search Controls position if hamburger overlaps */
     #search-controls {
        /* Maybe needs more top margin if hamburger is low? */
        /* Or adjust hamburger's top position */
    }
}

/* Prevent scrolling on body when mobile menu is open (optional) */
body.mobile-menu-active {
    overflow: hidden;
}

/* Add this block to your existing style.css */

/* --- Language Selector Styling (Dropdown and Flags) --- */

/* Container LI within the menu UL */
.language-menu-item {
    position: relative; /* Needed for the absolute positioning of the dropdown */
    display: flex; /* Use flex to align span and dropdown */
    align-items: center;
    margin-left: 30px; /* Add some space from the previous menu item */
    padding: 0; /* Reset padding */
    cursor: pointer; /* Indicate it's clickable */
    z-index: 26; /* Ensure it's clickable above other elements */
}

/* The currently selected language text/flag */
.language-menu-item .current-language {
    display: flex; /* Align flag and text */
    align-items: center;
    padding: 5px 0; /* Match menu item padding */
    font-size: 17px; /* Match menu item font size */
    font-weight: normal; /* Default weight */
    color: #000;
    transition: color 0.3s ease;
    /* Optional: Add an indicator like a small arrow */
    /* content: ' ▼'; display: inline-block; margin-left: 5px; font-size: 12px; */
}

.language-menu-item .current-language:hover {
    color: #333;
}

/* Flag icon styling */
.language-menu-item .flag-icon {
    width: 20px; /* Adjust size as needed */
    height: auto; /* Maintain aspect ratio */
    margin-right: 5px; /* Space between flag and text */
    vertical-align: middle;
    border: 1px solid #ccc; /* Optional: subtle border */
    box-shadow: 0 0 2px rgba(0,0,0,0.1); /* Optional: subtle shadow */
}

/* The dropdown UL */
.language-dropdown {
    display: none !important; /* Hidden by default */
    position: absolute;
    top: 100%; /* Position directly below the .current-language span */
    right: 0; /* Align right edge with the parent LI */
    background-color: #fcf0d8; /* Menu background or similar */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    list-style: none;
    padding: 5px 0; /* Padding inside the dropdown */
    margin: 0;
    border-radius: 4px;
    min-width: 100px; /* Ensure enough width for language names */
    z-index: 100; /* Above everything else */
    white-space: nowrap; /* Prevent text wrapping */
}

/* Dropdown list items */
.language-dropdown li {
    margin: 0; /* Remove default list item margin */
    padding: 0;
}

/* Dropdown links */
.language-dropdown li a {
    display: flex; /* Align flag and text in dropdown items */
    align-items: center;
    text-decoration: none;
    color: #333;
    padding: 8px 15px; /* Padding for touch targets */
    font-size: 16px; /* Slightly smaller than main menu */
    transition: background-color 0.2s ease, color 0.2s ease;
}

.language-dropdown li a:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: #000;
}

/* Flag icons inside the dropdown */
.language-dropdown li a img.flag-icon {
     width: 18px; /* Slightly smaller flags in dropdown */
     height: auto;
     margin-right: 8px;
     border: 1px solid #ddd; /* Subtle border for dropdown flags */
     box-shadow: none; /* Remove shadow from dropdown flags */
}

/* Style for the active language link in the dropdown (optional) */
.language-dropdown li a.active {
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.1);
}

/* Show the dropdown when the menu item is hovered or has the 'open' class (toggled by JS) */
.language-menu-item:hover .language-dropdown,
.language-menu-item.open .language-dropdown {
    display: block;
}

/* Hide mobile language items by default (shown in mobile menu) */
.mobile-lang-item {
    display: none;
}


/* --- RESPONSIVENESS --- */

/* At the breakpoint where the hamburger menu appears */
@media (max-width: 768px) {
    /* Hide desktop language dropdown menu item */
    #menu-panel nav ul .language-menu-item {
        display: none;
    }

    /* Show mobile language items in the mobile menu */
    #mobile-menu nav ul .mobile-lang-item {
         display: block; /* Or list-item */
         margin-bottom: 5px; /* Add space between mobile language links */
         padding: 0; /* Reset padding */
    }

    /* Style mobile language links */
     #mobile-menu nav ul .mobile-lang-item a {
        display: flex; /* Align flag and text */
        align-items: center;
        padding: 12px 15px; /* Match other mobile menu items */
        font-size: 18px; /* Match other mobile menu items */
        color: #333;
        text-decoration: none;
        border-radius: 4px;
     }

     #mobile-menu nav ul .mobile-lang-item a:hover {
        background-color: rgba(0, 0, 0, 0.05);
     }

     /* Style mobile language flags */
     #mobile-menu nav ul .mobile-lang-item a img.flag-icon {
         width: 20px; /* Match desktop flag size or adjust */
         height: auto;
         margin-right: 8px;
         border: none; /* Remove border in mobile menu */
         box-shadow: none;
     }

     /* Style active mobile language link */
      #mobile-menu nav ul .mobile-lang-item a.active {
          font-weight: bold;
          background-color: rgba(0, 0, 0, 0.1);
     }
}

/* --- CSS FIXES FOR LANGUAGE DROPDOWN --- */
/* Add these styles to your style.css file */

/* Ensure dropdown is visible when parent has open class */
.language-menu-item.open .language-dropdown {
    display: block !important;
}

/* Make the current language span clearly clickable */
.language-menu-item .current-language {
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.language-menu-item .current-language:hover {
    background-color: rgba(0,0,0,0.05);
}

/* Position the dropdown better */
.language-dropdown { /* This rule block exists later in the fixes */
    top: calc(100% + 5px); /* This overrides the earlier top: 100% */
    min-width: 80px; /* This overrides the earlier min-width: 100px */
    border: 1px solid #ddd; /* This overrides the earlier border */
    background-color: #fcfaeb; /* This overrides the earlier background-color */
    /* Importantly, this block does NOT set display */
}

/* Add a small down arrow indicator */
.language-menu-item .current-language::after {
    content: '▼';
    display: inline-block;
    font-size: 10px;
    margin-left: 5px;
    vertical-align: middle;
}