/*
 * Nav interaction styles.
 *
 * Replaces what webflow.js (dropdowns) and GSAP + Flip (mobile menu) used to
 * do at runtime — about 340KB of JavaScript to open a menu and a dropdown.
 *
 * The open and closed states are identical to before. Only the transition
 * differs: the original used a GSAP Flip that morphed the hamburger's circular
 * .nav_hamburger_base into the menu panel. That morph was decorative —
 * .menu_contain already carries the same var(--swatch--brand-primary)
 * background — so a fade plus the hamburger-to-X rotation lands in the same
 * place.
 *
 * Loaded after the Webflow stylesheet so these rules win where they overlap.
 */

/* ---- mobile menu ------------------------------------------------------- */

/* .menu_wrap is display:none until opened; the original set display:flex via JS. */
.nav_wrap .menu_wrap {
  display: flex;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.nav_wrap.nav-open .menu_wrap {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.4s ease, visibility 0s linear 0s;
}

/* Menu links fade and rise in, staggered — the GSAP timeline's closing move. */
.nav_wrap .menu_contain > * {
  opacity: 0;
  transform: translateY(50%);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.nav_wrap.nav-open .menu_contain > * {
  opacity: 1;
  transform: translateY(0);
}

.nav_wrap.nav-open .menu_contain > *:nth-child(1) { transition-delay: 0.20s; }
.nav_wrap.nav-open .menu_contain > *:nth-child(2) { transition-delay: 0.25s; }
.nav_wrap.nav-open .menu_contain > *:nth-child(3) { transition-delay: 0.30s; }
.nav_wrap.nav-open .menu_contain > *:nth-child(4) { transition-delay: 0.35s; }
.nav_wrap.nav-open .menu_contain > *:nth-child(5) { transition-delay: 0.40s; }
.nav_wrap.nav-open .menu_contain > *:nth-child(6) { transition-delay: 0.45s; }

/* ---- hamburger to X ---------------------------------------------------- */

.nav_hamburger_wrap {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.nav_hamburger_line {
  transition: transform 0.4s ease;
}

/* Sibling selectors, not :nth-of-type — every child of the button is a div
   (.nav_hamburger_base comes first), so nth-of-type counts the base too and
   silently shifts both rules by one, leaving a "/" instead of an X. */
.nav_wrap.nav-open .nav_hamburger_line {
  transform: translateY(4px) rotate(45deg);
}

.nav_wrap.nav-open .nav_hamburger_line + .nav_hamburger_line {
  transform: translateY(-4px) rotate(-45deg);
}

/* ---- language dropdown ------------------------------------------------- */

/* webflow.js toggled .w--open; nav.js does the same, so the existing
   `.w-dropdown-list.w--open { display: block }` rule still drives it. */
.w-dropdown-toggle { cursor: pointer; }

.dropdown-list.w--open,
.w-dropdown-list.w--open {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .nav_wrap .menu_wrap,
  .nav_wrap .menu_contain > *,
  .nav_hamburger_line {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* ---- skip link --------------------------------------------------------- */

/*
 * Was implemented with inline style/onfocus/onblur attributes on every page.
 * Moving it to CSS is equivalent, and it was the last thing on the site
 * requiring 'unsafe-inline' in the script-src CSP directive.
 */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 10000;
}

.skip-link:focus {
  position: fixed;
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  overflow: visible;
  background: #fff;
  padding: 8px 16px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

/* Blog listing card: the image and title are one link. See design/blog-layout.md. */
.blog_card_link {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap--main, 1rem);
  color: inherit;
  text-decoration: none;
}
.blog_card_link .blog_feature_image {
  transition: opacity 160ms ease;
}
.blog_card_link:hover .blog_feature_image,
.blog_card_link:focus-visible .blog_feature_image {
  opacity: 0.88;
}
.blog_card_link:hover h2,
.blog_card_link:focus-visible h2 {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}