/* Language Switcher Styles */
.language-switcher {
    position: relative;
    margin-left: 1rem;
    display: inline-block;
    z-index: 1001; /* Ensure it's above other elements */
}

.language-dropdown {
    position: relative;
}

.language-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #8B4513;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.language-btn:hover {
    background: #7a3d11;
    border-color: rgba(255, 255, 255, 0.5);
}

.language-text {
    display: none; /* Hide text labels, show only flags */
}

.dropdown-arrow {
    transition: transform 0.3s ease;
}

/* Hide menu by default */
.language-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: white;
    border: 1px solid #e5e0da;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    display: none;
    z-index: 1002;
}

/* Show menu only when .show class is added */
.language-menu.show {
    display: block;
}

.language-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    padding-left: 1.5rem !important;
    background: transparent;
    border: none;
    color: #2a2a2a;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-align: left;
    text-decoration: none;
}

.language-option:first-child {
    border-radius: 8px 8px 0 0;
}

.language-option:last-child {
    border-radius: 0 0 8px 8px;
}

.language-option:hover {
    background: #f7f5f2;
}

.language-option.active {
    background: #8B4513;
    color: white;
}

.language-option.active:hover {
    background: #7a3d11;
}

/* Flag Icons - Fixed alignment */
.flag-icon {
    width: 24px;
    height: 18px;
    border-radius: 3px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid rgba(0,0,0,0.1);
}

/* UK Flag - Union Jack */
.flag-uk {
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30"%3E%3Crect width="60" height="30" fill="%23012169"/%3E%3Cpath d="M0,0 L60,30 M60,0 L0,30" stroke="%23fff" stroke-width="6"/%3E%3Cpath d="M0,0 L60,30 M60,0 L0,30" stroke="%23C8102E" stroke-width="4"/%3E%3Cpath d="M30,0 L30,30 M0,15 L60,15" stroke="%23fff" stroke-width="10"/%3E%3Cpath d="M30,0 L30,30 M0,15 L60,15" stroke="%23C8102E" stroke-width="6"/%3E%3C/svg%3E');
}

/* US Flag - Stars and Stripes */
.flag-us {
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30"%3E%3Crect width="60" height="30" fill="%23B22234"/%3E%3Cpath d="M0,2.3h60M0,4.6h60M0,6.9h60M0,9.2h60M0,11.5h60M0,13.8h60M0,16.1h60M0,18.4h60M0,20.7h60M0,23h60M0,25.3h60M0,27.6h60M0,29.9h60" stroke="%23fff" stroke-width="1.15"/%3E%3Crect width="24" height="15" fill="%233C3B6E"/%3E%3C/svg%3E');
}

/* French Flag - Tricolor */
.flag-fr {
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30"%3E%3Crect width="20" height="30" fill="%23002395"/%3E%3Crect x="20" width="20" height="30" fill="%23fff"/%3E%3Crect x="40" width="20" height="30" fill="%23ED2939"/%3E%3C/svg%3E');
}

/* Ensure flags are visible */
.language-btn .flag-icon,
.language-option .flag-icon {
    display: inline-block !important;
    width: 24px !important;
    height: 18px !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Remove extra margin from dropdown flags - using padding instead */

/* Mobile Responsive */
@media (max-width: 768px) {
    .language-switcher {
        margin-left: 0;
        margin-top: 115rem;
        width: 100%; /* Full width on mobile */
        position: static; /* Static position on mobile */
    }
    
    .language-btn {
        width: 100%; /* Full width button on mobile */
        justify-content: center; /* Center content */
    }
    
    .language-menu {
        width: 100%; /* Full width menu on mobile */
        position: relative; /* Relative position to prevent cutoff */
        top: 0.5rem; /* Less distance from button */
        left: 0;
        right: auto;
    }
    
    /* Ensure the menu is visible when shown on mobile */
    .language-menu.show {
        display: block;
        position: relative;
        margin-top: 0.5rem;
    }
}

/* Header specific adjustments */
header .nav-links .language-switcher {
    display: flex;
    align-items: center;
}

@media (max-width: 768px) {
    header .nav-links[data-visible="true"] {
        padding-bottom: 80px; /* Add extra padding at the bottom to ensure visibility */
        max-height: calc(100vh - 0px); /* Limit height and enable scrolling */
        overflow-y: auto;
    }
    
    header .nav-links[data-visible="true"] .language-switcher {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(139, 69, 19, 0.2);
        margin-bottom: 1rem; /* Add space at the bottom */
        position: relative;
        bottom: auto;
    }
}