/* ------------------------------------------------------------------------------ */
/* ASIDE                                                       6.00/00 - 24-10-23 */
/* https://codepen.io/johannpino/pen/ZOrbJG                                       */
/* ------------------------------------------------------------------------------ */
/* FOR SUB-ITEMS ONLY ! */

.sub-nav {
  position:sticky;
  top: 4em;
  max-width: 100%;
  margin:1em 0;
  padding:0;
  line-height:42px;
  list-style:none;
}
.sub-nav ul {
  padding: 0;
  margin: 0;
}
.sub-nav li {
  margin-bottom: 6px;
  padding: 0 0 0 .8em;
  box-shadow: 4px 0 var(--color-primary) inset;
  transition: all 0.5s;
}
.sub-nav li:first-child {
  margin-top: 16px;
}
.sub-nav li:last-child {
  margin-bottom: 6px;  
  border: 1px solid var(--color-primary);
  border-width: 0 0 4px 0;
}
.sub-nav li:hover {
  box-shadow: 14em 0 rgb(0,0,0,.06) inset;
  border-radius: 0 6px 6px 0;
}
.sub-nav a {
  display: block;
  text-decoration: none;
  text-transform: none;
  color: #000;
  transition: all 0.5s;
}
.sub-nav a:hover {
  margin-left: .4em;
  transition: all 0.6s;
}

/* aside - sub-navi - smaller font-size and line-height for smaller screens */ 
@media (max-width: 1279px) {
  .sub-nav {
    line-height:38px;
    font-size: 1rem;
  }
}