/*
 * Keep the phone number on screen.
 *
 * Astra's header is three stacked bars totalling 449px: the one holding the
 * phone number (91px), the logo row (297px) and the menu (61px). Only the first
 * is pinned -- a 449px sticky header leaves a phone with almost no page.
 *
 * `fixed` rather than `sticky`, and that is the whole trick: a sticky child only
 * stays put while its parent is still on screen, so a sticky phone bar would
 * unpin itself after 449px of scrolling and slide away, which is precisely the
 * thing it is meant not to do.
 *
 * Taking the bar out of the flow leaves a 91px hole at the top of the header,
 * so the header gets that height back as padding. The height is measured by
 * ttt-storefront.js rather than hard-coded, because it changes with the
 * viewport; the value below is the measured desktop height and only applies for
 * the moment before the script runs, or if it never does.
 */

:root {
	--ttt-phone-bar: 91px;
}

.ast-above-header-wrap {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	/* Above Astra's own sticky elements, below the WordPress admin bar (99999). */
	z-index: 9990;
}

#masthead {
	padding-top: var(--ttt-phone-bar, 91px);
}

/* Logged-in users have the admin bar above everything: 32px, 46px on narrow
   screens, and WordPress switches at exactly 782px. */
body.admin-bar .ast-above-header-wrap {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .ast-above-header-wrap {
		top: 46px;
	}
}

/* An in-page anchor would otherwise land underneath the pinned bar. */
:target {
	scroll-margin-top: calc(var(--ttt-phone-bar, 91px) + 16px);
}

/* Printing a page with a bar nailed to the top of every sheet is no use to
   anybody, least of all someone printing a quote. */
@media print {
	.ast-above-header-wrap {
		position: static;
	}

	#masthead {
		padding-top: 0;
	}
}