/*
 * Sharper light-on-dark text.
 *
 * The nav renders #dce6ef at weight 500 on #16283a. Browsers use subpixel
 * antialiasing by default, which adds colour fringing to glyph edges. On a dark
 * background that fringing reads as bloom, and the text looks soft even though
 * nothing is actually blurred.
 *
 * Switching those surfaces to grayscale antialiasing removes the fringing.
 * Applied only to the dark chrome, because on the light content areas subpixel
 * rendering is genuinely sharper and should be left alone.
 */

.main-navigation,
.main-navigation a,
.lpf-hero,
.lpf-hero-title,
.lpf-hero-sub,
.lpf-hero-stat,
.lpf-hero-eyebrow,
.site-footer,
.site-footer a,
.author-bio-box .author-name {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/*
 * Nudge the nav labels up in contrast and weight.
 *
 * #dce6ef against #16283a is a muted pairing, and at 15px/500 the strokes are
 * thin enough that the eye reads them as unfocused. A brighter ink and one
 * step of weight fixes the perception without changing the layout.
 */
.main-navigation #primary-menu > li > a {
	color: #eaf2fa;
	font-weight: 600;
	letter-spacing: 0.005em;
}

.main-navigation #primary-menu > li > a:hover,
.main-navigation #primary-menu > li.current-menu-item > a,
.main-navigation #primary-menu > li.current_page_item > a,
.main-navigation #primary-menu > li.current-menu-ancestor > a,
.main-navigation #primary-menu > li.current_page_ancestor > a {
	color: #ffffff;
}

/*
 * Icons sit alongside the labels and were inheriting the same softness.
 * Font Awesome already sets antialiasing; this keeps the optical weight
 * matched to the heavier label text next to it.
 */
.main-navigation #primary-menu > li > a .fa,
.main-navigation #primary-menu > li > a .fas,
.main-navigation #primary-menu > li > a .fa-solid,
.main-navigation #primary-menu > li > a i {
	opacity: 0.95;
}

/* The search field in the dark bar had the same low-contrast placeholder. */
.nav-search input[type="search"]::placeholder {
	color: #93a7bb;
	opacity: 1;
}
