/* ============================================================================================
   MedView nav, light · nav-licht/medview-nav.css. A light copy of _hero-explore/nav (same markup, same
   classes, same medview-nav.js), for index-licht.html. Every class prefixed mvn-, tokens live on .mvn.
   Desktop (>= 900px): a floating frosted-white pill (white at 75%, 18px blur), ink type, centred near
   the top. Praktijken and Product open one light panel attached under the pill: entries (title + one
   line) on the left, a waiting-room preview on the right (img/, rendered from tools/previews.html with
   light kaarten). The panel's surface (.mvn-shell) stays put while its content swaps.
   The one accent: "Aanmelden" in soft mint with ink type.
   Below 900px (Phantom): a frosted logo chip on the left, "Aanmelden" and a round menu button on the right.
   The button opens a floating sheet anchored top right over a dimmed page; Praktijken and Product
   drill down into their own list with a back control.
   Markup: nav.html. Behaviour: medview-nav.js. Swap notes: README.md.
   ============================================================================================ */
.mvn {
  --mvn-ink: #1E1C1A;                       /* the page's type */
  --mvn-glass: rgb(255 255 255 / .75);      /* frosted white over the screen, the room and the sections */
  --mvn-glass-deep: rgb(255 255 255 / .9);  /* the panel: more text on it, so a touch more solid */
  --mvn-on: #1E1C1A;
  --mvn-on-2: rgb(30 28 26 / .76);
  --mvn-dim: #66635D;                       /* descriptions on the white panel, 5.9:1 */
  --mvn-mint: #BCE0C3;                      /* soft mint: the one accent, with ink type (12:1) */
  --mvn-mint-hi: #ACD8B6;
  --mvn-paper: #FBFAF6;                     /* the sheet */
  --mvn-text: #1E1C1A;
  --mvn-muted: #66635D;
  --mvn-focus-light: #1F6B3A;
  --mvn-hover: rgb(30 28 26 / .055);
  --mvn-top: 14px;                          /* gap above the pill */
  --mvn-z: 1000;
  --mvn-ease: cubic-bezier(.22, 1, .36, 1);
  --mvn-font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mvn-ring: inset 0 0 0 1px rgb(30 28 26 / .07), inset 0 1px 0 rgb(255 255 255 / .7);
  --mvn-shadow: 0 1px 2px rgb(30 28 26 / .06), 0 12px 30px -16px rgb(30 28 26 / .26);
  --mvn-blur: blur(18px) saturate(1.6);

  position: fixed; top: 0; left: 0; right: 0; z-index: var(--mvn-z);
  padding-top: env(safe-area-inset-top, 0px);
  pointer-events: none;
  font-family: var(--mvn-font); font-size: 16px; line-height: normal; letter-spacing: normal; text-align: left;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.mvn *, .mvn *::before, .mvn *::after { box-sizing: border-box; }
.mvn :where(ul) { margin: 0; padding: 0; list-style: none; }
.mvn :where(a) { color: inherit; text-decoration: none; }
.mvn :where(button) { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mvn :where(a) { -webkit-tap-highlight-color: transparent; }
.mvn :where(svg) { display: block; flex: none; }
.mvn :where(img) { display: block; max-width: none; }
.mvn :focus { outline: none; }
.mvn :focus-visible { outline: 2px solid var(--mvn-focus-light); outline-offset: 2px; border-radius: 999px; }
.mvn-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* switches transitions off for one frame while a panel or the sheet is put at its start position */
.mvn-nt, .mvn-nt * { transition: none !important; }

/* ---------------------------------------------------------------- the pill (desktop) */
.mvn-pill { position: relative; isolation: isolate; pointer-events: auto; display: flex; align-items: center;
  width: max-content; margin: var(--mvn-top) auto 0; padding: 5px; border-radius: 999px; color: var(--mvn-on); }
/* the glass sits on a pseudo-element: a backdrop-filter on the pill itself would stop the panel's own blur at the pill */
.mvn-pill::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--mvn-glass);
  -webkit-backdrop-filter: var(--mvn-blur); backdrop-filter: var(--mvn-blur);
  box-shadow: var(--mvn-ring), var(--mvn-shadow); }

/* the logo: the MedView mark only (no wordmark), in a round 38 px hit area inside the bar */
.mvn-logo { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-right: 4px; border-radius: 999px; color: var(--mvn-on); }
.mvn-logo svg { width: 26px; height: 26px; }
.mvn-wm { font: 700 16px/1 var(--mvn-font); letter-spacing: .015em; }
.mvn-wm span { font-weight: 400; }

.mvn-items { display: flex; align-items: center; gap: 2px; margin-left: 8px; }
.mvn-it { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 15px; border-radius: 999px; white-space: nowrap;
  font: 450 14.5px/1 var(--mvn-font); letter-spacing: -.004em; color: var(--mvn-on-2);
  transition: color .16s ease, background-color .16s ease; }
.mvn-it:hover, .mvn-it[aria-expanded="true"] { color: var(--mvn-on); background: var(--mvn-hover); }
.mvn-chev { width: 10px; height: 10px; margin-right: -3px; opacity: .62; transition: transform .24s var(--mvn-ease), opacity .16s ease; }
.mvn-it[aria-expanded="true"] .mvn-chev { transform: rotate(180deg); opacity: .9; }

.mvn-end { position: relative; display: flex; align-items: center; gap: 4px; margin-left: 14px; padding-left: 12px; }
.mvn-end::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 16px; margin-top: -8px; background: rgb(30 28 26 / .12); }
.mvn-cta { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 17px; border-radius: 999px; white-space: nowrap;
  background: var(--mvn-mint); color: var(--mvn-ink); font: 560 14.5px/1 var(--mvn-font); letter-spacing: -.006em;
  transition: background-color .16s ease, transform .12s ease; }
.mvn-cta:hover { background: var(--mvn-mint-hi); }
.mvn-cta:active { transform: scale(.97); }
.mvn-menu { display: none; }

/* ---------------------------------------------------------------- the panel (desktop) */
/* one surface under the pill, as wide as the pill; it fades in and holds while the content swaps */
.mvn-shell { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 0; height: var(--mvn-h, 280px);
  border-radius: 22px; background: var(--mvn-glass-deep); -webkit-backdrop-filter: var(--mvn-blur); backdrop-filter: var(--mvn-blur);
  box-shadow: var(--mvn-ring), 0 2px 6px rgb(30 28 26 / .05), 0 28px 56px -26px rgb(30 28 26 / .3);
  pointer-events: none; opacity: 0; visibility: hidden; transform: translate3d(0, -6px, 0) scale(.985); transform-origin: 50% 0;
  transition: opacity .18s ease, transform .24s var(--mvn-ease), height .24s var(--mvn-ease), visibility 0s linear .24s; }
.mvn-pill.is-drop .mvn-shell { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.mvn-panel { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 1; display: grid; grid-template-columns: 352px minmax(0, 1fr); gap: 6px; padding: 8px;
  opacity: 0; visibility: hidden; transform: translate3d(var(--mvn-x, 0px), var(--mvn-y, -6px), 0);
  transition: opacity .16s ease, transform .24s var(--mvn-ease), visibility 0s linear .24s; }
.mvn-panel.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease .03s, transform .26s var(--mvn-ease), visibility 0s; }
/* keeps the pointer inside the nav while it crosses the 8px gap */
.mvn-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }

.mvn-list { display: grid; gap: 2px; align-content: start; }
.mvn-entry { position: relative; display: grid; gap: 3px; padding: 12px 34px 12px 14px; border-radius: 14px; transition: background-color .16s ease; }
.mvn-entry b { font: 500 14.5px/20px var(--mvn-font); letter-spacing: -.006em; color: var(--mvn-on); }
.mvn-entry span { font: 400 13px/18px var(--mvn-font); color: var(--mvn-dim); text-wrap: pretty; }
.mvn-entry.is-active { background: var(--mvn-hover); }
.mvn-go { position: absolute; right: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px; color: var(--mvn-on);
  opacity: 0; transform: translate3d(-5px, 0, 0); transition: opacity .16s ease, transform .22s var(--mvn-ease); }
.mvn-entry.is-active .mvn-go { opacity: 1; transform: none; }
.mvn-entry:focus-visible { outline-offset: -2px; border-radius: 14px; }

.mvn-prv { position: relative; overflow: hidden; border-radius: 14px; background: #ECEAE4; }
.mvn-prv::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgb(30 28 26 / .06); }
.mvn-prv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
  opacity: 0; transform: scale(1.035); transition: opacity .28s ease, transform .6s var(--mvn-ease); }
.mvn-prv img.is-on { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- the sheet (below 900px) */
.mvn-scrim, .mvn-sheet { display: none; }

@media (max-width: 899.98px) {
  .mvn-pill { width: auto; margin: 12px 12px 0; padding: 0; justify-content: space-between; isolation: auto; pointer-events: none; }
  .mvn-pill::before, .mvn-items, .mvn-login, .mvn-shell, .mvn-end::before { display: none; }
  .mvn-logo, .mvn-end { pointer-events: auto; }
  /* narrow: the bare mark, no pill around it */
  .mvn-logo { position: relative; width: 44px; height: 44px; margin: 0; }
  .mvn-logo svg { width: 34px; height: 34px; }
  .mvn-end { margin: 0; padding: 0; gap: 8px; }
  .mvn-cta { height: 44px; padding: 0 18px; font-size: 15px;
    box-shadow: inset 0 0 0 1px rgb(30 28 26 / .06), var(--mvn-shadow); }
  .mvn-menu { position: relative; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: var(--mvn-paper); color: var(--mvn-text);
    box-shadow: inset 0 0 0 1px rgb(30 28 26 / .07), var(--mvn-shadow);
    transition: transform .12s ease; }
  .mvn-menu:active { transform: scale(.94); }
  .mvn-menu i { grid-area: 1 / 1; width: 16px; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform .28s var(--mvn-ease); }
  .mvn-menu i:first-child { transform: translate3d(0, -3.5px, 0); }
  .mvn-menu i:last-child { transform: translate3d(0, 3.5px, 0); }
  .mvn-menu[aria-expanded="true"] i:first-child { transform: rotate(45deg); }
  .mvn-menu[aria-expanded="true"] i:last-child { transform: rotate(-45deg); }
  .mvn-menu:focus-visible { outline-color: var(--mvn-focus-light); }

  .mvn-scrim { display: block; position: fixed; inset: 0; z-index: 2; pointer-events: auto; background: rgb(30 28 26 / .16);
    opacity: 0; visibility: hidden; transition: opacity .24s ease, visibility 0s linear .24s; }
  .mvn.is-sheet .mvn-scrim { opacity: 1; visibility: visible; transition-delay: 0s; }

  .mvn-sheet { --mvn-sheet-top: calc(env(safe-area-inset-top, 0px) + 66px);
    display: block; position: fixed; z-index: 4; top: var(--mvn-sheet-top); right: 12px; width: min(400px, calc(100vw - 24px));
    max-height: calc(100vh - var(--mvn-sheet-top) - 12px); max-height: calc(100dvh - var(--mvn-sheet-top) - 12px);
    overflow: hidden auto; overscroll-behavior: contain; border-radius: 24px; background: var(--mvn-paper); color: var(--mvn-text); pointer-events: auto;
    box-shadow: inset 0 0 0 1px rgb(30 28 26 / .05), 0 2px 6px rgb(30 28 26 / .06), 0 30px 70px -24px rgb(30 28 26 / .32);
    opacity: 0; visibility: hidden; transform: translate3d(0, -8px, 0) scale(.96); transform-origin: calc(100% - 22px) -12px;
    transition: opacity .18s ease, transform .26s var(--mvn-ease), height .26s var(--mvn-ease), visibility 0s linear .26s; }
  .mvn.is-sheet .mvn-sheet { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .3s var(--mvn-ease), height .26s var(--mvn-ease), visibility 0s; }
  .mvn-sheet :focus-visible { outline-color: var(--mvn-focus-light); outline-offset: -2px; border-radius: 16px; }

  /* views: the list on screen is in flow and sets the height; the others wait to its left (root) or right (sub-lists) */
  .mvn-view { position: absolute; top: 0; left: 0; right: 0; padding: 10px;
    opacity: 0; visibility: hidden; transform: translate3d(32px, 0, 0);
    transition: opacity .16s ease, transform .28s var(--mvn-ease), visibility 0s linear .28s; }
  .mvn-view[data-view="root"] { transform: translate3d(-32px, 0, 0); }
  .mvn-view.is-active { position: relative; opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease .05s, transform .3s var(--mvn-ease), visibility 0s; }

  .mvn-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 60px; padding: 0 14px 0 16px; border-radius: 16px;
    font: 450 22px/1.15 var(--mvn-font); letter-spacing: -.014em; color: var(--mvn-text); text-align: left; transition: background-color .16s ease; }
  .mvn-row svg, .mvn-back svg { width: 20px; height: 20px; color: var(--mvn-muted); }
  .mvn-back { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 56px; margin-bottom: 4px; padding: 0 16px 0 8px; border-radius: 16px;
    font: 450 22px/1.15 var(--mvn-font); letter-spacing: -.014em; color: var(--mvn-text); text-align: left; transition: background-color .16s ease; }
  .mvn-sub { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 14px; row-gap: 2px;
    min-height: 72px; padding: 8px 12px 8px 8px; border-radius: 16px; transition: background-color .16s ease; }
  .mvn-th { grid-row: 1 / 3; width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: #ECEAE4;
    box-shadow: inset 0 0 0 1px rgb(30 28 26 / .06); }
  .mvn-sub b { align-self: end; font: 500 17px/22px var(--mvn-font); letter-spacing: -.01em; }
  .mvn-sub span { align-self: start; font: 400 14px/19px var(--mvn-font); color: var(--mvn-muted); text-wrap: pretty; }
  @media (hover: hover) {
    .mvn-row:hover, .mvn-back:hover, .mvn-sub:hover { background: rgb(30 28 26 / .045); }
  }
  .mvn-row:active, .mvn-back:active, .mvn-sub:active { background: rgb(30 28 26 / .065); }
}
@media (max-width: 359.98px) {
  .mvn-pill { margin-inline: 10px; }
  .mvn-cta { padding: 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .mvn-shell, .mvn-panel, .mvn-panel.is-open, .mvn-prv img, .mvn-sheet, .mvn.is-sheet .mvn-sheet, .mvn-view, .mvn-view.is-active, .mvn-scrim {
    transform: none !important; transition-property: opacity, visibility !important; transition-duration: .12s, 0s !important; transition-delay: 0s !important; }
  .mvn-chev, .mvn-go, .mvn-menu i { transition: none !important; }
}