/*
 * Blue Key Accessibility — visual styling for the markup this plugin adds.
 *
 * Every selector here is deliberately MORE specific than the theme rule
 * it adjusts (id+class or class+class+element vs. the theme's plain
 * element selectors), so it wins the cascade regardless of load order —
 * this file does not depend on loading after style.css.
 */

.bka11y-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 10px 16px;
	background: #0078c0;
	color: #fff;
	text-decoration: none;
	font: bold 14px Arial, Verdana;
}

.bka11y-skip-link:focus {
	left: 10px;
	top: 10px;
}

.bka11y-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Item 5 — "Blog" label restyled as a div, and the promoted post-title H1. */
.bka11y-h1-look {
	font: bold 21px/140% "Myriad Pro", "Times New Roman", Times, Arial, Verdana;
	color: #0078c0;
	margin: 0 0 1px 0;
	padding: 15px 10px 5px 21px;
	text-align: left;
}

.post2 h1.bka11y-post-title {
	font-family: "Myriad Pro", "Times New Roman", Times, Arial, Verdana;
	margin: 0;
	padding: 0;
	color: #0078c0;
	font-size: 20px;
	font-weight: normal;
	line-height: 140%;
	text-align: left;
}

/* Item 4 — Learning Design / Leadership Development run-in headings. */
#right h2.bka11y-runin,
.entrytext h2.bka11y-runin {
	font: bold 16px/130% Arial, Verdana;
	color: #372012;
	margin: 0;
	padding: 7px 0 0 0;
	text-align: left;
}

#right p.bka11y-after-runin {
	padding-top: 0;
}

/* Items 8 & 9 — PgM Leader Academy / Hire the Best section headings. */
#right h2.bka11y-section {
	font-family: Arial, Verdana;
	font-weight: bold;
	font-size: 20px;
	line-height: 150%;
	color: #0078c0;
	margin: 0;
	padding: 10px 0 0 0;
	text-align: left;
}

/* Item 7 — sidebar sub-navigation and primary menu keyboard access. */
#left nav a[aria-current="page"] {
	color: #0093d8;
}

#sitenav ul li:focus-within > ul {
	display: block;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 3px solid #0078c0;
	outline-offset: 2px;
}

#sitenav ul ul a:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -3px;
}
