/* Multi Menu Frontend Styles */

/* Base World Switcher Styles */
.world-switcher {
    display: inline-block;
    margin: 10px 0;
}

/* Dropdown Switcher */
.world-switcher-dropdown {
    position: relative;
}

.world-switcher-select {
    /* Inherits theme styles automatically */
    min-width: 150px;
    padding: 8px 12px;
    font-family: inherit;
}

/* Button Switcher */
.world-switcher-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.world-switch-button {
    /* Theme button classes are automatically added */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.world-switch-button.current {
    opacity: 0.7;
    pointer-events: none;
}

/* Toggle Switcher (2 worlds only) */
.world-switcher-toggle {
    display: inline-block;
}

.world-switch-toggle {
    /* Uses theme button styles + custom toggle styling */
    position: relative;
    min-width: 120px;
}

.world-switch-toggle::before {
    content: "🌍";
    margin-right: 8px;
}

/* Link Switcher */
.world-switcher-links {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.world-switch-link {
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.world-switch-link:hover {
    text-decoration: underline;
}

.world-switch-link.current {
    font-weight: 600;
    text-decoration: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .world-switcher-buttons {
        flex-direction: column;
        gap: 4px;
    }
    
    .world-switch-button {
        width: 100%;
        justify-content: center;
    }
    
    .world-switcher-links {
        flex-direction: column;
        gap: 8px;
    }
}

/* Theme Integration - CSS Custom Properties */
.world-switcher {
    --world-switcher-spacing: var(--wp--preset--spacing--30, 1rem);
    --world-switcher-border-radius: var(--wp--custom--button--border--radius, 4px);
}

/* Utility Classes for Common Positioning */
.world-switcher.floating-top-right {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

.world-switcher.floating-bottom-right {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

.world-switcher.header-inline {
    display: inline-flex;
    align-items: center;
    margin: 0 15px;
}