/* ==========================================================
   Hlavička pri scrolle
   Scroll nadol: logo a menu odídu hore, tlačidlo „Objednať sa“
   sa presunie na stred a ostane v úzkej lište.
   Scroll nahor alebo vrch stránky: vráti sa celá hlavička.
   Triedy cta-ready / cta-compact nastavuje js/header-cta.js.
   ========================================================== */

header.cta-ready {
    --cta-bar: 64px;                              /* výška úzkej lišty */
    --cta-ease: cubic-bezier(.22, 1, .36, 1);
    clip-path: inset(0 0 0 0);
    transition: all .5s ease, clip-path .5s var(--cta-ease);
}

/* Téma pri scrolle nadol vysúva celú hlavičku preč — tu ostáva a len sa zúži. */
header.cta-ready.scroll-down {
    margin-top: 0 !important;
}

/* Orezanie zúži lištu vizuálne aj pre klikanie (obsah pod ňou ostáva klikateľný). */
header.cta-ready.cta-compact {
    clip-path: inset(0 0 calc(100% - var(--cta-bar)) 0);
}

/* Jemná linka pod úzkou lištou */
header.cta-ready::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--cta-bar) - 1px);
    height: 1px;
    background: rgba(0, 0, 0, .08);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}

header.cta-ready.cta-compact::after {
    opacity: 1;
}

/* Logo, menu a hamburger */
header.cta-ready #logo,
header.cta-ready .header-col-mid,
header.cta-ready #menu-btn {
    transition: opacity .3s ease .12s, transform .45s var(--cta-ease) .12s, visibility 0s;
}

header.cta-ready.cta-compact #logo,
header.cta-ready.cta-compact .header-col-mid,
header.cta-ready.cta-compact #menu-btn {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-28px);
    transition: opacity .25s ease, transform .4s var(--cta-ease), visibility 0s linear .25s;
}

/* Desktop: tlačidlo sa z pravého okraja presunie na stred (posun počíta JS) */
header.cta-ready:not(.header-mobile) .menu_side_area .btn-main {
    transition: transform .6s var(--cta-ease), background-color .3s ease, color .3s ease;
}

header.cta-ready.cta-compact:not(.header-mobile) .menu_side_area .btn-main {
    transform: translate(var(--cta-x, 0), var(--cta-y, 0));
    transition-delay: .08s, 0s, 0s;
}

/* Mobil: tlačidlo v hornej lište téma skrýva — tu sa objaví v strede úzkej lišty */
header.cta-ready.header-mobile {
    --cta-bar: 54px;
}

/* Na mobile sa lišta naozaj zníži na výšku tlačidla (nielen orezaním),
   aby pod ňou neostával čierny pás. */
header.cta-ready.header-mobile.cta-compact {
    height: var(--cta-bar) !important;
    padding-bottom: 0 !important;
    overflow: hidden;
}

header.cta-ready.header-mobile::after {
    background: rgba(255, 255, 255, .14);
}

header.cta-ready.header-mobile .menu_side_area {
    position: static;
}

header.cta-ready.header-mobile .menu_side_area .btn-main {
    display: inline-block !important;
    position: absolute;
    left: 50%;
    top: calc(var(--cta-bar) / 2);
    margin: 0;
    white-space: nowrap;
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) translateY(16px);
    transition: opacity .25s ease, transform .45s var(--cta-ease), visibility 0s linear .25s;
}

header.cta-ready.header-mobile.cta-compact .menu_side_area .btn-main {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
    transition: opacity .3s ease .1s, transform .5s var(--cta-ease) .1s, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
    header.cta-ready,
    header.cta-ready::after,
    header.cta-ready #logo,
    header.cta-ready .header-col-mid,
    header.cta-ready #menu-btn,
    header.cta-ready .menu_side_area .btn-main {
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }
}