/* ---------------------------------------------------------------------
   Claldred site menu - the list site-menu.js puts in the panel
   ---------------------------------------------------------------------
   Package F7 (8 Oct 2026). The panel, the button, the overlay and the
   cards themselves are the ones the credits used: .credits-panel,
   .credits-btn and .credits-item, styled by each page's own stylesheet.
   This file adds only what a page link needs on top of a credit card:
   an icon beside the name, the "You're here" and "Coming soon" chips,
   the two group headings, and the panel's top without a heading.
   site-menu.js's header says why the panel keeps its "credits" names. */

/* No heading in the menu: the site's name and line are already on every
   page. What is left is the room the button needs, since it sits inside
   the open panel's top-left corner (see .credits-btn-persp-wrap.panel-open). */
.credits-panel-header.site-menu-top {
  padding: 56px 20px 0 20px;
  border-bottom: none;
}

.site-menu-item {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.site-menu-item:hover { transform: translateY(-1px); }
.site-menu-item:active { transform: scale(0.98); }
.site-menu-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.site-menu-item .credits-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.site-menu-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  transition: color 2400ms ease;
}
.site-menu-name svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
/* The line under the name starts under the name, not under the icon.
   Two classes, to outrank each page's own .credits-item p whichever
   order the page loads them in. */
.credits-item.site-menu-item p { margin: 6px 0 0 28px; }

/* The page you are on. */
.credits-item.site-menu-item.is-here .credits-item-fill { border-color: var(--accent); }
.site-menu-item.is-here .site-menu-name { color: var(--accent); }

.site-menu-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}
.site-menu-chip.is-soon {
  background: color-mix(in srgb, var(--pending) 18%, transparent);
  color: color-mix(in srgb, var(--pending) 85%, var(--text));
}

.site-menu-group {
  margin: 16px 2px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.site-menu-group:first-child { margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .site-menu-item, .site-menu-item:hover, .site-menu-item:active { transition: none; transform: none; }
}