/* Shared main/mobile navigation active state. */
.main-nav a,
.mobile-menu > a:not(.button) {
    position: relative;
    transition: color var(--transition);
}

.main-nav a.is-active {
    color: var(--green);
}

.main-nav a.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;
    height: 2px;
    background: var(--green);
}

.mobile-menu > a.is-active:not(.button) {
    color: var(--green);
    padding-left: 16px;
}

.mobile-menu > a.is-active:not(.button)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    border-top: 2px solid var(--green);
    transform: translateY(-50%);
}