/* jachthaven-header-shell 1.0.0 · block-port van ReactBitsPro Blocks/navigation-1 (Tailwind vertaald, kleuren via --m-*). */
.msm-jachthaven-header-shell {
  --jn-ink: var(--m-ink, #0f1b2a);
  --jn-surface: var(--m-surface, #ffffff);
  --jn-primary: var(--m-primary, #1e3a5a);
  --jn-muted: var(--m-muted, #5a6675);
  --jn-line: color-mix(in srgb, var(--jn-ink) 12%, transparent);
  --jn-text: color-mix(in srgb, var(--jn-ink) 80%, var(--jn-surface));
  --jn-hover: color-mix(in srgb, var(--jn-ink) 5%, transparent);
  --jn-bar: 73px;
  position: sticky;
  top: 0;
  z-index: 60;
  font-family: var(--m-font-body, 'Public Sans', ui-sans-serif, system-ui, sans-serif);
  color: var(--jn-ink);
}
.msm-jachthaven-header-shell *,
.msm-jachthaven-header-shell *::before,
.msm-jachthaven-header-shell *::after { box-sizing: border-box; }
.msm-jachthaven-header-shell svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.msm-jachthaven-header-shell a { text-decoration: none; color: inherit; }
.msm-jachthaven-header-shell button { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; }
.msm-jachthaven-header-shell :is(a, button):focus-visible {
  outline: 2px solid var(--jn-primary);
  outline-offset: 2px;
}

/* nav: relative w-full bg-white px-4 sm:px-6 lg:px-8 py-4 border-b */
.msm-jachthaven-header-shell .jn-nav {
  position: relative;
  z-index: 2;
  width: 100%;
  background: var(--jn-surface);
  padding: 16px;
  border-bottom: 1px solid var(--jn-line);
}
.msm-jachthaven-header-shell .jn-wrap { width: 100%; max-width: 1400px; margin: 0 auto; }

/* motion.div: opacity 0, y -10 naar 1, 0 in 0,4 s met ease [0.4, 0, 0.2, 1] */
.msm-jachthaven-header-shell .jn-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  animation: jn-bar-in .4s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes jn-bar-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

.msm-jachthaven-header-shell .jn-left { display: flex; align-items: center; gap: 32px; min-width: 0; }
.msm-jachthaven-header-shell .jn-brand {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  line-height: 1;
  color: var(--jn-ink);
  border-radius: 4px;
}
.msm-jachthaven-header-shell .jn-word {
  font-family: var(--m-font-display, 'Newsreader', ui-serif, Georgia, serif);
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.msm-jachthaven-header-shell .jn-sub { margin-top: 3px; font-size: 12px; color: var(--jn-muted); letter-spacing: 0.01em; }

/* hidden items-center gap-1 lg:flex */
.msm-jachthaven-header-shell .jn-links { display: none; align-items: center; gap: 4px; }
.msm-jachthaven-header-shell .jn-group { position: relative; }
.msm-jachthaven-header-shell .jn-trigger,
.msm-jachthaven-header-shell .jn-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--jn-text);
  transition: color .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1);
}
.msm-jachthaven-header-shell .jn-trigger:hover,
.msm-jachthaven-header-shell .jn-link:hover { color: var(--jn-ink); }
.msm-jachthaven-header-shell .jn-trigger svg { transition: transform .15s cubic-bezier(.4, 0, .2, 1); }
.msm-jachthaven-header-shell .jn-group.is-open .jn-trigger svg { transform: rotate(180deg); }
.msm-jachthaven-header-shell :is(.jn-trigger, .jn-link).is-current,
.msm-jachthaven-header-shell .jn-link[aria-current] { color: var(--jn-ink); background: var(--jn-hover); }

/* Brug van 8 px tussen knop en paneel, alleen zolang het menu open is. */
.msm-jachthaven-header-shell .jn-bridge { display: none; position: absolute; left: 0; top: 100%; width: 100%; height: 8px; }
.msm-jachthaven-header-shell .jn-group.is-open .jn-bridge { display: block; }

/* absolute left-0 top-full z-50 mt-2 w-80 overflow-hidden rounded-xl border bg-white shadow-lg */
.msm-jachthaven-header-shell .jn-panel {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 50;
  margin-top: 8px;
  width: 20rem;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--jn-line);
  background: var(--jn-surface);
  box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--jn-ink) 10%, transparent), 0 4px 6px -4px color-mix(in srgb, var(--jn-ink) 10%, transparent);
}
.msm-jachthaven-header-shell .jn-panel[hidden] { display: none; }
.msm-jachthaven-header-shell .jn-list { list-style: none; margin: 0; padding: 8px; }
.msm-jachthaven-header-shell .jn-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--jn-text);
  transition: background-color .15s cubic-bezier(.4, 0, .2, 1);
}
.msm-jachthaven-header-shell .jn-item:hover,
.msm-jachthaven-header-shell .jn-item[aria-current] { background: var(--jn-hover); }
.msm-jachthaven-header-shell .jn-item svg { width: 18px; height: 18px; margin-top: 1px; color: var(--jn-primary); }
.msm-jachthaven-header-shell .jn-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.msm-jachthaven-header-shell .jn-item-title { font-weight: 500; color: var(--jn-ink); line-height: 20px; }
.msm-jachthaven-header-shell .jn-item-text { font-size: 13px; line-height: 18px; color: var(--jn-muted); }

/* AnimatePresence: paneel 0,2 s easeOut (y -10), items 0,2 s met 0,03 s vertraging per item */
.msm-jachthaven-header-shell .jn-panel.is-in { animation: jn-drop-in .2s cubic-bezier(0, 0, .58, 1) both; }
.msm-jachthaven-header-shell .jn-panel.is-out { animation: jn-drop-out .2s cubic-bezier(0, 0, .58, 1) both; }
.msm-jachthaven-header-shell .jn-panel.is-in .jn-item { animation: jn-item-in .2s ease-in-out both; }
.msm-jachthaven-header-shell .jn-panel.is-in li:nth-child(2) .jn-item { animation-delay: .03s; }
.msm-jachthaven-header-shell .jn-panel.is-in li:nth-child(3) .jn-item { animation-delay: .06s; }
@keyframes jn-drop-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes jn-drop-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-10px); } }
@keyframes jn-item-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

/* Rechts: omlijnde en gevulde knop (hidden lg:block), menuknop (lg:hidden) */
.msm-jachthaven-header-shell .jn-right { display: flex; align-items: center; gap: 12px; }
.msm-jachthaven-header-shell .jn-outline,
.msm-jachthaven-header-shell .jn-fill {
  display: none;
  border-radius: 6px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-align: center;
  transition: background-color .15s cubic-bezier(.4, 0, .2, 1), border-color .15s cubic-bezier(.4, 0, .2, 1);
}
.msm-jachthaven-header-shell .jn-outline { border: 1px solid color-mix(in srgb, var(--jn-ink) 26%, transparent); padding: 7px 16px; color: var(--jn-text); }
.msm-jachthaven-header-shell .jn-outline:hover { background: color-mix(in srgb, var(--jn-ink) 4%, transparent); }
.msm-jachthaven-header-shell .jn-fill { background: var(--jn-primary); color: var(--jn-surface); padding: 8px 20px; }
.msm-jachthaven-header-shell .jn-fill:hover { background: color-mix(in srgb, var(--jn-primary) 84%, var(--jn-ink)); }
.msm-jachthaven-header-shell .jn-menu {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: var(--jn-primary);
  color: var(--jn-surface);
}
.msm-jachthaven-header-shell .jn-menu svg { width: 20px; height: 20px; }
.msm-jachthaven-header-shell .jn-menu .jn-icon-close,
.msm-jachthaven-header-shell .jn-menu[aria-expanded="true"] .jn-icon-open { display: none; }
.msm-jachthaven-header-shell .jn-menu[aria-expanded="true"] .jn-icon-close { display: block; }

/* Mobiel paneel: fixed inset-0 z-40 bg-white, 0,2 s dekking; groepen y 20 in 0,3 s, 0,1 s per groep */
.msm-jachthaven-header-shell .jn-mobile {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: var(--jn-surface);
  opacity: 0;
  transition: opacity .2s ease-in-out;
}
.msm-jachthaven-header-shell .jn-mobile[hidden] { display: none; }
.msm-jachthaven-header-shell .jn-mobile.is-open { opacity: 1; }
.msm-jachthaven-header-shell .jn-mobile-spacer { height: var(--jn-bar); border-bottom: 1px solid var(--jn-line); }
.msm-jachthaven-header-shell .jn-mobile-inner {
  display: flex;
  flex-direction: column;
  height: calc(100% - var(--jn-bar));
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}
.msm-jachthaven-header-shell .jn-mobile-scroll {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 32px;
  overflow-y: auto;
  padding: 32px 0 0;
}
.msm-jachthaven-header-shell .jn-step { opacity: 0; transform: translateY(20px); }
.msm-jachthaven-header-shell .jn-mobile.is-open .jn-step { animation: jn-step-in .3s ease-in-out var(--d, 0s) both; }
.msm-jachthaven-header-shell .jn-mobile.is-closing .jn-step { opacity: 1; transform: none; }
@keyframes jn-step-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.msm-jachthaven-header-shell .jn-acc {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
  color: var(--jn-ink);
  border-radius: 6px;
}
.msm-jachthaven-header-shell .jn-acc svg { width: 24px; height: 24px; transition: transform .15s cubic-bezier(.4, 0, .2, 1); }
.msm-jachthaven-header-shell .jn-acc[aria-expanded="true"] svg { transform: rotate(180deg); }
.msm-jachthaven-header-shell .jn-acc-panel { overflow: hidden; }
.msm-jachthaven-header-shell .jn-acc-panel[hidden] { display: none; }
.msm-jachthaven-header-shell .jn-acc-list { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; }
.msm-jachthaven-header-shell .jn-acc-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 16px;
  color: var(--jn-text);
}
.msm-jachthaven-header-shell .jn-acc-item:hover { background: var(--jn-hover); }
.msm-jachthaven-header-shell .jn-acc-item .jn-item-title { line-height: 22px; }
.msm-jachthaven-header-shell .jn-mobile-link { font-size: 24px; line-height: 32px; font-weight: 500; color: var(--jn-ink); border-radius: 6px; }
.msm-jachthaven-header-shell .jn-mobile-foot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--jn-line);
  padding: 24px 0;
}
.msm-jachthaven-header-shell .jn-mobile-foot .jn-outline,
.msm-jachthaven-header-shell .jn-mobile-foot .jn-fill { display: block; width: 100%; padding: 12px 16px; }

@media (min-width: 640px) {
  .msm-jachthaven-header-shell .jn-nav { padding: 16px 24px; }
}
@media (min-width: 1024px) {
  .msm-jachthaven-header-shell .jn-nav { padding: 16px 32px; }
  .msm-jachthaven-header-shell .jn-links { display: flex; }
  .msm-jachthaven-header-shell .jn-right .jn-outline,
  .msm-jachthaven-header-shell .jn-right .jn-fill { display: block; }
  .msm-jachthaven-header-shell .jn-menu,
  .msm-jachthaven-header-shell .jn-mobile { display: none; }
}
@media (min-width: 1024px) and (max-width: 1119px) {
  .msm-jachthaven-header-shell .jn-left { gap: 20px; }
  .msm-jachthaven-header-shell .jn-trigger,
  .msm-jachthaven-header-shell .jn-link { padding: 8px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .msm-jachthaven-header-shell .jn-bar,
  .msm-jachthaven-header-shell .jn-panel.is-in,
  .msm-jachthaven-header-shell .jn-panel.is-out,
  .msm-jachthaven-header-shell .jn-panel.is-in .jn-item { animation: none; }
  .msm-jachthaven-header-shell .jn-step,
  .msm-jachthaven-header-shell .jn-mobile.is-open .jn-step { animation: none; opacity: 1; transform: none; }
  .msm-jachthaven-header-shell .jn-mobile { transition-duration: .01s; }
  .msm-jachthaven-header-shell :is(.jn-trigger, .jn-acc) svg { transition: none; }
}