.fm-wrap {
    --fm-crease: rgba(0, 0, 0, 0.18);
    font-family: var(--fm-font-family);
    font-size: var(--fm-font-size);
}

.fm-wrap .fm-accordion {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* --- mobile hamburger toggle: hidden until JS marks the wrap .fm-mobile --- */

.fm-wrap .fm-hamburger {
    display: none;
    align-items: center;
    gap: 0.6em;
    width: 100%;
    background: var(--fm-fold-bg);
    color: var(--fm-fold-text);
    border: 0;
    border-radius: 4px;
    padding: 0.75em 1em;
    font: inherit;
    font-weight: var(--fm-fold-weight);
    cursor: pointer;
}

.fm-wrap .fm-hamburger-bars {
    position: relative;
    display: block;
    width: 1.2em;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    flex: none;
    transition: background var(--fm-speed) ease;
}

.fm-wrap .fm-hamburger-bars::before,
.fm-wrap .fm-hamburger-bars::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform var(--fm-speed) ease;
}

.fm-wrap .fm-hamburger-bars::before {
    top: -6px;
}

.fm-wrap .fm-hamburger-bars::after {
    top: 6px;
}

.fm-wrap.fm-mobile .fm-hamburger {
    display: flex;
}

.fm-wrap.fm-mobile .fm-accordion {
    display: none;
}

.fm-wrap.fm-mobile.fm-mobile-open .fm-accordion {
    display: flex;
    margin-top: 3px;
}

/* Pins the bar to the top of the viewport on mobile regardless of where
   the template happens to place this module in the page's column order.
   The accordion, when opened, becomes a scrollable overlay underneath it
   rather than pushing the rest of the page down. */
.fm-wrap.fm-mobile-fixed.fm-mobile {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
}

.fm-wrap.fm-mobile-fixed.fm-mobile .fm-hamburger {
    border-radius: 0;
}

.fm-wrap.fm-mobile-fixed.fm-mobile.fm-mobile-open .fm-accordion {
    max-height: calc(100vh - 3.2em);
    overflow-y: auto;
    border-radius: 0;
}

.fm-wrap.fm-mobile-open .fm-hamburger-bars {
    background: transparent;
}

.fm-wrap.fm-mobile-open .fm-hamburger-bars::before {
    transform: translateY(6px) rotate(45deg);
}

.fm-wrap.fm-mobile-open .fm-hamburger-bars::after {
    transform: translateY(-6px) rotate(-45deg);
}

.fm-wrap .fm-fold {
    position: relative;
    background: var(--fm-fold-bg);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset,
                0 2px 3px rgba(0, 0, 0, 0.15);
}

.fm-wrap .fm-fold-active {
    box-shadow: inset 3px 0 0 var(--fm-active), 0 2px 3px rgba(0, 0, 0, 0.15);
}

.fm-wrap .fm-fold-toggle,
.fm-wrap .fm-fold-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--fm-fold-text);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    padding: 0.75em 1em;
    font-weight: var(--fm-fold-weight);
}

.fm-wrap .fm-fold-toggle:hover,
.fm-wrap .fm-fold-link:hover {
    background: rgba(255, 255, 255, 0.06);
}

.fm-wrap .fm-fold-chevron {
    width: 0.6em;
    height: 0.6em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--fm-speed) ease;
    flex: none;
    margin-left: 0.75em;
}

.fm-wrap .fm-fold-toggle[aria-expanded="true"] .fm-fold-chevron {
    transform: rotate(-135deg);
}

/* --- the "unfold": each <li> is its own leaf, hinged at its top crease --- */

.fm-wrap .fm-panel-wrap {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--fm-speed) cubic-bezier(0.4, 0, 0.2, 1);
}

.fm-wrap .fm-panel {
    background: var(--fm-panel-bg);
    color: var(--fm-panel-text);
    padding: 0.35em 0;
    perspective: 900px;
}

.fm-wrap .fm-sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fm-wrap .fm-sublist .fm-sublist {
    padding-left: 1em;
}

/* Each leaf hinges open from its top edge, staggered by --fm-i so the
   whole panel reads as a cascading unfold instead of one moving block. */
.fm-wrap .fm-sublist > li {
    transform-origin: top center;
    transform: rotateX(-88deg);
    opacity: 0;
    transition: transform calc(var(--fm-speed) * 0.55) cubic-bezier(0.22, 1.6, 0.4, 1),
                opacity calc(var(--fm-speed) * 0.35) ease;
    transition-delay: calc(var(--fm-i, 0) * var(--fm-speed) * 0.08);
}

.fm-wrap .fm-panel-wrap.fm-open .fm-sublist > li {
    transform: rotateX(0deg);
    opacity: 1;
}

/* fold crease: a thin light/dark seam at each leaf's hinge line, plus
   faint alternating shading so leaves read as alternating peaks/valleys
   even at rest, like a paper fan. */
.fm-wrap .fm-subitem {
    position: relative;
    border-top: 1px solid var(--fm-crease);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.03));
}

.fm-wrap .fm-subitem:nth-child(even) {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.03), rgba(255, 255, 255, 0.05));
}

.fm-wrap .fm-subitem:first-child {
    border-top: 0;
}

.fm-wrap .fm-subitem::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.35), rgba(0, 0, 0, 0.08));
    pointer-events: none;
}

.fm-wrap .fm-subitem a {
    display: block;
    padding: 0.6em 1em;
    text-decoration: none;
}

.fm-wrap .fm-subitem a:hover {
    background: rgba(0, 0, 0, 0.04);
}

.fm-wrap .fm-current > a {
    font-weight: bold;
    color: var(--fm-active) !important;
}

.fm-wrap .fm-separator,
.fm-wrap .fm-fold-separator {
    height: 1px;
    margin: 0.4em 0.5em;
    background: var(--fm-crease);
    list-style: none;
}

.fm-wrap .fm-heading,
.fm-wrap .fm-fold-heading {
    padding: 0.5em 1em 0.25em;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
    .fm-wrap .fm-panel-wrap,
    .fm-wrap .fm-sublist > li,
    .fm-wrap .fm-fold-chevron,
    .fm-wrap .fm-hamburger-bars,
    .fm-wrap .fm-hamburger-bars::before,
    .fm-wrap .fm-hamburger-bars::after {
        transition: none !important;
        transition-delay: 0s !important;
    }
}