.site-nav-toggle{ display: none;} @media (max-width: 899px){ .site-nav-toggle{ display: block; margin-left: auto; color: var(--color-neutral-700);} .site-nav-toggle summary{ list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--color-neutral-200); border-radius: var(--radius-md); background: var(--color-neutral-white);} .site-nav-toggle summary::-webkit-details-marker{ display: none;} .site-nav-toggle summary:focus-visible{ outline: 2px solid var(--color-primary-600); outline-offset: 2px;} .site-nav-toggle .bars{ position: relative; display: block; width: 22px; height: 2px; border-radius: 1px; background: var(--color-neutral-700); transition: background .15s ease;} .site-nav-toggle .bars::before, .site-nav-toggle .bars::after{ content: ""; position: absolute; left: 0; width: 22px; height: 2px; border-radius: 1px; background: var(--color-neutral-700); transition: transform .2s ease, top .2s ease;} .site-nav-toggle .bars::before{ top: -7px;} .site-nav-toggle .bars::after{ top: 7px;} .site-nav-toggle[open] .bars{ background: transparent;} .site-nav-toggle[open] .bars::before{ top: 0; transform: rotate(45deg);} .site-nav-toggle[open] .bars::after{ top: 0; transform: rotate(-45deg);} .site-nav{ display: none; flex-basis: 100%; width: 100%; margin-left: 0;} .site-nav-toggle[open] ~ .site-nav{ display: block;} .site-nav ul{ flex-direction: column; gap: 0; width: 100%; margin: 0; padding: var(--space-sm) 0 var(--space-md); border-top: 1px solid var(--color-neutral-200);} .site-nav li{ width: 100%;} .site-nav > ul > li > a{ display: block; padding: 12px 4px; border-bottom: 1px solid var(--color-neutral-100);} .site-nav li.has-children > a::after{ display: none;} .site-nav li.has-children > .dropdown{ display: block; position: static; min-width: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 0 0 6px 16px;} .site-nav .dropdown li{ display: block;} .site-nav .dropdown a{ display: block; padding: 8px 4px; color: var(--color-neutral-600);}} @media (prefers-reduced-motion: reduce){ .site-nav-toggle .bars, .site-nav-toggle .bars::before, .site-nav-toggle .bars::after{ transition: none;}}