/* ═══════════════════════════════════════════════════════════════
   INNOVATORS4U — NAV.CSS
   Navigation, Dropdowns, Mobile Menu, Theme Toggle
   ═══════════════════════════════════════════════════════════════ */

nav {
  position: fixed; top:0; left:0; right:0; z-index:1000;
  padding: 20px 0;
  transition: background .4s, border-color .4s, padding .3s;
  border-bottom: 1px solid transparent;
}
nav.scrolled {
  background: var(--nav-bg);
  backdrop-filter: blur(20px);
  border-bottom-color: var(--border);
  padding: 14px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0;
}

/* Mobile-only wrappers — hidden on desktop */
a.nav-mobile-logo { display: none !important; }
.nav-mobile-center { display: none !important; }

/* Logo */
.logo { text-decoration:none; display:flex; align-items:center; gap:10px; height: 100%; }
.logo-img { height: 32px; width: auto; filter: var(--logo-filter, brightness(1)); display: block; transition: filter .3s; }
.logo:hover .logo-img { filter: var(--logo-filter, brightness(1)) drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.6)); }
@media(max-width: 768px) {
  .logo-img { height: 26px; }
}

/* Center column: logo stack with separator lines */
.nav-center {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: center;
  padding: 0 32px;
  position: relative;
}
.nav-center::before,
.nav-center::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 24px;
  background: var(--border);
}
.nav-center::before { left: 0; }
.nav-center::after  { right: 0; }

/* Nav Links */
.nav-links { display:flex; align-items:center; gap:0; list-style:none; }
.nav-links-left  { justify-content: flex-end; padding-right: 12px; }
.nav-links-right { justify-content: flex-start; padding-left: 12px; }
.nav-cta-item { margin-left: 12px; }
.nav-item { position: relative; }
.nav-item > a {
  display: flex; align-items: center; gap: 4px;
  font-size: 17px; font-weight: 500; color: var(--text-sec);
  text-decoration: none; transition: color .2s;
  padding: 8px 14px; border-radius: 6px;
  font-family: 'Josefin Sans', sans-serif; white-space: nowrap;
}
.nav-item > a:hover, .nav-item > a.active { color: var(--heading); }
.nav-item > a .chevron { width: 12px; height: 12px; transition: transform .25s; opacity: .6; }
.nav-item:hover > a .chevron { transform: rotate(180deg); opacity:1; }

/* Dropdowns */
.nav-dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  min-width: 220px; background: var(--surface-1);
  backdrop-filter: blur(20px); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px;
  padding-top: 10px; /* visual spacing from nav link */
  margin-top: 8px; /* actual visual gap, kept as margin NOT a real gap */
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s, visibility .25s, transform .25s;
  transform: translateX(-50%) translateY(-8px);
  z-index: 100; box-shadow: var(--shadow-h);
}
/* Invisible bridge fills the margin gap so mouse can reach dropdown */
.nav-dropdown::before {
  content: ''; position: absolute;
  top: -10px; left: 0; right: 0; height: 10px;
}
.nav-item:hover .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 8px;
  font-size: 18px; color: var(--text-sec);
  text-decoration: none; transition: background .2s, color .2s;
  white-space: nowrap; font-family: 'Josefin Sans', sans-serif;
}
.nav-dropdown a:hover { background: var(--surface-2); color: var(--heading); }
.nav-dropdown a .dd-dot {
  width: 8px; height: 8px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--accent); flex-shrink:0;
}
.nav-dropdown a:hover .dd-dot { background: var(--accent-h); }
.nav-dropdown-purple a .dd-dot { background: #7C3AED; }
.nav-dropdown-purple a:hover .dd-dot { background: #6D28D9; }
.nav-dropdown-blue a:hover .dd-dot { background: var(--accent-blue-h); }
.nav-dropdown-blue a .dd-dot { background: var(--accent-blue); }
.nav-dropdown-green a .dd-dot { background: var(--green); }
.nav-dropdown-green a:hover .dd-dot { background: var(--green-h); }
.nav-dropdown-orange a .dd-dot { background: #F59E0B; }

/* CTA Button */
.nav-cta-btn {
  font-size: 18px; font-family: 'Josefin Sans', sans-serif; font-weight: 600;
  padding: 10px 22px; border-radius: 8px; border: 1px solid var(--accent);
  background: var(--accent); color: #fff !important; text-decoration: none; transition: all .2s;
  white-space: nowrap; box-shadow: var(--shadow);
}
.nav-cta-btn:hover { background: var(--accent-h); border-color: var(--accent-h); transform: translateY(-2px); box-shadow: var(--shadow-h); }

/* Theme Toggle */
.theme-toggle{
  width:44px;height:24px;border-radius:100px;
  background:var(--surface-3);border:1px solid var(--border);
  cursor:pointer;position:relative;transition:background .3s;
  flex-shrink:0;
}
.theme-toggle::after{
  content:'';position:absolute;top:4px;left:4px;
  width:14px;height:14px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background:var(--text-sec);transition:transform .3s,background .3s;
}
[data-theme="light"] .theme-toggle::after{transform:translateX(20px);background:var(--accent);}
.theme-icon{
  position:absolute;top:50%;transform:translateY(-50%);
  font-size:12px;pointer-events:none;transition:opacity .3s;
}
.theme-icon-moon{left:5px;color:var(--text-muted);}
.theme-icon-sun{right:5px;color:var(--text-muted);}

/* Hamburger */
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; z-index:1001; }
.hamburger span { display:block; width:22px; height:1.5px; background:var(--text-pri); transition:all .3s cubic-bezier(.16,1,.3,1); transform-origin:center; }
.hamburger.open span:nth-child(1){ transform:rotate(45deg) translate(4.5px,4.5px); }
.hamburger.open span:nth-child(2){ opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3){ transform:rotate(-45deg) translate(4.5px,-4.5px); }

/* ── MOBILE DRAWER ── */
.mob-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .35s;
}
.mob-backdrop.open { display: block; opacity: 1; }

.mob-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(400px, 100vw);
  background: var(--surface-1);
  border-left: 1px solid var(--border);
  z-index: 1200;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.mob-drawer.open {
  transform: translateX(0);
}

.mob-drawer-header { 
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; border-bottom: 1px solid var(--border);
}
.mob-logo img { height: 22px; width: auto; display: block; max-width: 100%; }
.mob-close {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-pri); font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.mob-close:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.mob-top-links {
  padding: 16px 24px; display: flex; flex-direction: column; gap: 4px;
}
.mob-top-link {
  font-family: 'Josefin Sans', sans-serif; font-size: 20px;
  color: var(--text-pri); text-decoration: none; padding: 10px 0;
  border-bottom: 1px solid var(--border-dim); transition: color .2s;
}
.mob-top-link:hover { color: var(--accent); }

.mob-cta-link {
  display: inline-flex; align-items: center;
  margin-top: 12px;
  font-family: 'Josefin Sans', sans-serif; font-size: 18px; font-weight: 700;
  padding: 12px 24px; border-radius: 8px;
  background: var(--accent); color: #fff; text-decoration: none;
  transition: all .2s; text-align: center; justify-content: center;
}
.mob-cta-link:hover { background: var(--accent-h); }

/* Accordion */
.mob-accordion { border-bottom: 1px solid var(--border-dim); }
.mob-acc-trigger {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 16px 24px; background: none; border: none;
  font-family: 'Josefin Sans', sans-serif; font-size: 18px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--heading);
  cursor: pointer; transition: color .2s;
}
.mob-acc-trigger:hover { color: var(--accent); }
.mob-acc-icon { font-size: 16px; color: var(--accent); width: 20px; }
.mob-acc-chevron { margin-left: auto; font-size: 14px; color: var(--text-muted); transition: transform .3s; }
.mob-accordion.open .mob-acc-chevron { transform: rotate(180deg); }

.mob-acc-body { 
  max-height: 0; overflow: hidden;
  transition: max-height .35s cubic-bezier(.4,0,.2,1);
  padding: 0 24px;
}
.mob-accordion.open .mob-acc-body { max-height: 600px; }
.mob-acc-link {
  display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: 18px; color: var(--text-sec);
  text-decoration: none; border-bottom: 1px solid var(--border-dim);
  transition: color .2s; font-family: 'Josefin Sans', sans-serif;
}
.mob-acc-link:last-child { border-bottom: none; }
.mob-acc-link:hover { color: var(--heading); }
.mob-acc-link .dd-dot { width: 8px; height: 8px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); flex-shrink: 0; }

.mob-divider { height: 1px; background: var(--border); margin: 8px 0; }

/* Drawer Footer */
.mob-drawer-footer { margin-top: auto; padding: 20px 24px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.mob-contact-link { font-size: 16px; color: var(--text-muted); text-decoration: none; display: flex; align-items: center; gap: 8px; transition: color .2s; }
.mob-contact-link i { color: var(--accent); width: 14px; }
.mob-contact-link:hover { color: var(--text-pri); }
.mob-theme-row { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; font-family: 'Josefin Sans', sans-serif; font-size: 14px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }

/* Stagger animations for links when drawer opens */
.mob-drawer.open .mob-top-link,
.mob-drawer.open .mob-acc-trigger {
  animation: mobFadeIn .4s cubic-bezier(.16,1,.3,1) both;
}
.mob-drawer.open .mob-top-link:nth-child(1) { animation-delay: .05s; }
.mob-drawer.open .mob-top-link:nth-child(2) { animation-delay: .1s; }
.mob-drawer.open .mob-top-link:nth-child(3) { animation-delay: .15s; }
@keyframes mobFadeIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}

/* Responsive */
@media(max-width:1024px) {
  /* Switch to classic flex on mobile/tablet: logo left, hamburger right */
  .nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .nav-links { display: none; }
  .nav-center { display: none; }  /* hide desktop center including logo and toggle */
  a.nav-mobile-logo { display: flex !important; } /* show standalone mobile logo */
  .nav-mobile-center { display: flex !important; } /* show standalone mobile toggle */
  .nav-center::before, .nav-center::after { display: none; }
  .hamburger { display: flex; }
}