/* mod_menupionowe — pionowe menu akordeonowe (Joomla 6) */

.vmenu {
    /* Domyślne wartości — nadpisywane inline'owo z parametrów modułu */
    --vm-bg: #1a8273;
    --vm-bg-hover: #146a5e;
    --vm-bg-active: #0f5a4f;
    --vm-text: #ffffff;
    --vm-icon: #ffffff;
    --vm-sub-bg: #f8fafc;
    --vm-sub-text: #0b2540;
    --vm-sub-bg-hover: #eef2f6;
    --vm-sub-text-active: #1a8273;
    --vm-sub-border: #e5e9ee;
    --vm-gap: 6px;
    --vm-radius: 0px;
    --vm-font-size: 16px;
    --vm-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);

    font-size: var(--vm-font-size);
    box-shadow: var(--vm-shadow);
}

.vmenu ul,
.vmenu li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.vmenu__list--level1 {
    display: flex;
    flex-direction: column;
    gap: var(--vm-gap);
}

/* ---------- Poziom 1 ---------- */

.vmenu__item {
    border-radius: var(--vm-radius);
    overflow: hidden;
}

.vmenu__row {
    display: flex;
    align-items: stretch;
}

.vmenu__list--level1 > .vmenu__item > .vmenu__row {
    background: var(--vm-bg);
    transition: background-color 0.2s ease;
}

.vmenu__list--level1 > .vmenu__item > .vmenu__row:hover {
    background: var(--vm-bg-hover);
}

.vmenu__list--level1 > .vmenu__item--active > .vmenu__row,
.vmenu__list--level1 > .vmenu__item.is-open > .vmenu__row {
    background: var(--vm-bg-active);
}

.vmenu__list--level1 > .vmenu__item > .vmenu__row > .vmenu__link {
    color: var(--vm-text);
    font-weight: 600;
}

.vmenu__link {
    flex: 1 1 auto;
    display: block;
    padding: 0.9em 1.1em;
    text-decoration: none;
    line-height: 1.3;
}

.vmenu__link:hover,
.vmenu__link:focus-visible {
    text-decoration: none;
}

.vmenu__link--nolink {
    cursor: pointer;
}

/* ---------- Przycisk +/− ---------- */

.vmenu__toggle {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3em;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.vmenu__toggle-icon {
    position: relative;
    width: 16px;
    height: 16px;
    display: block;
}

.vmenu__toggle-icon::before,
.vmenu__toggle-icon::after {
    content: "";
    position: absolute;
    background: var(--vm-icon);
    inset: 0;
    margin: auto;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.vmenu__toggle-icon::before {
    width: 16px;
    height: 2px;
}

.vmenu__toggle-icon::after {
    width: 2px;
    height: 16px;
}

/* − gdy otwarte */
.vmenu__item.is-open > .vmenu__row .vmenu__toggle-icon::after {
    transform: rotate(90deg);
    opacity: 0;
}

/* Ikona w podmenu dziedziczy kolor tekstu podmenu */
.vmenu__panel .vmenu__toggle-icon::before,
.vmenu__panel .vmenu__toggle-icon::after {
    background: var(--vm-sub-text);
}

/* ---------- Podmenu ---------- */

.vmenu__panel {
    overflow: hidden;
}

.vmenu__panel[hidden] {
    display: none;
}

.vmenu__panel .vmenu__list {
    background: var(--vm-sub-bg);
}

.vmenu__panel .vmenu__item {
    border-radius: 0;
    border-bottom: 1px solid var(--vm-sub-border);
}

.vmenu__panel .vmenu__item:last-child {
    border-bottom: 0;
}

.vmenu__panel .vmenu__link {
    color: var(--vm-sub-text);
    font-weight: 500;
    padding: 0.8em 1.1em 0.8em 1.4em;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.vmenu__panel .vmenu__row:hover {
    background: var(--vm-sub-bg-hover);
}

.vmenu__panel .vmenu__item--active > .vmenu__row > .vmenu__link,
.vmenu__panel .vmenu__item--current > .vmenu__row > .vmenu__link {
    color: var(--vm-sub-text-active);
    font-weight: 700;
}

/* Poziom 3+ — dodatkowe wcięcie */
.vmenu__list--level3 .vmenu__link {
    padding-left: 2.1em;
    font-size: 0.95em;
}

.vmenu__list--level4 .vmenu__link {
    padding-left: 2.8em;
    font-size: 0.95em;
}

/* ---------- Separator ---------- */

.vmenu__separator {
    flex: 1 1 auto;
    height: 1px;
    margin: 0.6em 1.1em;
    background: var(--vm-sub-border);
    align-self: center;
}

/* ---------- Animacja (sterowana z JS przez max-height) ---------- */

.vmenu__panel.is-animating {
    display: block;
    transition: max-height 0.3s ease;
}

/* ---------- Dostępność ---------- */

.vmenu a:focus-visible,
.vmenu button:focus-visible,
.vmenu [data-vmenu-toggle]:focus-visible {
    outline: 2px solid var(--vm-icon);
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .vmenu *,
    .vmenu *::before,
    .vmenu *::after {
        transition: none !important;
    }
}