/* zonnestudio-header-shell 1.0.0 · 21st-port van @educalvolpz/fluid-hover-highlight (21st.dev, motion/react).
   Uit de bron: de lijst is position relative; één absoluut geplaatst highlightvlak (top 0, left 0, pointer-events none,
   hier een zachte pill in --m-surface met een randje --m-line op de hoogte van de link) reist met een veer tussen de
   gemeten rechthoeken van de items (x, y, width, height in containercoördinaten) in plaats van een eigen hover per
   item; de items liggen erboven (relative, z-index 10). Dekking: in 0,08 s op (initial opacity 0) en uit (exit 0,08 s).
   Reduced motion: geen reis, alleen dekking. De balk, het paneel en de actieve markering zijn eigen opmaak. */
.msm-zonnestudio-header-shell {
  --lk-ease: cubic-bezier(.2, 0, 0, 1);
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 40;
  width: 100%;
  padding: 0 16px;
  background: var(--m-bg, #f0ede7);
  color: var(--m-ink, #20282a);
  font-family: var(--m-font-body, 'DM Sans', ui-sans-serif, system-ui, sans-serif);
}
.msm-zonnestudio-header-shell *,
.msm-zonnestudio-header-shell *::before,
.msm-zonnestudio-header-shell *::after { box-sizing: border-box; }
.msm-zonnestudio-header-shell svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.msm-zonnestudio-header-shell a { color: inherit; text-decoration: none; }
.msm-zonnestudio-header-shell p { margin: 0; }
.msm-zonnestudio-header-shell a:focus-visible,
.msm-zonnestudio-header-shell button:focus-visible { outline: 2px solid var(--m-primary, #d9633d); outline-offset: 3px; border-radius: 6px; }

.msm-zonnestudio-header-shell .lk-nav { border-bottom: 1px solid var(--m-line, #dcd6cb); }
.msm-zonnestudio-header-shell .lk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 12px 0;
}
.msm-zonnestudio-header-shell .lk-brand {
  display: inline-flex;
  align-items: center;
  font-family: var(--m-font-display, 'Syne', ui-sans-serif, system-ui, sans-serif);
  font-size: 22px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: var(--m-ink, #20282a);
}

/* De vijf links in een container met position relative; het highlightvlak reist eronder. */
.msm-zonnestudio-header-shell .lk-links {
  position: relative;
  display: none;
  align-items: center;
  gap: 4px;
  margin: 0 auto;
}
.msm-zonnestudio-header-shell .lk-highlight {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 0;
  height: 0;
  border: 1px solid var(--m-line, #dcd6cb);
  border-radius: 9999px;
  background: var(--m-surface, #faf7f1);
  opacity: 0;
  pointer-events: none;
  transform-origin: 0 0;
  will-change: transform, width, height, opacity;
  transition: opacity .08s linear;
}
.msm-zonnestudio-header-shell .lk-highlight.is-on { opacity: 1; }
.msm-zonnestudio-header-shell [data-lk-item] {
  position: relative;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 9999px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--m-muted, #666e70);
  transition: color .2s var(--lk-ease);
}
.msm-zonnestudio-header-shell [data-lk-item]:hover { color: var(--m-ink, #20282a); }
/* Actieve link: stille markering, tekst in --m-ink en 600 gewicht. */
.msm-zonnestudio-header-shell [data-lk-item][aria-current="location"] { color: var(--m-ink, #20282a); font-weight: 600; }

.msm-zonnestudio-header-shell .lk-actions { display: none; align-items: center; gap: 20px; }
.msm-zonnestudio-header-shell .lk-secondary {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--m-muted, #666e70);
  transition: color .2s var(--lk-ease);
}
.msm-zonnestudio-header-shell .lk-secondary:hover { color: var(--m-ink, #20282a); }
.msm-zonnestudio-header-shell .lk-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 9999px;
  background: var(--m-primary, #d9633d);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--m-ink, #20282a);
  transition: background-color .2s var(--lk-ease);
}
.msm-zonnestudio-header-shell .lk-cta:hover { background: color-mix(in srgb, var(--m-primary, #d9633d) 86%, var(--m-ink, #20282a)); }

/* Ronde menuknop onder 768 px. */
.msm-zonnestudio-header-shell .lk-menu,
.msm-zonnestudio-header-shell .lk-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--m-line, #dcd6cb);
  border-radius: 9999px;
  background: var(--m-surface, #faf7f1);
  color: var(--m-ink, #20282a);
  cursor: pointer;
  transition: border-color .2s var(--lk-ease), background-color .2s var(--lk-ease);
}
.msm-zonnestudio-header-shell .lk-menu:hover,
.msm-zonnestudio-header-shell .lk-close:hover { border-color: var(--m-muted, #666e70); }
.msm-zonnestudio-header-shell .lk-menu svg,
.msm-zonnestudio-header-shell .lk-close svg { width: 22px; height: 22px; }

/* Paneel dat van rechts inschuift. */
.msm-zonnestudio-header-shell .lk-backdrop {
  position: fixed;
  inset: 0;
  z-index: 41;
  background: color-mix(in srgb, var(--m-ink, #20282a) 36%, transparent);
  opacity: 0;
  transition: opacity .3s var(--lk-ease);
}
.msm-zonnestudio-header-shell .lk-backdrop.is-open { opacity: 1; }
.msm-zonnestudio-header-shell .lk-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 42;
  display: flex;
  flex-direction: column;
  width: min(100%, 360px);
  padding: 12px 20px 24px;
  background: var(--m-bg, #f0ede7);
  border-left: 1px solid var(--m-line, #dcd6cb);
  box-shadow: -16px 0 40px rgb(0 0 0 / .12);
  transform: translateX(100%);
  transition: transform .3s var(--lk-ease);
  overflow-y: auto;
}
.msm-zonnestudio-header-shell .lk-panel[hidden] { display: none; }
.msm-zonnestudio-header-shell .lk-panel.is-open { transform: none; }
.msm-zonnestudio-header-shell .lk-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  margin-bottom: 20px;
}
/* Dezelfde hook, verticaal: links onder elkaar, het vlak reist over de hoogte. */
.msm-zonnestudio-header-shell .lk-panel-links {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.msm-zonnestudio-header-shell .lk-panel-links [data-lk-item] {
  height: 48px;
  padding: 0 16px;
  font-size: 18px;
  line-height: 24px;
}
.msm-zonnestudio-header-shell .lk-panel-foot { margin-top: auto; padding-top: 24px; display: grid; gap: 16px; }
.msm-zonnestudio-header-shell .lk-cta-wide { height: 48px; font-size: 16px; }
.msm-zonnestudio-header-shell .lk-foot-line { font-size: 13px; line-height: 20px; color: var(--m-muted, #666e70); }

@media (min-width: 768px) {
  .msm-zonnestudio-header-shell .lk-links { display: inline-flex; }
  .msm-zonnestudio-header-shell .lk-actions { display: inline-flex; }
  .msm-zonnestudio-header-shell .lk-menu,
  .msm-zonnestudio-header-shell .lk-backdrop,
  .msm-zonnestudio-header-shell .lk-panel { display: none; }
}
@media (min-width: 1024px) {
  .msm-zonnestudio-header-shell .lk-links { gap: 8px; }
  .msm-zonnestudio-header-shell [data-lk-item] { padding: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .msm-zonnestudio-header-shell .lk-panel,
  .msm-zonnestudio-header-shell .lk-backdrop,
  .msm-zonnestudio-header-shell [data-lk-item],
  .msm-zonnestudio-header-shell .lk-secondary,
  .msm-zonnestudio-header-shell .lk-cta { transition: none; }
  .msm-zonnestudio-header-shell .lk-panel { transform: none; opacity: 0; transition: opacity .2s linear; }
  .msm-zonnestudio-header-shell .lk-panel.is-open { opacity: 1; }
}