/**
 * Where an anchor link comes to rest.
 *
 * The Themer header is fixed once the page scrolls, so anything scrolled to by
 * an anchor lands underneath it and the section heading is never seen. These
 * values are the static fallback: a page opened with a #hash in the URL jumps
 * natively while the document is still parsing, long before any script runs,
 * and scroll-padding-top is the only thing that can move that jump.
 *
 * assets/js/anchor-links.js replaces --yoko-anchor-offset with the header's
 * measured height as soon as it runs, so these numbers only have to be close.
 *
 * The bands track the header's own layout breakpoints: it is not sticky below
 * 993px, stands two rows tall (308px) up to 1200px, and collapses to a single
 * row (153px) above that.
 */

:root {
	/* 308px two-row header + 40px so the heading clears it comfortably. */
	--yoko-anchor-offset: 348px;
}

@media screen and (min-width: 1201px) {
	:root {
		/* 153px single-row header + the same 40px. */
		--yoko-anchor-offset: 193px;
	}
}

/*
 * Scoped to the widths where Themer actually pins the header. Below this the
 * header scrolls away, and WordPress' own admin bar offset is left untouched.
 */
@media screen and (min-width: 993px) {
	html {
		scroll-padding-top: var( --yoko-anchor-offset, 193px );
	}
}