/* #the-numbers — header template part 5059.
   14px through 390px. Linear to the medium preset at 768. The preset from there on.
   Square corner when the bar is full width (360px and under). */

#the-numbers {
	--aa-num-font: 14px;
	box-sizing: border-box;
	width: max-content !important;
	max-width: 100%;
	padding: 6px 8px !important;
	border-top-left-radius: 7px;
	animation: aa-numbers-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#the-numbers p {
	font-size: var(--aa-num-font) !important;
	letter-spacing: 0 !important;
	line-height: 1 !important;
}

#the-numbers > .wp-block-group.is-layout-flex {
	flex-wrap: nowrap !important;
	justify-content: flex-start !important;
	align-items: center;
	gap: 22px !important;
	width: max-content;
	max-width: 100%;
}

#the-numbers > .wp-block-group > .wp-block-group.is-layout-flex {
	flex-wrap: nowrap !important;
	align-items: center;
	gap: 4px !important;
}

#the-numbers > .wp-block-group > .wp-block-group:first-child .icon-container {
	width: calc(var(--aa-num-font) * 15 / 14) !important;
	height: calc(var(--aa-num-font) * 15 / 14) !important;
}

#the-numbers > .wp-block-group > .wp-block-group:nth-child(2) .icon-container {
	width: calc(var(--aa-num-font) * 13 / 14) !important;
	height: calc(var(--aa-num-font) * 13 / 14) !important;
}

#the-numbers .icon-container svg {
	display: block;
	width: 100%;
	height: 100%;
}

@media (min-width: 391px) {
	#the-numbers {
		--aa-num-font: calc(14px + (100vw - 390px) * 0.007248677);
	}
}

@media (min-width: 768px) {
	#the-numbers {
		--aa-num-font: clamp(1rem, 1rem + ((1vw - 0.234rem) * 0.188), 1.125rem);
	}
}

@media (max-width: 360px) {
	#the-numbers {
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		border-top-left-radius: 0;
	}

	#the-numbers > .wp-block-group.is-layout-flex {
		width: 100%;
		justify-content: center !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	#the-numbers {
		animation: none;
	}
}

/* This page reveals the bar on its own. Leave that animation alone. */
body.page-template-page-fly-fishing-travel-planner #the-numbers {
	animation: none;
}

@keyframes aa-numbers-in {
	from {
		opacity: 0;
		filter: blur(12px);
	}
	to {
		opacity: 1;
		filter: blur(0);
	}
}