/* ==========================================================================
   INOVA Energy - Professional Header Styles
   Modern, Clean, RTL-Optimized, Fully Responsive Design
   ========================================================================== */

/* --- CSS Custom Properties --- */
:root {
    /* Brand Colors - Official INOVA Energy Palette */
    --primary-color: #016A6E;
    --accent-color: #F3BD01;
    --primary-light: #018A8E;
    --primary-dark: #014A4E;
    --accent-light: #F5C933;
    --accent-dark: #E1A800;
    
    /* Typography - IRANSansWeb Font Family */
    --header-font-family: 'IRANSansWeb', 'Vazirmatn', system-ui, sans-serif;
    --header-font-ultralight: 100;
    --header-font-light: 300;
    --header-font-regular: 400;
    --header-font-medium: 500;
    --header-font-bold: 700;
    --header-font-black: 900;
    
    /* Enhanced Brand Variations */
    --primary-gradient: linear-gradient(135deg, #016A6E 0%, #018A8E 100%);
    --accent-gradient: linear-gradient(135deg, #F3BD01 0%, #F5C933 100%);
    --brand-gradient: linear-gradient(135deg, #016A6E 0%, #F3BD01 100%);
    
    /* Neutral Colors */
    --white: #FFFFFF;
    --light-gray: #F8F9FA;
    --medium-gray: #E9ECEF;
    --dark-gray: #495057;
    --text-dark: #1a1a1a;
    --text-light: #4a4a4a;
    --black: #000000;
    
    /* Header Specific Colors - Pure White Theme */
    --header-height: 80px;
    --header-height-mobile: 65px;
    --header-height-small: 60px;
    --header-bg: #ffffff;
    --header-bg-scrolled: #ffffff;
    --header-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    --header-shadow-scrolled: 0 2px 8px rgba(0, 0, 0, 0.08);
    --header-border: rgba(0, 0, 0, 0.05);
    --header-border-scrolled: rgba(0, 0, 0, 0.08);
    
    /* Interactive States - Pure White Theme */
    --hover-bg: rgba(0, 0, 0, 0.02);
    --hover-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    --active-bg: rgba(1, 106, 110, 0.05);
    --focus-outline: #016A6E;
    
    /* Transitions */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Z-Index Scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* --- Base Header Styles - ALWAYS STICKY HEADER --- */
.site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--header-height);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--header-border);
    box-shadow: var(--header-shadow);
    z-index: var(--z-fixed);
    transition: all var(--transition-normal);
    overflow: hidden;
    transform: translateY(0) !important;
    will-change: transform, background-color, box-shadow;
    opacity: 1 !important;
    visibility: visible !important;
    margin: 0;
    padding: 0;
    font-family: var(--header-font-family);
    /* Enhanced professional styling */
    border-radius: 0 0 16px 16px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.95) 0%, 
        rgba(255, 255, 255, 0.98) 50%, 
        rgba(255, 255, 255, 0.95) 100%
    );
}

/* Remove hidden state - header should NEVER be hidden */
.site-header.hidden {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Force header to always be visible - override any other styles */
.site-header,
.site-header.hidden,
.site-header.scrolled,
.site-header[style*="transform"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1030 !important;
}

.site-header.scrolled {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.98) 0%, 
        rgba(255, 255, 255, 1) 50%, 
        rgba(255, 255, 255, 0.98) 100%
    );
    border-bottom-color: var(--header-border-scrolled);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 4px 16px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: 0 0 20px 20px;
    transform: translateY(0) scale(1.01) !important;
    position: fixed !important;
    top: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Reset all margins and paddings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Add padding to body to compensate for fixed header */
body {
    padding-top: var(--header-height);
    margin: 0;
}

/* Ensure no extra spacing */
.site-main {
    margin-top: 0;
    padding-top: 0;
}

/* Fix any potential spacing issues */
.wp-site-blocks {
    margin-top: 0;
    padding-top: 0;
}

/* Remove any default margins from html and body */
html {
    margin: 0;
    padding: 0;
}

/* Smooth scroll behavior for anchor links */
html {
    scroll-behavior: smooth;
}

/* Professional scroll-triggered animations */
.site-header {
    transition: 
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        backdrop-filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced scroll state */
.site-header.scrolled .header-gradient {
    opacity: 0.8;
}

.site-header.scrolled .header-pattern {
    opacity: 0.1;
}

/* --- Header Background Effects --- */
.header-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: -1;
}

.header-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg, 
        rgba(255, 255, 255, 1) 0%, 
        rgba(255, 255, 255, 1) 50%, 
        rgba(255, 255, 255, 1) 100%
    );
    opacity: 1;
    transition: opacity var(--transition-normal);
}

.header-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: none;
    opacity: 0;
    transition: opacity var(--transition-normal);
}

/* --- Header Container --- */
.header-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    height: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
    gap: 2rem;
    width: 100%;
    box-sizing: border-box;
}

/* Mobile header container override */
@media (max-width: 991px) {
    .header-container {
        display: flex !important;
        grid-template-columns: none !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 0 !important;
        padding: 0 1rem !important;
    }
}

/* --- Logo Section --- */
.logo-section {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    z-index: 2;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-wrapper {
    display: flex;
    align-items: center;
}

.site-logo {
    height: 60px;
    width: auto;
    display: block;
}

.site-title {
    margin-right: 1rem;
    font-size: 1.5rem;
    font-weight: var(--header-font-bold);
    font-family: var(--header-font-family);
    color: var(--text-dark);
    text-decoration: none;
}

/* --- Main Navigation --- */
.main-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    font-family: var(--header-font-family);
}

.nav-menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.5rem;
    font-family: var(--header-font-family);
}

.menu-item {
    position: relative;
    font-family: var(--header-font-family);
    font-weight: var(--header-font-medium);
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 50px;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid transparent;
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(1, 106, 110, 0.05) 0%, 
        rgba(243, 189, 1, 0.02) 50%, 
        rgba(1, 106, 110, 0.05) 100%
    );
    opacity: 0;
    transition: opacity var(--transition-normal);
    pointer-events: none;
}

.nav-link.current-menu-item::before,
.nav-link.active::before {
    opacity: 0.1;
}

.nav-link:hover,
.nav-link.current-menu-item,
.nav-link.active {
    color: var(--primary-color);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 
        0 8px 25px rgba(1, 106, 110, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: rgba(1, 106, 110, 0.2);
    background: linear-gradient(135deg, #ffffff 0%, #f8fafe 100%);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.nav-link:focus {
    outline: 2px solid var(--focus-outline);
    outline-offset: 2px;
}

.nav-icon {
    font-size: 1.1rem;
    opacity: 1;
    transition: all var(--transition-fast);
    color: var(--text-dark);
}

.nav-link:hover .nav-icon,
.nav-link.current-menu-item .nav-icon,
.nav-link.active .nav-icon {
    opacity: 1;
    transform: scale(1.1);
    color: var(--primary-color);
}

.nav-text {
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* --- Header Actions --- */
.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    z-index: 2;
}

/* Ensure language switcher is visible on desktop */
@media (min-width: 992px) {
    .header-actions {
        display: flex !important;
    }
    
    .language-switcher {
        display: block !important;
    }
    
    .desktop-only {
        display: block !important;
    }
    
    .flag-toggle {
        display: inline-flex !important;
    }
    
    .flag-toggle.circular {
        display: inline-flex !important;
    }
}

/* --- Language Switcher --- */
.language-switcher {
    position: relative;
    z-index: 10;
}

/* Desktop Only Language Switcher */
.desktop-only {
    display: block;
}

@media (min-width: 992px) {
    .desktop-only {
        display: block !important;
    }
    
    .language-switcher {
        display: block !important;
    }
    
    .flag-toggle {
        display: inline-flex !important;
    }
    
    .flag-toggle.circular {
        display: inline-flex !important;
    }
}

.flag-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
    border: 1px solid rgba(1, 106, 110, 0.12);
    border-radius: 50px;
    padding: 0.6rem 0.8rem;
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.06),
        0 1px 3px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;
    min-width: 50px;
    height: 38px;
    text-decoration: none;
}

/* Circular Flag Toggle */
.flag-toggle.circular {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    padding: 0;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafe 100%);
    border: 2px solid rgba(1, 106, 110, 0.15);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 2px 6px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: all var(--transition-normal);
}

.flag-toggle.circular .flag-image {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: all var(--transition-normal);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.flag-toggle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(1, 106, 110, 0.08) 0%, 
        rgba(243, 189, 1, 0.04) 50%, 
        rgba(1, 106, 110, 0.08) 100%
    );
    opacity: 0;
    transition: opacity var(--transition-normal);
    border-radius: 50px;
}

.flag-emoji {
    position: relative;
    z-index: 1;
    font-size: 22px;
    line-height: 1;
    transition: all var(--transition-normal);
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* Hide emoji text and show pure flag */
.flag-emoji {
    position: relative;
    z-index: 1;
    font-size: 0;
    line-height: 1;
    transition: all var(--transition-normal);
    display: block;
    width: 24px;
    height: 16px;
}

/* Pure CSS Flag - Iran */
.flag-toggle[data-lang="fa"] .flag-emoji::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 16px;
    background: linear-gradient(to bottom, 
        #239f40 0% 33.33%, 
        #ffffff 33.33% 66.66%, 
        #da0000 66.66% 100%
    );
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Pure CSS Flag - USA */
.flag-toggle[data-lang="en"] .flag-emoji::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 16px;
    background: 
        linear-gradient(to right, #3c3b6e 0% 40%, transparent 40%),
        repeating-linear-gradient(to bottom,
            #b22234 0px, #b22234 1.2px,
            #ffffff 1.2px, #ffffff 2.4px
        );
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.flag-toggle:hover {
    border-color: rgba(1, 106, 110, 0.25);
    background: linear-gradient(135deg, #ffffff 0%, #f8fafe 100%);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 
        0 4px 16px rgba(1, 106, 110, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.flag-toggle.circular:hover {
    border-color: rgba(1, 106, 110, 0.3);
    background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 100%);
    transform: translateY(-3px) scale(1.1);
    box-shadow: 
        0 8px 25px rgba(1, 106, 110, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.flag-toggle.circular:hover .flag-image {
    transform: scale(1.1);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}

.flag-toggle:hover::before {
    opacity: 1;
}

.flag-toggle:hover .flag-emoji {
    transform: scale(1.1) rotate(2deg);
}

.flag-toggle:active {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 
        0 2px 12px rgba(1, 106, 110, 0.12),
        0 1px 6px rgba(0, 0, 0, 0.06);
}

.flag-toggle:focus {
    outline: 2px solid var(--focus-outline);
    outline-offset: 3px;
}

/* --- Mobile Menu Toggle --- */
.mobile-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    transition: all var(--transition-normal);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
}

/* Default mobile menu toggle positioning */
.mobile-menu-toggle {
    margin-left: auto;
    margin-right: 0;
}

/* RTL Mobile Menu Toggle - Right Side (Persian) */
.rtl .mobile-menu-toggle,
[dir="rtl"] .mobile-menu-toggle {
    margin-left: auto;
    margin-right: 0;
}

/* LTR Mobile Menu Toggle - Same position as RTL (English) */
.ltr .mobile-menu-toggle,
[dir="ltr"] .mobile-menu-toggle,
.ltr-section .mobile-menu-toggle {
    margin-left: auto;
    margin-right: 0;
}

.mobile-menu-toggle:hover {
    background: #ffffff;
    border-color: rgba(1, 106, 110, 0.15);
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.mobile-menu-toggle:focus {
    outline: 2px solid var(--focus-outline);
    outline-offset: 2px;
}

.mobile-menu-toggle.active {
    background: var(--active-bg);
    border-color: var(--primary-color);
}

.hamburger {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 20px;
    height: 16px;
}

.line {
    width: 100%;
    height: 2px;
    background: var(--text-dark);
    border-radius: 1px;
    transition: all var(--transition-normal);
}

.mobile-menu-toggle.active .line-1 {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active .line-2 {
    opacity: 0;
}

.mobile-menu-toggle.active .line-3 {
    transform: rotate(-45deg) translate(7px, -6px);
}


/* --- RTL/LTR Direction Support --- */
/* RTL Layout (Persian) */
.rtl .header-container,
[dir="rtl"] .header-container {
    direction: rtl;
    grid-template-columns: 1fr 2fr 1fr;
}

.rtl .logo-section,
[dir="rtl"] .logo-section {
    justify-content: flex-start;
}

.rtl .main-navigation,
[dir="rtl"] .main-navigation {
    justify-content: center;
}

.rtl .header-actions,
[dir="rtl"] .header-actions {
    justify-content: flex-end;
}

/* LTR Layout (English) */
.ltr .header-container,
[dir="ltr"] .header-container,
.ltr-section .header-container {
    direction: ltr;
    grid-template-columns: 1fr 2fr 1fr;
}

.ltr .logo-section,
[dir="ltr"] .logo-section,
.ltr-section .logo-section {
    justify-content: flex-start;
}

.ltr .main-navigation,
[dir="ltr"] .main-navigation,
.ltr-section .main-navigation {
    justify-content: center;
}

.ltr .header-actions,
[dir="ltr"] .header-actions,
.ltr-section .header-actions {
    justify-content: flex-end;
}

/* --- Icon Flipping for RTL --- */
.rtl .nav-icon {
    transform: scaleX(-1);
}

.ltr .nav-icon {
    transform: scaleX(1);
}

.rtl .flag-emoji {
    transform: scaleX(-1);
}

.ltr .flag-emoji {
    transform: scaleX(1);
}

/* --- Responsive Design --- */
@media (max-width: 1200px) {
    .header-container {
        padding: 0 1.5rem;
    }
    
    .nav-link {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 991px) {
    .main-navigation {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    .header-container {
        padding: 0 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        width: 100%;
        grid-template-columns: 1fr;
        min-height: var(--header-height-mobile);
    }

    /* Logo in center */
    .logo-section {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 5;
        justify-content: center;
        width: auto;
    }
    
    /* Header actions positioning */
    .header-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: auto;
        z-index: 10;
        margin-left: auto;
        gap: 0.5rem;
        flex: 0 0 auto;
    }

    /* RTL Mobile Header Layout (Persian) */
    .rtl .header-container,
    [dir="rtl"] .header-container {
        flex-direction: row;
    }

    .rtl .header-actions,
    [dir="rtl"] .header-actions {
        order: 1;
        margin-right: 0;
        margin-left: auto;
    }

    .rtl .mobile-menu-toggle,
    [dir="rtl"] .mobile-menu-toggle {
        margin-left: auto;
        margin-right: 0;
    }

    /* LTR Mobile Header Layout (English) - Same as RTL */
    .ltr .header-container,
    [dir="ltr"] .header-container,
    .ltr-section .header-container {
        flex-direction: row;
    }

    .ltr .header-actions,
    [dir="ltr"] .header-actions,
    .ltr-section .header-actions {
        order: 1;
        margin-right: 0;
        margin-left: auto;
    }

    .ltr .mobile-menu-toggle,
    [dir="ltr"] .mobile-menu-toggle,
    .ltr-section .mobile-menu-toggle {
        margin-left: auto;
        margin-right: 0;
    }
}

    /* Hide language switcher on mobile */
    @media (max-width: 991px) {
        .desktop-only {
            display: none !important;
        }
    }
    
    /* Adjust circular flag toggle for mobile */
    .flag-toggle.circular {
        width: 44px;
        height: 44px;
    }
    
    .flag-toggle.circular .flag-image {
        width: 28px;
        height: 28px;
    }
    
    /* Enhanced mobile menu toggle */
    .mobile-menu-toggle {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: linear-gradient(135deg, #ffffff 0%, #f8fafe 100%);
        border: 1px solid rgba(1, 106, 110, 0.1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transition: all var(--transition-normal);
    }
    
    .mobile-menu-toggle:hover {
        background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 100%);
        border-color: rgba(1, 106, 110, 0.2);
        box-shadow: 0 4px 16px rgba(1, 106, 110, 0.15);
        transform: translateY(-2px) scale(1.05);
    }
    
    .mobile-menu-toggle:active {
        transform: translateY(0) scale(0.98);
    }

@media (max-width: 767px) {
    .site-header {
        height: var(--header-height-mobile);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }
    
    body {
        padding-top: var(--header-height-mobile);
    }
    
    .header-container {
        padding: 0 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        width: 100%;
        grid-template-columns: 1fr;
        min-height: var(--header-height-mobile);
    }
    
    .site-logo {
        height: 45px;
        transition: all var(--transition-normal);
    }
    
    .site-logo:hover {
        transform: scale(1.05);
    }
    
    .nav-icon {
        display: none;
    }
    
    /* Enhanced mobile menu toggle for tablets */
    .mobile-menu-toggle {
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }
    
    .hamburger {
        width: 18px;
        height: 14px;
    }
    
    .line {
        height: 2px;
    }

    /* RTL/LTR positioning for tablet */
    .rtl .mobile-menu-toggle,
    [dir="rtl"] .mobile-menu-toggle {
        margin-left: auto;
        margin-right: 0;
    }

    .ltr .mobile-menu-toggle,
    [dir="ltr"] .mobile-menu-toggle,
    .ltr-section .mobile-menu-toggle {
        margin-left: auto;
        margin-right: 0;
    }
}

@media (max-width: 480px) {
    .site-header {
        height: var(--header-height-small);
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
    }
    
    body {
        padding-top: var(--header-height-small);
    }
    
    .header-container {
        padding: 0 0.75rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        width: 100%;
        grid-template-columns: 1fr;
        min-height: var(--header-height-small);
    }
    
    .site-logo {
        height: 40px;
        transition: all var(--transition-normal);
    }
    
    .site-logo:hover {
        transform: scale(1.05);
    }
    
    /* Enhanced mobile menu toggle for small phones */
    .mobile-menu-toggle {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        background: linear-gradient(135deg, #ffffff 0%, #f8fafe 100%);
        border: 1px solid rgba(1, 106, 110, 0.15);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }
    
    .mobile-menu-toggle:hover {
        background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 100%);
        border-color: rgba(1, 106, 110, 0.25);
        box-shadow: 0 3px 12px rgba(1, 106, 110, 0.2);
        transform: translateY(-1px) scale(1.03);
    }
    
    .hamburger {
        width: 16px;
        height: 12px;
    }
    
    .line {
        height: 1.5px;
    }

    /* RTL/LTR positioning for mobile */
    .rtl .mobile-menu-toggle,
    [dir="rtl"] .mobile-menu-toggle {
        margin-left: auto;
        margin-right: 0;
    }

    .ltr .mobile-menu-toggle,
    [dir="ltr"] .mobile-menu-toggle,
    .ltr-section .mobile-menu-toggle {
        margin-right: 0;
        margin-left: 0;
        position: relative;
        left: 0;
    }

    /* LTR header actions for mobile */
    .ltr .header-actions,
    [dir="ltr"] .header-actions,
    .ltr-section .header-actions {
        justify-content: flex-start;
        width: auto;
        flex: 0 0 auto;
        position: relative;
        left: 0;
    }

    .ltr .mobile-menu-toggle,
    [dir="ltr"] .mobile-menu-toggle,
    .ltr-section .mobile-menu-toggle {
        margin-left: auto;
        margin-right: 0;
    }
}

/* --- Accessibility --- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Focus Management --- */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--primary-color);
    color: white;
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 10000;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 6px;
}

/* --- High Contrast Mode --- */
@media (prefers-contrast: high) {
    .site-header {
        border-bottom: 2px solid var(--text-dark);
    }
    
    .nav-link {
        border: 1px solid var(--text-dark);
    }
    
    .flag-toggle {
        border: 2px solid var(--text-dark);
    }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}