/* =====================================================
   Nav drawer (shared) — the full site menu behind the header's
   hamburger button. Per the Figma prototype this is NOT a mobile-only
   pattern: the burger is present at every breakpoint and the drawer is
   how the pages that aren't in the compact top nav are reached.

   Geometry from "Nav menu " (3440:1454): a 512x829 panel flush to the
   right edge of the viewport, rounded on its left corners only, with the
   close button landing exactly where the burger it replaces sat. There is
   no scrim in the design — the page simply sits behind it.
   ===================================================== */
.nav-drawer { position: fixed; top: 0; right: 0; z-index: 100; display: flex; flex-direction: column; align-items: flex-start;
  width: 512px; max-width: 100%; height: 100%; padding: 131px 0 63px; background: #fdfdff;
  border-radius: 22px 0 0 22px; overflow-y: auto;
  visibility: hidden; transform: translateX(100%);
  /* Visibility flips instantly on open (so the close button is focusable
     right away) but waits out the slide on close, keeping the panel
     untabbable and click-through while it is shut. */
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.32s; }
.nav-drawer.open { visibility: visible; transform: none;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s; }
body.nav-open { overflow: hidden; }

.nav-drawer-close { position: absolute; top: 42px; right: 103px; width: 56px; height: 56px; padding: 0;
  border: none; background: none; cursor: pointer; transition: opacity 0.2s ease; }
.nav-drawer-close img { width: 100%; height: 100%; }
.nav-drawer-close:hover { opacity: 0.65; }

/* 60px pitch on a 22px line box = 38px of gap. The 85px below the list is
   the design's gap to the social icons; margin-top:auto on the icons eats
   any extra height so they stay 63px off the bottom on taller screens. */
.nav-drawer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 38px; margin: 0 0 85px 201px; }
.nav-drawer-links a { font-family: 'Sora', sans-serif; font-weight: 400; font-size: 22px; line-height: 22px;
  color: #6e7a8c; white-space: nowrap; transition: color 0.2s ease; }
.nav-drawer-links a:hover { color: #006aff; }
/* Current page, set by nav-drawer.js. Uses the same blue as the hover state —
   the Figma nav has no dedicated active variant to copy. */
.nav-drawer-links a[aria-current="page"], .nav-link[aria-current="page"] { color: #006aff; }
.nav-drawer-social { width: 48px; height: 48px; margin: auto 0 0 152px; }

/* Language row — only below 768px, where the header's own switcher is hidden.
   Above that breakpoint the header control is the single source of truth. */
.nav-drawer-lang { display: none; }
.nav-drawer-lang img { width: 18px; height: 18px; }
.nav-drawer-lang button { padding: 6px 10px; border: none; border-radius: 10px; background: none; cursor: pointer;
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: 16px; line-height: 1.2; color: #6e7a8c;
  transition: color 0.2s ease, background 0.2s ease; }
.nav-drawer-lang button:hover { color: #006aff; }
.nav-drawer-lang button[aria-pressed="true"] { color: #006aff; background: #f2f1f9; }

/* The close button tracks the burger, which shrinks and moves in at each
   breakpoint — otherwise the X would jump away from the button it replaced. */
@media (max-width: 1279px) {
  .nav-drawer-close { top: 36px; right: 48px; width: 48px; height: 48px; }
}

@media (max-width: 768px) {
  .nav-drawer { width: 100%; border-radius: 0; padding: 92px 0 48px; }
  .nav-drawer-close { top: 22px; right: 26px; width: 44px; height: 44px; }
  .nav-drawer-links { gap: 30px; margin: 0 0 56px 32px; }
  .nav-drawer-links a { font-size: 20px; }
  /* The language row takes over the auto margin so it and the social icons
     stay together at the foot of the panel. */
  .nav-drawer-lang { display: flex; align-items: center; gap: 4px; margin: auto 0 24px 32px; }
  .nav-drawer-lang img { margin-right: 6px; }
  .nav-drawer-social { margin: 0 0 0 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-drawer { transition: visibility 0.01s; }
}