/**
 * Responsive Header Styles
 * بهینه‌سازی Header برای تمام سایزهای صفحه
 */

/* ====================================
   Desktop Header Menu Spacing
   ==================================== */
.header-menu-right,
.header-menu-left {
    gap: clamp(1rem, 2vw, 2rem);
}

/* Logo Sizing - Fluid */
.header-logo-desktop img {
    max-width: clamp(80px, 8vw, 120px);
    height: auto;
}

/* ====================================
   Mobile Drawer با Fallback
   ==================================== */
.mobile-drawer {
    background: rgba(54, 53, 53, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Fallback برای مرورگرهای بدون پشتیبانی backdrop-filter */
@supports not (backdrop-filter: blur(12px)) {
    .mobile-drawer {
        background: rgba(54, 53, 53, 0.95);
    }
}

/* ====================================
   Tablet Breakpoint (900-1023px)
   ==================================== */
@media (min-width: 900px) and (max-width: 1023px) {
    /* فشرده‌تر کردن menu برای تبلت */
    .header-menu-right,
    .header-menu-left {
        gap: 0.75rem;
    }
    
    .header-menu-right li a,
    .header-menu-left li a {
        font-size: 0.8125rem; /* 13px */
    }
    
    /* کاهش padding */
    .header-nav-desktop {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ====================================
   Large Tablet to Small Desktop (1024-1279px)
   ==================================== */
@media (min-width: 1024px) and (max-width: 1279px) {
    .header-menu-right,
    .header-menu-left {
        gap: 1rem;
    }
    
    /* وکتورها در 2xl نمایش داده می‌شوند (1536px+) */
}

/* ====================================
   Desktop با Vector ها (1280-1535px)
   ==================================== */
@media (min-width: 1280px) and (max-width: 1535px) {
    .header-menu-right,
    .header-menu-left {
        gap: 1.25rem;
    }
    
    /* وکتورها در 2xl نمایش داده می‌شوند (1536px+) */
}

/* ====================================
   Large Desktop با Vector ها (1536px+)
   ==================================== */
@media (min-width: 1536px) {
    .header-menu-right,
    .header-menu-left {
        gap: 2rem;
    }
}

/* ====================================
   Mobile Logo Responsive
   ==================================== */
@media (max-width: 640px) {
    .header-logo-mobile {
        max-height: 4rem; /* 64px */
    }
}

@media (min-width: 641px) and (max-width: 1023px) {
    .header-logo-mobile {
        max-height: 5rem; /* 80px */
    }
}

/* ====================================
   حذف Horizontal Overflow
   ==================================== */
.header-nav-desktop {
    overflow-x: hidden;
}

/* ====================================
   Smooth Transitions
   ==================================== */
.header-menu-right li a,
.header-menu-left li a {
    transition: all 0.3s ease;
}

/* ====================================
   Header Blur Background Optimization
   ==================================== */
@media (max-width: 1023px) {
    /* بهینه‌سازی blur برای موبایل و تبلت */
    .mobile-drawer {
        will-change: transform, opacity;
    }
}