/* 60-site_nav-40em.css */

@media (min-width: 40em) {

#site-nav {
  /* layout */
  flex-direction: row;
}

/* These changes happen when the menu
 * is on the right side of the screen
 */
.is-right-handed #site-nav #site-nav__move {
  order: 1;
}

#site-nav__about-dropdown:hover ul {
  /* layout */
  width: 4em;
}

.o-site-nav__dropdown ul {
  /* layout */
  display: none;
}

.o-site-nav__dropdown:hover ul {
  /* layout */
  display: flex;
  flex-direction: column;
}

#site-nav__events-dropdown:hover ul {
  /* layout */
  width: 6em;
}

.o-site-nav__dropdown > a::after {
  /* positioning */
  align-content: flex-top;

  /* appearance */
  content: "▼";
}

#site-nav__links {
  /* layout */
  display: flex;
  flex-direction: row;
}

#site-nav__links li {
  /* positioning */
  order: 2;

  /* layout */
  padding: 0 0.25em;
}

/* I like the idea of the text "magnifying" when you hover over it */
#site-nav__links li:hover {
  /* appearance */
  font-size: 110%;
}

#site-nav__move {
  /* layout */
  align-self: flex-start;
  margin-top: 0;
  width: 2em;
}

#site-nav__move button {
  /* layout */
  margin: 0;
  width: 2em;
}

#site-nav__toggle {
  /* layout */
  display: none;
}

} /* @media (min-width: 40em) */