/* =======================================================
   AYENEH VC THEME - header.css
   Style for:
   - Theme toggle with sun ↔ moon animation
   - Language menu dropdown
   - Tooltip hover labels
   - ✅ [NEW] Responsive Header Fix for Mobile & Tablet
   ======================================================= */

/* ================= */
/* کنترل‌های هدر عمومی */
/* ================= */
.header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ================= */
/* دکمه‌های آیکون */
/* ================= */
.toggle-btn,
.lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  position: relative;
  background: none;
  color: var(--color-text, #fff);
  transition: transform 0.3s ease;
}

.toggle-btn:hover,
.lang-btn:hover {
  transform: scale(1.05);
}

/* ================= */
/* تاگل تم */
/* ================= */
.toggle-btn {
  width: 48px;
  height: 24px;
  border-radius: 34px;
  overflow: hidden;
  background: linear-gradient(120deg, #fff2b3, #ffce54);
  transition: background 0.4s ease;
  padding: 0;
}

.toggle-track {
  width: 100%;
  height: 100%;
  position: relative;
}

.toggle-sun {
  background: radial-gradient(circle at 30% 30%, #ffd633 20%, #ffaa00 80%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  top: 2px; /* Fine-tuned alignment */
  left: 2px; /* Fine-tuned alignment */
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* حالت شب */
html[data-theme="dark"] .toggle-btn {
  background: linear-gradient(120deg, #1a1a1a, #222);
}

html[data-theme="dark"] .toggle-sun {
  left: 26px; /* Fine-tuned alignment */
  background: radial-gradient(circle at 40% 40%, #dcdcdc 20%, #888 80%);
  box-shadow: inset 0 0 5px #fff;
  transform: rotate(180deg);
}

/* ================= */
/* منوی زبان */
/* ================= */
.lang-switch {
  position: relative;
}

.lang-menu {
  display: none;
  position: absolute;
  top: 45px;
  right: 0;
  list-style: none;
  margin: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  border-radius: 10px;
  padding: 8px;
  z-index: 1000;
  min-width: 140px;
}

.lang-menu.visible {
  display: block;
  animation: fadeIn 0.25s ease-in-out;
}

.lang-menu li {
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.25s;
}

.lang-menu li:hover {
  background: rgba(255, 255, 255, 0.2);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}


/* =======================================================
   ✅✅✅ اصلاحیه هدر در موبایل و تبلت ✅✅✅
   ======================================================= */

@media (max-width: 1024px) {
    /* 1. کانتینر اصلی هدر */
    .elementor-location-header > .e-con {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important; /* << این خط مشکل تراز عمودی را حل می‌کند */
        padding: 10px 15px !important;
        gap: 15px !important;
    }

    /* 2. تمام سه کانتینر داخلی (دکمه‌ها، منو، لوگو) */
    .elementor-location-header > .e-con > .e-con {
        width: auto !important; /* جلوگیری از عرض ۱۰۰٪ المنتور */
        flex-shrink: 0 !important; /* جلوگیری از کوچک شدن ناخواسته */
        margin: 0 !important;
    }

    /* 3. ترتیب‌دهی و مرکزیت لوگو (جادوی اصلی اینجاست) */
    /* فرض: ساختار HTML شما: 1=دکمه‌ها, 2=منو, 3=لوگو */
    
    /* منوی همبرگری (میرود سمت راست) */
    .elementor-location-header > .e-con > .e-con:nth-child(2) {
        order: 1;
        justify-content: flex-end; /* آیکون را به انتهای کانتینر می‌چسباند */
    }

    /* لوگو (در مرکز قرار می‌گیرد) */
    .elementor-location-header > .e-con > .e-con:nth-child(3) {
        order: 2;
        flex-grow: 1; /* << این خط باعث می‌شود فضای خالی را پر کند و در مرکز بماند */
        justify-content: center; /* لوگو را در وسط کانتینر خودش تراز می‌کند */
    }
    
    /* دکمه‌های کنترل (میرود سمت چپ) */
    .elementor-location-header > .e-con > .e-con:nth-child(1) {
        order: 3;
        justify-content: flex-start; /* دکمه‌ها را به ابتدای کانتینر می‌چسباند */
    }

    /* 4. بهینه‌سازی سایز المان‌ها */
    .elementor-widget-theme-site-logo img {
        max-width: 100px !important; /* سایز مناسب لوگو در موبایل */
        height: auto !important;
    }

    .elementor-menu-toggle {
        font-size: 26px !important; /* آیکون همبرگری بزرگتر و قابل لمس‌تر */
    }

    /* 5. استایل منوی باز شده (Dropdown) */
    .elementor-nav-menu--dropdown {
        position: fixed !important;
        top: 100% !important; /* دقیقا زیر هدر باز شود */
        left: 5% !important; /* از طرفین فاصله داشته باشد */
        right: 5% !important;
        width: 90% !important; /* << عرض زیاد برای فضای کافی */
        background: var(--color-bg) !important;
        border-radius: var(--border-radius-base) !important;
        padding: 15px !important;
    }

    /* 6. استایل آیتم‌های داخل منوی باز شده */
    .elementor-nav-menu--dropdown li.menu-item {
        margin-bottom: 5px;
    }
    
    .elementor-nav-menu--dropdown li.menu-item a {
        text-align: center !important; /* متن لینک‌ها وسط‌چین */
        padding: 12px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: var(--color-heading) !important;
        border-radius: var(--border-radius-sm);
        transition: background 0.3s ease, color 0.3s ease;
    }
    
    .elementor-nav-menu--dropdown li.menu-item a:hover,
    .elementor-nav-menu--dropdown li.menu-item.current-menu-item a {
        background: var(--color-accent) !important;
        color: var(--color-surface) !important;
    }
}