/*
 * Shared nav cell effects — identical on the public site (nav ul li) and the
 * framework surfaces (.topbar .topnav .nav-item), so hover/active behave the
 * same everywhere ("nav effects should always be the same").
 *
 * Hover/active draw an SVG border around the cell (adapted from the
 * animated-svg-hover-buttons demo). The SVG overlay is injected per-cell by
 * assets/js/nav-hover.js.
 *
 * SPECIFICITY NOTE: on the framework surfaces, theme-overrides.css styles nav
 * items with !important AND an `a`-qualified selector
 * (`.topbar .topnav a:not(.is-active):hover`, specificity 41) that outranks a
 * plain `.topbar .topnav .nav-item:hover` (40) — which is why the anchor cells
 * (Home/Superstars/Contact) used to keep a hover fill while the span cells did
 * not. So every framework rule below is prefixed `body.theme-sol` (always true
 * on those surfaces) to reach specificity 51 and win. The public-site rules
 * (`nav ul li`) have no such competitor and stay plain.
 */

/* ---- flat cells (no pill background / border) ---- */
nav ul li {
  position: relative;
  background: transparent !important;
  border: none !important;
  color: #8a8a97 !important;
}
body.theme-sol .topbar .topnav .nav-item {
  position: relative;
  background: transparent !important;
  border: none !important;
  color: #8a8a97 !important;
}

/* ---- hover + active: Steel Pink text, never a fill ---- */
nav ul li:hover,
nav ul li.active {
  color: #cb3ed4 !important;
  background: transparent !important;
}
body.theme-sol .topbar .topnav .nav-item:hover,
body.theme-sol .topbar .topnav .nav-item.is-active {
  color: #cb3ed4 !important;
  background: transparent !important;
}

/* Drop the old flat underline indicators — the drawn border replaces them. */
nav ul li.active::after,
body.theme-sol .topbar .topnav .nav-item.is-active::after {
  display: none !important;
}
/* The public site's sliding blue bar is superseded by the per-cell draw. */
nav ul li.slide {
  display: none !important;
}

/* ---- the injected SVG border overlay ---- */
/* Sized 1:1 with the cell (inset a little) via CSS calc, NOT a stretched
   viewBox — so the rounded rect keeps its true aspect and the stroke dash
   draws as one clean line instead of broken segments. */
.nav-fx {
  position: absolute;
  top: 7px;
  left: 9px;
  width: calc(100% - 18px);
  height: calc(100% - 14px);
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.nav-fx-rect {
  fill: transparent;
  stroke: #469cf3;
  stroke-width: 6px;
  /* Exact reference mechanics (animated-svg-hover-buttons #shape): 85 400 /
     offset -220 on a 150x40 button (perimeter 380), scaled to the normalized
     pathLength=100 perimeter (×100/380 ≈ 0.263). ONLY change vs the reference:
     the resting dash length is 0 (was 22.4) so no line shows under the label at
     rest — the border still draws/wraps on hover exactly as the reference. */
  stroke-dasharray: 0 105.3;
  stroke-dashoffset: -57.9;
  transition: 1s all ease;
}

/* Hover + active wrap the border around the whole cell (reference 50 0 / 0,
   3px, colour shift to Steel Pink). .nav-fx-rect has no competitor in
   theme-overrides, so these need no specificity bump. */
nav ul li:hover .nav-fx-rect,
nav ul li.active .nav-fx-rect,
.topbar .topnav .nav-item:hover .nav-fx-rect,
.topbar .topnav .nav-item.is-active .nav-fx-rect,
.media-card:hover .nav-fx-rect,
.media-card:focus-visible .nav-fx-rect,
.news-card:hover .nav-fx-rect,
.news-card:focus-within .nav-fx-rect,
.vcard:hover .nav-fx-rect,
.vcard:focus-visible .nav-fx-rect {
  stroke-dasharray: 13.2 0;
  stroke-dashoffset: 0;
  stroke-width: 3px;
  stroke: #cb3ed4;
}

/* Keep the label above the overlay. */
nav ul li > a,
nav ul li > span,
.topbar .topnav .nav-item {
  position: relative;
  z-index: 1;
}