/* Navigation component — the site nav links, the mobile slide-in drawer, the
   hamburger toggle button and the dimmed backdrop. Moved verbatim from the former
   monolithic style.css (Phase 1: structure only, no rule was edited).
   The toggle button's markup lives in components/header/header.html (inside
   .header-right); its styles live here because navigation.js controls it. */

  nav{display:flex;align-items:center;gap:40px;}
  /* Underline animates via transform:scaleX, not width — width sits on
     the layout side of the pipeline, so the browser has to reflow the
     page on every frame of the animation, which is what read as a
     "jerk" here. scaleX is composited (GPU), so it's always smooth
     regardless of page weight. The color swap gets its own transition
     too, so switching between links fades rather than snaps. */
  nav a{font-size:14.5px;font-weight:500;color:var(--heading);position:relative;padding-bottom:4px;transition:color .25s ease;}
  nav a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s ease;}
  nav a:hover::after,nav a[aria-current="page"]::after{transform:scaleX(1);}
  nav a[aria-current="page"]{color:var(--accent);}

  /* Theme toggle + social icons, duplicated inside the mobile nav
     drawer. Hidden on desktop, where the header row already carries
     them — shown only once the tablet/mobile breakpoint below turns
     the header row's own copies off. Kept as two separate blocks
     (theme at the top, socials pinned to the bottom via margin-top:
     auto on nav's flex column) rather than one row, so the dark-mode
     toggle doesn't read as just another social icon. */
  .nav-theme-mobile,.nav-social-mobile{display:none;}

  .nav-toggle{display:none;background:none;border:none;cursor:pointer;color:var(--heading);-webkit-tap-highlight-color:transparent;}
  /* Icon swaps from hamburger to a close (X) mark once the mobile nav
     panel is open, mirroring the sun/moon pattern above — the icon
     always shows what state you're in, and the X doubles as a visible
     way to close the panel instead of relying on tapping outside it. */
  .nav-toggle .icon-close{display:none;}
  .nav-toggle[aria-expanded="true"] .icon-hamburger{display:none;}
  .nav-toggle[aria-expanded="true"] .icon-close{display:block;}

  /* Dimmed scrim behind the slide-in mobile nav. Sits below the header's
     stacking context (z-index 100) so the header bar and the nav panel
     itself both stay on top of it, but above ordinary page content.
     Tapping it closes the menu — the panel previously had no way to
     dismiss it except clicking a link inside. */
  .nav-backdrop{position:fixed;inset:0;z-index:90;background:rgba(20,18,15,.45);opacity:0;pointer-events:none;transition:opacity .3s ease;}
  .nav-backdrop[data-visible="true"]{opacity:1;pointer-events:auto;}
  /* Body scroll is locked while the panel is open so the page behind
     the scrim can't scroll along with it on touch devices. */
  body[data-nav-open="true"]{overflow:hidden;}

  @media (max-width:980px){
    nav{position:fixed;top:0;right:0;height:100vh;width:78%;max-width:320px;background:var(--surface);flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:100px 32px 32px;gap:28px;transform:translateX(100%);transition:transform .35s ease;border-left:1px solid var(--border);}
    nav[data-visible="true"]{transform:translateX(0);}
    nav a{color:var(--heading) !important;font-size:16px;}
    .nav-toggle{display:block;}
  }

  @media (max-width:980px){
    /* Theme toggle sits alone at the top of the drawer — no longer
       sharing a row with the social icons, so it doesn't read as just
       another social link. */
    .nav-theme-mobile{display:flex;margin-bottom:8px;padding-bottom:24px;border-bottom:1px solid var(--border);}
    /* Social icons sit right below the nav links, separated by a
       rule — not pushed to the bottom of the panel, which read as a
       stray, disconnected row when the drawer is mostly empty space.
       Left-aligned with the nav links above, evenly gapped. */
    .nav-social-mobile{display:flex;align-items:center;gap:20px;margin-top:8px;padding-top:24px;border-top:1px solid var(--border);}
  }