/* ==========================================================================
   УНИКАЛЬНЫЙ УЗОР ДЛЯ ШАПКИ - РЕЛИГИОЗНЫЕ СИМВОЛЫ (ИСПРАВЛЕННАЯ ВЕРСИЯ)
   ========================================================================== */

/* Основной контейнер шапки */
.site-header {
    background-color: var(--color-bg-primary);
    box-shadow: var(--shadow-light);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 1rem 0;
    transition: all 0.3s ease;
    /* Убираем overflow: hidden, чтобы меню не обрезалось */
    overflow: visible;
}

/* Фоновый узор для шапки */
.site-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Основные градиенты */
    background: 
        radial-gradient(circle at 25% 25%, rgba(120, 119, 198, 0.1) 0%, transparent 55%),
        radial-gradient(circle at 75% 75%, rgba(255, 215, 0, 0.05) 0%, transparent 55%),
        /* Сетчатый узор */
        url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M100 200c55.228 0 100-44.772 100-100S155.228 0 100 0 0 44.772 0 100s44.772 100 100 100zm0-10c49.706 0 90-40.294 90-90S149.706 10 100 10 10 50.294 10 100s40.294 90 90 90z' fill='%23688EC6' fill-opacity='0.05'/%3E%3Ccircle cx='100' cy='100' r='30' fill='%23987A57' fill-opacity='0.04'/%3E%3Cpath d='M100 170c-38.66 0-70-31.34-70-70s31.34-70 70-70 70 31.34 70 70-31.34 70-70 70zm0-10c33.137 0 60-26.863 60-60s-26.863-60-60-60-60 26.863-60 60 26.863 60 60 60z' fill='%236C8EBF' fill-opacity='0.03'/%3E%3C/svg%3E"),
        /* Религиозные символы с разными позициями */
        /* Звезда Давида - иудаизм */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 100 100'%3E%3Cpath d='M50 20 L60 40 L80 40 L65 55 L75 75 L50 65 L25 75 L35 55 L20 40 L40 40 Z' fill='%23688EC6' fill-opacity='0.03'/%3E%3C/svg%3E") 10% 20%/40px 40px no-repeat,
        /* Полумесяц - ислам */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 100 100'%3E%3Cpath d='M80 50 A30 30 0 1 1 20 50 A30 30 0 1 1 80 50 Z' fill='none' stroke='%23987A57' stroke-width='2' stroke-opacity='0.04'/%3E%3Ccircle cx='65' cy='50' r='25' fill='%23f8f9fa'/%3E%3C/svg%3E") 90% 80%/60px 60px no-repeat,
        /* Крест - христианство */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='45' viewBox='0 0 100 100'%3E%3Cpath d='M50 20 L50 80 M20 50 L80 50' stroke='%236C8EBF' stroke-width='4' stroke-linecap='round' stroke-opacity='0.04'/%3E%3C/svg%3E") 85% 15%/45px 45px no-repeat,
        /* Ом - индуизм */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 100 100'%3E%3Cpath d='M30,50 Q50,20 70,50 Q50,80 30,50' fill='none' stroke='%235A7DA0' stroke-width='3' stroke-opacity='0.03'/%3E%3Ccircle cx='50' cy='50' r='10' fill='none' stroke='%235A7DA0' stroke-width='2' stroke-opacity='0.03'/%3E%3C/svg%3E") 15% 85%/50px 50px no-repeat,
        /* Дхармачакра - буддизм */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='55' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='%23876B4F' stroke-width='2' stroke-opacity='0.03'/%3E%3Ccircle cx='50' cy='50' r='10' fill='none' stroke='%23876B4F' stroke-width='2' stroke-opacity='0.03'/%3E%3Cpath d='M50 10 L50 90 M10 50 L90 50 M25 25 L75 75 M75 25 L25 75' stroke='%23876B4F' stroke-width='1.5' stroke-opacity='0.02'/%3E%3C/svg%3E") 50% 50%/55px 55px no-repeat;
    opacity: 0.7;
    z-index: -1;
    pointer-events: none; /* Чтобы не мешало кликам */
    animation: floatSymbols 60s ease-in-out infinite alternate;
}

/* Анимация плавающих символов */
@keyframes floatSymbols {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
        background-position: 
            0 0,
            0 0,
            200px 200px,
            10% 20%,
            90% 80%,
            85% 15%,
            15% 85%,
            50% 50%;
    }
    25% {
        transform: translate(-5px, 5px) rotate(0.5deg);
        background-position: 
            0 0,
            0 0,
            210px 210px,
            12% 22%,
            88% 78%,
            83% 17%,
            17% 83%,
            52% 52%;
    }
    50% {
        transform: translate(5px, -3px) rotate(-0.5deg);
        background-position: 
            0 0,
            0 0,
            190px 190px,
            8% 18%,
            92% 82%,
            87% 13%,
            13% 87%,
            48% 48%;
    }
    75% {
        transform: translate(-3px, -2px) rotate(0.3deg);
        background-position: 
            0 0,
            0 0,
            205px 205px,
            11% 19%,
            89% 79%,
            86% 16%,
            14% 84%,
            51% 49%;
    }
}

/* Добавление свечения при скролле */
.site-header.sticky {
    box-shadow: 
        0 6px 30px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0 40px rgba(104, 142, 198, 0.1);
}

.site-header.sticky::before {
    opacity: 0.9;
}

/* Контейнер header */
.header-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    position: relative;
    z-index: 2; /* Повышаем z-index, чтобы контент был над фоном */
}

/* Круглый логотип в шапке */
.site-branding-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: nowrap;
    min-height: 60px;
}

.custom-logo-link {
    display: block;
    flex-shrink: 0;
    line-height: 0;
}

.custom-logo-link .round-logo,
.site-logo .custom-logo {
    border-radius: 50%;
    object-fit: cover;
    display: block;
    width: 55px;
    height: 55px;
    box-shadow: var(--shadow-light);
    border: 2px solid var(--color-sky-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: var(--color-bg-primary);
    position: relative; /* Чтобы был над фоном */
}

.custom-logo-link:hover .round-logo {
    transform: scale(1.05);
    box-shadow: var(--shadow-medium);
}

.custom-logo-link:focus {
    outline: 2px solid var(--color-sky-base);
    outline-offset: 2px;
    border-radius: 50%;
}

.custom-logo-link:focus .round-logo {
    transform: scale(1.05);
}

.site-title-wrapper {
    flex: 1;
    min-width: 0;
    position: relative; /* Чтобы был над фоном */
}

.site-title {
    font-size: 1.75rem;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative; /* Для наложения */
}

.site-title a {
    color: var(--color-sky-dark);
    text-decoration: none;
    position: relative;
    z-index: 1;
}

.site-title a:hover {
    color: var(--color-sky-base);
    text-decoration: none;
}

.site-description {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    margin: 0.25rem 0 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative; /* Для наложения */
}

/* Основная навигация - ВАЖНО: исправляем для мобильного меню */
.main-navigation {
    position: relative; /* Изменяем с absolute/fixed на relative */
    z-index: 1001; /* Выше чем фон шапки */
}

/* Primary Menu - мобильная версия */
#primary-menu {
    position: absolute; /* Меню открывается абсолютно */
    top: 100%; /* Прямо под шапкой */
    left: 0;
    right: 0;
    background: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-radius: 0 0 10px 10px;
    display: none; /* По умолчанию скрыто */
    flex-direction: column;
    z-index: 1002; /* Выше всего */
    max-height: 80vh;
    overflow-y: auto;
    padding: 1rem 0;
    margin-top: 1rem;
}

#primary-menu.active {
    display: flex;
}

/* Стили для кнопки гамбургера */
.menu-toggle {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(104, 142, 198, 0.2);
    border-radius: 8px;
    padding: 10px;
    z-index: 1003; /* Выше меню */
    position: relative;
    transition: all 0.3s ease;
}

.menu-toggle:hover {
    background: white;
    border-color: rgba(104, 142, 198, 0.4);
    box-shadow: 0 4px 15px rgba(104, 142, 198, 0.15);
}

.menu-toggle.is-active {
    background: white;
    border-color: var(--color-sky-base);
}

/* Стили для гамбургера внутри */
.hamburger-box {
    width: 24px;
    height: 18px;
    display: inline-block;
    position: relative;
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -1px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 24px;
    height: 2px;
    background-color: var(--color-sky-dark);
    border-radius: 2px;
    position: absolute;
    transition: transform 0.15s ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: "";
    display: block;
}

.hamburger-inner::before {
    top: -6px;
}

.hamburger-inner::after {
    bottom: -6px;
}

.menu-toggle.is-active .hamburger-inner {
    transform: rotate(45deg);
}

.menu-toggle.is-active .hamburger-inner::before {
    transform: rotate(-90deg);
    top: 0;
}

.menu-toggle.is-active .hamburger-inner::after {
    opacity: 0;
    bottom: 0;
}

/* ==========================================================================
   АДАПТИВНОСТЬ ШАПКИ - ОБНОВЛЕННАЯ ВЕРСИЯ
   ========================================================================== */

@media (max-width: 992px) {
    .site-branding-inner {
        gap: 0.875rem;
        min-height: 55px;
    }
    
    .custom-logo-link .round-logo,
    .site-logo .custom-logo {
        width: 45px;
        height: 45px;
    }
    
    .site-title {
        font-size: 1.5rem;
    }
    
    .site-description {
        font-size: 0.8125rem;
    }
    
    /* Уменьшаем символы на планшетах */
    .site-header::before {
        background-size: 
            200px 200px,
            30px 30px,
            50px 50px,
            35px 35px,
            45px 45px,
            40px 40px;
    }
}

@media (max-width: 768px) {
    .header-container {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 1rem;
        position: relative;
    }
    
    .site-branding {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
    }
    
    .site-branding-inner {
        gap: 0.75rem;
        min-height: 50px;
        flex-wrap: nowrap;
        width: 100%;
    }
    
    .custom-logo-link .round-logo,
    .site-logo .custom-logo {
        width: 40px;
        height: 40px;
        border-width: 1.5px;
    }
    
    .site-title {
        font-size: 1.25rem;
        white-space: normal;
        line-height: 1.3;
        overflow: visible;
    }
    
    .site-description {
        display: none;
    }
    
    /* ОСНОВНОЕ ИСПРАВЛЕНИЕ: Навигация для мобильных */
    .main-navigation {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-shrink: 0;
        width: auto;
        margin: 0;
        order: 2;
    }
    
    /* Primary Menu - абсолютное позиционирование для мобильных */
    #primary-menu {
        position: fixed; /* Изменяем на fixed для мобильных */
        top: 70px; /* Отступ от верха */
        left: 20px;
        right: 20px;
        background: white;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
        border-radius: 12px;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        padding: 1rem;
        margin-top: 0;
        z-index: 9999; /* Максимальный z-index */
    }
    
    /* Затемнение фона при открытом меню */
    body.menu-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
        backdrop-filter: blur(3px);
    }
    
    /* Убираем анимацию slideDown для mobile menu */
    .primary-menu {
        animation: none !important;
    }
    
    /* Адаптация фона для мобильных */
    .site-header::before {
        background-size: 
            150px 150px,
            25px 25px,
            40px 40px,
            30px 30px,
            35px 35px,
            30px 30px;
        opacity: 0.6;
        animation-duration: 80s;
    }
}

@media (max-width: 480px) {
    .site-branding-inner {
        gap: 0.625rem;
        min-height: 45px;
    }
    
    .custom-logo-link .round-logo,
    .site-logo .custom-logo {
        width: 36px;
        height: 36px;
    }
    
    .site-title {
        font-size: 1.125rem;
        line-height: 1.25;
    }
    
    .header-container {
        gap: 0.75rem;
    }
    
    /* Primary Menu для очень маленьких экранов */
    #primary-menu {
        left: 0px;
        right: 0px;
        top: 65px;
        max-height: calc(100vh - 80px);
    }
    
    .site-header::before {
        background-size: 
            120px 120px,
            20px 20px,
            35px 35px,
            25px 25px,
            30px 30px,
            25px 25px;
        opacity: 0.5;
    }
}

@media (max-width: 768px) and (orientation: landscape) {
    .site-branding-inner {
        min-height: 40px;
    }
    
    .custom-logo-link .round-logo,
    .site-logo .custom-logo {
        width: 35px;
        height: 35px;
    }
    
    .site-title {
        font-size: 1.125rem;
    }
    
    .primary-menu {
        max-height: 60vh;
        overflow-y: auto;
    }
    
    #primary-menu {
        top: 60px;
        max-height: calc(100vh - 70px);
    }
}

/* Поддержка Retina-экранов */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .custom-logo-link .round-logo,
    .site-logo .custom-logo {
        border-width: 1px;
    }
}

/* Десктопное меню - обычное состояние */
@media (min-width: 769px) {
    #primary-menu {
        position: static;
        display: flex !important;
        flex-direction: row;
        background: none;
        box-shadow: none;
        max-height: none;
        overflow: visible;
        padding: 0;
        margin: 0;
    }
    
    .menu-toggle {
        display: none;
    }
}

/* Анимация появления шапки */
@keyframes fadeInHeader {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.site-header {
    animation: fadeInHeader 0.6s ease-out;
}