/* ============================================================================= TSF SITE HEADER — [tsf_site_header] Design: design-system/components/site-header.html. brand · nav · account cluster · burger. White nav, red reserved for state. THREE THINGS THAT LOOK LIKE STYLE CHOICES BUT ARE NOT: 1. VIEWPORT media queries, not @container — even though the design card used container queries. `container-type` implies `contain: layout`, which makes the element a containing block for position:fixed DESCENDANTS. This header IS position:fixed, so a container-type shell would trap it and the sticky behaviour would silently die. The header always spans the viewport anyway, so the two are equivalent here. (Same trap documented in ha-styles.css.) 2. The bar is position:FIXED with a separate .tsf-hdr-spacer holding its slot, rather than position:sticky. Sticky only travels inside its containing block, and this shortcode sits inside a ~109px Elementor header container — it would unstick immediately. tsf-site-header.js keeps the spacer's height matched to the bar, which is also what lets the drawer PUSH the page down instead of overlaying it. 3. Every rule that colours an or styles a