/*
 * Desktop navigation experiment: parallelogram-shaped primary links.
 * Remove this stylesheet from the page heads to restore the original
 * corner-bracket navigation without changing the underlying theme styles.
 */
@media (min-width: 1200px) {
  body.index-page .navmenu > ul {
    gap: 0.25rem;
  }

  body.index-page .navmenu > ul > li {
    margin: 0;
  }

  body.index-page .navmenu > ul > li > a,
  body.index-page .navmenu > ul > li > a:focus {
    min-height: 2.875rem;
    padding: 0.7rem 1.55rem;
    border: 0;
    color: var(--nav-color);
    background: rgba(255, 255, 255, 0.08);
    clip-path: polygon(0.75rem 0, 100% 0, calc(100% - 0.75rem) 100%, 0 100%);
    transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
  }

  body.index-page .navmenu > ul > li > a::before,
  body.index-page .navmenu > ul > li > a::after {
    content: none;
  }

  body.index-page .navmenu > ul > li > a:hover,
  body.index-page .navmenu > ul > li > a:focus-visible,
  body.index-page .navmenu > ul > li > a.active,
  body.index-page .navmenu > ul > li > a.active:focus {
    color: #000;
    background-color: #fff;
  }

  body.index-page .navmenu > ul > li > a:hover,
  body.index-page .navmenu > ul > li > a:focus-visible {
    transform: translateY(-2px);
  }

  body.index-page .navmenu > ul > li > a:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.index-page .navmenu > ul > li > a,
  body.index-page .navmenu > ul > li > a:focus {
    transition: none;
  }
}