/* SEC-16 · page-nav-header — matches PAGE-HOMEPAGE-1.5.html exactly */

.sec-16 {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--bg-page);
  border-bottom: 1px solid var(--divider);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-4) 0;
}

/* Logo */
.nav-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  overflow: hidden;
  max-height: 44px; /* cap the brand area so a large SVG can't stretch the nav */
}
/* Use .sec-16 prefix for higher specificity than WordPress's global img reset
   (WP injects: img { max-width: 100%; height: auto; } which overrides height: 28px) */
.sec-16 .nav-brand-logo {
  height: 28px !important;
  width: auto !important;
  max-width: none;   /* prevent WP's max-width: 100% from letting it stretch */
  max-height: 28px;
  display: block;
  flex-shrink: 0;
}

/* Primary nav */
.nav-primary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  justify-content: center;
}
.nav-item {
  position: relative;
}

/* Nav trigger buttons (Cloud, AI, Solutions, Resources) */
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition);
}
.nav-trigger:hover,
.nav-trigger[aria-expanded="true"] {
  background: var(--primary-soft);
}
.nav-trigger svg {
  transition: transform 0.2s ease;
}
.nav-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Pricing — plain link, no dropdown arrow */
.nav-link-primary {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.nav-link-primary:hover {
  background: var(--primary-soft);
  color: var(--accent-hover);
}

/* Mega-menu panel — centered, floats below its trigger */
.megamenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  max-width: calc(100vw - 40px);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  z-index: 1000;
}
.megamenu.megamenu-3col {
  width: 960px;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-6);
}
/* Hidden state — JS removes this attribute to show the menu */
.megamenu[hidden] {
  display: none;
}

/* Column heading */
.mm-heading {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-4) 0;
}

/* Menu item row */
.mm-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
  align-items: flex-start;
  margin-bottom: 4px;
}
.mm-item:hover {
  background: var(--bg-muted);
}
.mm-item:hover .mm-name {
  color: var(--accent-hover);
}

/* Optional icon (not used in all items) */
.mm-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all 0.15s ease;
}
.mm-item:hover .mm-icon {
  background: var(--accent-soft);
  color: var(--accent-hover);
}

/* Item body — name + subtext */
.mm-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mm-name {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--text-md);
  color: var(--text-heading);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  line-height: 1.3;
  transition: color 0.15s ease;
}
.mm-sub {
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--text-body);
}

/* Badge chip — "Coming soon", "Premium+" */
.mm-chip {
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  white-space: nowrap;
  font-family: var(--font-body);
}

/* "See all →" link rows */
.mm-see-all .mm-name {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
}

/* Utility cluster — Support, Login, CTA */
.nav-utility {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.nav-text-link {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  transition: color var(--transition);
}
.nav-text-link:hover {
  color: var(--accent-hover);
}
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 20px;
  background: var(--primary);
  color: var(--text-inverse);
  text-decoration: none;
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-sm);
  transition: background var(--transition);
  white-space: nowrap;
}
.nav-cta:hover {
  background: var(--primary-hover);
}

/* Cart icon */
.nav-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--text-heading);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
}
.nav-cart:hover {
  background: var(--primary-soft);
  color: var(--accent-hover);
}
.nav-cart svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.nav-cart-count {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--primary);
  color: var(--text-inverse);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--fw-bold);
  line-height: 1;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.nav-cart-count:empty {
  display: none;
}

/* User account avatar (initials circle) */
.nav-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: #c5d5f5;
  color: #2d45a8;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity var(--transition), box-shadow var(--transition);
}
.nav-user-avatar:hover {
  opacity: 0.85;
  box-shadow: 0 0 0 3px rgba(45, 69, 168, 0.15);
}

/* Hamburger (mobile) */
.nav-hamburger {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-heading);
  border-radius: var(--radius-sm);
}
.nav-hamburger:hover {
  background: var(--primary-soft);
}

/* Responsive — hide desktop nav below 1100px */
@media (max-width: 1100px) {
  .nav-hamburger { display: inline-flex; }
  .nav-utility .nav-text-link { display: none; }
  .megamenu { display: none !important; }

  /* Hide mobile nav using max-height (avoids display:none/flex conflicts).
     The nav is always in the DOM and always a flex-column,
     but max-height:0 + overflow:hidden hides it visually. */
  .nav-primary {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden;
    max-height: 0;
    width: 100%;

    /* Position below the sticky header */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 999;

    background: var(--bg-surface);
    box-shadow: var(--shadow-lg);
    border-bottom: 1px solid var(--divider);

    /* Smooth open/close */
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 var(--space-6);
  }

  /* Open state — expand to show all items */
  .nav-primary.nav-primary--open {
    max-height: 600px;
    padding: var(--space-3) var(--space-6) var(--space-4);
  }

  /* Each nav item takes full width */
  .nav-primary .nav-item {
    display: block !important;
    width: 100%;
  }

  /* Nav trigger buttons and links in mobile menu */
  .nav-primary .nav-trigger,
  .nav-primary .nav-link-primary {
    display: flex !important;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--divider);
    border-radius: 0;
    font-size: var(--text-base);
    font-weight: var(--fw-semibold);
    color: var(--text-heading) !important;
    background: transparent !important;
    text-align: left;
  }

  .nav-primary .nav-item:last-child .nav-trigger,
  .nav-primary .nav-item:last-child .nav-link-primary {
    border-bottom: none;
  }

  /* Show chevron arrow on mobile triggers */
  .nav-primary .nav-trigger svg {
    display: block !important;
    flex-shrink: 0;
    transition: transform 0.2s ease;
  }

  /* Rotate arrow when expanded */
  .nav-primary .nav-trigger[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  /* ── Mobile sub-menus (mega-menu inline expansion) ──────────────────
     Override the floating mega-menu with an inline stacked list.
     display:grid !important overrides the [hidden] attribute's display:none
     so we can control visibility via max-height instead. */
  .nav-primary .megamenu,
  .nav-primary .megamenu.megamenu-3col {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    max-height: 0;
    overflow: hidden;
    position: static !important;
    width: 100% !important;
    transform: none !important;
    background: var(--bg-muted) !important;
    border: none !important;
    border-left: 3px solid var(--accent-soft);
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: auto !important;
    transition: max-height 0.3s ease, padding 0.3s ease;
  }

  /* Show sub-menu when trigger is expanded (aria-expanded="true") */
  .nav-primary .nav-trigger[aria-expanded="true"] + .megamenu {
    max-height: 800px;
    padding: var(--space-2) 0 var(--space-3) var(--space-4) !important;
  }

  /* Column headings inside mobile sub-menu */
  .nav-primary .mm-heading {
    font-size: 10px;
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: var(--fw-bold);
    padding: var(--space-3) 0 var(--space-1) 0;
    margin: 0 0 var(--space-1) 0;
  }

  /* Links inside mobile sub-menu */
  .nav-primary .mm-item {
    padding: var(--space-2) 0;
    margin-bottom: 0;
    gap: var(--space-2);
  }
  .nav-primary .mm-name {
    font-size: var(--text-base);
    font-weight: var(--fw-medium);
  }
  .nav-primary .mm-sub {
    display: none; /* hide subtext in mobile to keep list tight */
  }
  .nav-primary .mm-icon {
    display: none; /* hide icons in mobile */
  }
  .nav-primary .mm-chip {
    font-size: 9px;
  }

  /* Each column stacks in the 1-column grid */
  .nav-primary .mm-col {
    padding: 0;
  }
}
@media (max-width: 767px) {
  .nav-cta { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .nav-cta { padding: 10px 14px; font-size: var(--text-sm); }
}