/**
 * ECOIA — هدر و ناوبری
 * Sticky Header | Glass-morphism | Mobile Hamburger
 * وابسته به: variables.css، base.css
 */

/* ════════════════════════════════════════════════════════════
   ۱. هدر اصلی
════════════════════════════════════════════════════════════ */

.site-header {
    position:   fixed;
    top:        0;
    right:      0;
    left:       0;
    z-index:    var(--z-sticky);
    height:     var(--header-height);
    display:    flex;
    align-items: center;
    /* حالت اولیه: شفاف روی Hero */
    background:  transparent;
    transition:  background var(--transition-slow),
                 height var(--transition-base),
                 box-shadow var(--transition-slow),
                 backdrop-filter var(--transition-slow);
}

/* هدر پس از اسکرول — glass-morphism دارک */
.site-header.is-scrolled {
    background:      rgba(7, 7, 7, 0.88);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    box-shadow:      0 1px 0 0 rgba(200,169,81,0.10),
                     0 4px 32px rgba(0,0,0,0.55);
    border-bottom:   1px solid rgba(200,169,81,0.08);
    height:          calc(var(--header-height) - 10px);
}

/* هدر در صفحات داخلی (بدون Hero) — همیشه solid */
.site-header.is-inner {
    background:    var(--bg-header);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-gold-faint);
}

/* ════════════════════════════════════════════════════════════
   ۲. داخل هدر
════════════════════════════════════════════════════════════ */

.header__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
    max-width:       var(--container-max);
    margin:          0 auto;
    padding:         0 var(--container-pad);
    gap:             var(--space-6);
}

/* ════════════════════════════════════════════════════════════
   ۳. لوگو
════════════════════════════════════════════════════════════ */

.header__logo {
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    text-decoration: none;
    transition:      opacity var(--transition-base);
}

.header__logo:hover {
    opacity: 0.85;
}

/* لوگوی افقی — دسکتاپ */
.logo--horizontal {
    height: 66px;
    width:  auto;
    object-fit: contain;
}

/* لوگوی آیکون — موبایل */
.logo--icon {
    height:  57px;
    width:   auto;
    display: none;
}

/* ════════════════════════════════════════════════════════════
   ۴. ناوبری اصلی
════════════════════════════════════════════════════════════ */

.header__nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.nav__list {
    display:     flex;
    align-items: center;
    gap:         clamp(14px, 1.6vw, 28px);   /* فاصله بازطراحی‌شده — تا ۲۸px روی دسکتاپ بزرگ */
    list-style:  none;
    margin:      0;
    padding:     0;
    direction:   rtl;
}

.nav__item {
    position: relative;
}

.nav__link {
    display:         block;
    padding:         8px 14px;
    font-size:       var(--fs-small);
    font-weight:     500;
    color:           var(--text-secondary);
    text-decoration: none;
    white-space:     nowrap;
    position:        relative;
    letter-spacing:  0.01em;
    transition:      color 0.3s ease;
}

/* خط طلایی زیر لینک — expand از مرکز */
.nav__link::after {
    content:    '';
    position:   absolute;
    bottom:     1px;
    right:      50%;
    left:       50%;
    height:     1.5px;
    background: linear-gradient(90deg, transparent, #C8A951, transparent);
    transition: right 0.35s cubic-bezier(0.23,1,0.32,1),
                left  0.35s cubic-bezier(0.23,1,0.32,1),
                opacity 0.3s ease;
    opacity:    0;
    border-radius: var(--radius-full);
}

.nav__link:hover {
    color: var(--gold-light, #E8D5A0);
}
.nav__link:hover::after {
    right:   14px;
    left:    14px;
    opacity: 0.85;
}

.nav__link.active {
    color: var(--gold-light, #E8D5A0);
    font-weight: 600;
}
.nav__link.active::after {
    right:   14px;
    left:    14px;
    opacity: 1;
    background: linear-gradient(90deg, transparent, #E8D5A0 40%, #C8A951 60%, transparent);
}

.nav__link:focus-visible {
    outline:        2px solid var(--gold, #C8A951);
    outline-offset: 3px;
    border-radius:  2px;
    color:          var(--gold-light);
}
.nav__link:focus-visible::after {
    right: 14px; left: 14px; opacity: 1;
}

/* ════════════════════════════════════════════════════════════
   ۵. دکمه CTA هدر
════════════════════════════════════════════════════════════ */

.header__cta {
    flex-shrink: 0;
}

.header__cta .btn {
    padding:   0.6rem 1.4rem;
    font-size: var(--text-sm);
    min-height: 40px;
}

/* ════════════════════════════════════════════════════════════
   ۶. دکمه Hamburger — موبایل
════════════════════════════════════════════════════════════ */

.hamburger {
    display:         none;
    flex-direction:  column;
    justify-content: center;
    align-items:     center;
    gap:             5px;
    width:           44px;
    height:          44px;
    background:      var(--bg-card);
    border:          1px solid var(--border-default);
    border-radius:   var(--radius-md);
    cursor:          pointer;
    padding:         0;
    transition:      border-color var(--transition-base), background var(--transition-base);
    flex-shrink:     0;
}

.hamburger:hover {
    border-color: var(--gold-main);
    background:   var(--gold-muted);
}

.hamburger__line {
    display:       block;
    width:         22px;
    height:        2px;
    background:    var(--text-secondary);
    border-radius: var(--radius-full);
    transition:    transform var(--transition-smooth),
                   opacity   var(--transition-base),
                   width     var(--transition-base),
                   background var(--transition-base);
    transform-origin: center;
}

/* انیمیشن تبدیل به × */
.hamburger.is-open .hamburger__line:nth-child(1) {
    transform:  translateY(7px) rotate(45deg);
    background: var(--gold-main);
}

.hamburger.is-open .hamburger__line:nth-child(2) {
    opacity:    0;
    width:      0;
}

.hamburger.is-open .hamburger__line:nth-child(3) {
    transform:  translateY(-7px) rotate(-45deg);
    background: var(--gold-main);
}

/* ════════════════════════════════════════════════════════════
   ۷. منوی موبایل — Slide Down
════════════════════════════════════════════════════════════ */

.mobile-nav {
    position:        fixed;
    top:             var(--header-height-mobile);
    right:           0;
    left:            0;
    background:      var(--bg-secondary);
    border-bottom:   1px solid var(--border-gold-faint);
    z-index:         calc(var(--z-sticky) - 1);

    /* انیمیشن slide-down */
    max-height:      0;
    overflow:        hidden;
    transition:      max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                     opacity    0.25s ease;
    opacity:         0;

    /* پشتیبانی از backdrop-filter */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.mobile-nav.is-open {
    max-height: 600px;
    opacity:    1;
}

.mobile-nav__inner {
    padding:   var(--space-4) var(--container-pad) var(--space-6);
}

.mobile-nav__list {
    list-style: none;
    padding:    0;
    margin:     0;
}

.mobile-nav__item {
    border-bottom: 1px solid var(--border-subtle);
}

.mobile-nav__item:last-child {
    border-bottom: none;
}

.mobile-nav__link {
    display:     flex;
    align-items: center;
    justify-content: space-between;
    padding:     var(--space-4) var(--space-2);
    font-size:   var(--fs-body);
    font-weight: 500;
    color:       var(--text-secondary);
    transition:  color var(--transition-base);
}

.mobile-nav__link:hover,
.mobile-nav__link:focus-visible,
.mobile-nav__link.active {
    color: var(--gold-light);
}

.mobile-nav__link svg {
    width:  16px;
    height: 16px;
    color:  var(--text-muted);
    flex-shrink: 0;
}

/* CTA موبایل */
.mobile-nav__cta {
    margin-top:  var(--space-5);
    padding-top: var(--space-4);
    border-top:  1px solid var(--border-gold-faint);
}

.mobile-nav__cta .btn {
    width: 100%;
}

/* Overlay پشت منوی موبایل */
.nav-overlay {
    display:    none;
    position:   fixed;
    inset:      0;
    background: var(--overlay-dark);
    z-index:    calc(var(--z-sticky) - 2);
    opacity:    0;
    transition: opacity var(--transition-base);
}

.nav-overlay.is-visible {
    display: block;
    opacity: 1;
}

/* ════════════════════════════════════════════════════════════
   ۸. Responsive
   ۸ آیتم nav + لوگو + CTA زیر ۱۲۰۰px جا نمی‌شود → hamburger
════════════════════════════════════════════════════════════ */

/* دسکتاپ متوسط: کمی فشرده‌تر */
@media (max-width: 1366px) {
    .nav__list { gap: clamp(10px, 1.2vw, 20px); }
    .nav__link { padding: 8px 10px; }
}

/* تبلت و پایین‌تر: hamburger به‌جای nav کامل */
@media (max-width: 1199px) {
    .header__nav { display: none; }
    .header__cta { display: none; }
    .hamburger   { display: flex; }
}

/* موبایل: کاهش ارتفاع هدر + لوگوی آیکون */
@media (max-width: 768px) {
    .site-header,
    .site-header.is-scrolled {
        height: var(--header-height-mobile);
    }

    .logo--horizontal { display: none; }
    .logo--icon       { display: block; }
}