/* Radial menu — a hamburger trigger that fans labelled pills out in an arc.
   Adapted from a jQuery/FontAwesome original: jQuery removed (see menu.js),
   icon glyphs replaced by text-label pills (with optional inline-SVG icons,
   ADR 024), hardcoded #000 / rgba(255,255,255) swapped for template CSS vars
   with LITERAL fallbacks (no parens in fallbacks) so the export's
   resolveCssVars pass degrades gracefully.

   Structure: .fresco-radial-menu (5em box) > .btn.trigger (first) + N .rotater.
   Fan-out GEOMETRY lives in menu.js, not here: the static nth-child rotation
   rules of the original flew pills offscreen when the trigger sat near a
   viewport edge or on narrow screens. menu.js measures the viewport and pill
   sizes on open and sets an inline translate() per .btn-icon (arc when it
   fits, stacked columns when it can't), so every pill stays fully visible.
   This file keeps the visual state + transitions those transforms animate
   through. */

.fresco-radial-menu {
  position: fixed;
  top: 5em;
  left: 50%;
  transform: translateX(-50%);
  width: 5em;
  height: 5em;
  z-index: 120;
  font-family: 'Raleway', sans-serif;
}

.fresco-radial-menu .btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
}

/* Fanned-out item frames: transparent positioning boxes; the visible pill is
   the inner label. Hidden until the menu is active. menu.js translates each
   frame to its computed spot; the transform transition animates it there. */
.fresco-radial-menu .btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  opacity: 0;
  z-index: -10;
  transition: opacity 0.6s, z-index 0.3s, transform 0.6s;
  transform: translate(0, 0);
}

.fresco-radial-menu__label {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.45em 0.85em;
  border-radius: 999px;
  background: #847865;
  color: #f5f0e8;
  font-size: 0.8em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: background-color 0.2s;
}

/* Optional per-item icon (ADR 024): inline SVG from the built-in catalog,
   stroke: currentColor so it follows the pill's text color. */
.fresco-radial-menu__glyph {
  display: inline-flex;
  flex-shrink: 0;
}

.fresco-radial-menu__glyph svg {
  display: block;
  width: 1.1em;
  height: 1.1em;
}

.fresco-radial-menu .btn-icon:hover .fresco-radial-menu__label {
  background: #153d59;
}

.fresco-radial-menu .btn-icon.is-current .fresco-radial-menu__label {
  outline: 2px solid #f5f0e8;
  outline-offset: 1px;
}

/* Trigger — a circle with a hamburger line that morphs into an X when active. */
.fresco-radial-menu .btn.trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #153d59;
  opacity: 1;
  z-index: 100;
  transition: transform 0.3s;
}

.fresco-radial-menu .btn.trigger:hover {
  transform: scale(1.1);
}

.fresco-radial-menu .line {
  position: relative;
  width: 45%;
  height: 4px;
  background: #f5f0e8;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.fresco-radial-menu .line:before,
.fresco-radial-menu .line:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background: #f5f0e8;
  border-radius: 4px;
  transition: transform 0.3s;
}

.fresco-radial-menu .line:before { top: -10px; }
.fresco-radial-menu .line:after { top: 10px; }

.fresco-radial-menu .rotater {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Active state: reveal the pills, morph the hamburger into an X. */
.fresco-radial-menu.active .btn-icon {
  opacity: 1;
  z-index: 50;
}

.fresco-radial-menu.active .trigger .line {
  background: transparent;
}

.fresco-radial-menu.active .trigger .line:before {
  transform: translateY(10px) rotate(45deg);
}

.fresco-radial-menu.active .trigger .line:after {
  transform: translateY(-10px) rotate(-45deg);
}

/* No-JS fallback: menu.js adds .js-ready. Without it, drop the radial geometry
   and show a plain, usable vertical list (internal links still navigate). */
.fresco-radial-menu:not(.js-ready) {
  position: static;
  width: auto;
  height: auto;
  transform: none;
}
.fresco-radial-menu:not(.js-ready) .trigger {
  display: none;
}
.fresco-radial-menu:not(.js-ready) .rotater {
  position: static;
  width: auto;
  height: auto;
  transform: none;
}
.fresco-radial-menu:not(.js-ready) .btn-icon {
  position: static;
  width: auto;
  height: auto;
  opacity: 1;
  z-index: auto;
  transform: none;
  justify-content: flex-start;
  margin: 3px 0;
}