/*! Draftingware Confidential. Copyright (c) 2024–2026 Draftingware Technologies Pvt. Ltd. All rights reserved. */

/* ─── Sticky nav bar ─────────────────────────────────────── */
.site-nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 300;
   height: 64px;
   display: flex;
   align-items: center;
   background: transparent;
   transition:
      background var(--transition-medium),
      border-color var(--transition-medium);
   border-bottom: 1px solid transparent;
   transform: translateZ(0);
   will-change: backdrop-filter;
}

.site-nav.is-scrolled {
   background: var(--color-bg-nav);
   border-bottom: 1px solid rgba(0, 0, 0, 0.08);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
}

.site-nav .container {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   max-width: none;
   padding: 0 80px;
}

/* Logo */
.nav-logo {
   display: flex;
   align-items: center;
   flex-shrink: 0;
   z-index: 1;
   overflow: hidden;
}

.nav-logo img {
   height: 32px;
   width: auto;
   max-width: 180px;
   display: block;
}

/* ─── Logo animation ─────────────────────────────────────── */
.nav-logo-svg {
   display:   block;
   height:    32px;
   width:     auto;
   max-width: 180px;
   overflow:  visible;
}

.logo-toggle,
.logo-rect {
   will-change: opacity;
}

.logo-type {
   will-change: transform;
}

/* Menu toggle button */
.site-nav__menu-btn {
   background: none;
   border: none;
   padding: 4px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
}

#nav-menu-btn,
[data-nav-menu-btn] {
   margin-right: 0;
   padding-right: 0;
}

/* Hamburger icon — default state */
.nav-hamburger {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   width: 22px;
   height: 14px;
   cursor: pointer;
}

.nav-hamburger__line {
   display: block;
   width: 100%;
   height: 1.5px;
   background: #1d1d1f;
   border-radius: 1px;
   transform-origin: center;
   transition:
      transform 280ms ease,
      opacity 200ms ease;
}

/* Hamburger → X when menu is open */
.site-nav__menu-btn[aria-expanded="true"] .nav-hamburger__line--top,
body.menu-overlay--open .nav-hamburger__line--top {
   transform: translateY(6px) rotate(45deg);
}

.site-nav__menu-btn[aria-expanded="true"] .nav-hamburger__line--mid,
body.menu-overlay--open .nav-hamburger__line--mid {
   opacity: 0;
   transform: scaleX(0);
}

.site-nav__menu-btn[aria-expanded="true"] .nav-hamburger__line--bot,
body.menu-overlay--open .nav-hamburger__line--bot {
   transform: translateY(-6px) rotate(-45deg);
}

/* Focus ring */
.site-nav__menu-btn:focus-visible,
.nav-logo:focus-visible {
   outline: 2px solid var(--color-accent-amber);
   outline-offset: 3px;
   border-radius: 3px;
}

/* Hide ONLY the nav bar logo.
   Scope strictly to .site-nav —
   never touches menu overlay logo  */
body.menu-overlay--open .site-nav .nav-logo,
body.menu-overlay--open .site-nav .nav-brand,
body.menu-overlay--open .site-nav > a:first-child,
body.menu-overlay--open .site-nav > a:first-child img {
   opacity: 0 !important;
   visibility: hidden !important;
   pointer-events: none;
   transition:
      opacity 200ms ease,
      visibility 200ms;
}

/* Hamburger always stays visible */
body.menu-overlay--open .nav-hamburger,
body.menu-overlay--open #nav-menu-btn {
   opacity: 1 !important;
   visibility: visible !important;
}

/* When menu is open: nav background
   becomes transparent so the overlay
   logo shows through at z-index 200.
   The X button remains visible at
   z-index 300 — unaffected.          */
body.menu-overlay--open .site-nav,
body.menu-overlay--open .site-nav.is-scrolled {
   background: transparent !important;
   backdrop-filter: none !important;
   -webkit-backdrop-filter: none !important;
   box-shadow: none !important;
   border-bottom: none !important;
   border-bottom-color: transparent !important;
}