/* v2 nav row — ported from ultimAItechORG/hjs (primary nav + mega menu only).
   Top bar (logo / search / utils / flags) is untouched; .header-nav keeps its wood background from styles.css.
   Scoped under .header-nav. Renames vs v2: .mega* → .hdr-mega* (styles.css already has .mega-menu-v2). */
.header-nav {
  --hn-surface: #ffffff;
  --hn-line: rgba(26, 77, 46, 0.16);
  --hn-ink: #161c17;
  --hn-ink-2: #4d5a51;
  --hn-brand: #1a4d2e;
  --hn-brand-hover: #153f26;
  --hn-hover-bg: rgba(26, 77, 46, 0.08);
  --hn-r: 6px;
  --hn-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
.header-nav .ico { width: 0.9em; height: 0.9em; flex: none; fill: currentColor; }
.header-nav [hidden] { display: none !important; }

/* Primary links */
.header-nav .primary-nav { display: flex; align-items: center; gap: 0.125rem; flex: 1 1 auto; min-width: 0; }
.header-nav .nav-link, .header-nav .nav-btn {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.5rem 0.65rem; border-radius: var(--hn-r);
  font: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1.2; color: var(--hn-ink);
  text-decoration: none; background: none; border: 0; cursor: pointer; white-space: nowrap;
}
.header-nav .nav-link:hover, .header-nav .nav-btn:hover, .header-nav .nav-btn[aria-expanded="true"] { background: var(--hn-hover-bg); color: var(--hn-brand); }
/* Logged-in only (auth.js sets <html data-auth-state="logged-in|guest">; absent = treat as guest). */
html:not([data-auth-state="logged-in"]) .header-nav .nav-link--auth { display: none; }
/* Row is 10 items + CTA; tighten below 1280 so it stays on one line from 993px. */
@media (max-width: 1279px) {
  .header-nav .nav-link, .header-nav .nav-btn { font-size: 0.875rem; padding: 0.5rem 0.45rem; }
  .header-nav .nav-utils .nav-util-highlight { font-size: 0.875rem; padding: 0 0.7rem; }
  /* Logged-in row (11 items) does not fit at 993px: wrap the link group instead of running under the CTA. */
  .header-nav .primary-nav { flex-wrap: wrap; padding: 0.25rem 0; }
}
.header-nav .nav-btn .ico { transition: transform 160ms var(--hn-ease); }
.header-nav .nav-btn[aria-expanded="true"] .ico { transform: rotate(180deg); }

/* CTA on the right (replaces the old "Meer" dropdown; #cms-nav-utils-mount kept for the CMS) */
.header-nav .nav-utils .nav-util-highlight {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 0.9rem; border-radius: var(--hn-r);
  background: var(--hn-brand); color: #fff !important; font-size: 0.9375rem; font-weight: 600; text-decoration: none;
  transition: background-color 160ms var(--hn-ease);
}
.header-nav .nav-utils .nav-util-highlight:hover { background: var(--hn-brand-hover); color: #fff !important; }

/* Mega menu: absolute under the nav row (.header-nav is position:relative ≥993px in styles.css) */
.header-nav .hdr-mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--hn-surface); border-bottom: 1px solid var(--hn-line);
  box-shadow: 0 24px 48px rgba(10, 30, 18, 0.10);
  padding: 2rem 0 2.25rem; color: var(--hn-ink); text-align: left;
}
.header-nav .hdr-mega-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 1.2fr; gap: 2rem;
  max-width: var(--container-max, 1400px); margin: 0 auto; padding: 0 var(--container-padding, 2rem);
}
.header-nav .hdr-mega h3 { font-size: 0.9375rem; font-weight: 700; letter-spacing: 0; margin: 0 0 0.6rem; line-height: 1.2; color: var(--hn-ink); }
.header-nav .hdr-mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
.header-nav .hdr-mega li a { display: inline-block; padding: 0.2rem 0; text-decoration: none; color: var(--hn-ink-2); font-size: 0.9375rem; font-weight: 500; }
.header-nav .hdr-mega li a:hover { color: var(--hn-ink); text-decoration: underline; }
.header-nav .hdr-mega-aside { border-left: 1px solid var(--hn-line); padding-left: 2rem; display: grid; align-content: start; gap: 0.75rem; }
.header-nav .hdr-mega-aside p { color: var(--hn-ink-2); font-size: 0.9375rem; margin: 0; line-height: 1.5; }
.header-nav .arrow-link { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.9375rem; text-decoration: none; color: var(--hn-brand); }
.header-nav .arrow-link .ico { transition: transform 160ms var(--hn-ease); }
.header-nav .arrow-link:hover .ico { transform: translateX(3px); }
.header-nav .arrow-link:hover { text-decoration: underline; }