/*
 * The site header: rendered once for the whole site (not inside any section
 * or event page) and pinned to the top of the screen, above everything. It
 * has no background, band, box or blur of its own. No logo; the monogram
 * component is kept, unused, in src/icons/Monogram.jsx.
 */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
  padding: 16px 20px 0;
  pointer-events: none; /* only the menu itself takes clicks */
}
.site-header > nav,
.site-header > button {
  pointer-events: auto;
}

/* Where each section's header used to sit, an empty spacer keeps the same
   room on phones and tablets (the header took 4.9rem there), so no content
   moves. Desktop never reserved room for it. */
.site-header-spacer {
  height: 4.9rem;
}
@media (min-width: 1024px) {
  .site-header-spacer {
    display: none;
  }
}

/* Menu words: Montserrat 500, 13px, 0.18em, navy. Readability: one soft
   cream text shadow, identical everywhere. Nothing else. */
.site-nav-link,
.site-nav-mobile-link {
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 13px;
  letter-spacing: 0.18em;
  color: #2b3a5c;
  transition: color 0.2s ease;
}
.site-nav-link {
  text-shadow: 0 0 10px #fff7ea;
}

/* Hover: the word turns gold, nothing else. */
.site-nav-link:hover,
.site-nav-mobile-link:hover {
  color: #b98a3a;
}

/* Current section: a 1px gold underline 6px under the word (the baseline
   sits 11px down the 13px line). It moves as the visitor scrolls. */
.site-nav-current {
  position: absolute;
  left: 0;
  right: 0.18em; /* skip the letter spacing after the last letter */
  top: 17px;
  height: 1px;
  background: #b98a3a;
}
.site-nav-mobile-link [class*="border-b"] {
  border-bottom-color: #b98a3a;
}

/* No focus box after a mouse click; a clear outline for keyboard users. */
.site-nav-link:focus,
.site-nav-mobile-link:focus {
  outline: none;
}
.site-nav-link:focus-visible,
.site-nav-mobile-link:focus-visible {
  outline: 2px solid #b98a3a;
  outline-offset: 5px;
  border-radius: 2px;
}

/* Desktop: the menu row centred, 900px wide at most, items evenly spaced,
   with the words' baseline 44px from the top of the screen (33px to the
   top of the 13px line + 11px to the baseline). */
@media (min-width: 1024px) {
  .site-header {
    justify-content: center;
    padding: 33px 0 0;
  }
  .site-nav {
    width: min(900px, calc(100% - 80px));
  }
}

/* Phones and tablets: the round menu button has a solid cream background
   (nothing behind it shows through), and slides out of sight while the
   visitor scrolls down; assets/header-scroll.js brings it back when they
   scroll up. */
@media (max-width: 1023px) {
  .site-header > button {
    background: #fbf3e3;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  html.menu-button-hidden .site-header > button {
    transform: translateY(-150%);
    opacity: 0;
    pointer-events: none;
  }
}