/* Site menu — fixed top right, injected by menu.js.
   Default: cream on royal (dark pages). Add data-theme="light" on the
   menu.js script tag for black-on-white pages (VL_producer). */

.menu-root {
  position: fixed;
  top: max(1.1rem, env(safe-area-inset-top));
  right: max(1.25rem, env(safe-area-inset-right));
  z-index: 1000;
  font-family: "Source Code Pro", ui-monospace, monospace;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1;
}

.menu-button {
  display: block;
  margin-left: auto;
  background: none;
  border: 0;
  padding: 0.35rem 0.15rem;
  color: #F4EFE3;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.menu-button:hover { opacity: 0.75; }

.menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  min-width: 10rem;
  background: #15318E;
  border: 1px solid #FFFFFF;
  padding: 0.45rem 0;
}

.menu-root.open .menu-dropdown { display: block; }

.menu-dropdown a {
  display: block;
  padding: 0.5rem 1.15rem;
  color: #F4EFE3;
  text-decoration: none;
}

.menu-dropdown a:hover { background: rgba(244, 239, 227, 0.12); }

/* light variant: black on white, black border */
.menu-light .menu-button { color: #000; }
.menu-light .menu-dropdown { background: #FFFFFF; border-color: #000; }
.menu-light .menu-dropdown a { color: #000; }
.menu-light .menu-dropdown a:hover { background: rgba(0, 0, 0, 0.06); }