/* Miles and Points Guru - Trending Now label. Added 2026-07-25.

   Theme defaults this label to 12px white on #222, which is legible but
   visually flat and easy to skim past.

   It also carried a real bug: on hover the background switched to the theme
   blue #4db2ec, dropping white text to 2.36:1 - well under the WCAG AA
   minimum of 4.5:1. The label became HARDER to read the moment you pointed
   at it. Both resting and hover states below clear AA.

     resting  #0f5c86  7.25:1
     hover    #1b7bb0  4.66:1  (matches the article link colour) */


.td-trending-now-title {
	background-color: #0f5c86;
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 5px 12px;
	line-height: 1.3;
	border-radius: 2px;
	transition: background-color 0.2s ease;
}

/* The theme's hover rule uses var(--td_theme_color, #4db2ec), which fails
   contrast. Override it with a lighter blue that still clears AA, so the
   hover still reads as a state change without hurting legibility. */
.td-trending-now-wrapper:hover .td-trending-now-title,
.td-trending-now-title:hover {
	background-color: #1b7bb0;
}

/* Give the headline beside the label room to breathe and match the
   reading colour used elsewhere on the site. */
.td-trending-now-wrapper .td-trending-now-post,
.td-trending-now-wrapper .entry-title {
	padding-left: 14px;
}

.td-trending-now-wrapper .entry-title a {
	color: #2b3033;
	font-size: 14px;
	line-height: 1.4;
}

.td-trending-now-wrapper .entry-title a:hover {
	color: #0f5c86;
}

/* Keep the label from being squeezed on narrow screens. */
@media (max-width: 767px) {

	.td-trending-now-title {
		font-size: 12px;
		padding: 4px 9px;
		letter-spacing: 0.05em;
		white-space: nowrap;
	}

	.td-trending-now-wrapper .td-trending-now-post,
	.td-trending-now-wrapper .entry-title {
		padding-left: 10px;
	}

	.td-trending-now-wrapper .entry-title a {
		font-size: 13px;
	}
}