/* Shared nav styling */
.site-nav {
  background: none;
  padding: 10px;
  margin: 30px auto 0 auto; /* 30px top margin */;
  max-width: calc(100% - 50px); /* 50px margin left/right */
}

.site-nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 0;
}
.site-nav ul li a,
.site-nav ul li button {
  border: 4px solid black;
}
/* Optional: hover / focus visual */
.site-nav ul li a:hover,
.site-nav ul li button:hover,
.site-nav ul li a:focus,
.site-nav ul li button:focus {
  background: rgb(211, 211, 211);
  outline: none;
}
.site-nav a {
  display: block;
  padding: 5px 8px;
  background: rgb(224, 165, 0);
  color: rgb(0, 0, 0);
  text-decoration: none;
  font-weight: 400;
  font-family:Arial, Helvetica, sans-serif;
}

/* Bottom nav sits above footer */
.bottom-nav {
  margin-top: 70px;
  margin-bottom: 20px; /* space above footer */
  background: none;
}

/* Hamburger button — fixed at top-left with 5px margin */
.hamburger {
  position: absolute;    /* anchored to page flow, not the viewport */
  top: 5px;            /* 5px from top edge */
  left: 5px;           /* 5px from left edge */
  font-size: 35px;
  padding: 5px;        /* keep a tappable area */
  background: black;
  border: none;
  color: white;
  cursor: pointer;
  z-index: 2001;       /* above nav and header */
}

/* Top nav hidden by default */
.top-nav {
  display: none;
  position: absolute;
  top: 0px !important;
  left: 0;
  right: 0;
  z-index: 1000;
}
.top-nav.active {
  display: block;
}