/* The header overlays the hero video but does not stay on screen: fixed, it
   collided with the form on any page tall enough to scroll. Absolute keeps the
   transparent-over-video look at the top and lets it scroll away with the rest
   of the page. Selector carries the element name so it outranks the
   `position: fixed` in the compiled styles.css whatever order they load in. */
header.site-header {
    position: absolute;
}

/* Hero varianta hlavičky (úvod podkladů) 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;
}

/* ===== Kdy hlavička zbělá =====
   styles.css (ze zdrojového projektu) 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 najede titul „Záměr VPD1").

   Selektory nesou název elementu (header.…) schválně: styles.css se načítá
   POSLEDNÍ (stylesheet_link_tag :app bere soubory abecedně), takže pořadí tu
   nepomůže a přebít to musí specificita. */
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;
}

/* ===== Centred site title =====
   The title is centred against .hdr-bar itself, not against the space left
   over next to the brand. Colour is inherited from .site-header, which flips white/ink between
   the dark and light header variants. */
.hdr-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-weight: 700;
    font-size: clamp(1.15rem, 1rem + 1.1vw, 1.6rem);
    letter-spacing: .01em;
    white-space: nowrap;
}

/* In edit mode the region grows into a source textarea. Centred on a 68px bar
   it would straddle the top of the viewport, so drop the panel below the bar
   and give it a readable width instead. Same treatment for both the simple
   header title (.hdr-title) and the hero header's centred title (.hdr-logo),
   which is likewise absolutely centred on the bar. */
.hdr-title.html-editable--editing,
.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;
}

/* Odhlášení v menu je button_to (POST/DELETE), takže je zabalené ve <form>.
   display:contents form vyřadí z layoutu, aby tlačítko sedělo v mřížce
   .menu__foot přesně jako ostatní .menu-acct odkazy. */
.menu-acct-form {
    margin: 0;
    display: contents;
}