/* menukit: groups (level 1) open a panel with pages (level 2) and page parts (level 3+).
   Set these on :root to match your site; the defaults follow light and dark mode. */
.mk-nav {
  --mk-text: var(--mk-text-site, #444);
  --mk-strong: var(--mk-strong-site, #111);
  --mk-muted: var(--mk-muted-site, #777);
  --mk-hover: var(--mk-hover-site, rgba(127, 127, 127, 0.15));
  --mk-panel: var(--mk-panel-site, Canvas);
  --mk-border: var(--mk-border-site, rgba(127, 127, 127, 0.35));
  display: flex; flex-wrap: wrap; gap: 4px; position: relative; min-width: 0;
}
.mk-nav a, .mk-nav summary { color: var(--mk-text); padding: 6px 10px; border-radius: 6px; white-space: nowrap; font-size: 0.92rem; text-decoration: none; }
.mk-nav a:hover, .mk-nav summary:hover { background: var(--mk-hover); }
.mk-nav a[aria-current="page"] { color: var(--mk-strong); background: var(--mk-hover); font-weight: 600; }
.mk-nav .here > summary, .mk-nav a.mk-top.here { color: var(--mk-strong); font-weight: 600; }
.mk-nav summary { display: block; cursor: pointer; list-style: none; }
.mk-nav summary::-webkit-details-marker { display: none; }
.mk-nav summary::after { content: ""; display: inline-block; margin-left: 6px; vertical-align: 2px; border: 4px solid transparent; border-top-color: currentColor; border-bottom-width: 0; }
.mk-nav details[open] > summary { background: var(--mk-hover); }
.mk-group { position: relative; }
.mk-panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; min-width: 210px; max-width: calc(100vw - 32px); background: var(--mk-panel); border: 1px solid var(--mk-border); border-radius: 8px; padding: 6px; box-shadow: 0 6px 18px rgba(0,0,0,0.15); }
.mk-list { list-style: none; margin: 0; padding: 0; }
.mk-list a, .mk-heading { display: block; }
.mk-heading { padding: 6px 10px; font-size: 0.8rem; color: var(--mk-muted); }
.mk-list .mk-list { margin-left: 14px; border-left: 1px solid var(--mk-border); padding-left: 4px; }
.mk-list .mk-list a { font-size: 0.86rem; }
@media (max-width: 560px) {
  .mk-group { position: static; }  /* the panel spans the menu's width, so it never runs off the screen */
  .mk-panel { right: 0; min-width: 0; max-width: none; }
}