/* Шапка */
header {
    display: flex;
    position: relative;
    justify-content: space-between;
    padding: 10px 20px;
    align-items: center;
    /* background: #222; */
    gap: 20px;
    z-index: 5;
}


.logo {
    cursor: pointer;
}

.logo img {
    height: 40px;
    margin-right: 20px;
}

.logo svg {
    height: 40px;
    margin-right: 20px;
}

body.light-mode .logo svg path, body.light-mode .logo svg circle, body.light-mode .logo svg rect, body.light-mode .social-icons svg path, body.light-mode .social-icons svg circle {
    fill: black;
}


body.dark-mode .logo svg path, body.dark-mode .logo svg circle, body.dark-mode .social-icons svg path, body.dark-mode .social-icons svg circle, body.dark-mode .logo svg rect {
    fill: white;
}

.language-selector {
    cursor: pointer;
    margin-left: 10px;
    white-space: nowrap;
}

.language-selector {
    position: relative;
    cursor: pointer;
}

.selected-language {
    display: flex;
    align-items: center;
    gap: 5px;
}

.language-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #000;
    border: 1px solid #cdcdcd;
    border-radius: 5px;
    z-index: 9999;
}

.language-option {
    padding: 5px 10px;
    color: #cdcdcd;
    transition: background-color 0.3s;
}

.language-option:hover {
    background-color: #ff4500;
}

.language-option:first-child:hover {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.language-option:last-child:hover {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}


.language-selector:hover .language-dropdown {
    display: block;
}



nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-grow: 1;
}

nav ul {
    list-style-type: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
}

nav li a {
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.3s;
}

body.dark-mode nav li a {
    color: var(--font-color-base-dark-mode);
}

body.light-mode nav li a {
    color: var(--font-color-base-light-mode);
}

nav li a:hover {
    background-color: #ff4500;
}

nav li a.active {
    background-color: #ff4500;
}

nav li {
    position: relative;
    white-space: nowrap;
}

nav a {
    text-decoration: none;
    padding: 10px;
    display: block;
}

/* Стили для подменю */
.submenu {
    opacity: 0;
    /* Изначально подменю прозрачно */
    visibility: hidden;
    /* pointer-events: none;  */
    /* display: none;  */
    position: absolute;
    /* Абсолютное позиционирование под основным меню */
    top: 100%;
    /* Подменю начинается сразу после основного пункта меню */
    left: 0;
    white-space: nowrap;
    /* Это предотвратит перенос текста в подменю */
    background-color: #ff4500;
    /* Цвет фона подменю */
    /* border: 1px solid #000;  */
    border-radius: 5px;
    box-shadow: 0 4px 28px rgba(0, 0, 0, .07);
    padding: 15px;
    margin-top: 15px;
    /* transition: opacity 0.3s, visibility 0.3s; */
    z-index: 999;
}


/* При наведении на основной пункт меню показываем подменю */
nav li:hover>.submenu {
    /* display: block; */
    opacity: 1;
    /* pointer-events: auto;   */
    transition-delay: 0s;
    visibility: visible;
}

nav li>.submenu {
    transition-delay: .5s;
}

nav li:hover>.submenu {
    transition-delay: 0s;
}


.submenu li {
    display: inline-block;
    /* Элементы подменю идут горизонтально */
}

.submenu li a {
    color: white !important;
}

.submenu li a:hover {
    color: var(--font-color-base-light-mode) !important;
}