/* breadcrumbs  */
.nav {
  container-type:inline-size;
  container-name:nav;

  position: sticky;
  top:0;
  z-index:30;

  grid-column:full;

  display:grid;
  grid-template-columns:inherit;
  
  min-height:3.5em;
  margin-bottom:
    max(.4em, var(--gap) * .2);
  background-color:var(--bg-nav);
}

@supports ( backdrop-filter:blur(1px)) {
  .nav{
    background-color:var(--bg-nav--t);
    backdrop-filter: 
      grayscale(.5)
      blur(.25em);
  }
}

@media (prefers-reduced-transparency:reduce) {
  .nav {
    background-color:var(--bg-nav);
    backdrop-filter:none;
  }
}

@media only print {
  .nav {
    display:none;
  }
}

.nav ul {
  grid-column:inset;

  margin:0;
  padding:0;
  list-style:none;

  display:flex;
  gap:.5em;
}

@supports ( list-style-type:"") {
  .nav-wrapper {
    list-style:initial;
    list-style-type:"";
  }
}

.nav li {
  display:flex;
  align-items:center;
  gap:.5em;
}

.nav li + li::before {
  content:"";
  display:block;
  width:.5em;
  height:max(.075em, 1px);

  background-color:currentColor;
}

.nav a {
  color:var(--clr-nav);
  text-decoration:none;
}

.nav a:hover {
  color:var(--clr-nav--hover);
}

/* one crumb */
@container nav (width < 13em) {
  .nav a:not(:has(span span)) {
    display:flex;
  }
  
  .nav a:not(:has(span span)) > span:first-of-type {
    display:none;
  }
}

/* two crumbs */
@container nav (width < 20em) {
  .nav a:has(span span) {
    display:flex;
  }
  
  .nav a:has(span span) > span:first-of-type {
    display:none;
  }
}

@container nav (width < 18em) {
  .nav a:has(span span) span span {
    position: absolute;
    left:-9999em;
  }
}