/* ============================================================
   NEXORA · Components / Navigation — Apple Minimal
   Flat, no glass, no borders.
   ============================================================ */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  border-bottom: none;
}

.site-header.is-scrolled {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: 74px;
  transition: height var(--dur) var(--ease-out);
}

.site-header.is-scrolled .nav { height: 62px; }

/* Scroll progress indicator */
.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; width: 0; background: var(--text-1); box-shadow: none; transition: width 0.1s linear; }

/* Back to top — flat circle */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--radius-full);
  background: #f5f5f7;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  color: var(--text-2);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  box-shadow: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring), color var(--dur-fast), background var(--dur-fast);
}

[data-theme="dark"] .to-top { background: #1c1c1e; }
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { color: var(--text-1); border-color: transparent; transform: translateY(-2px); box-shadow: none; background: #e8e8ed; }
[data-theme="dark"] .to-top:hover { background: #2c2c2e; }

/* Brand */
.brand { display: inline-flex; align-items: center; gap: 0.65rem; color: var(--text-1); }
.brand .icon { width: 34px; height: 34px; filter: none; }
.brand-word { font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; letter-spacing: 0.22em; margin-top: 1px; }

/* Desktop links */
.nav-links { display: flex; align-items: center; gap: 0.35rem; list-style: none; padding: 0; }
.nav-link {
  position: relative;
  padding: 0.5rem 0.85rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-2);
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.nav-link::after { content: none; display: none; }
.nav-link:hover, .nav-link.is-active { color: var(--text-1); }

/* Right actions */
.nav-actions { display: flex; align-items: center; gap: 0.75rem; }

/* Theme toggle — flat */
.theme-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  border: none;
  background: #f5f5f7;
  color: var(--text-2);
  box-shadow: none;
  transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

[data-theme="dark"] .theme-toggle { background: #1c1c1e; }
.theme-toggle:hover { color: var(--text-1); border-color: transparent; transform: none; background: #e8e8ed; }
[data-theme="dark"] .theme-toggle:hover { background: #2c2c2e; }
.theme-toggle .icon { position: absolute; transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring); }
[data-theme="dark"] .tt-sun { opacity: 1; transform: none; }
[data-theme="dark"] .tt-moon { opacity: 0; transform: rotate(60deg) scale(0.4); }
[data-theme="light"] .tt-sun { opacity: 0; transform: rotate(-60deg) scale(0.4); }
[data-theme="light"] .tt-moon { opacity: 1; transform: none; }

/* Burger */
.nav-burger {
  display: none;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  border: none;
  background: #f5f5f7;
  color: var(--text-1);
  box-shadow: none;
}

[data-theme="dark"] .nav-burger { background: #1c1c1e; }

/* ---------- Mobile drawer ---------------------------------- */

.mobile-menu { position: fixed; inset: 0; z-index: 150; visibility: hidden; pointer-events: none; }
.mobile-menu.is-open { visibility: visible; pointer-events: auto; }
.mobile-menu-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.mobile-menu.is-open .mobile-menu-backdrop { opacity: 1; }
.mobile-menu-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(88vw, 380px);
  background: var(--bg-elevated);
  border-left: none;
  padding: 1.25rem 1.5rem 2rem;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease-out);
  overflow-y: auto;
  box-shadow: none;
}
.mobile-menu.is-open .mobile-menu-panel { transform: none; }
.mobile-menu-top {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 1.25rem;
  border-bottom: none;
  margin-bottom: 0.75rem;
}
.mobile-links { list-style: none; padding: 0.5rem 0; display: grid; gap: 0.25rem; }
.m-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 0.6rem;
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 500;
  color: var(--text-2);
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.m-link:hover { color: var(--text-1); background: #f5f5f7; }
[data-theme="dark"] .m-link:hover { background: #1c1c1e; }
.m-link .icon { color: var(--text-3); }
.mobile-menu-foot { margin-top: auto; display: grid; gap: 0.75rem; padding-top: 1.5rem; }