/* ============================================
   ПОДВОДНАЯ ТЕМА «ГЛУБИНА ВОДЫ»
   Градиент + пузырьки + увеличенный логотип + выпадающее меню
   ============================================ */

/* 1. ОСНОВНОЙ ФОН — ГРАДИЕНТ ГЛУБИНЫ */
body {
    background: linear-gradient(180deg, 
        #7fc9c2 0%,      /* светлая вода у поверхности */
        #3a9eb3 25%,
        #1a6b7a 50%,
        #0e4d62 75%,
        #062a38 100%     /* тёмная глубина */
    ) !important;
    background-attachment: fixed !important;
    min-height: 100vh !important;
}

/* 2. ПУЗЫРЬКИ — АНИМИРОВАННЫЙ ФОН */
body::before {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(255,255,240,0.15) 2px, transparent 2.5px),
        radial-gradient(circle at 85% 40%, rgba(255,255,255,0.12) 3px, transparent 3.5px),
        radial-gradient(circle at 30% 70%, rgba(200,240,255,0.1) 4px, transparent 4.5px),
        radial-gradient(circle at 70% 85%, rgba(255,255,245,0.08) 2px, transparent 2.5px),
        radial-gradient(circle at 50% 50%, rgba(180,230,255,0.1) 5px, transparent 5.5px),
        radial-gradient(circle at 95% 15%, rgba(255,255,250,0.12) 3px, transparent 3.5px),
        radial-gradient(circle at 45% 90%, rgba(200,240,255,0.08) 2px, transparent 2.5px);
    background-size: 250px 250px, 300px 300px, 400px 400px, 200px 200px, 500px 500px, 350px 350px, 280px 280px;
    background-repeat: repeat;
    animation: bubblesFloat 20s linear infinite !important;
}

/* Анимация подъёма пузырьков */
@keyframes bubblesFloat {
    0% {
        background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
    }
    100% {
        background-position: 50px -250px, -30px -300px, 80px -400px, -50px -200px, 30px -500px, -60px -350px, 40px -280px;
    }
}

/* 3. КАРТОЧКИ — ПОЛУПРОЗРАЧНЫЕ, КАК ПОД ВОДОЙ */
#body-wrapper .section,
#body-wrapper .container > *,
.modular-row, .card, .blog-item {
    background: rgba(10, 40, 55, 0.55) !important;
    backdrop-filter: blur(3px) !important;
    border-radius: 1.2rem !important;
    border: 1px solid rgba(80, 200, 220, 0.25) !important;
    margin-bottom: 1.5rem !important;
    padding: 1.5rem !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2) !important;
}

/* 4. ЗАГОЛОВКИ */
h1, h2, h3, h4 {
    color: #e0f4ff !important;
    text-shadow: 0 2px 10px rgba(0, 30, 50, 0.5) !important;
    border-left: 3px solid #3ec1d3 !important;
    padding-left: 1rem !important;
}
h1 { border-left: none !important; text-align: center !important; }

/* 5. ТЕКСТ */
p, li, blockquote { color: #eef3fc !important; }
blockquote {
    background: rgba(0, 50, 65, 0.5) !important;
    border-left: 4px solid #3ec1d3 !important;
    border-radius: 0.5rem !important;
    padding: 1rem !important;
}

/* 6. ССЫЛКИ */
a {
    color: #8ee0f0 !important;
    border-bottom: 1px dotted rgba(62, 193, 211, 0.5) !important;
}
a:hover { color: #ffefb0 !important; border-bottom-color: #ffd966 !important; }

/* 7. ТАБЛИЦЫ */
table {
    background: rgba(5, 35, 50, 0.75) !important;
    border-radius: 0.8rem !important;
    overflow: hidden !important;
}
th, td {
    border-bottom: 1px solid #2f8f9e !important;
    padding: 0.8rem !important;
    color: #eef4fc !important;
}
th { background: #0c5c70 !important; color: white !important; }

/* 8. ХЕДЕР — ПРОЗРАЧНЫЙ */
#header.section {
    background: rgba(5, 30, 45, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    border-bottom: 1px solid rgba(62, 193, 211, 0.3) !important;
    padding: 0.5rem 0 !important;
}

/* 9. УВЕЛИЧЕННЫЙ ЛОГОТИП */
.logo .navbar-brand img {
    max-height: 120px !important;
    width: auto !important;
    border-radius: 12px !important;
    background: rgba(0,0,0,0.3) !important;
    padding: 6px 12px !important;
    transition: all 0.2s ease !important;
}
.logo .navbar-brand img:hover { transform: scale(1.02) !important; }

/* 10. ВЫПАДАЮЩЕЕ МЕНЮ (DROPDOWN) */
.has-dropdown { position: relative !important; }
.has-dropdown > a::after {
    content: ' ▼' !important;
    font-size: 10px !important;
    margin-left: 5px !important;
    opacity: 0.7 !important;
}
.has-dropdown .dropdown-menu,
.has-dropdown ul {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: rgba(5, 35, 50, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(62, 193, 211, 0.4) !important;
    min-width: 220px !important;
    padding: 0.5rem 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: all 0.25s ease !important;
    z-index: 1000 !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
}
.has-dropdown:hover .dropdown-menu,
.has-dropdown:hover ul {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}
.has-dropdown .dropdown-menu li,
.has-dropdown ul li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}
.has-dropdown .dropdown-menu li a,
.has-dropdown ul li a {
    display: block !important;
    padding: 10px 20px !important;
    color: #e0f4ff !important;
    border-bottom: none !important;
    font-size: 0.95rem !important;
}
.has-dropdown .dropdown-menu li a:hover,
.has-dropdown ul li a:hover {
    background: rgba(62, 193, 211, 0.2) !important;
    color: #ffefb0 !important;
    padding-left: 25px !important;
}
.desktop-menu nav > ul,
.dropmenu > ul {
    display: flex !important;
    gap: 1.2rem !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.desktop-menu nav > ul > li > a,
.dropmenu > ul > li > a {
    padding: 10px 15px !important;
    color: white !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
}
.desktop-menu nav > ul > li > a:hover,
.dropmenu > ul > li > a:hover {
    background: rgba(62, 193, 211, 0.2) !important;
    color: #ffefb0 !important;
}
.desktop-menu nav > ul > li.active > a,
.dropmenu > ul > li.active > a {
    background: rgba(62, 193, 211, 0.25) !important;
    border-bottom: 2px solid #3ec1d3 !important;
}

/* 11. ФУТЕР — СКРЫТ */
#footer, .site-footer, footer.section.bg-gray {
    display: none !important;
}

/* 12. СКРЫВАЕМ СТАНДАРТНЫЙ ЗАГОЛОВОК СТРАНИЦЫ */
#body-wrapper .container > h1:first-of-type {
    display: none !important;
}

/* 13. АДАПТАЦИЯ ДЛЯ МОБИЛЬНЫХ */
@media (max-width: 768px) {
    .logo .navbar-brand img { max-height: 55px !important; padding: 4px 8px !important; }
    .has-dropdown .dropdown-menu,
    .has-dropdown ul {
        position: static !important;
        display: none !important;
    }
    .has-dropdown.active .dropdown-menu,
    .has-dropdown.active ul {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: rgba(5, 35, 50, 0.95) !important;
        margin-left: 15px !important;
    }
}

/* 14. БЛИКИ НА ПОВЕРХНОСТИ */
body::after {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    background: radial-gradient(ellipse at 20% 10%, rgba(255,255,245,0.08) 0%, transparent 50%) !important;
    z-index: 1 !important;
}