/* BLOOM - keep the black category bar clear of whatever is fixed above it.

   The bar (".br-bar" in bloom-recipes.css) is sticky at top: 0. That is right
   when nothing is fixed over the top of the window, and wrong the moment
   something is - the WordPress admin bar, most of all, which is fixed and
   32px tall and hides the top half of the bar's own text.

   Nothing here changes the bar's height, colour, type or layout. The only
   property this file sets on it is "top".

   Two layers:
     1. Plain CSS below, which covers the admin bar at WordPress's own
        breakpoints, and works even if the script never runs.
     2. The script in bloom-sticky-bar.php, which measures what is actually
        fixed at the top of the window and writes it into --bh-bar-top. When
        it has run, <html> carries .bh-sticky-js and the measured value wins.
*/

/* ---- 1. Without the script -------------------------------------------- */

/* Over 782px the admin bar is fixed and 32px tall. */
body.admin-bar .br-bar { top: 32px; }

/* 601-782px: still fixed, 46px tall. */
@media screen and (max-width: 782px) {
	body.admin-bar .br-bar { top: 46px; }
}

/* 600px and under WordPress makes the admin bar position: absolute, so it
   scrolls away with the page and leaves nothing above the bar. */
@media screen and (max-width: 600px) {
	body.admin-bar .br-bar { top: 0; }
}

/* ---- 2. With the script ----------------------------------------------- */

/* Written last and with enough weight to beat the rules above, so the
   measured height is what the bar actually uses. */
html.bh-sticky-js .br-bar,
html.bh-sticky-js body.admin-bar .br-bar {
	top: var(--bh-bar-top, 0px);
}

/* A link jumped to from elsewhere should land below the bar, not under it. */
html.bh-sticky-js :target {
	scroll-margin-top: calc(var(--bh-bar-top, 0px) + 78px);
}