/* Starfish Accordion Menu
 * All values are CSS custom properties, overridable from the module's
 * Styling tab, from your template's Custom CSS, or per-module via #sfam-<id>.
 */
.sf-accordion-menu {
    --sfam-color: #ffffff;
    --sfam-hover: #3ebfbe;
    --sfam-active: #3ebfbe;
    --sfam-icon-color: var(--sfam-color);
    --sfam-divider: #ffffff;
    --sfam-divider-width: 1px;
    --sfam-size-1: 18px;
    --sfam-size-2: 16px;
    --sfam-weight-1: 400;
    --sfam-line-height: 1.5;
    --sfam-pad-y: 10px;
    --sfam-sub-indent: 15px;
    --sfam-sub-gap: 15px;
    --sfam-sub-pad-bottom: 0px;
    --sfam-icon-size: 20px;
    --sfam-icon-pad: 5px;
    --sfam-icon-duration: 300ms;
    --sfam-transition: color 0.1s ease-in-out;

    font-family: inherit;
    font-size: var(--sfam-size-1);
    line-height: var(--sfam-line-height);
    font-weight: var(--sfam-weight-1);
}

.sf-accordion-menu ul.sfam-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sf-accordion-menu .sfam-item {
    margin: 0;
    padding: 0;
}

/* ---- Rows ---------------------------------------------------------------- */

.sf-accordion-menu .sfam-row {
    display: flex;
    align-items: center;
    min-width: 0;
}

.sf-accordion-menu .sfam-level-1 > .sfam-item > .sfam-row {
    border-bottom: var(--sfam-divider-width) solid var(--sfam-divider);
}

.sf-accordion-menu .sfam-link {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    padding: var(--sfam-pad-y) 0;
    margin: 0;
    color: var(--sfam-color);
    text-decoration: none;
    background: none;
    border: 0;
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: var(--sfam-transition);
}

.sf-accordion-menu .sfam-heading {
    cursor: default;
}

.sf-accordion-menu .sfam-link:hover,
.sf-accordion-menu .sfam-link:focus-visible {
    color: var(--sfam-hover);
    text-decoration: none;
    outline: none;
}

.sf-accordion-menu .sfam-link:focus-visible {
    outline: 2px solid var(--sfam-hover);
    outline-offset: 2px;
}

.sf-accordion-menu .sfam-item.uk-active > .sfam-row > .sfam-link,
.sf-accordion-menu .sfam-item.current > .sfam-row > .sfam-link {
    color: var(--sfam-active);
}

/* ---- Sub levels ---------------------------------------------------------- */

.sf-accordion-menu .sfam-sub {
    overflow: hidden;
}

.sf-accordion-menu .sfam-sub[hidden] {
    display: none;
}

.sf-accordion-menu .sfam-level-2 {
    padding-bottom: var(--sfam-sub-pad-bottom);
}

.sf-accordion-menu .sfam-level-2 > .sfam-item > .sfam-row,
.sf-accordion-menu .sfam-level-3 > .sfam-item > .sfam-row,
.sf-accordion-menu .sfam-level-4 > .sfam-item > .sfam-row {
    border-bottom: 0;
    padding-top: var(--sfam-sub-gap);
}

.sf-accordion-menu .sfam-level-2 .sfam-link {
    font-size: var(--sfam-size-2);
    padding: 0;
    margin-left: var(--sfam-sub-indent);
}

.sf-accordion-menu .sfam-level-3 .sfam-link {
    margin-left: calc(var(--sfam-sub-indent) * 2);
}

.sf-accordion-menu .sfam-level-4 .sfam-link {
    margin-left: calc(var(--sfam-sub-indent) * 3);
}

/* ---- Toggle + icon ------------------------------------------------------- */

.sf-accordion-menu .sfam-toggle {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 auto;
    padding: var(--sfam-icon-pad);
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--sfam-icon-color);
    cursor: pointer;
    line-height: 0;
    -webkit-appearance: none;
    appearance: none;
}

.sf-accordion-menu .sfam-toggle:focus-visible {
    outline: 2px solid var(--sfam-hover);
    outline-offset: -2px;
}

.sf-accordion-menu .sfam-toggle:hover .sfam-icon {
    background-color: var(--sfam-hover);
}

.sf-accordion-menu .sfam-level-2 .sfam-toggle .sfam-icon,
.sf-accordion-menu .sfam-level-3 .sfam-toggle .sfam-icon {
    width: calc(var(--sfam-icon-size) * 0.8);
    height: calc(var(--sfam-icon-size) * 0.8);
}

.sf-accordion-menu .sfam-icon {
    display: block;
    width: var(--sfam-icon-size);
    height: var(--sfam-icon-size);
    background-color: currentColor;
    -webkit-mask: var(--sfam-icon-closed) no-repeat 50% 50% / 100% 100%;
    mask: var(--sfam-icon-closed) no-repeat 50% 50% / 100% 100%;
    transform: rotate(0deg);
    transition: transform var(--sfam-icon-duration) linear, background-color 0.1s ease-in-out;
}

.sf-accordion-menu .sfam-open > .sfam-row .sfam-icon {
    -webkit-mask-image: var(--sfam-icon-open);
    mask-image: var(--sfam-icon-open);
}

/* Icon sets (Feather plus/minus and chevron-down, same as the previous plugin) */
.sf-accordion-menu.sfam-icon-plus {
    --sfam-icon-closed: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='5' x2='12' y2='19'/><line x1='5' y1='12' x2='19' y2='12'/></svg>");
    --sfam-icon-open: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/></svg>");
}

.sf-accordion-menu.sfam-icon-chevron {
    --sfam-icon-closed: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    --sfam-icon-open: var(--sfam-icon-closed);
}

/* Icon animations */
.sf-accordion-menu.sfam-anim-rotate .sfam-open > .sfam-row .sfam-icon {
    transform: rotate(360deg);
}

.sf-accordion-menu.sfam-anim-rotate.sfam-icon-chevron .sfam-open > .sfam-row .sfam-icon {
    transform: rotate(180deg);
}

.sf-accordion-menu.sfam-anim-flip .sfam-open > .sfam-row .sfam-icon {
    transform: rotateX(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .sf-accordion-menu .sfam-icon,
    .sf-accordion-menu .sfam-link {
        transition: none;
    }
}