/**
 * Logo Animation RTL Fix - CSS Approach
 *
 * This CSS file corrects ONLY the logo position for RTL languages
 * WITHOUT interfering with the rest of the header layout.
 *
 * IMPORTANT: This file should ONLY fix the logo animation position,
 * not change the entire header RTL behavior which already works.
 */

/* ========================================
   LOGO POSITION RTL ONLY
   ======================================== */

/* RTL Mode: Logo should be positioned at the EXTREME RIGHT of the header */
[dir="rtl"] .header__logo,
body[data-direction="rtl"] .header__logo {
    /* Reset positioning to let flexbox handle layout */
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
}

/* RTL Mode: Push logo to extreme right (opposite of LTR) */
[dir="rtl"] .header__logo,
body[data-direction="rtl"] .header__logo {
    margin-right: 0 !important;  /* No margin on the right - stick to edge */
    margin-left: auto !important;  /* Auto margin on left - pushes to right */
}

/* RTL Mode: Logo element inside header__logo */
[dir="rtl"] .logo,
body[data-direction="rtl"] .logo {
    margin-right: 0 !important;
    margin-left: auto !important;
}

/* ========================================
   HEADER SPACING RTL - FIX COLLAPSED ZONES
   ======================================== */

/* RTL Mode: Invert header__buttons margin (was margin-left in LTR) */
[dir="rtl"] .header__buttons,
body[data-direction="rtl"] .header__buttons {
    margin-left: 0 !important;
    margin-right: 86px !important;
    margin-right: min(4.4421487603vw, 86px) !important;
}

/* RTL Mode: Invert language-switch margin (was margin-right in LTR) */
[dir="rtl"] .language-switch,
body[data-direction="rtl"] .language-switch {
    margin-right: 1.5rem !important; /* Space between language-switch and buttons */
    margin-left: 0.75rem !important; /* Space from left edge */
}

/* ========================================
   LANGUAGE SWITCHER ACTIVE STATE (Phase 4)
   ======================================== */

/* Active language link styling (both LTR and RTL) */
.language-switch__link.active {
    background-color: #2C99CD !important; /* Odontyn primary color */
    color: white !important;
    font-weight: 600 !important;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
}

.language-switch__link.active .fi {
    opacity: 1 !important;
}

/* Note: No responsive adjustments needed for logo position in RTL
   Flexbox with margin-right: auto handles positioning automatically
   across all breakpoints */