/* Doplňky hlavičky mimo generovaný build (application.css se přepisuje celý
   novým buildem statického webu, takže ruční pravidla patří sem).

   V režimu editace se blok roztáhne do textarey se zdrojem. .hdr-logo je
   absolutně vycentrovaný na 68px liště, takže by panel přesahoval přes horní
   okraj okna — spustíme ho pod lištu a dáme mu čitelnou šířku. Stejné řešení
   jako .hdr-title/.hdr-logo ve vepde (app/assets/stylesheets/header.css). */

/* Hlavička leží přes hero, ale nezůstává na obrazovce: jako `fixed` se na
   dostatečně vysoké stránce (žádost o heslo) srážela s formulářem — titul
   lišty přetékal přes obsah při scrollu. `absolute` zachová průhlednou lištu
   nad videem nahoře a nechá ji odscrollovat s obsahem. Selektor nese název
   elementu, ať přebije `position: fixed` z buildu bez ohledu na pořadí
   souborů. Stejné řešení jako ve vepde (app/assets/stylesheets/header.css). */
header.site-header {
    position: absolute;
}

/* Hero varianta hlavičky MÁ zůstat fixní — přilepí se nahoře a přes
   scroll-timeline ztmavne. Dvě třídy přebijí `position:absolute` výše. */
header.site-header.site-header--hero {
    position: fixed;
}
/* Titul lišty je vidět hned, i přes hero. Portovaný build ho pod variantou
   --hero schovává (opacity:0/visibility:hidden) a odkrývá až scroll-driven
   animací hdr-logo-in na 86–96svh, takže nad herem nebyl vidět vůbec.
   `!important` je potřeba na obojí: animace přebíjí běžné deklarace.
   Stejné řešení jako ve vepde (investors/uvod.html.erb). */
.site-header--hero .hdr-logo {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    animation: none !important;
}

/* ===== Kdy hlavička zbělá =====
   Build spouští přechod transparentní → bílá až na konci hera
   (`animation-range: 78svh 94svh`). Na nižším okně je to skoro celý scroll
   hera, takže lišta zůstává dlouho průhledná nad videem. Tady se celá
   choreografie posouvá nahoru; pořadí kroků zůstává (nejdřív zbělá lišta
   a prohodí se logo OSA, až pak by najel titul — ten je ale vidět rovnou, viz
   výš). Selektory nesou název elementu (header.…), ať to nestojí na pořadí
   souborů. Stejné řešení jako ve vepde (app/assets/stylesheets/header.css). */
header.site-header--hero,
header.site-header--hero .hdr-bar {
    animation-range: 20svh 40svh;
}
header.site-header--hero .hdr-osa,
header.site-header--hero .hdr-osa--dark {
    animation-range: 22svh 38svh;
}
header.site-header--hero .hdr-logo {
    animation-range: 28svh 44svh;
}

.hdr-logo.html-editable--editing {
    top: calc(100% + 8px);
    transform: translate(-50%, 0);
    width: min(560px, calc(100vw - 32px));
    text-align: left;
    white-space: normal;
    font-weight: 400;
    z-index: 60;
}