/**
 * sdFooterNav — пять колонок ссылок в подвале (пост CPT footer 5764).
 *
 * Специфичность: каждое правило префиксуется блоком (0-2-0, псевдоклассы 0-2-1).
 * Это не украшательство — перебиваем конкретные правила, которые иначе выигрывают:
 *   bootstrap.min.css  a:hover { color:#0056b3 }                 (0-1-1)
 *   makro style.css:157   a,button { display:inline-block }      (0-0-1)
 *   makro style.css:1828  a,button { transition:0.6s cubic-... } (0-0-1) — hover «залипает»
 * !important не нужен нигде.
 *
 * Фон подвала тёмный (#07112D), поэтому цвета ТЗ (#1B2559 / #3C4257) взяты в
 * тёмной редакции: белые заголовки, сиреневые ссылки, осветлённый акцент в hover.
 */

.sdFooterNav {
    --_sdFooterNav-titleColor: #ffffff;
    --_sdFooterNav-linkColor: #a99fc5;
    --_sdFooterNav-linkHover: #6b7cff;
    --_sdFooterNav-borderColor: rgba(255, 255, 255, 0.12);

    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 32px 24px;
    /* Колонка Elementor, в которой лежит блок, может нести своё выравнивание
       на планшете/мобильном — не даём ему утащить ссылки в центр. */
    text-align: left;
}

.sdFooterNav .sdFooterNav__col {
    min-width: 0;
}

.sdFooterNav .sdFooterNav__title {
    margin: 0 0 16px;
    padding: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 28px;
    color: var(--_sdFooterNav-titleColor);
}

/* Кнопка-заголовок: на десктопе это просто текст, кликабельной её делает ._isCollapsible. */
.sdFooterNav .sdFooterNav__toggle {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: default;
}

.sdFooterNav .sdFooterNav__chevron {
    display: none;
}

.sdFooterNav .sdFooterNav__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sdFooterNav .sdFooterNav__item {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.sdFooterNav .sdFooterNav__item:last-child {
    margin-bottom: 0;
}

.sdFooterNav .sdFooterNav__link {
    display: block;
    color: var(--_sdFooterNav-linkColor);
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    text-decoration: none;
    transition: color 0.18s ease;
}

.sdFooterNav .sdFooterNav__link:hover {
    color: var(--_sdFooterNav-linkHover);
    text-decoration: none;
}

/* Отдельным правилом, а не через запятую с :hover. Браузер выбрасывает ВЕСЬ
   набор селекторов, если хотя бы один ему незнаком, — а :focus-visible не знает
   Safari до 15.4 (в приёмке ТЗ Safari и iOS), и вместе с ним пропал бы ховер. */
.sdFooterNav .sdFooterNav__link:focus-visible {
    color: var(--_sdFooterNav-linkHover);
    text-decoration: none;
}

/* Планшет: 3 колонки, затем 2 (п.2 ТЗ). */
@media (max-width: 1199px) {
    .sdFooterNav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .sdFooterNav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Мобильный: одна колонка, заголовки становятся переключателями аккордеона. */
@media (max-width: 767px) {
    .sdFooterNav {
        display: block;
    }

    .sdFooterNav .sdFooterNav__col {
        border-bottom: 1px solid var(--_sdFooterNav-borderColor);
    }

    /* У последней колонки линия не нужна: ниже идёт разделитель самого
       нижнего блока, две черты подряд читаются как ошибка вёрстки. */
    .sdFooterNav .sdFooterNav__col:last-child {
        border-bottom: 0;
    }

    .sdFooterNav .sdFooterNav__title {
        margin: 0;
    }

    .sdFooterNav .sdFooterNav__toggle {
        padding: 14px 28px 14px 0;
    }

    .sdFooterNav .sdFooterNav__chevron {
        display: block;
        position: absolute;
        top: 50%;
        right: 6px;
        width: 8px;
        height: 8px;
        margin-top: -6px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform 0.18s ease;
    }

    .sdFooterNav .sdFooterNav__list {
        padding-bottom: 16px;
    }
}

/* ._isCollapsible вешает JS только на мобильном брейкпоинте.
   Без JS класса нет — списки видны всегда. */
.sdFooterNav._isCollapsible .sdFooterNav__toggle {
    cursor: pointer;
}

/* Состояние свёрнутой колонки держит JS отдельным классом, а не соседним
   селектором к [aria-expanded]: кнопка лежит внутри <h3> (стандартный паттерн
   доступного аккордеона), поэтому <ul> ей не сосед. aria-expanded при этом
   остаётся корректным для скринридеров. */
.sdFooterNav._isCollapsible .sdFooterNav__col._isClosed .sdFooterNav__list {
    display: none;
}

.sdFooterNav._isCollapsible .sdFooterNav__col:not(._isClosed) .sdFooterNav__chevron {
    margin-top: -2px;
    transform: rotate(-135deg);
}