/* ======================================================================
   ПЛАВАЮЩАЯ ШАПКА (/assets/fx/dock.js): при прокрутке логотип и кнопки перелетают в левый верхний угол
   и висят над страницей. Главная, брейды, дреды, курсы.
   ====================================================================== */
.k-dock-spacer { height: 0; }
#headerLogo.k-logo-top { pointer-events: auto; cursor: pointer; }   /* нажатие на логотип — наверх */
#headerLogo.k-logo-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 50%; }

.header-top-row.is-docked {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1100; margin: 0; max-width: none; width: auto;
    flex-wrap: nowrap; justify-content: flex-start; gap: 10px;
    padding: 10px 70px 10px 16px;
    background: none; border: none; box-shadow: none; pointer-events: none;   /* без полосы: элементы просто висят над страницей */
}
.header-top-row.is-docked > * { pointer-events: auto; }
.header-top-row.is-docked .nav-btn { background: rgba(18, 18, 18, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 4px 14px rgba(0, 0, 0, .45); }
.header-top-row.is-docked #headerLogo { filter: drop-shadow(0 0 12px rgba(212, 175, 55, .6)) drop-shadow(0 4px 10px rgba(0, 0, 0, .6)); }
.header-top-row.is-docked #headerLogo { width: 40px; flex: none; }
.header-top-row.is-docked .header-nav { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; justify-content: flex-start; gap: 6px; }
.header-top-row.is-docked .nav-btn { flex: 0 1 auto; padding: 5px 12px; font-size: .8rem; max-width: none; white-space: nowrap; }
body.k-docked .header-socials { transform: translateY(-120px) !important; opacity: 0 !important; pointer-events: none !important; }
body.k-docked .lang-switcher { transform: translateY(-120px); pointer-events: none; }
@media (max-width: 600px) {
    .header-top-row.is-docked { gap: 6px; padding: 8px 50px 8px 8px; }
    .header-top-row.is-docked #headerLogo { width: 34px; margin: 0; }
    .header-top-row.is-docked .nav-btn { padding: 5px 9px; font-size: .74rem; }
}

/* Телефон: кнопки меню в один ряд, ряд листается пальцем вбок (кнопок 5–6, в ширину экрана не влезают).
   Справа/слева мягкое затухание — подсказка, что дальше есть ещё (классы k-more-r / k-more-l ставит dock.js). */
@media (max-width: 600px) {
    .header-nav {
        flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; min-width: 250px;   /* узкий экран (iPhone SE): ряд кнопок уходит под логотип на всю ширину */
        justify-content: flex-start; gap: 8px;
        padding: 28px 12px; margin: -22px -12px;   /* запас под золотое свечение кнопок: иначе прокрутка обрезает его прямоугольной полосой */
        scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    }
    .header-nav::-webkit-scrollbar { display: none; }
    .header-nav .nav-btn { flex: 0 0 auto; max-width: none; white-space: nowrap; padding: 8px 16px; }
    .header-nav.k-more-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
    .header-nav.k-more-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
    .header-nav.k-more-l.k-more-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
    .header-top-row.is-docked .header-nav { flex: 1 1 auto; min-width: 0; padding: 28px 12px; margin: -24px -12px; }
    .header-top-row.is-docked .nav-btn { flex: 0 0 auto; }
}
@media (max-width: 600px) {   /* в листающемся ряду размытие под кнопками не работает — фон плотнее */
    .header-top-row.is-docked .nav-btn { background: rgba(18, 18, 18, .9); }
}