/* ============================================================
   header.css — ImageResizer.me — DROPDOWN FIXED VERSION

   MAIN FIX:
   ✅ Bridge gap — nav button se dropdown tak invisible area
   ✅ Hide delay 300ms — scroll karne ka time milega
   ✅ Show instant — koi delay nahi dikhne mein
   ✅ Gap reduced from 8px to 2px
   ✅ Touch friendly mobile
   ============================================================ */

#ir-header {
  position: sticky;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-gray-200);
  transition: box-shadow var(--transition-normal);
}

#ir-header.is-scrolled { box-shadow: var(--shadow-md); }

.header-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--side-padding);
  height: var(--header-height);
  display: flex;
  align-items: center;
}

/* ── LOGO ── */
.logo {
  display: flex; align-items: center; gap: 9px;
  flex-shrink: 0; margin-right: 28px;
  text-decoration: none; cursor: pointer;
  transition: opacity var(--transition-fast);
}
.logo:hover { opacity: 0.85; }
.logo-icon  { width: 34px; height: 34px; flex-shrink: 0; display: block; }
.logo-text  {
  font-size: 1.15rem; font-weight: var(--font-extrabold);
  letter-spacing: -0.03em; line-height: 1;
  white-space: nowrap; display: flex; align-items: baseline;
}
.logo-text .lt-image   { color: var(--color-gray-800); }
.logo-text .lt-resizer { color: var(--color-blue); }
.logo-text .lt-dot,
.logo-text .lt-me      { color: var(--color-gold); }

/* ── DESKTOP NAV ── */
.main-nav {
  display: flex; align-items: center;
  gap: 2px; flex: 1;
}

/* ══════════════════════════════════════════
   NAV ITEM — THE MAIN FIX
   
   Problem: Mouse nav button se dropdown ki
   taraf move karta tha to beech ki gap se
   hover state khatam ho jaati thi.
   
   Solution:
   1. ::before se invisible bridge banaya
      jo gap ko cover karta hai
   2. Dropdown hide hone mein 350ms delay
   3. Show hona instant
══════════════════════════════════════════ */
.nav-item {
  position: relative;
}

/* ✅ BRIDGE: Nav button aur dropdown ke beech
   invisible rectangle jo hover maintain karta hai */
.nav-item::before {
  content: '';
  position: absolute;
  bottom: -14px;   /* Gap se thoda zyada */
  left: -8px;
  right: -8px;
  height: 16px;    /* Bridge height */
  background: transparent;
  z-index: 999;
  
  /* Default mein nahi dikhta */
  display: none;
  pointer-events: none;
}

/* Jab nav item hover ho, bridge active karo */
.nav-item:hover::before {
  display: block;
  pointer-events: auto; /* Mouse events pakdo */
}

/* ── NAV BUTTON ── */
.nav-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 13px; border-radius: var(--radius-sm);
  font-size: var(--text-base); font-weight: var(--font-semibold);
  color: var(--color-gray-600);
  background: none; border: none; cursor: pointer;
  white-space: nowrap; font-family: var(--font-primary);
  line-height: 1;
  transition: var(--transition-fast);
  /* ✅ Larger click area */
  min-height: 38px;
}
.nav-btn .nav-icon  { width:15px; height:15px; flex-shrink:0; opacity:0.7; }
.nav-btn .nav-arrow { width:14px; height:14px; flex-shrink:0; transition:transform 0.2s ease; }

.nav-item:hover > .nav-btn {
  background: var(--color-gray-100);
  color: var(--color-gray-900);
}
.nav-item:hover > .nav-btn .nav-arrow { transform: rotate(180deg); }
.nav-btn.active { background: var(--color-blue-light); color: var(--color-blue); }

/* ══════════════════════════════════════════
   DROPDOWN — SHOW FAST, HIDE SLOW
══════════════════════════════════════════ */
.dropdown {
  position: absolute;
  top: calc(100% + 2px); /* ✅ Gap sirf 2px */
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 230px;
  padding: 6px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  
  /* Hidden state */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px) scale(0.98);
  
  /* ✅ Hide: 350ms delay (scroll karne ka waqt) */
  transition:
    opacity    0.15s ease,
    transform  0.15s ease,
    visibility 0s   linear 0.35s;
}

/* ✅ Show: koi delay nahi — instant */
.nav-item:hover > .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition:
    opacity    0.15s ease,
    transform  0.15s ease,
    visibility 0s   linear 0s; /* ← 0s delay on show */
}

/* Dropdown links */
.dropdown-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--radius-sm);
  font-size: 0.84rem; font-weight: var(--font-medium);
  color: var(--color-gray-700);
  text-decoration: none; cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
  /* ✅ Touch-friendly */
  min-height: 42px;
  -webkit-tap-highlight-color: transparent;
}
.dropdown-link:hover {
  background: var(--color-blue-light);
  color: var(--color-blue);
}
.dropdown-link .dd-icon {
  width:30px; height:30px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; flex-shrink:0;
}
.dropdown-link .dd-name { flex:1; font-weight: var(--font-semibold); }

/* ══════════════════════════════════════════
   MEGA DROPDOWN — "More Tools"
   Same fix applied
══════════════════════════════════════════ */
.mega-dropdown {
  position: absolute;
  top: calc(100% + 2px); /* ✅ Gap sirf 2px */
  left: 50%;
  transform: translateX(-50%) translateY(-6px) scale(0.98);
  z-index: var(--z-dropdown);
  width: 520px;
  padding: 14px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  
  /* Hidden */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  
  /* ✅ Same hide delay */
  transition:
    opacity    0.15s ease,
    transform  0.15s ease,
    visibility 0s   linear 0.35s;
}

/* ✅ Show instant */
.nav-item.has-mega:hover > .mega-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
  transition:
    opacity    0.15s ease,
    transform  0.15s ease,
    visibility 0s   linear 0s;
}

.mega-title {
  display: block;
  font-size: var(--text-xs); font-weight: var(--font-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-widest);
  color: var(--color-gray-400);
  padding: 2px 8px 10px;
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.mega-link {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: var(--radius-sm);
  font-size: 0.82rem; font-weight: var(--font-medium);
  color: var(--color-gray-700);
  text-decoration: none; cursor: pointer;
  transition: var(--transition-fast);
  min-height: 40px;
}
.mega-link:hover { background: var(--color-blue-light); color: var(--color-blue); }
.mega-link .mega-icon {
  width:26px; height:26px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; flex-shrink:0;
}

/* ── NAV RIGHT ── */
.nav-right {
  margin-left: auto;
  display: flex; align-items: center;
  gap: var(--space-3); flex-shrink: 0;
}
.btn-nav-cta {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 18px; border-radius: var(--radius-sm);
  background: var(--color-blue); color: var(--color-white);
  font-size: var(--text-base); font-weight: var(--font-bold);
  font-family: var(--font-primary);
  border: none; cursor: pointer; white-space: nowrap;
  text-decoration: none; transition: var(--transition-normal);
}
.btn-nav-cta:hover {
  background: var(--color-blue-dark); color: var(--color-white);
  transform: translateY(-1px); box-shadow: var(--shadow-blue);
}

/* ── HAMBURGER ── */
.ham-btn {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-gray-200);
  background: var(--color-white); cursor: pointer;
  margin-left: auto; flex-shrink: 0;
  transition: var(--transition-fast);
}
.ham-btn:hover { background: var(--color-gray-50); border-color: var(--color-gray-300); }
.ham-icon       { width:18px; height:18px; color: var(--color-gray-700); }
.ham-close-icon { width:18px; height:18px; color: var(--color-gray-700); display:none; }
.ham-btn.menu-open .ham-icon       { display: none; }
.ham-btn.menu-open .ham-close-icon { display: block; }

/* ── MOBILE MENU ── */
#ir-mobile-menu {
  display: none;
  position: fixed;
  top: var(--header-height); left: 0; right: 0; bottom: 0;
  z-index: var(--z-mobile-nav);
  background: var(--color-white);
  overflow-y: auto; padding: 0 16px 32px;
  animation: fadeIn 0.2s ease;
  -webkit-overflow-scrolling: touch;
}
#ir-mobile-menu.is-open { display: block; }

.mob-cat        { padding-top: 20px; }
.mob-cat-hdr    {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--text-xs); font-weight: var(--font-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-widest);
  color: var(--color-gray-400); padding: 0 4px 10px;
}
.mob-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.mob-link {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 12px; border-radius: var(--radius-md);
  background: var(--color-gray-50); border: 1px solid var(--color-gray-200);
  font-size: 0.84rem; font-weight: var(--font-semibold);
  color: var(--color-gray-700); cursor: pointer;
  transition: var(--transition-fast);
  min-height: 48px; /* ✅ Touch-friendly */
  -webkit-tap-highlight-color: transparent;
}
.mob-link:hover,
.mob-link:active {
  background: var(--color-blue-light);
  color: var(--color-blue);
  border-color: var(--color-blue-border);
}
.mob-link-icon {
  width:26px; height:26px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; flex-shrink:0;
}
.mob-divider { height:1px; background: var(--color-gray-100); margin-top:16px; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .mega-dropdown {
    width: 420px; left: auto; right: 0;
    transform: translateY(-6px) scale(0.98);
  }
  .nav-item.has-mega:hover > .mega-dropdown {
    transform: translateY(0) scale(1);
  }
  .mega-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .main-nav  { display: none; }
  .nav-right { display: none; }
  .ham-btn   { display: flex; }
  .logo-text { font-size: 1rem; }
  .logo      { margin-right: 0; }
  .header-inner { padding: 0 16px; }
}

@media (max-width: 480px) {
  .logo-text { font-size: 0.95rem; }
  .mob-links { grid-template-columns: 1fr; }
}