/* Общие стили для навигации */

html {
    scroll-behavior: smooth;
}

a:active,
a:focus {
    outline: none;
}

.navbar-header {
    font-weight: 600;
}

.region.region-navigation a,
.region.region-navigation nav,
.region.region-navigation p {
    float: left;
}



/* Стили для основного меню */
#block-mainnavigation a:hover,
#block-menyu a:hover,
.sf-depth-1 a:hover {
    color: #fff;
    text-decoration: none;
    width: 100%;
}

.sf-depth-1 a:hover {
    background-color: red;
    color: #2c3e50;
}

.sf-multicolumn {
    margin-top: 9px !important;
    background-color: #2c3e50;
    width: auto !important;
}

.active-trail {
    background-color: #2c3e50;
}

a.active-trail.sf-depth-1,
.active-trail.sf-depth-1 a,
.active-trail.sf-depth-1.menuparent a {
    color: #fff !important;
}

.sf-depth-2 {
    color: #fff !important;
}

a.is-active.sf-depth-2 {
    background-color: red;
    width: 100%;
}

/* Мультиколоночное меню */
.sf-multicolumn>li {
    display: block;
    width: 33%;
    float: left;
}

.sf-multicolumn-wrapper {
    width: 100%;
}

#main-menu-link-contentf2505063-b36d-4fa1-a67a-3c83955132d9 ol {
    width: 550px;
}

#main-menu-link-contentf2505063-b36d-4fa1-a67a-3c83955132d9 ol li {
    display: block;
    width: 33%;
    float: left;
    background-color: #2c3e50;
}

/* Блоки в навигации */
#block-socialnyeseti {
    float: left;
    margin-top: 16px;
}

#block-telefon {
    float: left;
}

.path-frontpage #superfish-main li:nth-child(3) {
    background: #401a7f !important;
    color: white !important;
    border: none !important;
    text-decoration: none !important;
    outline: none !important;
}

/* Центрирование телефонов и социальных иконок */
.navbar-collapse .region-navigation-collapsible {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 100%;
}

#block-socialmedialinks,
#block-telefon {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

/* Социальные иконки в ряд */
.social-media-links--platforms.platforms {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: center;
    height: 100%;
}

.social-media-links--platforms.platforms li {
    margin: 0;
    display: flex;
    align-items: center;
}

.social-media-links--platforms.platforms a {
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}

.social-media-links--platforms.platforms a:hover {
    transform: scale(1.1);
}

/* Уменьшаем иконки */
.social-media-links--platforms .fa-3x {
    font-size: 1.8em !important;
}

/* Телефоны с центрированием */
#block-telefon .field--name-body {
    display: flex;
    align-items: center;
    height: 100%;
}

#block-telefon .field--name-body p {
    margin: 0;
    display: flex;
    gap: 15px;
    align-items: center;
    height: 100%;
}

#block-telefon .field--name-body a {
    text-decoration: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.social-media-links--platforms span {
    color: #62d1e4;
}

/* Large devices (1224px and up) */
@media only screen and (min-width: 1224px) {


    @keyframes gradientShift {
        0% {
            background-position: 0% 0%;
        }

        50% {
            background-position: 100% 100%;
        }

        100% {
            background-position: 0% 0%;
        }
    }

    .navbar-header {
        display: flex;
        align-items: center;
    }

    #superfish-main {
        margin-left: 200px;
        margin-top: 15px;
    }

    #block-mainnavigation a,
    #block-menyu a {
        color: #62d1e4;
    }

    #block-socialnyeseti {
        margin-right: 25px;
    }

    #block-telefon {
        margin-top: 0;
    }

    .navbar-collapse {
        display: flex;
        align-items: center;
        height: 70px;
    }
}

/* Medium-large devices (992px - 1223px) */
@media (min-width: 992px) and (max-width: 1223px) {
    .navbar {
        background-color: #5c5c7e;
        /* Изменено с #f8f8f8 */
    }

    .navbar-header {
        /* Изменено с 14px */
        display: flex;
        align-items: center;
    }

    #superfish-main {
        margin-left: 200px;
        margin-top: 15px;
    }

    #block-mainnavigation a,
    #block-menyu a {
        color: #62d1e4;
        /* Изменено с #848282 */
    }

    ul.sf-menu a,
    ul.sf-menu span.nolink {
        display: block;
        padding: 1em 1.4em;
        position: relative;
    }

    .field--type-text-with-summary img {
        width: 30px !important;
        height: 30px !important;
    }

    #block-socialnyeseti {
        margin-right: 25px;
        /* Изменено с 5px */
        margin-top: 0;
    }

    #block-telefon {
        margin-top: 0;
    }

    #block-telefon strong {
        font-size: 16px;
        /* Изменено с 12px */
    }

    .navbar-collapse {
        display: flex;
        align-items: center;
        height: 70px;
    }
}

/* Tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .navbar {
        background-color: #5c5c7e;
        /* Изменено с #f8f8f8 */
    }

    .navbar-header {
        /* Изменено с 14px */
        display: flex;
        align-items: center;
    }

    #superfish-main {
        margin-left: 200px;
        margin-top: 15px;
    }

    #block-mainnavigation a,
    #block-menyu a {
        color: #62d1e4;
        /* Изменено с #848282 */
    }

    #block-socialnyeseti {
        margin-right: 25px;
        margin-top: 0;
    }

    #block-telefon {
        margin-top: 0;
    }

    .navbar-collapse {
        display: flex;
        align-items: center;
        height: 70px;
    }
}

@media (min-width: 768px) and (max-width: 1100px) {
    .navbar-collapse.collapse {
        display: none !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
    }
}

.navbar-toggle {
    border: none;
    background: transparent;
    padding: 8px 12px;
    background-color: #463883;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    margin: 0;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: #463883;
}

/* Скрываем текст для скринридеров */
.navbar-toggle .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Преобразуем старые icon-bar в современный бургер */
.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff !important;
    border-radius: 1px;
    margin: 4px 0;
    transition: all 0.3s ease;
    transform-origin: center;
}

/* Анимация при активном состоянии */
.navbar-toggle[aria-expanded="true"] .icon-bar:nth-child(2) {
    transform: rotate(45deg) translate(4px, 4px);
}

.navbar-toggle[aria-expanded="true"] .icon-bar:nth-child(3) {
    opacity: 0;
}

.navbar-toggle[aria-expanded="true"] .icon-bar:nth-child(4) {
    transform: rotate(-45deg) translate(4px, -4px);
}

/* Mobile devices (767px and down) */
@media (max-width: 1100px) {
    .navbar {
        background-color: #5c5c7e;
        position: relative;
        min-height: 60px;
    }

    .navbar-header {
        justify-content: space-between;
        font-size: 16px;
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 60px;
    }

    .region.region-navigation a {
        clear: both;
    }

    .navbar-toggle {
        display: block !important;
    }

    /* Стили для кнопки меню */


    /* .navbar-toggle .icon-bar {
        background-color: #fff;
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 1px;
    }

    .navbar-toggle:hover .icon-bar {
        background-color: #62d1e4;
    } */

    #superfish-main-toggle {
        position: absolute;
        top: 20px;
        left: 290px;
        padding: 10px;
        font-size: 14px;
        border: 1px solid #c7c7c7;
        border-radius: 4px;
        color: #888888;
        background-color: #fff;
        z-index: 1000;
    }

    #superfish-main {
        margin-left: 0;
        margin-top: 15px;
        width: 100%;
    }

    #block-mainnavigation a,
    #block-menyu a {
        color: #62d1e4;
    }

    .sf-multicolumn-wrapper {
        color: #62d1e4;
    }

    #block-socialnyeseti {
        margin-right: 0;
        margin-top: 0;
    }

    #block-telefon {
        margin-top: 0;
        width: 100%;
    }

    /* Стили для раскрывающегося меню */
    .navbar-collapse {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #5c5c7e;
        z-index: 999;
        border-top: 1px solid #fff;
        padding: 20px 15px;
        flex-direction: column;
        align-items: flex-start;
        min-height: auto;
        max-height: none !important;
        /* Убираем ограничение по высоте */
        overflow: visible !important;
        /* Разрешаем переполнение */
        box-sizing: border-box;
    }

    .navbar-collapse.collapse.in {
        display: flex !important;
    }

    .navbar-collapse .region-navigation-collapsible {
        width: 100%;
        justify-content: flex-start;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        flex-wrap: nowrap;
    }

    /* Стили для блоков в мобильном меню */
    #block-socialmedialinks,
    #block-telefon {
        width: 100%;
        justify-content: center;
        margin: 0;
        padding: 0;
        flex-shrink: 0;
    }
#block-telefon {
    margin-bottom: 20px;
}
    .social-media-links--platforms.platforms {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 15px;
    }

    #block-telefon .field--name-body {
        width: 100%;
        display: block;
    }

    #block-telefon .field--name-body p {
        justify-content: center;
        align-items: flex-start;
        gap: 12px;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    #block-telefon .field--name-body a {
        font-size: 16px;
        color: #62d1e4;
        text-decoration: none;
        white-space: normal;
        /* Разрешаем перенос текста */
        word-break: break-word;
        /* Перенос длинных номеров */
        line-height: 1.4;
        padding: 5px 0;
    }

    /* Убедимся, что контейнер расширяется по содержимому */
    .navbar-collapse,
    .navbar-collapse .region-navigation-collapsible,
    #block-telefon .field--name-body {
        height: auto !important;
        min-height: auto !important;
    }
}

/* Small mobile devices (480px and down) */
@media (max-width: 480px) {
.navbar .logo {
    padding-left: 0;
}
    #superfish-main-toggle {
        top: 15px;
        left: 250px;
        padding: 8px;
        font-size: 12px;
    }
    .navbar-collapse {
        padding:  0;
    }

    .navbar-collapse .region-navigation-collapsible {
        gap: 15px;
    }

    .social-media-links--platforms .fa-3x {
        font-size: 1.5em !important;
    }

    #block-telefon .field--name-body p {
        gap: 8px;
    }

    #block-telefon .field--name-body a {
        font-size: 14px;
        padding: 3px 0;
    }

    .social-media-links--platforms.platforms {
        gap: 10px;
    }
}

/* Очень маленькие экраны (320px and down) */
@media (max-width: 320px) {
    .navbar-collapse {
        padding: 12px 8px;
    }

    .navbar-collapse .region-navigation-collapsible {
        gap: 12px;
    }

    #block-telefon .field--name-body a {
        font-size: 13px;
    }

    #superfish-main-toggle {
        left: 200px;
        padding: 6px;
        font-size: 11px;
    }
}

.navbar {
    background: linear-gradient(90deg, #c397ca, #766b96, #4f4e6d, #766b96, #c397ca);
    background-size: 200% 200%;
    animation: gradientShift 15s ease infinite;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.navbar::before,
.navbar::after {
    display: none;
}

/* Стили для меню block-menyu */
#block-menyu {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (max-width: 1450px) {
    #block-menyu {
        position: relative;
        top: unset;
        left: unset;
        transform: none;
    }
}

#block-menyu .menu {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 15px;
    height: 100%;
}

#block-menyu .menu li {
    margin: 0;
    position: relative;
    border-radius: 16px !important;
}

#block-menyu .menu li a {
    font-size: 16px;
    line-height: 1em;
    border-radius: 14px;
    display: block;
    padding: .75em 1.25em;
    color: #62d1e4;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

#block-menyu .menu li a:hover,
#block-menyu .menu li a:focus {
    color: #fff;
    background-color: #fe78d7;
    text-decoration: none;
}

#block-menyu .menu li a.is-active {
    color: #fff !important;
    background-color: #463883;
}

.path-frontpage #block-menyu .menu li:nth-child(3) a.is-active,
.path-frontpage #block-menyu .menu li:nth-child(4) a.is-active {
    color: #62d1e4 !important;
    background-color: transparent !important;
}

.path-frontpage #block-menyu .menu li:nth-child(3) a.is-active:hover,
.path-frontpage #block-menyu .menu li:nth-child(4) a.is-active:hover {
    background: #fe78d7 !important;
    color: #fff !important;
}

/* Medium-large devices (992px - 1223px) */
/* @media only screen and (min-width: 1224px) {

    #block-menyu .menu li a {
        font-size: 16px;
    }
} */

/* Medium-large devices (992px - 1223px) */
/* @media (min-width: 992px) and (max-width: 1223px) {

    #block-menyu .menu li a {
        font-size: 15px;
        padding: 1em 1.2em;
    }
} */

/* Tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {

    #block-menyu .menu li a {
        font-size: 14px;
        padding: 1em 1em;
    }
}

/* Mobile devices (767px and down) */
@media (max-width: 1100px) {
    #block-menyu {
        width: 100%;
        margin-left: 0;
        /* Помещаем меню после телефонов и соцсетей */
    }

    #block-menyu .menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        width: 100%;
    }

    #block-menyu .menu li {
        width: 100%;
        border-radius: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    #block-menyu .menu li:last-child {
        border-bottom: none;
    }

    #block-menyu .menu li a {
        border-radius: 0 !important;
        padding: 20px 20px;
        width: 100%;
        font-size: 16px;
    }

}

/* Очень маленькие экраны (320px and down) */
@media (max-width: 320px) {
    #block-menyu .menu li a {
        padding: 8px 10px;
        font-size: 14px;
    }
}