/* Accordion styles (from style.html). */
.nav-opened {
    .item-content {
        max-height: 0; /* baseline collapsed */
        overflow: hidden;
        display: flex;

        opacity: 0;
        transform: translateY(-6px);

        transition:
            max-height 280ms cubic-bezier(0.25, 1, 0.5, 1),
            opacity 220ms ease,
            transform 220ms ease;
        will-change: max-height, opacity, transform;

        &.is-open {
            opacity: 1;
            transform: translateY(0);
            display: flex;
        }

        /* If authoring exported inline max-height:0 while open, JS sets .is-open + inline none.
           Force visibility precedence to avoid flash when switching states. */
        &[style*="max-height: 0"][aria-hidden="false"].is-open {
            /* JS will soon set max-height. Keep animated state consistent. */
            opacity: 1;
        }
    }

    .item-openable .chevron {
        transition: transform 220ms ease, opacity 200ms ease;
        transform: rotate(0deg);
    }

    .item-openable.is-open .chevron {
        opacity: 1;
        transform: rotate(180deg);
    }
}

/* Chevron color trick for an <img> chevron (base white → green when open). */
.item-openable img.chevron {
    transition: filter 0.3s ease, transform 0.3s ease;
    filter: brightness(0) saturate(100%) invert(100%); /* base = white */
}

.item-openable.is-open img.chevron {
    transform: rotate(180deg);
    /* target color ~ #DDF9AC */
    filter: brightness(0) saturate(100%) invert(82%) sepia(43%)
            saturate(232%) hue-rotate(39deg) brightness(103%) contrast(103%);
}

.item-openable .menu-item {
    transition: filter 0.3s ease;
}
.item-openable.is-open .menu-item {
    color: #DDF9AC;
}

@media (prefers-reduced-motion: reduce) {
    .nav-opened .item-content,
    .nav-opened .item-openable .chevron {
        transition: none;
        transform: none;
    }
}

/* Narrow desktop tweak from original CSS */
@media screen and (max-width: 1180px) and (min-width: 991px) {
    .menu-block { column-gap: 15px; }
    .demo-btn { display: none; }
    .demo-btn.desktop-low { display: block; }
}