/* Native counterpart of top_nav_bar.swf's navigation and selected-section state. */
.site-navigation {
  box-sizing: border-box;
  width: 100%;
  padding: 12px max(12px, calc((100% - 800px) / 2));
  background: #20190f;
  border-bottom: 2px solid #907557;
  font: bold 13px/1.25 Arial, Helvetica, sans-serif;
}
.site-navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-navigation li { display: flex; flex: 1 1 auto; }
.site-navigation a, .site-navigation-unavailable {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: #fff1cc;
  text-decoration: none;
  border: 1px solid transparent;
}
.site-navigation a:hover { background: #49321e; }
.site-navigation a[aria-current="page"] { background: #a41106; border-color: #d58e63; color: #fff; }
.site-navigation a:focus-visible { outline: 3px solid #ffe08a; outline-offset: -3px; }
.site-navigation-unavailable { color: #bcad9a; flex-direction: column; }
.site-navigation-unavailable small { font-size: 10px; font-weight: normal; }
.site-navigation ~ main { padding-top: 32px; }
@media (max-width: 540px) {
  .site-navigation li { flex: 1 1 calc(33.333% - 4px); }
  .site-navigation a, .site-navigation-unavailable { padding: 8px 4px; }
}