/*
 Theme Name: OEI Corporate Theme
 Theme URI: https://oei.int
 Author: Norman Reyes - Disebit
 Author URI: https://disebit.com
 Description: Tema corporativo minimalista para la publicación de la memoria de la Organización de Estados Iberoamericanos.
 Version: 1.10.21
 Text Domain: oei-theme
 Domain Path: /languages
 */

/* Fuente "Archivo" (Google Fonts), autoalojada: sin peticiones a
   fonts.googleapis.com/fonts.gstatic.com en cada visita. Pesos
   incluidos según los usados realmente en el tema (font-medium,
   font-semibold, font-bold, font-extrabold) + su itálica (testimonios). */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/archivo/archivo-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/archivo/archivo-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/archivo/archivo-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/archivo/archivo-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('fonts/archivo/archivo-800.woff2') format('woff2');
}
@font-face {
    font-family: 'Archivo';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/archivo/archivo-400-italic.woff2') format('woff2');
}

:root {
    --oei-gray: #4b4b4b;
    --oei-blue: #004380;
    --oei-cyan: #00aec3;
    --oei-lime: #c7d301;
	--oei-navy: #012240;
}

/* Ajustes básicos para que el footer no flote */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: var(--oei-gray);
    font-family: 'Archivo', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

main {
    flex: 1;
}

/* Espaciado por defecto de párrafo: Tailwind (preflight) pone margin:0
   en todos los elementos, así que sin esto un <p> sin una utilidad
   mb-* explícita quedaría pegado al siguiente. Una utilidad mb-my-*
   en el propio <p> sigue ganando (una clase tiene más especificidad
   que este selector de etiqueta), así que esto solo actúa de valor
   por defecto donde nadie fijó uno. */
body p {
    margin-bottom: 1rem;
}

/* Texto del editor (.oei-content): el preflight de Tailwind deja los
   encabezados con el tamaño y el peso del texto, y las listas sin viñetas.
   Tamaños en em, para que escalen con el texto que los rodea; con texto de
   1rem coinciden con la escala que usa el tema (text-3xl, 2xl, xl, lg).
   Sin color propio: heredan el del bloque. */
.oei-content h1,
.oei-content h2,
.oei-content h3,
.oei-content h4,
.oei-content h5,
.oei-content h6 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}
.oei-content h1 { font-size: 1.875em; line-height: 1.2; font-weight: 700; }
.oei-content h2 { font-size: 1.5em; line-height: 1.3; font-weight: 700; }
.oei-content h3 { font-size: 1.25em; line-height: 1.35; font-weight: 700; }
.oei-content h4 { font-size: 1.125em; line-height: 1.4; font-weight: 600; }
.oei-content h5,
.oei-content h6 { font-size: 1em; line-height: 1.4; font-weight: 600; }
.oei-content > :first-child {
    margin-top: 0;
}
.oei-content ul,
.oei-content ol {
    margin-bottom: 1rem;
    padding-left: 1.5em;
}
.oei-content ul { list-style: disc; }
.oei-content ol { list-style: decimal; }
.oei-content ul ul { list-style: circle; }
.oei-content li + li,
.oei-content li > ul,
.oei-content li > ol {
    margin-top: 0.25em;
}
.oei-content li > ul,
.oei-content li > ol {
    margin-bottom: 0;
}
.oei-content a {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.oei-content a:hover {
    text-decoration-thickness: 2px;
}
.oei-content blockquote {
    margin: 1.5em 0;
    padding-left: 1em;
    border-left: 4px solid #e5e7eb;
    font-style: italic;
}
.oei-content hr {
    margin: 2em 0;
    border-color: #e5e7eb;
}

/* Desplazamiento suave hacia anclas internas (p.ej. #hitos) sin afectar
   al scroll horizontal de los carruseles, que ya usan scroll-smooth. */
html {
    scroll-behavior: smooth;
}

/* Foco visible consistente para navegación por teclado, sin depender de
   un plugin de accesibilidad de Tailwind. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--oei-lime);
    outline-offset: 2px;
}

/* Los <template> de fichas de país/área nunca deben pintarse fuera del
   modal, aunque el navegador ya los oculta por especificación. */
template {
    display: none !important;
}
/* Crédito del pie (footer.php): hereda el color y el tamaño del copyright. */
.credito-web {
	margin-bottom: 0;
}
.credito-web a {
	transition: color .15s;
}
.credito-web a:hover,
.credito-web a:focus-visible {
	color: var(--oei-lime);
}

/* Selector de idioma (oei_render_language_switcher()): <details> con
   enlaces, para que el rastreo que genera la versión estática los siga. */
.oei-lang-switcher {
	position: relative;
	text-transform: uppercase;
}
.oei-lang-switcher summary {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	cursor: pointer;
	list-style: none;
}
.oei-lang-switcher summary::-webkit-details-marker {
	display: none;
}
.oei-lang-switcher[open] summary svg {
	transform: rotate(180deg);
}
.oei-lang-switcher ul {
	position: absolute;
	right: 0;
	top: calc(100% + 0.5rem);
	z-index: 50;
	min-width: 4rem;
	padding: 0.25rem 0;
	background-color: var(--oei-navy);
	border-radius: 0.5rem;
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.2);
}
.oei-lang-switcher a {
	display: block;
	padding: 0.375rem 1rem;
	transition: color 0.15s;
}
.oei-lang-switcher a:hover,
.oei-lang-switcher a:focus-visible,
.oei-lang-switcher a[aria-current] {
	color: var(--oei-lime);
}

/* Selects de "Explora nuestros logros" (áreas/países): sin un fondo
   propio, el navegador pinta las <option> con su tema nativo (a
   veces oscuro según el SO), que no coincide con la tarjeta de color
   en la que vive el select. Ese tema nativo también puede alterar
   dónde se posiciona el desplegable respecto al cursor al abrirlo,
   provocando que se seleccione una opción sin que el usuario llegue
   a elegir. Fijar color-scheme:light y un fondo/color explícitos por
   <option> evita ambos problemas. */
#oei-home-area,
#oei-home-pais {
	color-scheme: light;
}
#oei-home-area option {
	background-color: var(--oei-navy);
	color: #fff;
}
#oei-home-pais option {
	background-color: var(--oei-cyan);
	color: #fff;
}
.indicadores-grid svg {
	width:90px;
	height:90px;
}
.indicadores-grid .search-box svg {
	width:20px;
	height:20px;
}
.indicadores-grid svg.oei-select-chevron {
	width:16px;
	height:16px;
}

/* Acordeón de "Transparencia": <details>/<summary> nativos (se abren y
   cierran sin depender de JS); esto solo gira el icono de flecha y
   quita el marcador por defecto del navegador en <summary>, que
   Tailwind no cubre. */
details > summary {
	list-style: none;
}
details > summary::-webkit-details-marker {
	display: none;
}
details[open] .oei-accordion-chevron {
	transform: rotate(180deg);
}

/* Gráficos insertados a mano en medio del texto de "Descripción" (botón
   "Añadir objeto" del editor, ver admin-transparencia.js): sin esto se
   verían como una <img> suelta pegada al texto en vez de un bloque de
   gráfico con su propio espacio, y el cursor no avisaría de que es
   ampliable en el lightbox (ver initImageLightbox() en main.js). */
.oei-transparencia-description img {
	display: block;
	margin: 1.5rem auto;
	border-radius: 0.75rem;
	border: 1px solid #f3f4f6;
	cursor: zoom-in;
}

/* Gráficos insertados con leyenda (el editor produce un shortcode
   [caption], expandido por do_shortcode() en oei_render_transparencia_item()
   como <figure class="wp-caption"><img>...<figcaption class="wp-caption-text">):
   se reemplaza el aspecto por defecto de WordPress por la misma tarjeta
   (fondo gris, borde, esquinas redondeadas, leyenda gris centrada) que
   ya usan las imágenes del repetidor "Gráficos", para que ambas formas
   de añadir un gráfico (en la cuadrícula de después, o en medio del
   texto) se vean iguales. Más específico que la regla de arriba, así
   que la sustituye sin necesidad de !important salvo en el ancho (la
   leyenda de WordPress fija un ancho en píxeles inline). */
.oei-transparencia-description .wp-caption {
	background-color: #f9fafb;
	border: 1px solid #f3f4f6;
	border-radius: 0.75rem;
	padding: 1rem;
	margin: 1.5rem auto;
	width: 100% !important;
	max-width: 100% !important;
}
.oei-transparencia-description .wp-caption img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border: none;
	border-radius: 0.5rem;
}
.oei-transparencia-description .wp-caption-text {
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: #6b7280;
	margin-top: 0.5rem;
	text-align: center;
}
/* Aparición al hacer scroll (portada): oculto y desplazado hasta que
   el elemento entra en pantalla; js/main.js (initRevealOnScroll)
   añade .is-visible cuando ya está COMPLETAMENTE visible (no solo
   asomando por el borde), con IntersectionObserver, así que el
   desplazamiento pasa entero dentro del viewport en vez de arrancar
   con el elemento aún recortado por el borde inferior.
   Solo se oculta si <html> tiene la clase "js" (añadida por un script
   mínimo en el <head>, ver header.php): si JS está desactivado, o si
   algo falla antes de llegar a initRevealOnScroll(), la regla nunca
   se activa y el contenido queda visible desde el principio en vez de
   quedar oculto para siempre. */
html.js [data-oei-reveal] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .7s ease, transform .7s ease;
}
html.js [data-oei-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* "Nuestros resultados": más que un simple fundido — aparece también
   con un ligero rebote de escala (ease de "overshoot"), para que se
   note más que el resto de la portada. */
html.js [data-oei-reveal="stat-card"] {
    transform: translateY(40px) scale(.9);
    transition: opacity .6s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1);
}
html.js [data-oei-reveal="stat-card"].is-visible {
    transform: translateY(0) scale(1);
}

/* Quien prefiera menos movimiento (ajuste de accesibilidad del SO) ve
   el contenido directamente, sin fundido ni desplazamiento. */
@media (prefers-reduced-motion: reduce) {
    html.js [data-oei-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Botón flotante "volver arriba" (pie de página, presente en todas las
   páginas): main.js (initBackToTop) añade/quita .is-visible según la
   posición del scroll. El propio enlace ya sube al principio de la
   página sin JS (href="#" + scroll-behavior:smooth), así que sin JS
   simplemente se queda siempre visible en vez de desaparecer para
   siempre: deshabilitar JS no debe quitarle la función al botón, como
   mucho le quita la aparición condicionada al scroll. */
html.js [data-oei-back-to-top] {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
html.js [data-oei-back-to-top].is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
    html.js [data-oei-back-to-top] {
        transition: none;
    }
}