/* The site header (includes/header.php): its own file since 2026-11-04, so a
   page that does not load front.css (the fantasy tools, fantasy/fantasy-chrome.php)
   wears the same header. includes/styles.php loads it just before front.css,
   where these rules sat (lines 32 to 99, and the phone block). */

.header {
	display: block;
	margin: 0 auto;
	width: 100%;
	max-width: 100%;
	box-shadow: none;
	background-color: var(--tmb-site-header-bg);
	position: fixed;
	height: 70px!important;
	overflow: hidden;
	/* One step above .tmb-sport-bar (95). They don't currently overlap — the bar
	   sticks at top:70px, exactly this header's height — so this keeps the
	   "header is the topmost page chrome" invariant true by construction rather
	   than by that coincidence of geometry. */
	z-index: 96;
}


.header .logo {
	position: absolute;
	top: 22px;
	right: 25px;
	height: 25px;
}
/* A partner address with no logo prints its name (header.php, 2026-10-31). */
.header .logo-text {
	line-height: 25px;
	font-size: 18px;
	font-weight: 700;
	color: var(--tmb-header-fg, #fff);
	text-decoration: none;
	white-space: nowrap;
}

/* Back and Refresh buttons: only in the Home Screen app, which has no browser
   bar. html.tmb-standalone is set by tmb-common.js, in <head>; Back also needs
   html.tmb-can-back (a page of ours is behind this one). */
.header .tmb-app-back,
.header .tmb-app-refresh {
	display: none;
	position: absolute;
	top: 17px;
	right: 15px;
	width: 36px;
	height: 36px;
	padding: 0;
	margin: 0 !important;
	border: 0;
	/* front.css paints every <button> grey with !important, hover too. */
	background-color: transparent !important;
	color: var(--tmb-header-fg, #fff);
	font-size: 16px;
	line-height: 36px;
	text-align: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.header .tmb-app-back { right: 51px; }
.header .tmb-app-back:active,
.header .tmb-app-refresh:active { opacity: 0.6; }
.header .tmb-app-refresh.is-busy i { animation: tmb-app-refresh-spin 0.8s linear infinite; }
@keyframes tmb-app-refresh-spin { to { transform: rotate(360deg); } }
html.tmb-standalone .header .tmb-app-refresh { display: block; }
html.tmb-standalone .header .logo { right: 59px; }
html.tmb-standalone.tmb-can-back .header .tmb-app-back { display: block; }
html.tmb-standalone.tmb-can-back .header .logo { right: 95px; }

@media (max-width: 767px) {
	.header {
		height: 60px !important;
	}

	.header .logo {
		top: 19px;
		right: 16px;
		height: 20px;
	}

	.header .tmb-app-back,
	.header .tmb-app-refresh {
		top: 12px;
		right: 6px;
	}
	.header .tmb-app-back { right: 42px; }
	html.tmb-standalone .header .logo { right: 46px; }
	html.tmb-standalone.tmb-can-back .header .logo { right: 82px; }
}