/* === Header & Navigation (warm-platinum) ===
 * Sticky header, desktop nav, dropdown, burger, mobile overlay, sticky CTA.
 * JS-классы preserved: sk-header--scrolled, sk-mobile-nav--open,
 * sk-header__burger--active, sk-dropdown--open, sk-mobile-nav--expanded.
 * @package SchoolKarjera
 */

/* -- Header shell -- */
.sk-header {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: var(--z-sticky);
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
}
.sk-header--scrolled {
    background: rgba(248, 244, 236, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom-color: var(--color-divider);
    box-shadow: var(--shadow-sm);
}
.sk-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 80px; gap: var(--sp-6, 32px);
    transition: height var(--dur-base) var(--ease-out);
}
.sk-header--scrolled .sk-header__inner { height: 64px; }

/* -- Skip-link (WCAG AA) -- */
.sk-skip-link {
    position: absolute; top: -100px; left: var(--sp-3, 16px);
    padding: var(--sp-2, 8px) var(--sp-3, 16px);
    background: var(--color-accent); color: var(--color-white);
    font-family: var(--font-sans); font-size: var(--fs-14); font-weight: 500;
    text-decoration: none; border-radius: var(--radius-sm, 6px);
    z-index: var(--z-sticky);
    transition: top var(--dur-fast) var(--ease-out);
}
.sk-skip-link:focus {
    top: var(--sp-2, 8px);
    outline: 2px solid var(--color-accent); outline-offset: 2px;
}

/* -- Logo -- */
.sk-header__logo {
    display: flex; align-items: center; flex-shrink: 0;
    font-family: var(--font-serif); font-size: var(--fs-24);
    color: var(--color-ink-900); text-decoration: none;
}
.sk-header__logo img {
    height: 44px; width: auto; display: block;
    transition: height var(--dur-base) var(--ease-out);
}
.sk-header--scrolled .sk-header__logo img { height: 36px; }

/* -- Desktop navigation -- */
.sk-header__nav { flex: 1; display: flex; justify-content: center; }
.sk-header__menu {
    display: flex; align-items: center; gap: var(--sp-1, 4px);
    list-style: none; margin: 0; padding: 0;
}
.sk-header__menu-item > a {
    position: relative;
    display: flex; align-items: center; gap: 6px;
    padding: 10px 16px;
    font-family: var(--font-sans); font-size: var(--fs-14); font-weight: 500;
    letter-spacing: var(--ls-wide);
    color: var(--color-ink-900); text-decoration: none; white-space: nowrap;
    transition: color var(--dur-fast) var(--ease-out);
}
.sk-header__menu-item > a::after {
    content: ''; position: absolute;
    left: 16px; right: 16px; bottom: 4px; height: 1px;
    background: var(--color-accent);
    transform: scaleX(0); transform-origin: left center;
    transition: transform var(--dur-base) var(--ease-out);
}
.sk-header__menu-item > a:hover { color: var(--color-accent); }
.sk-header__menu-item > a:hover::after,
.sk-header__menu-item > a:focus-visible::after { transform: scaleX(1); }
.sk-header__menu-item > a:focus-visible {
    outline: 2px solid var(--color-accent); outline-offset: 2px;
    border-radius: var(--radius-sm, 6px);
}
.sk-header__menu-item.current-menu-item > a,
.sk-header__menu-item > a[aria-current="page"] { color: var(--color-accent); }
.sk-header__menu-item.current-menu-item > a::after,
.sk-header__menu-item > a[aria-current="page"]::after {
    transform: scaleX(1); height: 2px;
}

/* -- Dropdown (desktop) -- */
.sk-header__menu-item--dropdown { position: relative; }
.sk-header__dropdown {
    position: absolute; top: calc(100% + 4px); left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 220px; padding: var(--sp-2, 8px);
    background: var(--color-white);
    border-top: 2px solid var(--color-divider);
    box-shadow: var(--shadow-lg);
    list-style: none; margin: 0;
    opacity: 0; visibility: hidden;
    transition: opacity var(--dur-base) var(--ease-out),
                visibility var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
}
.sk-header__menu-item--dropdown:hover .sk-header__dropdown,
.sk-header__menu-item--dropdown.sk-dropdown--open .sk-header__dropdown {
    opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.sk-header__dropdown li a {
    display: block; padding: 10px 16px;
    font-family: var(--font-sans); font-size: var(--fs-14);
    letter-spacing: var(--ls-wide);
    color: var(--color-ink-900); text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}
.sk-header__dropdown li a:hover,
.sk-header__dropdown li a:focus-visible {
    color: var(--color-accent);
    background: var(--color-surface-warm, rgba(248, 244, 236, 0.6));
    outline: none;
}

/* -- CTA button -- */
.sk-header__cta {
    flex-shrink: 0; padding: 10px 22px;
    font-size: var(--fs-14); letter-spacing: var(--ls-wide);
    transition: background var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
}
.sk-header__cta:focus-visible {
    outline: 2px solid var(--color-accent); outline-offset: 2px;
}

/* -- Burger (mobile trigger) -- */
.sk-header__burger {
    display: none; flex-direction: column; justify-content: center; align-items: center;
    width: 44px; height: 44px; padding: 0; gap: 5px;
    background: none; border: none; cursor: pointer;
    z-index: var(--z-sticky);
}
.sk-header__burger:focus-visible {
    outline: 2px solid var(--color-accent); outline-offset: 2px;
    border-radius: var(--radius-sm, 6px);
}
.sk-header__burger-line {
    display: block; width: 24px; height: 2px;
    background: var(--color-ink-900); border-radius: 1px;
    transition: transform var(--dur-base) var(--ease-out),
                opacity var(--dur-base) var(--ease-out);
}
.sk-header__burger--active .sk-header__burger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.sk-header__burger--active .sk-header__burger-line:nth-child(2) { opacity: 0; }
.sk-header__burger--active .sk-header__burger-line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* -- Mobile navigation overlay -- */
.sk-mobile-nav {
    position: fixed; top: 64px; left: 0; right: 0; bottom: 0;
    z-index: var(--z-overlay); padding: var(--sp-5, 24px);
    background: var(--color-surface-warm, #F8F4EC);
    transform: translateX(100%); overflow-y: auto;
    transition: transform var(--dur-slow, 0.35s) var(--ease-out);
}
.sk-mobile-nav--open { transform: translateX(0); }
.sk-mobile-nav__menu { list-style: none; margin: 0; padding: 0; }
.sk-mobile-nav__menu > li > a,
.sk-mobile-nav__parent {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0;
    font-family: var(--font-sans); font-size: var(--fs-18, 1.125rem); font-weight: 500;
    letter-spacing: var(--ls-wide);
    color: var(--color-ink-900); text-decoration: none;
    border-bottom: 1px solid var(--color-divider);
    transition: color var(--dur-fast) var(--ease-out);
}
.sk-mobile-nav__menu > li > a:hover,
.sk-mobile-nav__menu > li > a:focus-visible,
.sk-mobile-nav__parent:hover,
.sk-mobile-nav__parent:focus-visible {
    color: var(--color-accent); outline: none;
}
.sk-mobile-nav__sub {
    list-style: none; margin: 0; padding: 0 0 0 var(--sp-4, 20px);
    display: none;
}
.sk-mobile-nav__has-sub.sk-mobile-nav--expanded .sk-mobile-nav__sub { display: block; }
.sk-mobile-nav__sub li a {
    display: block; padding: 12px 0;
    font-family: var(--font-sans); font-size: var(--fs-14);
    letter-spacing: var(--ls-wide);
    color: var(--color-ink-600, var(--color-ink-900));
    text-decoration: none;
    border-bottom: 1px solid var(--color-divider);
    transition: color var(--dur-fast) var(--ease-out);
}
.sk-mobile-nav__sub li a:hover,
.sk-mobile-nav__sub li a:focus-visible {
    color: var(--color-accent); outline: none;
}
.sk-mobile-nav__cta {
    display: block; width: 100%;
    margin-top: var(--sp-5, 24px); text-align: center;
}

/* -- Scroll progress (progressive enhancement) -- */
@supports (animation-timeline: scroll()) {
    .sk-header::after {
        content: ''; position: absolute;
        left: 0; right: 0; bottom: 0; height: 2px;
        background: var(--color-accent);
        transform-origin: left; transform: scaleX(0);
        animation: sk-scroll-progress linear;
        animation-timeline: scroll(root);
    }
    @keyframes sk-scroll-progress {
        from { transform: scaleX(0); } to { transform: scaleX(1); }
    }
}

/* -- Sticky CTA (mobile) -- */
.sk-sticky-cta {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
    padding: var(--sp-2, 8px); gap: var(--sp-2, 8px);
    background: var(--color-white);
    border-top: 1px solid var(--color-divider);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(100%);
    transition: transform var(--dur-base) var(--ease-out);
}
.sk-sticky-cta--visible { transform: translateY(0); }
.sk-sticky-cta__btn {
    display: flex; align-items: center; justify-content: center;
    gap: var(--sp-2, 8px); padding: 12px 16px;
    border-radius: var(--radius-md, 12px);
    font-family: var(--font-sans); font-size: var(--fs-14); font-weight: 600;
    letter-spacing: var(--ls-wide); text-decoration: none;
    transition: opacity var(--dur-fast) var(--ease-out);
}
.sk-sticky-cta__btn:active { opacity: 0.85; }
.sk-sticky-cta__btn--primary { flex: 1; background: var(--color-accent); color: var(--color-white); }
.sk-sticky-cta__btn--wa { background: #25D366; color: var(--color-white); width: 48px; height: 48px; padding: 0; }
.sk-sticky-cta__btn--tg { background: #2AABEE; color: var(--color-white); width: 48px; height: 48px; padding: 0; }

/* -- Responsive -- */
@media (max-width: 1024px) {
    .sk-header__nav, .sk-header__cta { display: none; }
    .sk-header__burger { display: flex; }
    .sk-header__inner { height: 64px; }
    .sk-header--scrolled .sk-header__inner { height: 56px; }
    .sk-mobile-nav { top: 64px; }
}
@media (max-width: 768px) {
    .sk-sticky-cta { display: flex; }
    .sk-header__logo img { height: 36px; }
    .sk-header--scrolled .sk-header__logo img { height: 32px; }
}

/* -- Reduced motion -- */
@media (prefers-reduced-motion: reduce) {
    .sk-header, .sk-header__inner,
    .sk-header__menu-item > a, .sk-header__menu-item > a::after,
    .sk-header__dropdown, .sk-header__burger-line,
    .sk-mobile-nav, .sk-sticky-cta { transition: none; }
}