/*
Theme Name: AOPA Spain
Theme URI: https://aopa-spain.org/
Description: Tema hijo de Extendable con la identidad visual de AOPA Spain
             (rojo corporativo, Source Sans y la maqueta de portada del sitio
             Joomla original). Toda la personalizacion vive aqui, de modo que
             las actualizaciones del tema padre no la sobrescriben.
Author: AOPA Spain
Template: extendable
Version: 1.17.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aopa
*/

/* ---------------------------------------------------------------------------
   Menu principal
   Reproduce el comportamiento del tema Joomla rt_salient: rojo corporativo al
   pasar el raton, subrayado en el elemento activo y desplegable rojo con texto
   blanco.

   Dos diferencias deliberadas con el original, ambas por accesibilidad:
   - alli el texto en reposo era #a8a8a8: 2,3:1 sobre blanco, incumple AA;
   - el rojo interactivo es #ce1517 (5,61:1) en vez de #ec4345 (3,85:1), que
     no llega al 4,5:1 que AA exige para texto normal.
   #ec4345 se conserva como color decorativo, donde no lleva texto encima.
   ------------------------------------------------------------------------- */

.wp-block-navigation .wp-block-navigation-item__content {
	transition: color 0.18s ease;
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
}

/* Nivel superior: color rojo y subrayado, como el original. El subrayado se
   dibuja con border-bottom (asi lo hacia rt_salient) y se suprime el
   text-decoration del enlace, que si no se sumaria y saldrian dos rayas.

   El selector replica el del tema padre (extendable/style.css:294), que tiene
   especificidad (0,3,1): con .wp-block-navigation-item__content:hover, que es
   (0,3,0), esta regla perdia por especificidad aunque cargue despues. */
.wp-block-navigation .wp-block-navigation-item a:hover,
.wp-block-navigation .wp-block-navigation-item a:focus {
	text-decoration: none;
}

.wp-block-navigation__container > .wp-block-navigation-item:hover
	> .wp-block-navigation-item__content,
.wp-block-navigation__container > .wp-block-navigation-item
	> .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--aopa-red-dark);
	border-bottom-color: var(--wp--preset--color--aopa-red-dark);
}

/* Elemento correspondiente a la pagina actual: ese si lleva subrayado. */
.current-menu-item > .wp-block-navigation-item__content,
.current_page_item > .wp-block-navigation-item__content,
.current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--aopa-red-dark);
	border-bottom-color: var(--wp--preset--color--aopa-red-dark);
}

/* Desplegable: fondo rojo con texto blanco, como en el original.
   El color de fondo y el del texto NO se fijan aqui: los aporta el propio
   bloque via overlayBackgroundColor/overlayTextColor en parts/header.html, que
   generan las clases has-aopa-red-background-color y has-base-color. WordPress
   emite esas clases con !important, asi que declararlo en CSS no serviria: el
   fondo blanco del tema ganaba y dejaba texto blanco sobre blanco.
   Aqui solo queda lo que el bloque no cubre. */
.wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--aopa-red-dark);
	border-radius: 0;
	padding: 0;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-bottom: none;
	padding-bottom: 0.5em;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item:hover
	> .wp-block-navigation-item__content,
.wp-block-navigation__submenu-container .wp-block-navigation-item
	> .wp-block-navigation-item__content:focus-visible {
	background-color: var(--wp--preset--color--aopa-red-deep);
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation .wp-block-navigation-item__content {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   Titulos de entrada
   Mismo comportamiento que el menu: rojo al pasar el raton o al enfocar con
   teclado. Se aplica en portada, archivos de categoria y busqueda, no solo en
   la home, para que el sitio se comporte igual en todas partes.

   El original invertia esto (titulo rojo en reposo, oscuro al pasar). Aqui el
   reposo es oscuro y el rojo marca la interaccion, que es lo que el resto del
   sitio ya hace en el menu y en los enlaces del contenido.
   ------------------------------------------------------------------------- */

/* El color de reposo hay que fijarlo explicitamente. Los titulos son enlaces,
   asi que heredaban el rojo global de elements.link (#ce1517) del theme.json:
   ya salian rojos y el :hover les aplicaba ese mismo rojo, de modo que la
   regla existia, ganaba la cascada y aun asi no se veia ningun cambio. */
.wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	transition: color 0.18s ease;
}

/* Solo cambia el color: sin subrayado. El tema aplica text-decoration:
   underline a los enlaces al pasar, y en un titular grande resulta pesado. */
.wp-block-post-title a:hover,
.wp-block-post-title a:focus-visible {
	color: var(--wp--preset--color--aopa-red-dark);
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-post-title a {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   Ritmo vertical del contenido
   Margenes medidos en el original: 16px bajo los parrafos y 24px bajo los
   encabezados. Los temas de bloques espacian con blockGap y dejan los margenes
   a cero, lo que apretaba el texto respecto al sitio Joomla.
   ------------------------------------------------------------------------- */

.wp-block-post-content p,
.wp-block-post-content ul,
.wp-block-post-content ol,
.wp-block-post-content table {
	margin-top: 0;
	margin-bottom: 1rem;
}

.wp-block-post-content h1,
.wp-block-post-content h2,
.wp-block-post-content h3,
.wp-block-post-content h4,
.wp-block-post-content h5,
.wp-block-post-content h6 {
	margin-top: 0;
	margin-bottom: 1.5rem;
}

.wp-block-post-content li {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Titulo de pagina y listas del contenido
   El original mostraba el titulo como <h2> de 30,4px. Aqui se usa <h1>, que es
   lo correcto para SEO y lectores de pantalla, con el mismo aspecto visual.
   La plantilla page.html del tema padre no pintaba ningun titulo, asi que las
   paginas migradas se quedaban sin encabezado.
   ------------------------------------------------------------------------- */

.aopa-page-title {
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1.5;
	margin-top: 0;
	margin-bottom: 1.5rem;
}

/* Sangrado de lista: 24px, como en el original.
   Se usa padding y no margin porque WordPress centra los hijos directos del
   contenedor con "margin-left: auto; margin-right: auto"
   (.is-layout-constrained > :where(...)), y ahi un margin-left propio entra en
   conflicto con ese calculo. El padding no participa en el centrado. */
.wp-block-post-content ul,
.wp-block-post-content ol {
	padding-left: 1.5rem;
}

/* ---------------------------------------------------------------------------
   Imagenes destacadas en los listados
   Sin proporcion forzada: los banners apaisados de K2 se veian ampliadisimos
   al recortarlos a 16:9. Solo se limita la altura, para que una imagen
   vertical no estire la tarjeta; ahi si se recorta, que es inocuo.
   ------------------------------------------------------------------------- */

/* A tamano natural, nunca ampliadas ni recortadas. Estirarlas al ancho de la
   columna era lo que hacia que un logo de 600px se viera enorme y borroso, y
   el recorte por altura cortaba los logotipos cuadrados por la mitad.
   K2 servia variantes de 600px como maximo y las mostraba tal cual. */
.wp-block-query .wp-block-post-featured-image img {
	width: auto;
	height: auto;
	max-width: 100%;
	object-fit: none;
}

/* Columnas por categoria, segun num_leading_columns de cada categoria K2.
   El resto se queda en la unica columna que define la plantilla. */
body.category-asociadosga .wp-block-post-template.is-layout-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.category-fichas-aerodromos .wp-block-post-template.is-layout-grid,
body.category-fichas-ta .wp-block-post-template.is-layout-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 781px) {
	body.category-asociadosga .wp-block-post-template.is-layout-grid,
	body.category-fichas-aerodromos .wp-block-post-template.is-layout-grid,
	body.category-fichas-ta .wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
   Alineacion en los listados de varias columnas
   Los logos de Asociados miden 600x600, 600x600 y 600x314: con altura libre el
   tercero quedaba mas bajo y su titulo subia, desalineando la fila. Se les da
   una caja comun y se centran dentro con object-fit: contain, que no recorta
   ni deforma. En los listados de una sola columna no hace falta.
   ------------------------------------------------------------------------- */

body.category-asociadosga .wp-block-post-featured-image,
body.category-fichas-aerodromos .wp-block-post-featured-image,
body.category-fichas-ta .wp-block-post-featured-image {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.75rem;
}

body.category-asociadosga .wp-block-post-featured-image {
	aspect-ratio: 1 / 1;
}

/* Altura ajustada al logo mas alto de cada categoria (100px y 168px medidos en
   la pagina), no a una proporcion derivada del ancho de columna: con 3/2 se
   reservaban 373px para logos de 56px y la ficha se iba a 548px de alto,
   frente a los ~250px del sitio original. */
body.category-fichas-ta .wp-block-post-featured-image {
	height: 104px;
	margin: 0.5rem 0 0.75rem;
}

/* Se limita por ALTURA, no por ancho: siete de los ocho logos son banners de
   proporcion 3,3:1 y uno es casi cuadrado. Reservar la altura del mas alto
   dejaba 117px muertos en los demas, que es el hueco que se veia. Asi los
   anchos crecen y la caja se ajusta al formato dominante. */
body.category-fichas-aerodromos .wp-block-post-featured-image {
	height: 110px;
	margin: 0.5rem 0 0.75rem;
}

/* WordPress envuelve la imagen en un <a> con display:block y height:100%, que
   ocupa la caja entera: centrar la figura no servia de nada porque su unico
   hijo ya la llenaba, y la imagen quedaba pegada arriba. El centrado tiene que
   aplicarse dentro del enlace. */
body.category-asociadosga .wp-block-post-featured-image a,
body.category-fichas-aerodromos .wp-block-post-featured-image a,
body.category-fichas-ta .wp-block-post-featured-image a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

body.category-asociadosga .wp-block-post-featured-image img,
body.category-fichas-aerodromos .wp-block-post-featured-image img,
body.category-fichas-ta .wp-block-post-featured-image img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* La imagen destacada de una pagina tampoco se amplia: la de Handling mide
   800px de ancho y la columna 1150, asi que estirarla la dejaba borrosa. */
.wp-block-post-featured-image img {
	max-width: 100%;
	width: auto;
	height: auto;
}

/* Tamano de los logos en los listados, tomado de la variante que servia K2:
   _XS (100px) en Empresas Asociadas y _S (250px) en Fichas Aerodromos. Sin
   este tope se mostraban a 559px, cinco veces mas grandes que en el original. */
body.category-fichas-ta .wp-block-post-featured-image img {
	max-width: 100px;
}

/* Rejilla mas junta: son fichas cortas, con la separacion por defecto de 32px
   quedaban muy sueltas. */
body.category-fichas-ta .wp-block-post-template.is-layout-grid,
body.category-fichas-aerodromos .wp-block-post-template.is-layout-grid {
	gap: 1.25rem 2rem;
}

/* 300px es el ancho nativo del tamano aopa-logo: mas alla se ampliaria y se
   veria borroso. Aun asi son un 20% mayores que los 250px anteriores. */
body.category-fichas-aerodromos .wp-block-post-featured-image img {
	max-width: 300px;
}

/* Modulo de aerodromos asociados al pie de /category/noticias-aopa-ad/.
   Reproduce el modulo K2 que el sitio Joomla mostraba en g-bottom solo en esa
   pagina: cinco fichas con imagen a 250px, como el resto del catalogo. */
.aopa-ad-separator {
	margin: 2.5rem 0 1.5rem;
}

.aopa-ad-modulo .wp-block-post-featured-image img {
	max-width: 250px;
}

.aopa-ad-modulo .wp-block-post-featured-image {
	margin: 0.5rem 0 0.75rem;
}

.aopa-ad-modulo li {
	margin-bottom: 2rem;
}

/* Banners de patrocinadores, reproduciendo el modulo que el Joomla mostraba en
   g-bottom en las categorias de noticias. Se apagan un poco y recuperan color
   al pasar, para que no compitan con el contenido. */
.aopa-patrocinadores .aopa-banner img {
	max-height: 70px;
	width: auto;
	opacity: 0.75;
	transition: opacity 0.18s ease;
}

.aopa-patrocinadores .aopa-banner a:hover img,
.aopa-patrocinadores .aopa-banner a:focus-visible img {
	opacity: 1;
}

.aopa-patrocinadores .wp-block-group {
	gap: 2.5rem;
}

@media (prefers-reduced-motion: reduce) {
	.aopa-patrocinadores .aopa-banner img {
		transition: none;
	}
}

/* Imagenes dentro de la entradilla de un listado: no deben dominar la ficha.
   Sin tope, un cartel a ancho completo estiraba una tarjeta a mas del cuadruple
   que su vecina y la rejilla quedaba descuadrada. */
.wp-block-post-excerpt img {
	max-width: 100%;
	max-height: 260px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* ---------------------------------------------------------------------------
   Menu desplegable en movil
   Fondo blanco y texto oscuro, igual que el menu de escritorio, en lugar del
   overlay rojo: sobre rojo el logo a color no se lee (su rotulo es rojo) y la
   marca de pagina actual quedaba roja sobre roja, invisible.
   ------------------------------------------------------------------------- */

/* Area tactil mas holgada: 32px se queda por debajo de lo comodo con el dedo. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	padding-top: 0.35rem;
	padding-bottom: 0.35rem;
}

/* ---------------------------------------------------------------------------
   Contenido migrado en pantallas estrechas
   El editor de Joomla dejaba anchos fijos en pixeles: 331 declaraciones de
   400px o mas repartidas en 118 entradas (tablas pegadas desde Word, un <hr>
   de 613px, imagenes con width). En movil eso empujaba el documento a 640px y
   la pagina se salia por la derecha.

   Se corrige aqui y no en el contenido: es un asunto de presentacion, y asi
   vale para las 118 entradas sin tocar ni una.
   ------------------------------------------------------------------------- */

.wp-block-post-content img,
.wp-block-post-content video,
.wp-block-post-content iframe,
.wp-block-post-content embed,
.wp-block-post-content object,
.wp-block-post-excerpt img,
.wp-block-post-excerpt iframe {
	max-width: 100%;
	height: auto;
}

/* Los <div> se excluyen cuando son bloques del nucleo o piezas del tema: un
   "div" a secas tiene mas especificidad (0,1,1) que la regla de maquetacion de
   WordPress (.wp-container-... > *, que es 0,1,0), asi que anulaba el ancho de
   contenido y estiraba el mosaico de portada a todo lo ancho, comiendose la
   franja lateral donde se ve su imagen de fondo. */
.wp-block-post-content hr,
.wp-block-post-content p,
.wp-block-post-content div:not([class*="wp-"]):not([class*="aopa-"]),
.wp-block-post-content ul,
.wp-block-post-content ol,
.wp-block-post-content blockquote,
.wp-block-post-content span,
.wp-block-post-excerpt p,
.wp-block-post-excerpt div:not([class*="wp-"]):not([class*="aopa-"]),
.wp-block-post-excerpt span,
.wp-block-post-excerpt hr {
	max-width: 100%;
}

/* Las tablas conservan sus proporciones internas y, si no caben, se desplazan
   dentro de su propia caja en vez de estirar la pagina entera. */
.wp-block-post-content table,
.wp-block-post-excerpt table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Palabras y URLs muy largas tampoco deben ensanchar la columna. */
.wp-block-post-content,
.wp-block-post-excerpt,
.wp-block-post-title {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Los elementos de una rejilla llevan min-width: auto por defecto, asi que no
   pueden encogerse por debajo del ancho de su contenido: un <hr> con
   width: 613px heredado de Joomla estiraba la columna a 616px dentro de un
   contenedor de 342, y de ahi el scroll horizontal en movil. Con min-width: 0
   la columna vuelve a mandar y los max-width: 100% de arriba ya surten efecto. */
.wp-block-post-template > li,
.wp-block-query .wp-block-post-template > li {
	min-width: 0;
}