/* ============================================================================
   dynamic_header.css — the "shrinking header" system (UniProt-style), CSS-driven
   ----------------------------------------------------------------------------
   The hero pins under the 64px app-header and shrinks once the page is scrolled.
   This is now almost entirely CSS: the hero is `position: sticky`, so it stays
   in normal flow and needs NO JS to compute its left/width/padding and NO
   injected spacer — the band width comes for free from its container
   (.coreInnerPage, already inset by the left menu / docked panel in
   coreLayout.css).

   dynamic_header.js does one tiny thing: toggle `body.scrolledDown` past a
   scroll threshold, which is the only state CSS can't derive on its own.

   Contract (classes a page opts into):
     .dynamicHeader  the page's hero/title band. Sticks + shrinks.
     .dynamicNav     a horizontal nav bar that sits flush beneath the hero.
     .dynamicHide    content dropped from the hero while collapsed.
     body.scrolledDown  set by dynamic_header.js past the threshold.
   ============================================================================ */

:root {
    --dyn-app-header-h: 64px;              /* height of the sticky .app-header  */

    /* Collapsed hero height — the offset a .dynamicNav uses to tuck beneath the
       stuck hero. Static estimate (no JS measurement); tune here if the
       collapsed hero's font/padding changes. */
    --dyn-header-h: 52px;

    /* Height of the top-tabs row (tabs mode) — used to stack the sub-tabs bar
       beneath it. Static estimate; see page_nav.css. */
    --dyn-tabs-h: 46px;


}


/* ── Hero: always sticky, opaque so scrolled content passes cleanly beneath ── */
.dynamicHeader {
    position: sticky;
    top: var(--dyn-app-header-h, 64px);
    z-index: 90;                            /* below app-header (100)            */
    background: var(--dyn-header-bg, #c2dcf6);
    transition: padding 0.18s ease, background-color 0.18s ease,
                box-shadow 0.18s ease, border-color 0.18s ease, font-size 0.18s ease;
}

/* Collapsed: the band goes purple + gains a shadow, and its content shrinks.
   Geometry (left/width) is untouched — sticky already fills the region. */
body.scrolledDown .dynamicHeader {
    background: var(--dyn-header-bg, #ece7fb);
    border-bottom: 1px solid var(--dyn-header-edge, rgba(124, 92, 214, 0.35));
    box-shadow: var(--shadow-down);
}

body.scrolledDown .dynamicHeader h1 {
    font-size: 1.3em;
    line-height: 1.2;
}

/* Drop flagged content (badges, etc.) while collapsed. */
.dynamicHide { transition: opacity 0.15s ease; }
body.scrolledDown .dynamicHide { display: none !important; }

/* Flow spacer injected by dynamic_header.js right after each header. Grows to
   the height the header loses on collapse so the document height (and thus the
   scroll position) stays constant — see the JS for why. */
.dynamicHeader-spacer { height: 0; }


/* ── Nav bar: sticky, tucked just beneath the stuck hero ──────────────────── */
/* Resting AND scrolled use the same offset: by the time the nav reaches its
   stick point the hero is already collapsed, so the collapsed-height offset is
   the correct one. This is what lets us avoid JS measurement. */
.dynamicNav {
    position: sticky;
    top: calc(var(--dyn-app-header-h, 64px) + var(--dyn-header-h, 52px));
    z-index: 80;
}


/* ── Narrow screens ────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
    body.scrolledDown .dynamicHeader { padding-top: 0.35rem; padding-bottom: 0.35rem; }
}