/*************/
/* NAV LOCAL */
/*************/

@supports (aspect-ratio:1) {
  .nav--local {
    grid-column:large;
    place-self: start end;
    grid-row:2;
  
    position: sticky;
    top:max(15dvh, 4rem);
    bottom:2em;
    z-index:30;
    translate:0 -.125em;
  
    display:grid;
    place-content:start end;
  
    background-color:var(--bg-nav--local);
    border:solid 1px currentColor;
  }
}

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

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


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

.nav--local:not(.expanded):focus-within {
  outline:solid .1em var(--accent-color);
}

@supports selector(:has(*)) {
  .nav--local:not(.expanded):focus-within {
    outline:unset;
  }
  
  .nav--local:not(.expanded):has(:focus-visible) {
    outline:solid .1em var(--accent-color);
  }
}





/***********/
/* WRAPPER */
/***********/

.nav--local__wrapper {
  display:grid;
  grid-template-columns:1fr max-content;
  grid-template-rows:max-content auto;
  align-items:center;

  width:calc(2em);
  height:calc(2em);

  place-content:start end;
  overflow:hidden;
}

.nav--local.expanded .nav--local__wrapper {
  width:calc(12em - 2px);
  height:auto;

  overflow:visible;
}





/*********/
/* TITLE */
/*********/

.nav--local h2 {
  margin:0;
  padding-left:.5em;
  align-self:center;

  display:flex;
  align-items:center;
  gap:.1em;

  font-size:1em;
  font-weight:400;
  line-height: calc(1.3 * var(--line-height-factor));
}

.nav--local h2 svg {
  width:1.33em;
  height:1.33em;
}





/**********/
/* BUTTON */
/**********/

.nav--local button {
  align-self:start;
  border:none;
  background:none;
}

:root[data-reduced-motion="no-preference"] .nav--local button span {
  transition:.3s;
}

/* dots */
.nav--local button span:nth-of-type(odd) {
  width:.25em;
  height:.25em;
  border-radius:.1em;
  border:solid max(.075em, 1px) currentColor;
}

.nav--local button span:nth-of-type(1) { translate:-.45em -.4em; }
.nav--local button span:nth-of-type(3) { translate:-.45em 0; }
.nav--local button span:nth-of-type(5) { translate:-.45em .4em; }

/* lines */
.nav--local button span:nth-of-type(even) {
  width:.75em;
  height:max(.075em, 1px);
  background-color:currentColor;
}

.nav--local button span:nth-of-type(2) { translate:.2em -.4em; }
.nav--local button span:nth-of-type(4) { translate:.2em 0; }
.nav--local button span:nth-of-type(6) { translate:.2em .4em; }

/* aria-expanded="true" */
.nav--local button[aria-expanded="true"] span:nth-of-type(odd) {
  translate:0 0;
  scale:0;
}
.nav--local button[aria-expanded="true"] span:nth-of-type(even) {
  translate:0 0;
}
.nav--local button[aria-expanded="true"] span:nth-of-type(2) {
  rotate:45deg;
  scale:1.5 1;
}
.nav--local button[aria-expanded="true"] span:nth-of-type(4) {
  scale:0 1;
}
.nav--local button[aria-expanded="true"] span:nth-of-type(6) {
  rotate:-45deg;
  scale:1.5 1;
}





/********/
/* LIST */
/********/

.nav--local ul {
  grid-column:1/-1;
  margin:0;
  padding:.2em;
  list-style-type:none;

  display:grid;
  gap:1px;
  opacity:0;

  max-height:calc(90dvh - max(15dvh, 4rem) - 2.5em);
  overflow:auto;
  scrollbar-width: none;
  overscroll-behavior-y:contain;
}

.nav--local ul::-webkit-scrollbar {
  display: none;
}

.nav--local.expanded ul {
  opacity:1;
}





/********/
/* LINK */
/********/

.nav--local ul li a {
  display: block;
  color:var(--color-nav--local);
  padding:.45em .6em;
  line-height:calc(1.3 * (1 + var(--setting--whitespace) * .05 ));
}

.nav--local ul li a:focus-visible {
  outline-offset: -.1em;
}

.nav--local ul li.in-view a {
  color:var(--color-nav--local);
  text-decoration-line: none;
  cursor:default;
  outline-color:currentColor;
  background-color:var(--bg-nav--local__progress);
  pointer-events:none;
}