/* Shared site navigation.
 *
 * index.html keeps its own copy of this because its nav is a different animal: it
 * starts transparent over the hero image and turns solid on scroll. Every other page
 * opens straight into content, so the bar here is solid from the first pixel. The
 * markup, spacing, type and colours are otherwise identical, so the two read as one
 * bar as you move between pages.
 */

.sitenav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 28px;
  background: rgba(244, 241, 234, .92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(20, 20, 20, .07);
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
}

.sitenav a { text-decoration: none; color: #141414; }

.sitenav .brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.sitenav .brand img { height: 36px; width: auto; display: block; }
.sitenav .brand span {
  font-weight: 600;
  letter-spacing: .03em;
  font-size: .98rem;
  white-space: nowrap;
}
.sitenav .brand span i { font-style: normal; font-weight: 300; color: #8B857B; }

.sitenav .navlinks {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: .9rem;
  font-weight: 400;
  margin-left: auto;
}
.sitenav .navlinks a { transition: color .2s; }
.sitenav .navlinks a:hover { color: #C68626; }

/* The page you are on, so the bar tells you where you are rather than only where you
   could go. */
.sitenav .navlinks a[aria-current="page"] { color: #C68626; font-weight: 500; }

.sitenav .navlinks .btn {
  background: #C68626;
  color: #141414;
  font-weight: 600;
  font-size: .88rem;
  letter-spacing: .02em;
  padding: 11px 22px;
  border-radius: 2px;
  transition: transform .2s, background .2s;
}
.sitenav .navlinks .btn:hover { background: #b5781f; transform: translateY(-1px); color: #141414; }

.sitenav .menu-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  color: #141414;
  padding: 4px;
}
.sitenav .menu-toggle .icon-close { display: none; }
.sitenav .menu-toggle.open .icon-burger { display: none; }
.sitenav .menu-toggle.open .icon-close { display: block; }

@media (max-width: 760px) {
  .sitenav { padding: 10px 18px; }
  .sitenav .navlinks {
    position: fixed;
    inset: 0 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    background: #F4F1EA;
    padding: 76px 24px 26px;
    transform: translateY(-100%);
    transition: transform .35s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    margin-left: 0;
  }
  .sitenav .navlinks.open { transform: none; }
  .sitenav .navlinks a { font-size: 1.05rem; }
  .sitenav .menu-toggle { display: block; z-index: 60; }
}

@media (prefers-reduced-motion: reduce) {
  .sitenav, .sitenav .navlinks, .sitenav .navlinks .btn { transition: none; }
}