/**
 * Polyglot AI - Divi 5 (Theme Builder) Styles
 * Only loaded when Divi Theme Builder is detected
 * Uses .et_pb_menu, .et-l--header, .et-l--footer, [class*="_tb_"] patterns
 */

/* ==========================================================================
   CSS Custom Properties - Centralized values for consistency
   ========================================================================== */
:root {
    --polyglot-bg-white: #fff;
    --polyglot-bg-hover: #f5f5f5;
    --polyglot-bg-current: #f0f7ff;
    --polyglot-text-color: #333;
    --polyglot-border-color: #ddd;
    --polyglot-hover-overlay: rgba(0, 0, 0, 0.05);
    --polyglot-z-dropdown: 999999;
    --polyglot-z-floating: 99999999;
}

/* ==========================================================================
   Divi 5 Theme Builder - Base Styles
   ========================================================================== */

/* Menu Dropdown Toggle */

.et-menu .polyglot-dropdown-toggle,
.et_pb_menu .polyglot-dropdown-toggle {
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    font-size: inherit !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    border-radius: 4px !important;
}

.et-menu .polyglot-dropdown-toggle:hover,
.et_pb_menu .polyglot-dropdown-toggle:hover {
    background: var(--polyglot-hover-overlay) !important;
}

/* ==========================================================================
   Dropdown Menu Styling - Unified for all Divi contexts
   ========================================================================== */

.et-menu .polyglot-dropdown-menu,
.et_pb_menu .polyglot-dropdown-menu,
.et_pb_menu .nav li ul.polyglot-dropdown-menu,
.et_pb_menu .nav li ul.polyglot-dropdown-menu:hover,
[class*="et_pb_menu"] .polyglot-dropdown-menu,
.et-l .polyglot-dropdown-menu,
.et-l--header .polyglot-dropdown-menu,
.divi-5 .polyglot-dropdown-menu,
.et-db #divi-5 .polyglot-dropdown-menu,
body[class*="divi-5"] .polyglot-dropdown-menu,
.divi-engine .polyglot-dropdown-menu {
    min-width: 160px !important;
    background: var(--polyglot-bg-white) !important;
    border: 1px solid var(--polyglot-border-color) !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    padding: 4px 0 !important;
    z-index: var(--polyglot-z-dropdown) !important;
} 

/* Override Divi CSS custom properties */

.et-l .polyglot-dropdown-menu,
.et-l .polyglot-dropdown-menu * {
    --primary-color: transparent;
    --accent-color: transparent;
    --menu-link-color-hover-bg: var(--polyglot-bg-hover);
}

/* Dropdown list item hover */

.et_pb_menu .polyglot-dropdown-menu li a:hover,
[class*="et_pb_menu"] .polyglot-dropdown-menu li a:hover,
[class*="divi_menu"] .polyglot-dropdown-menu li a:hover,
.et_pb_module .polyglot-dropdown-menu li a:hover,
.et-l .polyglot-dropdown-menu li a:hover,
.et-l--header .polyglot-dropdown-menu li a:hover,
.divi-5 .polyglot-dropdown-menu li a:hover,
.divi-5 .polyglot-dropdown-menu > li > a:hover,
body[class*="divi-5"] .polyglot-dropdown-menu li a:hover,
body[class*="divi-5"] .polyglot-dropdown-menu > li > a:hover,
.divi-engine .polyglot-dropdown-menu li a:hover {
    background: var(--polyglot-bg-hover) !important;
    color: var(--polyglot-text-color) !important;
}

/* Current language item */

.et_pb_menu .polyglot-dropdown-menu li.polyglot-current,
.et_pb_menu .nav .polyglot-dropdown-menu li.polyglot-current,
[class*="et_pb_menu"] .polyglot-dropdown-menu li.polyglot-current,
.divi-5 .polyglot-dropdown-menu li.polyglot-current,
.et-db #divi-5 .polyglot-dropdown-menu li.polyglot-current,
body[class*="divi-5"] .polyglot-dropdown-menu li.polyglot-current,
.divi-engine .polyglot-dropdown-menu li.polyglot-current {
    background: var(--polyglot-bg-current) !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ==========================================================================
   Theme Builder Header & Footer - Shared Styles
   ========================================================================== */

/* Menu switcher container - Header & Footer */
.footer-widget .polyglot-menu-switcher,
.et-menu.nav .polyglot-menu-switcher {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: auto !important;
    max-width: max-content !important;
    flex: none !important;
    height: auto !important;
    line-height: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   Text List Style - Header & Footer
   ========================================================================== */

.et-menu.nav .polyglot-text-list {
    display: inline-flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    max-width: max-content !important;
    height: auto !important;
    position: static !important;
    transform: none !important;
    line-height: inherit !important;
}

/* Override Divi Theme Builder menu hover on text list */
[class*="et_pb_menu"][class*="_tb_header"] .nav li ul.polyglot-text-list:hover
{
    background-color: transparent !important;
    background: transparent !important;
}

/* Text list links */
.footer-widget .polyglot-text-list li a,
.et-menu.nav .polyglot-text-list li a {
    display: inline;
    vertical-align: top;
    opacity: 1;
    color: inherit;
    font: inherit;
    padding: 0 2px;
    background: transparent !important;
}

/* Current language - text list */
.polyglot-text-list li.polyglot-current a {
    font-weight: 800 !important;
}

/* ==========================================================================
   Flags List Style - Header & Footer
   ========================================================================== */

.et-l--header .polyglot-flags-list,
.et-l--footer .polyglot-flags-list,
.et_pb_menu .polyglot-flags-list,
.et_pb_fullwidth_menu .polyglot-flags-list {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
    position: relative !important;
    transition: transform 0.2s ease !important;
}

/* Flags list items */
.et-l--header .polyglot-flags-list li,
.et-l--footer .polyglot-flags-list li,
.et_pb_menu .polyglot-flags-list li,
.et_pb_fullwidth_menu .polyglot-flags-list li {
    display: inline-flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Flags list links */
.et-l--header .polyglot-flags-list li a,
.et-l--footer .polyglot-flags-list li a,
.et_pb_menu .polyglot-flags-list li a,
.et_pb_fullwidth_menu .polyglot-flags-list li a {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px !important;
    opacity: 0.8 !important;
}

.et-l--header .polyglot-flags-list li a:hover,
.et-l--footer .polyglot-flags-list li a:hover,
.et_pb_menu .polyglot-flags-list li a:hover,
.et_pb_fullwidth_menu .polyglot-flags-list li a:hover {
    opacity: 1 !important;
}

/* Current language - flags (header uses dark overlay, footer uses light) */

/* [class*="_tb_header"] .polyglot-flags-list li.polyglot-current a, */
.et-l--header .polyglot-flags-list li.polyglot-current a,
.et_pb_menu .polyglot-flags-list li.polyglot-current a,
.et_pb_fullwidth_menu .polyglot-flags-list li.polyglot-current a {
    opacity: 1 !important;
    background: rgba(0, 0, 0, 0.1) !important;
    border-radius: 3px !important;
}

/* ==========================================================================
   Flags Container - Header & Footer
   ========================================================================== */

.et_pb_menu .polyglot-flags-container,
.et_pb_fullwidth_menu .polyglot-flags-container {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
    max-width: 250px !important;
    background: transparent !important;
}

/* Scroll buttons: hidden by default, shown when has-overflow */
.et_pb_menu .polyglot-flags-container .polyglot-flags-scroll-btn,
.et_pb_fullwidth_menu .polyglot-flags-container .polyglot-flags-scroll-btn {
    display: none;
}

.et_pb_menu .polyglot-flags-container.has-overflow .polyglot-flags-scroll-btn,
.et_pb_fullwidth_menu .polyglot-flags-container.has-overflow .polyglot-flags-scroll-btn {
    display: flex !important;
}

.et_pb_menu .polyglot-flags-wrapper,
.et_pb_fullwidth_menu .polyglot-flags-wrapper {
    overflow: hidden !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    background: transparent !important;
}

/* ==========================================================================
   Footer Dropdown Toggle
   ========================================================================== */

[class*="_tb_footer"] .polyglot-dropdown-toggle,
[class*="tb_footer"] .polyglot-dropdown-toggle,
.et-l--footer .polyglot-dropdown-toggle {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: inherit !important;
}

/* Vertical alignment for footer menu switcher */

.et-menu.nav .polyglot-menu-switcher,
.et-menu .polyglot-menu-switcher {
    display: inline-block !important;
    vertical-align: top !important;
}

.et-menu.nav .polyglot-menu-switcher .polyglot-switcher,
.et-menu .polyglot-menu-switcher .polyglot-switcher,
.et-menu.nav .polyglot-menu-switcher .polyglot-text-list,
.et-menu .polyglot-menu-switcher .polyglot-text-list {
    display: inline-block;
    vertical-align: middle!important;
}