/*
 * HelpSafe Law
 * Navigation
 */


/* ============================================================
   1. ОСНОВНОЕ МЕНЮ
   ============================================================ */

.main-navigation__list {
    position: relative;

    display: flex;

    align-items: center;

    gap: 28px;

    isolation: isolate;
}



/* ============================================================
   2. ПУНКТЫ МЕНЮ
   ============================================================ */

.main-navigation__list > li {
    position: relative;
}

.main-navigation__list > li > a {
    display: inline-flex;

    align-items: center;

    min-height: 44px;

    color:
        var(--law-text);

    font-family:
        var(--law-font-heading);

    font-size:
        17px;

    font-weight:
        700;

    text-shadow:
        0 1px 2px rgba(255, 255, 255, 0.55);
}
.main-navigation__list::before {
    content: "";

    position: absolute;

    left: -48px;
    right: -48px;

    top: 50%;

    height: 64px;

    transform: translateY(-50%);

    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 253, 245, 0.94) 0%,
            rgba(255, 253, 245, 0.78) 38%,
            rgba(255, 253, 245, 0.42) 65%,
            rgba(255, 253, 245, 0) 100%
        );

    filter:
        blur(5px);

    z-index: -1;

    pointer-events: none;
}

.main-navigation__list > li > a:hover,
.main-navigation__list > li.current-menu-item > a,
.main-navigation__list > li.current-menu-parent > a {
    color:
        var(--law-primary);
}

/* ============================================================
   3. ПОДМЕНЮ
   ============================================================ */

.main-navigation__list .sub-menu {
    position: absolute;

    top: calc(100% + 8px);
    left: 50%;

    min-width: 220px;

    padding: 10px;

    background:
        var(--law-white);

    border:
        1px solid var(--law-border);

    border-radius:
        var(--law-radius-small);

    box-shadow:
        var(--law-shadow);

    transform:
        translateX(-50%);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity var(--law-transition),
        visibility var(--law-transition);
}

.main-navigation__list li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
}

.main-navigation__list .sub-menu a {
    display: block;

    padding: 9px 12px;

    color:
        var(--law-text-muted);

    border-radius:
        8px;

    font-size:
        14px;
}

.main-navigation__list .sub-menu a:hover {
    color:
        var(--law-primary);

    background:
        var(--law-primary-light);
}

/* ============================================================
   3.5. КНОПКА БУРГЕРА
   ============================================================ */

.menu-toggle {
    position: relative;

    width: 44px;
    height: 44px;

    padding: 0;

    display: none;

    align-items: center;
    justify-content: center;

    background:
        rgba(255, 253, 245, 0.88);

    border:
        1px solid var(--law-border);

    border-radius:
        12px;

    cursor: pointer;
}

.menu-toggle__line {
    position: absolute;

    left: 50%;

    width: 21px;
    height: 2px;

    background:
        var(--law-primary);

    border-radius:
        2px;

    transform:
        translateX(-50%);
}

.menu-toggle__line:nth-child(1) {
    top: 14px;
}

.menu-toggle__line:nth-child(2) {
    top: 21px;
}

.menu-toggle__line:nth-child(3) {
    top: 28px;
}

.menu-toggle:hover {
    background:
        var(--law-primary-light);
}

@media (max-width: 800px) {
    .menu-toggle {
        display: flex;
    }
}

/* ============================================================
   3.6. БУРГЕР → X
   ============================================================ */

.menu-toggle {
    transition:
        background var(--law-transition),
        border-color var(--law-transition);
}

.menu-toggle__line {
    transition:
        transform 0.28s ease,
        opacity 0.2s ease,
        top 0.28s ease;
}

.menu-toggle.is-active .menu-toggle__line:nth-child(1) {
    top: 21px;

    transform:
        translateX(-50%)
        rotate(45deg);
}

.menu-toggle.is-active .menu-toggle__line:nth-child(2) {
    opacity: 0;
}

.menu-toggle.is-active .menu-toggle__line:nth-child(3) {
    top: 21px;

    transform:
        translateX(-50%)
        rotate(-45deg);
}
/* ============================================================
   4. МОБИЛЬНОЕ МЕНЮ
   ============================================================ */

.mobile-menu {
    position: fixed;

    inset: 0;

    z-index: 1000;

    visibility: hidden;
    opacity: 0;

    transition:
        opacity var(--law-transition),
        visibility var(--law-transition);
}

.mobile-menu.is-open {
    visibility: visible;
    opacity: 1;
}


/* ============================================================
   4.1. ФОН МОБИЛЬНОГО МЕНЮ
   ============================================================ */

.mobile-menu__backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(25, 37, 36, 0.94);
}


/* ============================================================
   4.2. ПАНЕЛЬ МОБИЛЬНОГО МЕНЮ
   ============================================================ */

.mobile-menu__panel {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    padding:
        28px 24px;

    display: flex;

    flex-direction: column;

    background:
        rgba(25, 37, 36, 0.94);

    box-shadow:
        none;

    transform:
        translateX(100%);

    transition:
        transform var(--law-transition-slow);
}

.mobile-menu.is-open .mobile-menu__panel {
    transform:
        translateX(0);
}


/* ============================================================
   5. ЗАГОЛОВОК МОБИЛЬНОГО МЕНЮ
   ============================================================ */

.mobile-menu__header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding-bottom:
        24px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.16);
}

.mobile-menu__title {
    color:
        #ffffff;

    font-family:
        var(--law-font-heading);

    font-size:
        20px;

    font-weight:
        800;
}

/* ============================================================
   5.1. БРЕНД МОБИЛЬНОГО МЕНЮ
   ============================================================ */

.mobile-menu__branding {
    display: flex;

    align-items: baseline;

    gap: 7px;

    visibility: visible;
    opacity: 1;
}

.mobile-menu__branding-name {
    display: inline-block;

    color:
        #ffffff !important;

    font-family:
        var(--law-font-heading);

    font-size:
        22px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        -0.02em;
}

.mobile-menu__branding-law {
    display: inline-block;

    color:
        #81c784 !important;

    font-family:
        var(--law-font-heading);

    font-size:
        15px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        0.12em;
}

/* ============================================================
   6. КНОПКА X
   ============================================================ */

.mobile-menu__close {
    position: relative;

    width: 44px;
    height: 44px;

    flex-shrink: 0;

    border-radius:
        12px;

    background:
        rgba(255, 255, 255, 0.10);
}

.mobile-menu__close span {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 21px;
    height: 2px;

    background:
        #ffffff;

    border-radius:
        2px;
}

.mobile-menu__close span:first-child {
    transform:
        translate(-50%, -50%) rotate(45deg);
}

.mobile-menu__close span:last-child {
    transform:
        translate(-50%, -50%) rotate(-45deg);
}

.mobile-menu__close:hover {
    background:
        rgba(255, 255, 255, 0.18);
}


/* ============================================================
   7. МОБИЛЬНЫЕ ПУНКТЫ
   ============================================================ */

.mobile-menu__navigation {
    padding-top:
        24px;

    overflow-y:
        auto;
}

.mobile-menu__list > li {
    border-bottom:
        1px solid rgba(255, 255, 255, 0.12);
}

.mobile-menu__list > li > a {
    display: block;

    padding:
        17px 4px;

    color:
        #ffffff;

    font-family:
        var(--law-font-heading);

    font-size:
        19px;

    font-weight:
        700;
}

.mobile-menu__list > li > a:hover {
    color:
        #81c784;
}

/* ============================================================
 * 7. КНОПКА "НАВЕРХ"
 * ============================================================ */

.back-to-top {
    position: fixed;

    right: 24px;
    bottom: 24px;

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    color: #ffffff;

    background: rgba(25, 37, 36, 0.92);

    border: 1px solid rgba(129, 199, 132, 0.45);
    border-radius: 50%;

    font-family: Arial, sans-serif;
    font-size: 25px;
    font-weight: 400;
    line-height: 1;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transform: translateY(12px);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease,
        background 0.25s ease,
        border-color 0.25s ease;
}


/* ============================================================
 * ВИДИМАЯ КНОПКА
 * ============================================================ */

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ============================================================
 * НАВЕДЕНИЕ
 * ============================================================ */

.back-to-top:hover {
    background: #189589;

    border-color: #81c784;

    transform: translateY(-3px);
}


/* ============================================================
 * НАЖАТИЕ
 * ============================================================ */

.back-to-top:active {
    transform: translateY(0);
}


/* ============================================================
 * МОБИЛЬНЫЕ
 * ============================================================ */

@media (max-width: 800px) {

    .back-to-top {
        right: 18px;
        bottom: 18px;

        width: 46px;
        height: 46px;

        font-size: 23px;
    }

}

/* ============================================================
   8. ПОДВАЛ МОБИЛЬНОГО МЕНЮ
   ============================================================ */

.mobile-menu__footer {
    margin-top:
        auto;

    padding-top:
        24px;

    color:
        var(--law-text-light);

    font-size:
        12px;

    line-height:
        1.5;
}

.mobile-menu__footer span {
    display: block;
}

.mobile-menu__footer span + span {
    margin-top:
        5px;
}