/*
 * Accesibilidad WCAG 2.1 AA
 *
 * Tres bloques: contraste de texto, foco de teclado visible y apertura de los
 * desplegables del menu con el tabulador. Los valores de gris y azul estan
 * medidos, no elegidos a ojo: cada uno indica su ratio sobre su fondo real.
 */

/* ------------------------------------------------------------------ *
 * 1. Contraste de texto
 * ------------------------------------------------------------------ */

/* El gris base del tema (#777) se queda en 4,47:1 sobre blanco, justo por
   debajo del minimo de 4,5:1. #636363 da 6,01 sobre blanco, 4,96 sobre el gris
   del pie (#eae9e9) y 5,5 sobre el gris de las pestanas (#f5f5f5). */
body,
.nav-dropdown {
	color: #636363;
}

/* Enlaces del menu: el tema los pinta con hsla(0,0%,40%,.85), que compuesto
   sobre blanco da #7d7d7d y 4,12:1. El mismo gris sin transparencia pasa. */
.nav > li > a,
.nav-column > li > a,
.nav-dropdown > li > a,
.nav-vertical-fly-out > li > a {
	color: #636363;
}

/* Pestanas y titulares secundarios que el tema deja en gris claro. */
.nav-tabs > li > a,
.tab > a,
.tab a span,
.from_the_blog_excerpt,
.widget .is-divider + ul a {
	color: #636363;
}

/* Entradilla del formulario del boletin: #6b7780 sobre #f4f5f6 da 4,2:1.
   Su hoja se imprime junto al formulario, mas tarde en el documento, asi que
   hace falta ganar el empate por especificidad. */
.sib-intro {
	color: #556069 !important;
}

/* Enlace del menu de la pagina en la que se esta: #4f96e2 da 3,09:1 sobre
   blanco. #2f76bd da 4,72 y mantiene el mismo azul de marca. */
.header:not(.transparent) .header-bottom-nav.nav > li > a.active,
.header:not(.transparent) .header-bottom-nav.nav > li > a.current,
.nav > li.current > a,
.nav > li.active > a,
.nav > li.current-menu-item > a,
.nav > li.current-menu-ancestor > a,
.nav > li.current-menu-parent > a,
.nav > li.current-post-ancestor > a,
.nav a[aria-current] {
	color: #2f76bd !important;
}

/* Enlaces dentro de un parrafo: el color no puede ser la unica senal de que
   algo es un enlace (WCAG 1.4.1). El azul del tema (#334862) contrasta 2,09:1
   con el texto que lo rodea, muy por debajo de 3:1, asi que van subrayados.
   Quedan fuera los botones, los iconos y los enlaces que envuelven imagenes. */
#content p a:not(.button):not(.icon):not(.plain):not([role]):not(:has(img)),
#content li:not(.tab):not(.menu-item) > a:not(.button):not(.icon):not(.plain):not([role]):not(:has(img)),
#footer p a:not(.button):not(.icon):not(.plain):not([role]):not(:has(img)) {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* ------------------------------------------------------------------ *
 * 2. Foco de teclado visible
 * ------------------------------------------------------------------ */

/* El contorno por defecto del navegador toma el color del propio elemento, asi
   que sobre un icono gris claro casi no se ve, y varios plugins lo apagan del
   todo. Un solo contorno azul oscuro para todo lo enfocable. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid #203c53;
	outline-offset: 2px;
	border-radius: 2px;
}

/* Sobre fondos oscuros el azul se pierde: se le anade un halo claro. */
.dark a:focus-visible,
.dark button:focus-visible,
.banner a:focus-visible,
#masthead .dark a:focus-visible {
	outline-color: #ffffff;
	box-shadow: 0 0 0 5px rgba(32, 60, 83, 0.9);
}

/* CookieYes y el formulario del boletin apagan el contorno en su propia hoja. */
.cky-btn:focus-visible,
.cky-btn-close:focus-visible,
.cky-accordion-btn:focus-visible,
.cky-switch input:focus-visible,
.sib-email-area:focus-visible,
.sib-default-btn:focus-visible {
	outline: 3px solid #203c53 !important;
	outline-offset: 2px !important;
}

/* El enlace de salto al contenido ya existe pero solo se ve como texto plano
   al enfocarlo; asi queda legible sobre el fondo de la pagina. */
.skip-link:focus,
.skip-link:focus-visible {
	background: #ffffff;
	color: #203c53;
	padding: 12px 20px;
	z-index: 10000;
}

/* ------------------------------------------------------------------ *
 * 3. Desplegables del menu con el tabulador
 * ------------------------------------------------------------------ */

/* El tema deja los desplegables en visibility:hidden y left:-99999px, y solo
   los abre al pasar el raton o con la clase current-dropdown que pone su JS.
   Con el teclado no habia forma de llegar a los 21 enlaces de cada mega-menu.

   Los mega-menus, que ademas necesitan que se les calcule el ancho, los abre
   accesibilidad.js repitiendo lo que hace el tema. Aqui quedan solo los
   desplegables sencillos, que con esto ya se abren aunque el JS no llegue. */
.nav li.has-dropdown:not(.menu-item-design-container-width):not(.menu-item-design-full-width):focus-within > .nav-dropdown {
	left: -15px;
	max-height: inherit;
	opacity: 1;
	visibility: visible;
}

.nav-right li.has-dropdown:not(.menu-item-design-container-width):not(.menu-item-design-full-width):focus-within:last-child > .nav-dropdown {
	left: auto;
	right: -15px;
}

/* La flecha que apunta al desplegable abierto. */
.nav-dropdown-has-arrow li.has-dropdown:focus-within:after,
.nav-dropdown-has-arrow li.has-dropdown:focus-within:before {
	opacity: 1;
}