/* =====================================================================
   cnc-secnav.css :: right-side navigator band
   Version: 1.0 | Owner: Kc (CNC brand and front end)

   The fixed band on the right edge of carenetconsultants.co.za. On the main
   site it jumps between sections; here its links go to the other pages, so
   clicking one takes you to that page.

   FRONT END ONLY. No endpoints, no data handling.
   ===================================================================== */

.cnc-secnav{
  --cnc-red:#ED1B24;
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:105;
  display:flex;flex-direction:column;
  background:#fff;border:1px solid #E5E5E5;border-right:none;
  border-radius:12px 0 0 12px;overflow:hidden;
  box-shadow:0 12px 32px rgba(0,0,0,.12);
  transition:opacity .25s ease,visibility .25s ease;
}
.cnc-secnav a{
  position:relative;min-height:38px;display:flex;align-items:center;
  padding:9px 18px;margin:0;
  font-family:'Montserrat',Arial,Helvetica,sans-serif;font-size:13px;font-weight:600;
  color:#1A1A1A;text-decoration:none;white-space:nowrap;
  transition:background .15s,color .15s;
}
.cnc-secnav a:hover,.cnc-secnav a:focus-visible{background:var(--cnc-red);color:#fff}
.cnc-secnav a:focus-visible{outline:none}
/* The page you are on, or the section you are reading, is marked. */
.cnc-secnav a.is-current{color:var(--cnc-red);cursor:default}
.cnc-secnav a.is-current:hover{background:#FDECEE;color:var(--cnc-red)}
.cnc-secnav a.is-active{color:var(--cnc-red)}
.cnc-secnav a.is-active::before{
  content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;background:var(--cnc-red);
}
.cnc-secnav a.is-active:hover,.cnc-secnav a.is-active:focus-visible{color:#fff}
.cnc-secnav a.is-active:hover::before{background:#fff}
/* A step number sits ahead of its label on the numbered journey. */
.cnc-secnav a i{
  font-style:normal;font-family:'Bebas Neue','Montserrat',Arial,sans-serif;
  font-size:14px;color:var(--cnc-red);margin-right:8px;min-width:9px;
}
.cnc-secnav a:hover i,.cnc-secnav a:focus-visible i{color:#fff}
/* A live figure sits above its label where the page supplies one. */
.cnc-secnav a b{
  font-family:'Bebas Neue','Montserrat',Arial,sans-serif;font-weight:400;
  font-size:15px;letter-spacing:.02em;color:var(--cnc-red);margin-right:7px;
}
.cnc-secnav a:hover b,.cnc-secnav a:focus-visible b{color:#fff}
.cnc-secnav.cnc-hid{opacity:0;visibility:hidden;pointer-events:none}

/* The band needs screen width to sit beside the content, so below 980px it
   gives way, exactly as it does on the live site. */
@media (max-width:980px){.cnc-secnav{display:none}}
@media (prefers-reduced-motion:reduce){.cnc-secnav{transition:none}}