Checkbox as a hamburger button

HTML

<div class="burger-nav">
  <input
    class="toggle-input"
    role="button"
    type="checkbox"
    id="burger-input"
    aria-controls="burger-content"
    aria-expanded="false"
  />
  <label class="toggle-label" for="burger-input">
    <span class="sr-only">Menu</span>
    <span class="burger-nav__burger"></span>
  </label>
  <div class="toggle-content" id="burger-content">
    <div class="burger-nav__links">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="/folg-med/arrangementer/">Event</a></li>
      </ul>
    </div>
  </div>
</div>

<aside>
<p>Checkbox as a hamburger menu toggle. Look Ma, no JS. But what about <a hreF="https://www.w3.org/TR/using-aria/#secondrule">Second rule of ARIA</a> : Do not change native semantics, unless you really have to.</p>
  </aside>

CSS

.toggle-content {
    display: none;
}

.toggle-input:checked~.toggle-content {
    display: block;
}




.burger-nav .toggle-content a {
    border-color: #0000;
    border-width: .125rem;
    color: inherit;
    font-size: 1.5rem
}

@media(min-width: 25.0625rem) {
    .burger-nav .toggle-content a {
        font-size:1.75rem
    }
}

.burger-nav .toggle-content a:focus,.burger-nav .toggle-content a:hover {
    border-color: #fff
}

.burger-nav .toggle-content ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.burger-nav .toggle-content li:where(:not(:last-child)),.burger-nav .toggle-content ul:where(:not(:last-child)) {
    margin-bottom: 1.25rem
}

@media(min-width: 25.0625rem) {
    .burger-nav .toggle-content li:where(:not(:last-child)),.burger-nav .toggle-content ul:where(:not(:last-child)) {
        margin-bottom:1.875rem
    }
}

.burger-nav__burger {
    border-bottom: .3125rem solid;
    display: inline-block;
    height: 1.875rem;
    position: relative;
    transition: transform linear;
    width: 2.1875rem
}

.scrolled .burger-nav__burger {
    transform: scale(.8)
}

.burger-nav__burger:after,.burger-nav__burger:before {
    background-color: currentcolor;
    content: "";
    height: .3125rem;
    left: 0;
    position: absolute;
    right: 0;
    transition: transform .1s;
    width: 100%
}

.burger-nav__burger:before {
    top: 0
}

.burger-nav__burger:after {
    top: 50%
}

.toggle-input:checked~.toggle-label .burger-nav__burger {
    border-bottom: none
}

.toggle-input:checked~.toggle-label .burger-nav__burger:after,.toggle-input:checked~.toggle-label .burger-nav__burger:before {
    top: 50%
}

.toggle-input:checked~.toggle-label .burger-nav__burger:before {
    transform: rotate(-45deg)
}

.toggle-input:checked~.toggle-label .burger-nav__burger:after {
    transform: rotate(45deg)
}

.burger-nav__links {
    height: 100%;
    line-height:...