/**
 * Guardian Translate Styles matching user's request for "Clean and Minimalist"
 */

#guardian-translate-switcher {
    position: fixed;
    z-index: 99999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.gt-position-bottom-right {
    bottom: 20px;
    right: 20px;
}

.gt-position-bottom-left {
    bottom: 20px;
    left: 20px;
}

.gt-position-top-right {
    top: 20px;
    right: 20px;
}

.gt-position-top-left {
    top: 20px;
    left: 20px;
}

/* Mobile Responsive */
@media (max-width: 600px) {
    #guardian-translate-switcher {
        bottom: 10px;
        right: 10px;
        left: 10px;
        /* Full width-ish on mobile if desired, or just stuck to corner */
        text-align: center;
    }
}

/* Modern Dropdown Style (Glassmorphism) */
.gt-modern-dropdown {
    position: relative;
    display: inline-block;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.gt-selected-lang {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.85);
    /* Slightly transparent */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    outline: none;
}

.gt-selected-lang:hover,
.gt-modern-dropdown.open .gt-selected-lang {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.gt-current-flag {
    margin-right: 8px;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
}

.gt-current-flag img,
.gt-flag img {
    display: inline-block !important;
    visibility: visible !important;
    width: 20px;
    height: 15px;
    vertical-align: middle;
    border-radius: 2px;
    object-fit: cover;
}

.gt-arrow {
    margin-left: 8px;
    font-size: 10px;
    color: #666;
    transition: transform 0.3s ease;
}

.gt-modern-dropdown.open .gt-arrow {
    transform: rotate(180deg);
}

/* Dropdown Options */
.gt-dropdown-options {
    position: absolute;
    width: 200px;
    /* Or auto/min-width */
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 100000;
}

.gt-modern-dropdown.open .gt-dropdown-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Positioning Contexts */
/* Ensure parent has relative positioning for absolute dropdown */
.menu-item-guardian-translate {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    /* Ensure it flows with menu */
    z-index: 1000;
    /* Ensure container is above other footer elements */
    margin: 0;
}

.menu-item-guardian-translate-footer,
.guardian-translate-footer-direct {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin: 0;
    line-height: normal;
    /* Prevent line-height inheritance */
}

/* Fix dropdown interference from theme */
.gt-dropdown-options ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: block !important;
}

.gt-dropdown-options li {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    /* Stack vertically, override theme inline-block */
    float: none !important;
    width: 100% !important;
    border: none !important;
}

.gt-dropdown-options a {
    display: block !important;
    padding: 8px 12px !important;
    text-decoration: none !important;
    color: #333 !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
}

.gt-dropdown-options a:hover {
    background: #f5f5f7 !important;
    color: #000 !important;
}

/* Footer specific refinement */
.menu-item-guardian-translate-footer .gt-selected-lang,
.guardian-translate-footer-direct .gt-selected-lang {
    padding: 5px 10px;
    font-size: 13px;
    margin: 0;
    margin-top: -4px;
    /* Manual nudge for alignment */
    height: auto;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.5);
    /* More transparent */
    border-color: transparent;
    /* Cleaner look */
    line-height: 1;
    /* Reset line-height for button */
    display: inline-flex;
    align-items: center;
}

/* Hover state for better UX */
.menu-item-guardian-translate-footer .gt-selected-lang:hover,
.guardian-translate-footer-direct .gt-selected-lang:hover,
.menu-item-guardian-translate-footer.open .gt-selected-lang,
.guardian-translate-footer-direct.open .gt-selected-lang {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.1);
}

/* If inside footer widget (fixed bottom), popup goes up */
#guardian-translate-switcher-footer .gt-dropdown-options,
.menu-item-guardian-translate-footer .gt-dropdown-options,
.guardian-translate-footer-direct .gt-dropdown-options {
    bottom: 100%;
    top: auto;
    /* Override top */
    margin-bottom: 10px;
    margin-top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
}

.menu-item-guardian-translate-footer .gt-modern-dropdown.open .gt-dropdown-options,
.guardian-translate-footer-direct .gt-modern-dropdown.open .gt-dropdown-options {
    transform: translateX(-50%) translateY(0);
}

/* If inside menu (from top), popup goes down */
.menu-item-guardian-translate .gt-dropdown-options {
    top: 100%;
    bottom: auto;
    margin-top: 10px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    /* Center align */
}

.menu-item-guardian-translate .gt-modern-dropdown.open .gt-dropdown-options {
    transform: translateX(-50%) translateY(0);
}

/* List Items */
.gt-dropdown-options ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gt-dropdown-options li {
    margin-bottom: 2px;
}

.gt-dropdown-options li:last-child {
    margin-bottom: 0;
}

.gt-dropdown-options a {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    transition: background 0.2s ease;
}

.gt-dropdown-options a:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--gt-primary, #0073aa);
}

.gt-dropdown-options .gt-flag {
    margin-right: 10px;
    font-size: 18px;
}

/* List Styles (Flags & Text) */
.guard-trans-style-flags ul,
.guard-trans-style-text ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    /* Stack vertically by default or customizable logic */
    gap: 5px;
}

/* Make it a horizontal list for footer bar look if cleaner, or vertical popup options? 
   Let's do a vertical list that expands on hover or just simple list. 
   Actually, typically a fixed footer widget is a single button that expands.
   For now, we'll keep it simple as a visible list or dropdown.
*/
.guard-trans-style-flags ul,
.guard-trans-style-text ul {
    flex-direction: row;
    /* Horizontal list looks better in footer usually */
    flex-wrap: wrap;
}

.guard-trans-style-flags li a,
.guard-trans-style-text li a {
    text-decoration: none;
    color: #333;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background 0.2s;
    display: flex;
    align-items: center;
}

.guard-trans-style-flags li a:hover,
.guard-trans-style-text li a:hover {
    background-color: #f0f0f0;
    color: var(--gt-primary);
}

.guard-trans-flag {
    margin-right: 6px;
    font-size: 18px;
}

/* Hiding Google Top Bar Aggressively */
.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame,
iframe.goog-te-banner-frame,
iframe[id^=":1.container"],
iframe[id^=":2.container"],
body>.skiptranslate,
#goog-gt-tt,
.goog-tooltip,
.goog-te-balloon-frame,
div#google_translate_element>div:first-child {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    z-index: -1000 !important;
}

body {
    top: 0px !important;
    position: static !important;
    min-height: 100vh !important;
}

html {
    height: 100% !important;
    margin-top: 0px !important;
}

font {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Print */
@media print {
    #google_translate_element {
        display: none;
    }
}

/* ===========================
   Translated Page Menu Fix
   When Google Translate is active, menu items can be longer
   (e.g. German). These rules prevent them from overlapping the logo.
   Theme CSS loads AFTER plugin CSS, so !important is required.
   =========================== */
html.translated-ltr .site-header .site-branding,
html.translated-rtl .site-header .site-branding {
    flex-shrink: 0 !important;
}

html.translated-ltr .main-navigation ul,
html.translated-rtl .main-navigation ul {
    gap: 10px !important;
}

html.translated-ltr .main-navigation ul li a,
html.translated-rtl .main-navigation ul li a {
    font-size: 12px !important;
    letter-spacing: -0.3px !important;
    white-space: nowrap !important;
}

html.translated-ltr .header-actions .header-locator-btn,
html.translated-rtl .header-actions .header-locator-btn {
    font-size: 12px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    white-space: nowrap !important;
}

/* =====================================================
   Flag Bar — Compact flag-only dropdown for the header
   ===================================================== */

/* Suppress extra theme li styles for flag bar */
.menu-item-gt-flag-bar {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Root container */
.gt-flag-bar {
    position: relative;
    display: inline-flex;
    align-items: center;
    z-index: 9999;
}

/* Toggle button */
.gt-flag-bar-toggle {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    padding: 4px 7px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    line-height: 1;
}

.gt-flag-bar-toggle:hover {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.3);
}

/* The active flag image inside the toggle */
.gt-flag-bar-current img {
    display: inline-block !important;
    visibility: visible !important;
    width: 22px !important;
    height: 16px !important;
    border-radius: 2px;
    object-fit: cover;
    vertical-align: middle;
    margin-right: 0 !important;
}

/* Chevron arrow */
.gt-flag-bar-chevron {
    font-size: 8px;
    color: #555;
    transition: transform 0.25s ease;
    line-height: 1;
}

.gt-flag-bar.open .gt-flag-bar-chevron {
    transform: rotate(180deg);
}

/* Dropdown panel */
.gt-flag-bar-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    padding: 10px;
    gap: 6px;
    /* 3 columns, each wide enough for a flag + padding */
    grid-template-columns: repeat(3, 48px);
    z-index: 99999;
}

@media (max-width: 900px) {
    .gt-flag-bar-dropdown {
        right: auto;
        left: 0;
    }
}

.gt-flag-bar.open .gt-flag-bar-dropdown {
    display: grid;
    animation: gtFlagBarSlideIn 0.18s ease;
}

@keyframes gtFlagBarSlideIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Individual flag button in dropdown */
.gt-flag-bar-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 7px;
    padding: 6px;
    cursor: pointer;
    width: 48px;
    height: 42px;
    box-sizing: border-box;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.gt-flag-bar-item:hover {
    background: rgba(0, 0, 0, 0.06);
    transform: scale(1.08);
}

/* Active language indicator */
.gt-flag-bar-item.gt-flag-bar-active {
    border-color: #4a90e2;
    background: rgba(74, 144, 226, 0.08);
}

/* Flag images inside dropdown items */
.gt-flag-bar-item img {
    display: block !important;
    visibility: visible !important;
    width: 32px !important;
    height: 23px !important;
    border-radius: 3px;
    object-fit: cover;
    margin: 0 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}