/*
 * Anticuarios — componentes.
 * El sistema (paleta, escala, familias) vive en theme.json. Aquí solo van
 * las piezas que no se pueden expresar con atributos de bloque.
 *
 * Tokens medidos del sitio viejo: AUDIT-VISUAL.md §2.
 */

/* ------------------------------------------------------------------ */
/* 1. Barra superior del header (dirección + email)                    */
/* ------------------------------------------------------------------ */

.ant-topbar {
	background: var(--wp--preset--color--tarjeta);
	border-bottom: 1px solid var(--wp--preset--color--borde);
	font-size: var(--wp--preset--font-size--xs);
	color: #6b6b6b;
}

.ant-topbar a {
	color: #6b6b6b;
	text-decoration: none;
}

.ant-topbar a:hover {
	color: var(--wp--preset--color--azul);
	text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* 2. Cabecera y navegación                                            */
/* ------------------------------------------------------------------ */

.ant-header {
	background: var(--wp--preset--color--blanco);
}

/* Los dos logos (FEA + CINOA) van juntos: CINOA es credencial, no adorno. */
.ant-logos img {
	height: auto;
	max-height: 100px;
	width: auto;
}

/* La navegación ocupa el espacio que queda a la derecha del logo y reparte los
   ítems a lo largo de él, en UNA sola línea.
   Historia de esta regla: primero se estiraba al 100% y caía a una fila propia
   bajo el logo (cabecera de 280px); al limitarla con `max-width` se quedó tan
   estrecha que los 7 ítems se partían en dos filas. Lo que hace falta es que
   crezca hasta el espacio disponible, no que se limite. */
.ant-header .wp-block-navigation {
	flex: 1 1 auto;
	min-width: 0;
}

.ant-header .wp-block-navigation > .wp-block-navigation__container {
	width: 100%;
	flex-wrap: nowrap;
	justify-content: space-between;
	gap: 0;
}

/* Los submenús sí deben apilarse: la regla de arriba es solo para el nivel 1. */
.ant-header .wp-block-navigation__submenu-container {
	flex-wrap: wrap;
	justify-content: flex-start;
}

/* Entre 782 y 1100px el ancho no da para los 7 en línea sin apretarlos:
   se reduce el tamaño antes que permitir que se partan. */
@media (min-width: 783px) and (max-width: 1100px) {
	.ant-header .wp-block-navigation {
		font-size: 11px;
	}
}

.ant-nav .wp-block-navigation-item__content {
	padding-bottom: 6px;
	border-bottom: 3px solid transparent;
	text-decoration: none;
}

.ant-nav .wp-block-navigation-item__content:hover {
	border-bottom-color: var(--wp--preset--color--borde);
}

.ant-nav .current-menu-item > .wp-block-navigation-item__content,
.ant-nav .current_page_item > .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--azul);
}

/* ------------------------------------------------------------------ */
/* 3. Banner institucional de páginas interiores                       */
/*    navy + Dosis amarilla. Es LA pieza de marca del sitio viejo.     */
/* ------------------------------------------------------------------ */

.ant-banner {
	background: var(--wp--preset--color--navy);
	min-height: 119px;
	display: flex;
	align-items: center;
}

.ant-banner h1,
.ant-banner .wp-block-post-title,
.ant-banner .wp-block-query-title {
	font-family: var(--wp--preset--font-family--dosis);
	font-size: var(--wp--preset--font-size--banner);
	font-weight: 600;
	line-height: 1.15;
	color: var(--wp--preset--color--amarillo);
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* 4. Hero de la home — imagen fija (decisión de Fabio, FEA-107)       */
/*                                                                     */
/*    Sustituye a RevSlider 6.2.23. El slider del vivo rota solo, y un */
/*    carrusel de CSS puro no puede autoavanzar: no era una réplica,   */
/*    era un slider que había que arrastrar a mano. Se deja fijo.      */
/* ------------------------------------------------------------------ */

.ant-hero {
	min-height: 400px !important;
}

/* En móvil, 400px de hero se comen media pantalla antes de ver un solo
   contenido. El original escala; aquí se baja explícitamente. */
@media (max-width: 600px) {
	.ant-hero {
		min-height: 280px !important;
	}
}

.ant-hero .wp-block-cover__inner-container {
	width: 100%;
}

.ant-hero__title {
	max-width: 720px;
	margin: 0;
	font-family: var(--wp--preset--font-family--dosis);
	font-size: clamp(28px, 4.2vw, 48px);
	font-weight: 500;
	line-height: 1.1;
	color: var(--wp--preset--color--amarillo);
	text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

.ant-hero__sub {
	margin: 14px 0 0;
	font-family: var(--wp--preset--font-family--dosis);
	font-size: clamp(18px, 2vw, 26px);
	font-weight: 400;
	color: var(--wp--preset--color--amarillo);
	text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

/* ------------------------------------------------------------------ */
/* 4b. Imágenes: marco y rótulo (equivalen a vc_box_shadow_border y a  */
/*     los title / add_caption de vc_single_image)                     */
/* ------------------------------------------------------------------ */

.ant-img-marco img {
	border: 1px solid var(--wp--preset--color--borde);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
	background: var(--wp--preset--color--blanco);
}

/* El rótulo bajo la imagen: es un nombre, no un pie de foto en cursiva. */
.wp-block-image.ant-img-rotulada figcaption {
	margin-top: 10px;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	font-weight: 500;
	line-height: 1.35;
	color: var(--wp--preset--color--titulo);
	text-align: center;
}

.wp-block-image.ant-img-rotulada a:hover + figcaption,
.wp-block-image.ant-img-rotulada:hover figcaption {
	color: var(--wp--preset--color--azul);
}

/* Rejilla de logotipos de asociaciones: los archivos van de 103x116 a
   592x592, así que sin una caja de alto fijo la cuadrícula sale desigual
   (Fabio, FEA-107: "no se ve de forma armónica"). Se normaliza la altura y
   se alinean los rótulos abajo. */
.wp-block-columns .wp-block-image.ant-img-rotulada {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	margin-bottom: 0;
}

.wp-block-columns .wp-block-image.ant-img-rotulada > a,
.wp-block-columns .wp-block-image.ant-img-rotulada > img {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 130px;
}

.wp-block-columns .wp-block-image.ant-img-rotulada img {
	max-height: 130px;
	width: auto;
	object-fit: contain;
}

.wp-block-columns .wp-block-image.ant-img-rotulada figcaption {
	margin-top: auto;
	padding-top: 10px;
}

/* ------------------------------------------------------------------ */
/* 5. Tarjetas CTA (equivalente de vc_cta, 4 usos en la home)          */
/* ------------------------------------------------------------------ */

.ant-cta {
	background: var(--wp--preset--color--tarjeta);
	border: 5px solid var(--wp--preset--color--borde);
	padding: 28px;
	text-align: center;
}

.ant-cta h2,
.ant-cta h3,
.ant-cta h4 {
	margin-top: 0;
}

/* ------------------------------------------------------------------ */
/* 6. Avisos (equivalente de vc_message, 5 usos en Contacto)           */
/* ------------------------------------------------------------------ */

.ant-aviso {
	background: var(--wp--preset--color--tarjeta);
	border-left: 4px solid var(--wp--preset--color--azul);
	padding: 16px 20px;
}

/* ------------------------------------------------------------------ */
/* 6b. Formulario de contacto propio (sustituye a Contact Form 7)      */
/* ------------------------------------------------------------------ */

.ant-form label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--titulo);
}

.ant-form input[type="text"],
.ant-form input[type="email"],
.ant-form textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 4px;
	background: var(--wp--preset--color--blanco);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--texto);
}

.ant-form textarea {
	resize: vertical;
}

/* El honeypot no se oculta con display:none: algunos bots lo detectan.
   Se saca del flujo, y aria-hidden + tabindex lo apartan de los lectores. */
.ant-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* 7. Listado de noticias                                              */
/* ------------------------------------------------------------------ */

.ant-post-card {
	border-bottom: 1px solid var(--wp--preset--color--borde);
	padding-bottom: 28px;
}

.ant-post-card .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--titulo);
}

.ant-post-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--azul);
}

.ant-post-card .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* ------------------------------------------------------------------ */
/* 8. Pie — dos capas de color, como el original                       */
/* ------------------------------------------------------------------ */

.ant-footer-widgets {
	background: var(--wp--preset--color--footer);
	/* El original usaba #828282 sobre #ededed = 3.28:1, que solo pasa WCAG AA
	   para texto grande. Oscurecido a #595959 (5.98:1, AA para texto normal)
	   — es parte de la armonización aprobada, no una desviación del contrato
	   de color: el FONDO #ededed se respeta tal cual. */
	color: #595959;
}

.ant-footer-bar {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--amarillo);
	font-size: var(--wp--preset--font-size--small);
}

.ant-footer-bar a {
	color: var(--wp--preset--color--amarillo);
	text-decoration: none;
}

.ant-footer-bar a:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* 9. Accesibilidad                                                    */
/* ------------------------------------------------------------------ */

.ant-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--amarillo);
	padding: 12px 20px;
}

.ant-skip-link:focus {
	left: 0;
}

:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--azul);
	outline-offset: 2px;
}

/* Contrastes WCAG calculados sobre los tokens del contrato (no estimados):
     amarillo #F9F9AD sobre navy #024f83 .... 7.83:1  AA + AAA
     blanco sobre azul acento #4965a0 ....... 5.75:1  AA
     texto #232323 sobre blanco ............ 15.72:1  AA + AAA
     titulares #5a5a5a sobre blanco ......... 6.90:1  AA
     footer #595959 sobre #ededed ........... 5.98:1  AA (era 3.28:1, fallaba)
   Si se toca cualquiera de estos pares, hay que volver a medirlo. */