/* =============================================================
   LAYOUT — Navigation, menu mobile, footer
   ============================================================= */

/* ── Navigation ─────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  transition: background 0.3s;
}
.nav.scrolled { background: color-mix(in srgb, var(--bg) 95%, transparent); backdrop-filter: blur(4px); }
.nav-inner {
  display: flex; align-items: stretch;
  height: var(--nav-h);
  padding: 0 var(--px);
  max-width: var(--container);
  margin: 0 auto;
}
.nav-logo {
  display: flex; align-items: center; gap: 8px;
  padding-right: 24px; border-right: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
  flex-shrink: 0;
}
.nav-links { display: none; }
@media (min-width: 768px) {
  .nav-links { display: flex; align-items: stretch; }
  .nav-link {
    display: flex; align-items: center;
    padding: 0 20px; border-right: 1px solid var(--border);
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
    color: var(--fg-muted);
    transition: background 0.2s, color 0.2s;
  }
  .nav-link:hover, .nav-link.active { background: var(--bg-el); color: var(--fg); }
}
.nav-spacer { display: none; }
@media (min-width: 768px) {
  .nav-spacer { display: flex; flex: 1; border-right: 1px solid var(--border); }
}
.nav-icon-btn {
  display: none; align-items: center; justify-content: center;
  width: 48px; border-right: 1px solid var(--border);
  color: var(--fg-muted); transition: color 0.2s, background 0.2s;
}
.nav-icon-btn:hover { color: var(--fg); background: var(--bg-el); }
@media (min-width: 768px) { .nav-icon-btn { display: flex; } }
.nav-cv {
  display: none; align-items: center; gap: 8px;
  padding: 0 20px;
  background: var(--accent); color: #fff;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  transition: background 0.3s, color 0.3s;
  flex-shrink: 0;
}
.nav-cv:hover { background: var(--fg); color: var(--bg); }
@media (min-width: 768px) { .nav-cv { display: flex; } }
.nav-hamburger {
  display: flex; align-items: center; justify-content: center;
  width: 48px; margin-left: auto;
  border-left: 1px solid var(--border);
  color: var(--fg-muted);
  transition: color 0.2s;
  flex-shrink: 0;
}
.nav-hamburger:hover { color: var(--fg); }
@media (min-width: 768px) { .nav-hamburger { display: none; } }

/* ── Menu mobile ────────────────────────────────────────────── */
.mobile-menu {
  position: fixed; inset: 0; top: var(--nav-h);
  z-index: 99;
  background: var(--bg);
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
}
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-nav-link {
  display: flex; align-items: center;
  padding: 20px var(--px);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  border-bottom: 1px solid var(--border);
  color: var(--fg-muted);
  transform: translateY(-10px); opacity: 0;
  transition: transform 0.3s, opacity 0.3s, color 0.2s, background 0.2s;
}
.mobile-menu.open .mobile-nav-link { transform: translateY(0); opacity: 1; }
.mobile-menu.open .mobile-nav-link:nth-child(1) { transition-delay: 0ms; }
.mobile-menu.open .mobile-nav-link:nth-child(2) { transition-delay: 50ms; }
.mobile-menu.open .mobile-nav-link:nth-child(3) { transition-delay: 100ms; }
.mobile-menu.open .mobile-nav-link:nth-child(4) { transition-delay: 150ms; }
.mobile-nav-link:hover, .mobile-nav-link.active { background: var(--bg-el); color: var(--fg); }
.mobile-menu-foot {
  margin-top: auto;
  padding: var(--px);
  border-top: 1px solid var(--border);
}
.mobile-theme-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
}
.mobile-theme-label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted);
}
.mobile-theme-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; border: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-muted); transition: color 0.2s;
}
.mobile-cta {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 16px;
  background: var(--accent); color: #fff;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
}

/* ── Footer ─────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--border); }
.footer-inner {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  padding: 24px 0;
}
.footer-copy {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted);
}
.footer-version {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted);
}