/**
 * Glass scroll-shrink navbar.
 * Applies to the existing <header class="site-nav"> — no HTML structure
 * changes needed, just add this file + nav-scroll.js (see bottom of file
 * for the JS half) and the two <link>/<script> tags in index.html.
 *
 * Top of page: full-width glass bar (matches your current look).
 * After scrolling past the threshold: shrinks to a smaller, centered,
 * fully-rounded pill (the "second reference image" behavior).
 */

header.site-nav,
.site-nav {
  position: fixed !important;
  top: 20px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 100;

  width: min(1400px, 92vw) !important;
  max-width: 92vw !important;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  padding: 16px 36px !important;
  border-radius: 28px !important;
  box-sizing: border-box !important;

  background: var(--nav-bg);
  border: 1px solid var(--line);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);

  transition:
    width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    max-width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    top 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.45s ease;
}

/* Toggled by nav-scroll.js once the page scrolls past the threshold */
header.site-nav.is-scrolled,
.site-nav.is-scrolled {
  top: 14px !important;
  width: max-content !important;
  max-width: 90vw !important;
  padding: 10px 22px !important;
  border-radius: 999px !important;
  background: var(--nav-bg-strong);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  gap: 20px;
}

/* Push page content below the now-fixed nav instead of hiding under it.
   Adjust this to match your nav's natural height if content sits too
   high/low behind it. */
body {
  padding-top: 92px;
}

@media (max-width: 640px) {
  .site-nav {
    padding: 12px 18px;
    gap: 10px;
  }
  .site-nav.is-scrolled {
    padding: 8px 14px;
  }
  body {
    padding-top: 76px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav {
    transition: none;
  }
}
/* Keep all four navigation links accessible on narrow screens. */
@media (max-width: 900px) {
  header.site-nav #scrubTc { display: none; }
}
@media (max-width: 640px) {
  header.site-nav, header.site-nav.is-scrolled {
    width: 92vw !important; max-width: 92vw !important;
    padding: 10px 14px !important; gap: 4px;
    flex-direction: column; border-radius: 22px !important;
  }
  header.site-nav .nav-right { width: 100%; min-width: 0; }
  header.site-nav nav { width: 100%; gap: 4px; justify-content: space-between; flex-wrap: wrap; }
  header.site-nav nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
  body { padding-top: 132px; }
  .anchor-target { scroll-margin-top: 140px; }
}

/* Subtle text zoom without moving adjacent navigation links. */
header.site-nav nav a, header.site-nav .mark {
  display: inline-block;
  transform-origin: center;
  transition: transform 180ms ease, color 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
  header.site-nav nav a:hover, header.site-nav .mark:hover { transform: scale(1.08); }
}
header.site-nav nav a:focus-visible, header.site-nav .mark:focus-visible { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  header.site-nav nav a, header.site-nav .mark { transition: none; }
}

/* Mobile-only, two-line menu and full-screen navigation. */
.mobile-menu-toggle { display: none; }
.mobile-menu-dialog:not([open]) { display: none; }
.mobile-menu-dialog {
  box-sizing: border-box;
  position: fixed; inset: 0; margin: 0;
  width: 100%; max-width: none; height: 100dvh; max-height: none;
  padding: max(24px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom));
  border: 0; background: #101112; color: #f5f5f5;
  font-family: 'Inter', sans-serif; overflow-y: auto;
}
.mobile-menu-dialog[open] { display: flex; flex-direction: column; }
.mobile-menu-dialog::backdrop { background: #101112; }
.mobile-menu-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mobile-menu-top > span { font-size: 15px; font-weight: 700; }
.mobile-menu-toggle, .mobile-menu-close {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: #f5f5f5; color: #101112; cursor: pointer;
  position: relative; padding: 0;
}
.mobile-menu-toggle span, .mobile-menu-close span {
  position: absolute; left: 12px; width: 20px; height: 1.5px;
  background: currentColor; top: 18px;
}
.mobile-menu-toggle span + span { top: 24px; }
.mobile-menu-close span { top: 21px; transform: rotate(45deg); }
.mobile-menu-close span + span { transform: rotate(-45deg); }
.mobile-menu-links { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin: clamp(48px, 12vh, 110px) 0 48px; }
.mobile-menu-links a { font-size: clamp(36px, 10vw, 48px); line-height: 1.2; letter-spacing: -0.04em; color: inherit; text-decoration: none; }
.mobile-menu-links a:hover { color: #dba641; }
.mobile-menu-footer { margin-top: auto; font-size: 13px; line-height: 1.6; }
.mobile-menu-footer a { display: inline-block; color: inherit; margin-top: 12px; text-decoration: none; border-bottom: 1px solid #777; padding-bottom: 6px; }
.mobile-menu-dialog button:focus-visible, .mobile-menu-dialog a:focus-visible,
.mobile-menu-toggle:focus-visible { outline: 2px solid #dba641; outline-offset: 5px; }
@media (max-width: 640px) {
  header.site-nav.has-mobile-menu,
  header.site-nav.has-mobile-menu.is-scrolled {
    flex-direction: row; justify-content: space-between; align-items: center;
    padding: 10px 16px !important; gap: 10px; border-radius: 24px !important;
  }
  header.site-nav.has-mobile-menu .mark { font-size: clamp(12px, 3.6vw, 15px); }
  header.site-nav.has-mobile-menu .nav-right { display: none; }
  .mobile-menu-toggle { display: block; }
}

/* Morph the menu lines into an X; reverse before dismissing the menu. */
.mobile-menu-close span {
  top: 18px;
  transform: translateY(0) rotate(0deg);
  transform-origin: center;
  transition: transform 240ms cubic-bezier(.4, 0, .2, 1);
}
.mobile-menu-close span + span {
  top: 24px;
  transform: translateY(0) rotate(0deg);
}
.mobile-menu-dialog.is-menu-open .mobile-menu-close span {
  transform: translateY(3px) rotate(45deg);
}
.mobile-menu-dialog.is-menu-open .mobile-menu-close span + span {
  transform: translateY(-3px) rotate(-45deg);
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu-close span { transition: none; }
}

/* Open menu: only the close control appears in the top row. */
.mobile-menu-top > span { display: none; }
.mobile-menu-top { justify-content: flex-end; }

/* Same screen position for the hamburger and close icon. */
.mobile-menu-toggle, .mobile-menu-close {
  background: transparent;
  color: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.mobile-menu-close {
  position: fixed;
  margin: 0;
  z-index: 1;
}
.mobile-menu-top { min-height: 44px; }
.mobile-menu-toggle span, .mobile-menu-close span {
  left: 10px;
  width: 24px;
  height: 2.5px;
  border-radius: 2px;
  background: currentColor;
}

/* Square corners in every navigation state and screen size. */
header.site-nav,
header.site-nav.is-scrolled,
header.site-nav.has-mobile-menu,
header.site-nav.has-mobile-menu.is-scrolled {
  border-radius: 0 !important;
}

/* At the top: edge-to-edge header. After scrolling: detached rectangle. */
header.site-nav:not(.is-scrolled),
header.site-nav.has-mobile-menu:not(.is-scrolled) {
  top: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 20px var(--gutter) !important;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  box-shadow: none;
}
header.site-nav.is-scrolled,
header.site-nav.has-mobile-menu.is-scrolled {
  top: 14px !important;
  width: min(1100px, 92%) !important;
  max-width: 92% !important;
  border: 1px solid var(--line);
}
@media (max-width: 640px) {
  header.site-nav.has-mobile-menu:not(.is-scrolled) {
    padding: 12px 20px !important;
  }
  header.site-nav.has-mobile-menu.is-scrolled {
    padding: 10px 16px !important;
  }
}

/* Compact rounded bar only after scrolling. */
header.site-nav.is-scrolled,
header.site-nav.has-mobile-menu.is-scrolled {
  width: min(960px, 88%) !important;
  max-width: 88% !important;
  border-radius: 20px !important;
  padding: 10px 24px !important;
}
@media (max-width: 1100px) and (min-width: 641px) {
  header.site-nav.is-scrolled #scrubTc { display: none; }
  header.site-nav.is-scrolled .nav-right,
  header.site-nav.is-scrolled nav { gap: 18px; }
}
@media (max-width: 640px) {
  header.site-nav.has-mobile-menu.is-scrolled {
    width: 90% !important;
    max-width: 90% !important;
    border-radius: 18px !important;
    padding: 10px 16px !important;
  }
}

/* Hide the focus box after tapping; retain keyboard focus visibility. */
.mobile-menu-dialog:not(.keyboard-navigation) .mobile-menu-close:focus,
.mobile-menu-dialog:not(.keyboard-navigation) .mobile-menu-close:focus-visible,
header.site-nav:not(.keyboard-navigation) .mobile-menu-toggle:focus,
header.site-nav:not(.keyboard-navigation) .mobile-menu-toggle:focus-visible {
  outline: none;
  box-shadow: none;
}
.mobile-menu-close, .mobile-menu-toggle { -webkit-tap-highlight-color: transparent; }
.mobile-menu-toggle { color: var(--text); }