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

/* ─── Full-screen menu overlay ───────────────────────────── */
[data-menu] {
   position: fixed;
   inset: 0;
   z-index: 200;
   background: var(--color-bg-menu);
   display: flex;
   flex-direction: column;
   overflow-y: auto;
   isolation: isolate;
   backdrop-filter: blur(24px);
   -webkit-backdrop-filter: blur(24px);
   opacity: 0;
   transform: translateY(-12px);
   visibility: hidden;
   transition:
      opacity 300ms ease-in-out,
      transform 300ms ease-in-out,
      visibility 300ms;
}

[data-menu].is-open {
   opacity: 1;
   transform: translateY(0);
   visibility: visible;
}

[data-menu].is-closing {
   opacity: 0;
   transform: translateY(-12px);
   visibility: visible;
   transition:
      opacity 240ms ease-in-out,
      transform 240ms ease-in-out,
      visibility 240ms;
}

/* ─── Top bar — mirrors main nav exactly ─────────────────── */
.menu-header {
   height: 64px;
   padding: 0 80px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-shrink: 0;
}

.menu-header .logo,
.menu-header .logo img,
.menu-header img:not(.nav-hamburger),
.menu-logo,
.menu-logo img,
.menu-logo svg,
[data-menu] .menu-header a img {
   height: 32px !important;
   width: auto !important;
   max-width: 180px !important;
   opacity: 1 !important;
   visibility: visible !important;
   display: block;
}

/* ─── Nav panel ──────────────────────────────────────────── */
.menu-nav {
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
}

.menu-nav-list {
   list-style: none;
   margin: 0;
   padding-top: 48px;
   padding-bottom: 48px;
   padding-left: 80px;
   padding-right: 40px;
   display: flex;
   flex-direction: column;
   gap: var(--space-3);
}

/* Item animation defaults */
.menu-nav-list li {
   opacity: 0;
   transform: translateY(24px);
   transition:
      opacity 280ms ease-out,
      transform 280ms ease-out;
   transition-delay: 0ms;
}

/* Items visible when open — staggered */
[data-menu].is-open .menu-nav-list li {
   opacity: 1;
   transform: translateY(0);
}

[data-menu].is-open .menu-nav-list li:nth-child(1) {
   transition-delay: 60ms;
}
[data-menu].is-open .menu-nav-list li:nth-child(2) {
   transition-delay: 140ms;
}
[data-menu].is-open .menu-nav-list li:nth-child(3) {
   transition-delay: 220ms;
}
[data-menu].is-open .menu-nav-list li:nth-child(4) {
   transition-delay: 300ms;
}
[data-menu].is-open .menu-nav-list li:nth-child(5) {
   transition-delay: 380ms;
}

/* Items close — simultaneous, fast */
[data-menu].is-closing .menu-nav-list li {
   opacity: 0;
   transform: translateY(-16px);
   transition:
      opacity 160ms ease-in,
      transform 160ms ease-in;
   transition-delay: 0ms;
}

/* Nav link */
.menu-nav-item {
   display: flex;
   align-items: baseline;
   gap: 20px;
   font-size: var(--type-menu-size);
   line-height: var(--type-menu-lh);
   letter-spacing: var(--type-menu-ls);
   font-weight: var(--type-menu-weight);
   color: #1d1d1f;
   text-decoration: none;
   transition: color 200ms ease;
}

.menu-nav-item:hover,
.menu-nav-item:focus-visible {
   color: #4b61dd;
   outline: none;
}

.menu-nav-item:focus-visible {
   outline: 2px solid var(--color-accent-amber);
   outline-offset: 4px;
   border-radius: 2px;
}

.menu-nav-item__num {
   font-family: var(--font-mono);
   font-size: var(--type-mono-label-size);
   letter-spacing: var(--type-mono-label-ls);
   color: rgba(0, 0, 0, 0.35);
   width: 24px;
   flex-shrink: 0;
}

/* ─── Bottom bar ─────────────────────────────────────────── */
.menu-bottom {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 20px 80px 40px;
   border-top: 1px solid rgba(0, 0, 0, 0.08);
   box-sizing: border-box;
   flex-shrink: 0;
   opacity: 0;
   transition: opacity 0.3s ease 0.25s;
}

[data-menu].is-open .menu-bottom {
   opacity: 1;
}

.menu-bottom nav {
   display: flex;
   align-items: center;
   gap: 32px;
}

.menu-bottom a {
   font-family: var(--font-mono);
   font-size: 10px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: #1d1d1f;
   text-decoration: none;
   transition: color 200ms ease;
}

.menu-bottom a:hover {
   color: #4b61dd;
   text-decoration: underline;
   text-underline-offset: 3px;
}

.menu-copyright {
   font-family: var(--font-mono);
   font-size: 10px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: #6e6e73;
}

@media (prefers-reduced-motion: reduce) {
   [data-menu],
   [data-menu].is-closing {
      transition:
         opacity 1ms,
         transform 1ms,
         visibility 1ms;
   }
   .menu-nav-list li {
      transition: opacity 150ms ease !important;
      transform: none !important;
   }
   .menu-bottom {
      transition: opacity 150ms ease !important;
   }
}