/* ===============================
   NAV (FULL UPDATED)
   - Desktop: uppercase
   - Mobile: overlay background appears instantly (no fade, no slide)
            text/panels slide + fade in
            overlay starts at top (no seam under header)
   - No hover effects
   - iOS tap highlight removed
   =============================== */

/* Make button “ARCHITECTURE” always match nav links (Safari/iOS parity) */
.site-nav .nav-link {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;

  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;

  color: inherit;
  text-decoration: none;
  text-align: left;

  cursor: pointer;
}

/* ===============================
   MOBILE NAV TOGGLE
   =============================== */

.nav-toggle {
  display: none; /* desktop hidden */
  background: none;
  border: none;
  padding: 6px;
  color: var(--text);

  -webkit-tap-highlight-color: transparent;
}

.nav-toggle-lines {
  position: relative;
  width: 22px;
  height: 12px;
  display: block;
}

.nav-toggle-lines::before,
.nav-toggle-lines::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px; /* thinner lines */
  background: currentColor;
  transition: transform 220ms ease, top 220ms ease;
}

.nav-toggle-lines::before {
  top: 2px;
}

.nav-toggle-lines::after {
  top: 9px;
}

/* X when open */
.nav-open .nav-toggle-lines::before {
  top: 6px;
  transform: rotate(45deg);
}
.nav-open .nav-toggle-lines::after {
  top: 6px;
  transform: rotate(-45deg);
}

/* ===============================
   DESKTOP NAV
   =============================== */

@media (min-width: 641px) {
  /* Desktop: panel wrappers should not affect layout */
  .site-nav .nav-panel {
    display: contents;
  }

  /* Only the main row belongs on desktop */
  .site-nav .nav-arch {
    display: none !important;
  }

  .site-nav .nav-main {
    display: flex;
    gap: 35px;
    align-items: center;
    white-space: nowrap;
  }

  .site-nav .nav-main a,
  .site-nav .nav-main .nav-link {
    font-family: var(--ui-font);
    font-weight: var(--ui-weight);
    font-style: normal;
    font-size: 0.67rem;
    letter-spacing: 0em;
    color: var(--text);
    text-decoration: none;

    /* Force uppercase on desktop */
    text-transform: uppercase;
  }

  /* === Architecture desktop-link vs mobile-trigger support === */
  .nav-arch-trigger {
    display: none;
  }
  .nav-arch-link {
    display: inline;
  }
}

/* ===============================
   MOBILE OVERLAY
   =============================== */

@media (max-width: 640px) {
  /* === Architecture desktop-link vs mobile-trigger support === */
  .nav-arch-link { display: none !important; }
  .nav-arch-trigger { display: inline !important; }


  /* Remove iOS gray tap highlight everywhere in nav */
  .site-nav,
  .site-nav *,
  .site-header a,
  .site-header button {
    -webkit-tap-highlight-color: transparent;
  }

  .site-header a:active,
  .site-header button:active,
  .site-nav a:active,
  .site-nav button:active {
    background-color: transparent;
  }

  /* SHOW the toggle on mobile (keep it inside the fixed header) */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1301;
  }

  /* Fullscreen menu:
     - Starts at top (no seam)
     - Background appears instantly (no fade/slide)
     - Menu content (panels) handles slide+fade */
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 1200;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;

    background: #ffffff;

    /* Hide/show instantly (no animation on background) */
    visibility: hidden;
    pointer-events: none;

    /* IMPORTANT: no overlay motion */
    transform: none;
    transition: none;

    /* Push menu content below the fixed header */
    padding-top: calc(var(--header-pad-y) * 2 + 28px);

    padding-left: var(--axis-x);
    padding-right: var(--axis-y);

    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav-open .site-nav {
    visibility: visible;
    pointer-events: auto;
  }

  /* Ensure mobile overlay doesn't inherit desktop nowrap behavior */
  .site-header nav.site-nav {
    white-space: normal;
  }

  /* Stack the main panel items vertically */
  .site-nav .nav-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px; /* adjust to taste */
  }

  /* Make each item take its own line */
  .site-nav .nav-main > a,
  .site-nav .nav-main > .nav-link {
    display: block;
    width: 100%;
  }

  /* ========= Unified mobile typography (main nav + project list) ========= */
  .site-header .site-nav a,
  .site-header .site-nav .nav-link,
  .nav-project-list a {
    font-family: "beaufort-pro", serif;
    font-weight: 300;

    /* identical size for both groups */
    font-size: clamp(1.2rem, 4.5vw, 1.6rem);
    line-height: 1.2;
    letter-spacing: 0.02em;

    padding: 6px 0;

    color: var(--text);
    text-decoration: none;
    -webkit-text-decoration: none;
  }

  /* Prevent visited-link purple */
  .site-header .site-nav a:visited {
    color: var(--text);
  }

  /* Panels: stable defaults */
  .site-nav [data-panel="main"] {
    display: block;
  }

  .site-nav [data-panel="arch"] {
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 24px;
  }

  /* Only switch panels while the overlay is actually open */
  .nav-open .site-nav.is-arch [data-panel="main"] {
    display: none;
  }

  .nav-open .site-nav.is-arch [data-panel="arch"] {
    display: flex;
  }

  /* ===== Text slide + fade (panels) — background stays instant ===== */
  .site-nav .nav-panel {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 220ms ease, transform 220ms ease;
    will-change: opacity, transform;
  }

  .nav-open .site-nav .nav-panel {
    opacity: 1;
    transform: translateY(0);
  }

  /* ===== Architecture sub-panel ===== */
  .nav-project-list {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    padding-bottom: 40px;
  }

  .nav-project-list li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  .nav-project-list a {
    display: block;
    padding: 14px 0; /* adjust to taste */
  }

  /* Back button */
  .nav-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    background: none;
    border: none;
    padding: 0;

    color: var(--text);
    -webkit-tap-highlight-color: transparent;

    font-family: var(--logo-font);
    font-size: 1rem;
    letter-spacing: 0.05em;
    text-align: left;
    cursor: pointer;
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .site-nav .nav-panel,
  .nav-toggle-lines::before,
  .nav-toggle-lines::after {
    transition: none;
  }
}