/* The one navigation used by every public page. Scoped to .nav-wrap and
   .portfolio-nav so it never touches the admin sidebar, which also uses .nav. */

:root { --nav-h: 82px; }
@media (max-width: 1180px) { :root { --nav-h: 70px; } }

html { scrollbar-gutter: stable; scroll-behavior: auto !important; scroll-padding-top: calc(var(--nav-h) + 16px); }
body.nav-locked { overflow: hidden !important; }
.reveal { opacity: 1; transform: none; transition: none; }

.nav-wrap {
  position: fixed !important; inset: 0 0 auto !important; z-index: 100 !important;
  height: var(--nav-h) !important; overflow: visible !important;
  background: #0b1220 !important; border-bottom: 1px solid rgba(255,255,255,.11) !important;
}
.portfolio-nav {
  width: min(1200px, calc(100% - 48px)) !important; height: var(--nav-h) !important;
  margin: 0 auto !important; padding: 0 !important;
  display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 24px !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* Brand */
.portfolio-nav .brand { display: flex !important; align-items: center !important; gap: 12px !important; flex: 0 0 auto !important; color: #fff !important; text-decoration: none !important; white-space: nowrap !important; }
.portfolio-nav .brand span { display: grid !important; place-items: center !important; width: 40px !important; height: 40px !important; border: 1px solid #c9a86a !important; color: #c9a86a !important; font: 400 15px/1 Georgia, serif !important; }
.portfolio-nav .brand b { display: inline !important; color: #fff !important; font: 600 15px/1 Manrope, sans-serif !important; letter-spacing: 0 !important; }

/* Links */
.portfolio-nav .nav-links { display: flex !important; align-items: center !important; gap: 22px !important; margin-left: auto !important; white-space: nowrap !important; }
.portfolio-nav .nav-links a { position: relative; padding: 8px 0 !important; background: none !important; color: #c5cfdd !important; text-decoration: none !important; font: 500 14px/1 'DM Sans', sans-serif !important; transition: color .15s; }
.portfolio-nav .nav-links a:hover { color: #fff !important; }
.portfolio-nav .nav-links a[aria-current="page"] { color: #c9a86a !important; }
.portfolio-nav .nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #c9a86a; }
.portfolio-nav .nav-links a.nav-links-cta { display: none !important; }

/* Call to action */
.portfolio-nav .nav-cta { flex: 0 0 auto !important; padding: 11px 14px !important; background: none !important; border: 1px solid #c9a86a !important; color: #c9a86a !important; text-decoration: none !important; white-space: nowrap !important; font: 600 13px/1 'DM Sans', sans-serif !important; transition: background .15s, color .15s; }
.portfolio-nav .nav-cta:hover { background: #c9a86a !important; color: #101827 !important; }
.portfolio-nav .nav-cta:hover span { color: #101827 !important; }
.portfolio-nav .nav-cta span { margin-left: 6px !important; color: #c9a86a !important; }

.portfolio-nav a:focus-visible, .portfolio-nav button:focus-visible { outline: 2px solid #c9a86a !important; outline-offset: 3px !important; }

/* Menu button */
.portfolio-nav .menu { display: none !important; }

@media (max-width: 1180px) {
  .portfolio-nav { width: min(100% - 32px, 1200px) !important; }
  .portfolio-nav .nav-cta { display: none !important; }
  .portfolio-nav .menu {
    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
    gap: 7px !important; width: 44px !important; height: 44px !important; margin: 0 -10px 0 auto !important; padding: 0 !important;
    position: relative !important; z-index: 12 !important; background: none !important; border: 0 !important; cursor: pointer !important;
  }
  .portfolio-nav .menu i { display: block !important; width: 24px !important; height: 2px !important; background: #fff !important; transition: transform .18s; }
  .portfolio-nav.nav-open .menu i:first-child { transform: translateY(4.5px) rotate(45deg); }
  .portfolio-nav.nav-open .menu i:last-child { transform: translateY(-4.5px) rotate(-45deg); }

  .portfolio-nav .nav-links { display: none !important; }
  .portfolio-nav.nav-open .nav-links {
    display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important;
    position: fixed !important; top: var(--nav-h) !important; left: 0 !important; right: 0 !important; z-index: 11 !important;
    max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; margin: 0 !important; padding: 8px 16px 20px !important;
    background: #0b1220 !important; border-bottom: 1px solid rgba(255,255,255,.11) !important; box-shadow: 0 24px 40px rgba(0,0,0,.4);
  }
  .portfolio-nav.nav-open .nav-links a { padding: 16px 4px !important; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 16px !important; }
  .portfolio-nav.nav-open .nav-links a[aria-current="page"]::after { display: none; }
  .portfolio-nav.nav-open .nav-links a.nav-links-cta { display: block !important; margin-top: 16px; padding: 16px !important; border: 0; background: #c9a86a !important; color: #101827 !important; font-weight: 600 !important; text-align: center; }
}
@media (max-width: 380px) {
  .portfolio-nav .brand b { font-size: 13px !important; }
}