/*
 * Keyboard focus, sitewide.
 *
 * Many page stylesheets set outline:none (43 places), so a keyboard user
 * tabbing through the site often could not see where they were. This puts
 * one clear ring back on everything that takes focus, for keyboard focus
 * only (:focus-visible), so mouse clicks look as they did.
 *
 *   Links and buttons   3px navy ring, 2px outside
 *   Fields              2px navy ring, inside the box (joined search bars
 *                       clip anything outside)
 *   On navy areas       the ring is white (header, footer, navy bands)
 *
 * :not(#cul-ui) adds an id's weight so this wins over page styles without
 * relying on load order.
 */
:is(a[href], button, summary, [role="button"], [role="tab"], [tabindex]:not([tabindex="-1"]),
	input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="button"]):focus-visible:not(#cul-ui) {
	outline: 3px solid var(--ui-navy, #1B3A5C) !important;
	outline-offset: 2px !important;
}

:is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"]),
	select, textarea):focus-visible:not(#cul-ui) {
	outline: 2px solid var(--ui-navy, #1B3A5C) !important;
	outline-offset: -2px !important;
}

:is(.cul-sitebar, .cul-footer, .ui-band--navy, .ui-hero, .ui-on-navy, .ui-card--navy)
	:is(a[href], button, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible:not(#cul-ui) {
	outline-color: #FFFFFF !important;
}