/* 60-site_nav.css */

#site-nav {
  /* positioning */
  position: absolute;
  top: 0.25em;
  left: 0;

  /* layout */
  display: flex;
  flex-direction: column;
  margin: 0.5em 1em;
  padding: 0em 0em;
  max-width: 50%;

  /* appearance */
  background-color: var(--menu-background-color);
  border-radius: 0.5em;
}

.is-right-handed #site-nav {
  /* positioning */
  left: unset;
  right: 0;
}

#site-nav.is-open {
  /* layout */
  width: 8em;

  /* appearance */
  box-shadow: 5px 5px var(--site-neutral-gray);
}

.is-right-handed #site-nav.is-open {
  /* appearance */
  box-shadow: -5px 5px var(--site-neutral-gray);
}

.o-site-nav__dropdown ul {
  /* appearance */
  list-style-type: none;
}

/* hide links by default on small screens */
#site-nav__links {
  /* positioning */

  /* layout */
  display: none;

  /* appearance */
  background-color: var(--menu-background-color);
  list-style-type: none;
}

#site-nav.is-open #site-nav__links {
  display: flex;
  flex-direction: column;
}

#site-nav__links li {
  /* appearance */
  background-color: transparent;
  padding-top: 0.5em;

  /* layout */
  white-space: nowrap;
}

#site-nav__move {
  align-self: center;
  width: 90%;
}

#site-nav__move button {
  /* layout */
  margin-top: 1em;
  width: 100%;
}

/* These changes happen when the menu
 * is on the left side of the screen
 */
#site-nav__move button:after {
  content: var(--raquo);
}

/* These changes happen when the menu
 * is on the right side of the screen
 */
.is-right-handed #site-nav__move button:after {
  content: var(--laquo);
}

#site-nav__toggle {
  /* positioning */
  align-self: flex-start;

  /* layout */
  display: flex;
  height: 2.5em;
  width: 2em;
  align-items: center;
  flex-direction: column;
  justify-content: center;

  /* appearance */
  background-color: var(--menu-background-color);
  border: none;
  border-radius: 0.5em;
  cursor: pointer;
}

.is-right-handed #site-nav__toggle {
  /* positioning */
  align-self: flex-end;
}


#site-nav__toggle span {

  /* layout */
	display: block;
	width: 2em;
	height: 4px;
	margin: 2px;

  /* appearance */
	transition: background-color 0.2s ease-in-out,
							transform 0.2s ease-in-out,
							opacity 0.2s ease-in-out;
	background-color: gray;
}

#site-nav.is-open #site-nav__toggle span:first-child {
  /* positioning */
  position: absolute;

  /* layouyt */
  margin: 0;
  width: 2em;

  /* appearance */
  transform: rotate(45deg);
}

#site-nav.is-open #site-nav__toggle span:nth-child(2) {
  /* appearance */
  opacity: 0;
}

#site-nav.is-open #site-nav__toggle span:last-child {
  /* positioning */
  position: absolute;

  /* layout */
  margin: 0;
  width: 2em;

  /* appearance */
  transform: rotate(-45deg);
}