/*
 * ya-portal-menu.css — Board D's left menu on the live portal nav.
 * v1.0.0, 16 August 2026. Companion: ya-portal-menu.md beside this file.
 *
 * Scope: the BuddyBoss vertical profile nav, and only once ya-portal-menu.js
 * has injected the icons and added .ya-mnav-on. With JS absent the stock
 * text menu renders untouched. Hooks are classes only, per the standing rule.
 * The parent theme styles this nav through id selectors, so the properties
 * it contests carry !important — the same answer the CPD form re-skin used.
 */

.bp-navs.ya-mnav-on {
  --ya-plum: #6C4B61;
  --ya-plum-deep: #573C4E;
  --ya-mauve: #8A7081;
  --ya-ink: #1E2132;
  --ya-line: #E3DCE1;
  --ya-bone: #FBF8F6;
}

/* ------------------------------------------------------------------ rows */

.bp-navs.ya-mnav-on li:not(.hideshow) a {
  display: flex !important;
  align-items: center;
  gap: 13px;
  padding: 10px 14px 10px 20px !important;
}

.bp-navs.ya-mnav-on li:not(.hideshow) a .bb-single-nav-item-point {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.35;
  color: var(--ya-ink) !important;
}

/* ------------------------------------------------------------------ icons */

.ya-mnav-ic {
  width: 19px;
  height: 19px;
  flex: none;
  display: block;
}

svg.ya-mnav-ic {
  fill: none;
  stroke: var(--ya-mauve);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The real Hypermobility mark, tinted through its own alpha. It needs a
 * little more room than the stroke icons before the spiral reads, so it
 * keeps the 19px layout box and scales visually — alignment untouched. */
.ya-mnav-coil {
  transform: scale(1.26);
  background: var(--ya-mauve);
  -webkit-mask: url('../images/ya-hyper-coil-plum.png') center / contain no-repeat;
  mask: url('../images/ya-hyper-coil-plum.png') center / contain no-repeat;
}

/* ------------------------------------------------------------- states */

.bp-navs.ya-mnav-on li:not(.hideshow):hover > a { background: rgba(108, 75, 97, 0.05) !important; }
.bp-navs.ya-mnav-on li:hover > a svg.ya-mnav-ic { stroke: var(--ya-plum); }
.bp-navs.ya-mnav-on li:hover > a .ya-mnav-coil { background: var(--ya-plum); }

.bp-navs.ya-mnav-on li.current > a,
.bp-navs.ya-mnav-on li.selected > a {
  background: var(--ya-bone) !important;
  box-shadow: inset 3px 0 0 var(--ya-plum) !important;
}

.bp-navs.ya-mnav-on li.current > a .bb-single-nav-item-point,
.bp-navs.ya-mnav-on li.selected > a .bb-single-nav-item-point {
  color: var(--ya-plum) !important;
  font-weight: 500 !important;
}

.bp-navs.ya-mnav-on li.current > a svg.ya-mnav-ic,
.bp-navs.ya-mnav-on li.selected > a svg.ya-mnav-ic { stroke: var(--ya-plum); }

.bp-navs.ya-mnav-on li.current > a .ya-mnav-coil,
.bp-navs.ya-mnav-on li.selected > a .ya-mnav-coil { background: var(--ya-plum); }