/* ── Navigation ──────────────────────────────────────────────── */

.main-nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 100;
   transform: translateY(0);
   opacity: 1;
   transition:
      transform var(--duration-normal) var(--ease),
      opacity var(--duration-normal) var(--ease),
      background var(--duration-normal) var(--ease),
      backdrop-filter var(--duration-normal) var(--ease),
      box-shadow var(--duration-normal) var(--ease);

   will-change: transform, opacity, background, backdrop-filter, box-shadow;
}

.main-nav.scrolled {
   background: var(--nav-bg-scrolled);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   box-shadow: var(--shadow-md);
   border-radius: var(--radius-md);
   margin-top: var(--sp-3);
   border: 1px solid var(--border);
   width: clamp(680px, 88vw, var(--container-max));
   margin-inline: auto;
   overflow: hidden;
}

.main-nav.hidden {
   transform: translateY(calc(-100% - var(--sp-4)));
   opacity: 0;
   pointer-events: none;
}

.nav-inner {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: stretch;
   min-height: 68px;
   padding: 0 var(--container-pad);
   max-width: calc(var(--container-max) + var(--container-pad) * 2);
   margin-inline: auto;
   gap: var(--sp-4);
}

.nav-inner>nav {
   display: flex;
   align-self: stretch;
}

/* Logo */
.nav-logo {
   display: flex;
   align-items: center;
   align-self: center;
   gap: var(--sp-2);
   text-decoration: none;
}

.nav-logo-icon {
   width: 28px;
   height: 28px;
}

.nav-logo-brand {
   width: 260px;
   height: auto;
   transition: width var(--duration-normal) var(--ease);
}

/* Scrolled/pill state tweaks — desktop only */
@media (min-width: 701px) {


   /* Compact, fixed padding in pill state — replaces the large clamp value */
   .main-nav.scrolled .nav-inner {
      padding-inline: var(--sp-5);
   }
}


[data-theme="dark"] .nav-logo-light {
   display: none;
}

[data-theme="light"] .nav-logo-dark {
   display: none;
}

/* fallback before JS sets data-theme — match system preference */
@media (prefers-color-scheme: dark) {
   :root:not([data-theme]) .nav-logo-light {
      display: none;
   }
}

@media (prefers-color-scheme: light) {
   :root:not([data-theme]) .nav-logo-dark {
      display: none;
   }
}

/* Nav links */
.nav-links {
   display: flex;
   align-items: stretch;
   gap: 0;
   flex-wrap: nowrap;
   height: 100%;
}

.nav-links>li {
   display: flex;
   align-items: stretch;
}

.nav-link {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: var(--fs-sm);
   font-weight: 500;
   line-height: 1;
   color: var(--text-secondary);
   padding: 0 var(--sp-3);
   border-radius: 0;
   transition:
      color var(--duration-fast) var(--ease),
      background var(--duration-fast) var(--ease);
   text-decoration: none;
   white-space: nowrap;
}

.nav-link:hover,
.nav-link:focus-visible {
   color: var(--text-primary);
   background: var(--bg-subtle);
}

.nav-link:focus-visible {
   outline: 2px solid var(--border-accent);
   outline-offset: -2px;
}

.nav-link--selected {
   color: var(--text-primary);

}

@media (width > 480px) {
   .nav-link--selected::after {
      content: "";
      position: absolute;
      left: var(--sp-3);
      right: var(--sp-3);
      bottom: 0;
      height: 2px;
      border-radius: 2px 2px 0 0;
      background: var(--clr-accent);
   }
}


.nav-link:active,
.nav-link--selected:active {
   color: var(--text-primary);
   background: var(--nav-link-pressed-bg);
}

.nav-cta-item {
   margin-left: var(--sp-2);
}

.nav-cta-item > .btn {
   align-self: center;
}

/* Controls */
.nav-controls {
   display: flex;
   align-items: center;
   align-self: center;
   gap: var(--sp-2);
   justify-content: flex-end;
   justify-self: end;
}

/* Theme toggle */
.theme-toggle {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   border-radius: var(--radius-md);
   color: var(--text-primary);
   background: transparent;
   border: 1px solid transparent;
   transition:
      color var(--duration-fast),
      border-color var(--duration-fast),
      background var(--duration-fast);
}

.theme-toggle:hover {
   color: var(--text-primary);
   border-color: var(--border-strong);
   background: var(--bg-raised);
}

/* Hamburger */
.nav-hamburger {
   display: none;
   flex-direction: column;
   justify-content: center;
   gap: 5px;
   width: 36px;
   height: 36px;
   padding: var(--sp-2);
   border-radius: var(--radius-md);
   cursor: pointer;
   background: transparent;
   border: 1px solid transparent;
   transition: border-color var(--duration-fast);
}

.nav-hamburger:hover {
   border-color: var(--border-strong);
}

.hamburger-line {
   display: block;
   width: 18px;
   height: 1.5px;
   background: var(--text-primary);
   border-radius: 2px;
   transition:
      transform var(--duration-normal) var(--ease),
      opacity var(--duration-fast) var(--ease);
   transform-origin: center;
}

.nav-hamburger.open .hamburger-line:nth-child(1) {
   transform: translateY(6.5px) rotate(45deg);
}

.nav-hamburger.open .hamburger-line:nth-child(2) {
   opacity: 0;
   transform: scaleX(0);
}

.nav-hamburger.open .hamburger-line:nth-child(3) {
   transform: translateY(-6.5px) rotate(-45deg);
}

/* Hide secondary section on desktop — higher specificity than .nav-links>li */
.nav-links > .mobile-nav-extra {
   display: none;
}

/* Mobile menu */
@media (max-width: 700px) {
   .main-nav {
      background: var(--nav-bg);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--border);
   }

   .main-nav.scrolled {
      width: auto;
      margin-top: 0;
      margin-inline: 0;
      border-radius: 0;
      overflow: visible;
   }

   .nav-inner {
      grid-template-columns: auto 1fr auto;
      min-height: 64px;
      align-items: center;
   }

   .nav-inner > nav {
      display: block;
      min-width: 0;
   }

   .nav-logo {
      justify-self: start;
   }

   .nav-controls {
      justify-self: end;
   }

   .nav-logo,
   .nav-controls {
      position: relative;
      z-index: 120;
   }

   .nav-logo-brand {
      width: min(150px, 42vw);
   }

   .nav-hamburger {
      position: relative;
      z-index: 130;
      display: flex;
      background: var(--bg-raised);
      border-color: var(--border);
      box-shadow: var(--shadow-sm);
   }

   .nav-hamburger:hover,
   .nav-hamburger:focus-visible,
   .nav-hamburger.open {
      background: var(--bg-overlay);
      border-color: var(--border-strong);
   }

   .hamburger-line {
      height: 2px;
      background: var(--text-primary);
   }

   /* Panel */
   .nav-links {
      position: fixed;
      inset: 0;
      z-index: 110;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: stretch;
      width: 100vw;
      height: 100vh;
      padding: calc(64px + var(--sp-8)) var(--sp-6) var(--sp-8);
      gap: var(--sp-1);
      background: var(--bg-base);
      opacity: 0;
      pointer-events: none;
      transform: translateX(100%);
      overflow-y: auto;
      transition:
         transform var(--duration-normal) var(--ease),
         opacity var(--duration-fast) var(--ease);
   }

   .nav-links.open {
      opacity: 1;
      pointer-events: all;
      transform: translateX(0);
   }

   .nav-links > li {
      display: block;
   }

   /* Main nav links — Inter, not heading font */
   .nav-link {
      display: block;
      height: auto;
      font-size: var(--fs-xl);
      font-family: var(--ff-body);
      font-weight: 500;
      line-height: 1.3;
      padding: var(--sp-3) var(--sp-4);
      color: var(--text-secondary);
      border-radius: var(--radius-md);
   }

   .nav-link:not(.nav-link--selected):hover,
   .nav-link:not(.nav-link--selected):focus-visible {
      color: var(--text-primary);
      background: var(--bg-subtle);
   }

   .nav-link--selected {
      color: var(--text-primary);
      background: var(--nav-link-selected-bg);
   }

   .nav-link:active,
   .nav-link--selected:active {
      color: var(--text-primary);
      background: var(--nav-link-pressed-bg);
   }

   /* CTA button in mobile nav */
   .nav-cta-item {
      margin-left: 0;
   }

   .nav-cta-item .btn {
      display: block;
      width: 100%;
      text-align: center;
      justify-content: center;
      margin-top: var(--sp-3);
   }

   /* Secondary footer links section */
   .nav-links > .mobile-nav-extra {
      display: block;
      margin-top: auto;
      padding-top: var(--sp-6);
      border-top: 1px solid var(--border);
   }

   .mobile-nav-secondary {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-4);
   }

   .mobile-nav-col-label {
      display: block;
      font-family: var(--ff-body);
      font-size: var(--fs-xs);
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: var(--sp-2);
   }

   .mobile-nav-col ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: var(--sp-1);
   }

   .mobile-nav-footer-link {
      display: block;
      font-family: var(--ff-body);
      font-size: var(--fs-sm);
      font-weight: 400;
      color: var(--text-secondary);
      padding: var(--sp-1) 0;
      text-decoration: none;
      transition: color var(--duration-fast) var(--ease);
   }

   .mobile-nav-footer-link:hover,
   .mobile-nav-footer-link:focus-visible {
      color: var(--text-primary);
   }
}