/*
Theme Name: El Otro Costado
Theme URI: https://elotrocostado.com
Description: Child theme de Hostinger AI theme para el sitio de noticias El Otro Costado. Todas las customizaciones (plantillas de bloques, parts, patterns, theme.json y estilos) viven acá para no ser pisadas por actualizaciones del theme padre.
Author: Mateo Lauzan
Template: hostinger-ai-theme
Version: 0.1.0
Requires at least: 5.6
Requires PHP: 8.1
License: GPLv3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: elotrocostado
*/

/* ==========================================================================
   Fondo global
   ========================================================================== */

body {
	background-color: #EEF1F4;
}

/* ==========================================================================
   Sticky footer: si el contenido no llena el viewport, el footer se pega
   abajo; si es largo, fluye normal debajo (sin solaparse). Flexbox en
   .wp-site-blocks en vez de grid de filas fijas porque la cantidad de hijos
   directos varía según la plantilla (home/archive vs. single con .eoc-related).
   ========================================================================== */

html {
	height: 100%;
}

body {
	min-height: 100%;
}

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > footer.site-footer {
	margin-top: auto;
}

/* ==========================================================================
   Header: foto de tapa + logo real + nav a la derecha, banda compacta
   ========================================================================== */

.eoc-header {
	/* Overlay oscuro (mismo tono que el gradiente placeholder anterior) sobre
	   la foto, para que el logo y el nav en blanco sigan legibles. */
	background-image: linear-gradient(rgba(9, 15, 20, 0.65), rgba(9, 15, 20, 0.65)), url("assets/header-bg.jpg");
	background-size: cover;
	background-position: center;
	/* Header un poco más alto en desktop para que la foto de tapa respire.
	   En mobile el contenido (burger + logo + título serif) ya lo hace más alto. */
	min-height: 130px !important;
	padding-top: 0.85rem !important;
	padding-bottom: 0.85rem !important;
}

/* El core del bloque cover mete un span .wp-block-cover__background con dim
   al 50% (negro) SIEMPRE, incluso sin dimRatio propio; sumado a nuestro overlay
   de arriba, tapaba la foto casi por completo. Lo neutralizamos: el overlay
   ya lo maneja el gradiente de .eoc-header. */
.eoc-header .wp-block-cover__background {
	opacity: 0;
}

.eoc-header-inner {
	width: 100%;
	align-items: center;
}

/* Logo real (assets/logo.svg) como background-image del site-title: técnica de
   reemplazo de imagen (texto indentado fuera de pantalla, queda accesible para
   lectores de pantalla). Reutilizado en el header y en la columna del footer. */
.eoc-logo-box {
	display: inline-block;
	line-height: 0;
}

.eoc-logo-box a {
	display: block;
	width: auto;
	height: 2.4rem;
	aspect-ratio: 900 / 735;
	background-image: url("assets/logo.svg");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	overflow: hidden;
	white-space: nowrap;
	text-indent: -9999px;
}

/* Footer con fondo blanco: variante del logo con "EL OTRO" en negro. */
.eoc-footer .eoc-logo-box a {
	background-image: url("assets/logo-dark.svg");
}

/* Logo un poco más grande en desktop (header y footer); mobile queda en 2.4rem. */
@media (min-width: 600px) {
	.eoc-logo-box a {
		height: 3.2rem;
	}
}

/* Masthead centrado en desktop: el group .eoc-header-inner pasa a layout
   vertical (ver atributo del bloque en parts/header.html) con el logo
   arriba y el nav de categorías centrado debajo. El gap por defecto de los
   layouts flex del core es 40px (demasiado para un header compacto), así
   que lo achicamos acá. En mobile (≤599px) el group vuelve a fila
   (burger + logo) vía la media query de más abajo y este gap no aplica. */
@media (min-width: 600px) {
	.eoc-header-inner {
		gap: 0.9rem;
	}

	/* Dentro de su caja centrada, el logo también centrado (antes pegado
	   a la izquierda, cuando el header era una fila). */
	.eoc-logo-box a {
		background-position: center;
	}
}

.eoc-header-nav {
	--wp--custom--nav-link-color: #fff;
}

.eoc-header-nav a,
.eoc-header-nav .wp-block-navigation-item__content {
	color: #fff;
	font-size: var(--wp--preset--font-size--small);
}

/* ==========================================================================
   Franja de anunciantes
   ========================================================================== */

.eoc-anunciantes-band {
	display: flex;
	justify-content: center;
	padding: 0.75rem 1.5rem;
}

/* Fila compacta, LADO A LADO (nowrap en laptop). Dos banners 1200x630 a 150px de
   alto miden ~285px c/u -> entran holgados sin apilarse ni empujar las notas. */
.eoc-anunciantes {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	max-width: 820px;
	margin: 0 auto;
}

.eoc-anunciantes img {
	max-height: 150px;
	width: auto;
	height: auto;
}

/* En pantallas chicas sí se apilan. */
@media (max-width: 782px) {
	.eoc-anunciantes {
		flex-wrap: wrap;
	}
}

/* ==========================================================================
   Cards de la grilla de noticias
   ========================================================================== */

.eoc-card {
	position: relative;
}

/* Overlay oscuro en los DOS extremos (título arriba, fecha/categoría abajo). */
.eoc-card .wp-block-cover__background {
	background: linear-gradient(to bottom, rgba(10, 15, 20, 0.85) 0%, rgba(10, 15, 20, 0.2) 35%, rgba(10, 15, 20, 0.2) 58%, rgba(10, 15, 20, 0.85) 100%);
}

/* Título pegado arriba, fecha+categoría pegadas abajo (ocupan toda la altura). */
.eoc-card.wp-block-cover.has-custom-content-position.is-position-top-left {
	align-items: stretch;
}

.eoc-card .wp-block-cover__inner-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.eoc-card .wp-block-post-title {
	margin: 0;
}

.eoc-card .wp-block-post-title,
.eoc-card .wp-block-post-title a {
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--playfairdisplay);
	line-height: 1.15;
}

/* Meta vertical: título → (espacio) → fecha → categoría. Todo blanco. */
.eoc-card-meta {
	align-items: flex-start;
	gap: 0.15em;
	margin-top: 0;
}

.eoc-card-meta,
.eoc-card-meta a,
.eoc-card-meta p,
.eoc-card-meta time {
	color: #fff !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
	margin: 0;
	line-height: 1.3;
}

.eoc-card-meta a {
	text-decoration: none;
}

/* ==========================================================================
   Buscador: pill naranja, lupa gris a la izquierda, sin botón ni label
   ========================================================================== */

.eoc-search .wp-block-search__label {
	display: none;
}

.eoc-search .wp-block-search__inside-wrapper {
	max-width: 460px;
	margin-left: auto;
	margin-right: auto;
	border: none;
	border-radius: 999px;
	background: var(--wp--preset--color--eoc-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 0.95rem center;
	background-size: 1.05rem;
	padding-left: 2.5rem;
}

.eoc-search .wp-block-search__input {
	border: 0;
	background: transparent;
	box-shadow: none;
	padding: 0.6rem 1.1rem 0.6rem 0.25rem;
	color: #fff;
}

.eoc-search .wp-block-search__input::placeholder {
	color: rgba(255, 255, 255, 0.85);
}

.eoc-search .wp-block-search__input:focus {
	outline: none;
	box-shadow: none;
}

/* ==========================================================================
   Links de meses / heading del mes actual (bloques dinámicos del plugin)
   ========================================================================== */

.eoc-month-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.3rem 1.1rem;
	margin: 1.25rem 0;
}

.eoc-month-links a,
.wp-block-eoc-month-links a {
	color: var(--wp--preset--color--eoc-orange);
	text-decoration: none;
	font-weight: 500;
}

/* ==========================================================================
   Headings de sección / archivo
   ========================================================================== */

.eoc-section-heading {
	color: var(--wp--preset--color--eoc-orange);
}

/* ==========================================================================
   Paginación numérica
   ========================================================================== */

.wp-block-query-pagination {
	gap: 0.4rem;
	align-items: center;
}

/* Números = cuadrados blancos, texto naranja; activo/hover invertido. */
.wp-block-query-pagination-numbers .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.1rem;
	height: 2.1rem;
	padding: 0 0.5rem;
	margin: 0 0.12rem;
	background: #fff;
	color: var(--wp--preset--color--eoc-orange);
	border: 1px solid #d9dee5;
	border-radius: 4px;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.12s ease, color 0.12s ease;
}

.wp-block-query-pagination-numbers a.page-numbers:hover,
.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--wp--preset--color--eoc-orange);
	color: #fff;
	border-color: var(--wp--preset--color--eoc-orange);
}

.wp-block-query-pagination-next,
.wp-block-query-pagination-previous {
	color: var(--wp--preset--color--eoc-orange);
	font-weight: 600;
	text-decoration: none;
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* Footer blanco, 3 columnas: logo · copyright · categorías. */
.eoc-footer {
	background: #fff;
	color: var(--wp--preset--color--dark, #16202b);
	border-top: 1px solid #e2e7ee;
}

.eoc-footer-cols {
	align-items: flex-start;
	gap: 2rem;
}

.eoc-footer-copy {
	color: #5b6673;
}

.eoc-footer-cats-title {
	margin: 0 0 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #5b6673;
}

.eoc-footer-links a {
	color: var(--wp--preset--color--dark, #16202b);
	text-decoration: none;
}

.eoc-footer-links a:hover {
	color: var(--wp--preset--color--eoc-orange);
}

/* Categorías del footer en 3 filas de 3. */
.eoc-footer-links ul.wp-block-navigation__container {
	display: grid;
	grid-template-columns: repeat(3, max-content);
	gap: 0.55rem 1.75rem;
}

@media (max-width: 600px) {
	.eoc-footer-links ul.wp-block-navigation__container {
		grid-template-columns: repeat(2, max-content);
	}
}

/* ==========================================================================
   Espaciados globales: header pegado arriba + separación con el footer
   ========================================================================== */

/* El theme padre mete body{padding-top:75px}; lo anulamos para que el header
   quede pegado al borde superior. */
body {
	padding-top: 0 !important;
}

/* Aire entre el contenido (grilla / meses / buscador / nota) y el footer. */
main.wp-block-group {
	padding-bottom: 3rem;
}

/* Separar el buscador del bloque de meses (y del footer). */
.eoc-search {
	margin-top: 1.75rem;
}

@media (max-width: 781px) {
	.eoc-footer-cols {
		gap: 1.5rem;
		text-align: left;
	}
}

/* ==========================================================================
   Breadcrumb: sin fondo, texto naranja (categoría / mes / búsqueda / nota)
   ========================================================================== */

.eoc-breadcrumb {
	color: var(--wp--preset--color--eoc-orange);
	padding: 0.25rem 0;
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: 0.5rem;
}

.eoc-breadcrumb a {
	color: var(--wp--preset--color--eoc-orange);
	text-decoration: none;
}

.eoc-breadcrumb a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   Byline del single ("Por elotrocostado.com · fecha")
   ========================================================================== */

.eoc-byline {
	align-items: center;
	gap: 0.35rem;
	margin: 0.35rem 0 1rem;
	color: #5b6673;
	font-size: var(--wp--preset--font-size--small);
}

.eoc-byline p,
.eoc-byline .wp-block-post-date,
.eoc-byline time {
	margin: 0;
	color: inherit;
	font-size: inherit;
}

/* El heading de sección alineado al borde de la grilla. */
.eoc-archive-head {
	margin-bottom: 1.25rem;
}

.eoc-section-heading {
	margin: 0.4rem 0 0;
}

/* ==========================================================================
   Notas relacionadas (single) — mismo look que las cards de la grilla
   ========================================================================== */

.eoc-related {
	max-width: 1080px;
	margin: 4rem auto 3rem;
	padding: 0 1rem;
	box-sizing: border-box;
}

.eoc-related__title {
	font-family: var(--wp--preset--font-family--playfairdisplay);
	color: var(--wp--preset--color--eoc-orange);
	font-size: 1.4rem;
	margin: 0 0 1rem;
}

.eoc-related__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

.eoc-related-card {
	position: relative;
	display: block;
	min-height: 210px;
	border-radius: 4px;
	overflow: hidden;
	text-decoration: none;
}

.eoc-related-card__img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-color: #2c2a29;
}

.eoc-related-card__img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(10, 15, 20, 0.85) 0%, rgba(10, 15, 20, 0.2) 50%, rgba(10, 15, 20, 0.85) 100%);
}

.eoc-related-card__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 210px;
	padding: 0.9rem;
	box-sizing: border-box;
}

.eoc-related-card__heading {
	font-family: var(--wp--preset--font-family--playfairdisplay);
	font-size: 16px;
	line-height: 1.15;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

.eoc-related-card__meta {
	margin-top: auto;
	font-size: var(--wp--preset--font-size--small);
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

@media (max-width: 1024px) {
	.eoc-related__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.eoc-related__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Burger + menú mobile + título serif del header en mobile
   ========================================================================== */

/* Burger: cuadrado naranja, líneas blancas. */
.eoc-header-nav .wp-block-navigation__responsive-container-open {
	background: var(--wp--preset--color--eoc-orange);
	color: #fff;
	padding: 0.55rem;
	border-radius: 4px;
}

.eoc-header-nav .wp-block-navigation__responsive-container-open svg {
	fill: #fff;
}

/* Botón de cierre (X): cuadrado naranja, blanco. */
.wp-block-navigation__responsive-container-close {
	background: var(--wp--preset--color--eoc-orange);
	color: #fff;
	padding: 0.45rem;
	border-radius: 4px;
}

.wp-block-navigation__responsive-container-close svg {
	fill: #fff;
}

/* Menú abierto: lista vertical full-width con divisores, ítem activo naranja. */
.wp-block-navigation__responsive-container.is-menu-open {
	background: #fff;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 3.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid #e6eaef;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	display: block;
	width: 100%;
	padding: 1rem 1.25rem;
	color: #16202b;
	font-size: 1.1rem;
}

.wp-block-navigation__responsive-container.is-menu-open .current-menu-item a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover {
	color: var(--wp--preset--color--eoc-orange);
}

/* Título serif grande del header: solo en mobile. */
.eoc-mobile-title {
	display: none;
}

/* 599px, no 781px: el burger del core/navigation (overlayMenu:mobile) recién
   aparece por debajo de 600px (ver wp-includes/blocks/navigation/style.min.css,
   "@media (min-width:600px){ .wp-block-navigation__responsive-container-open{display:none} }").
   Si este breakpoint no coincide con ESE, entre 600-781px se ve el título mobile
   + la nav horizontal completa sin burger para abrirla/cerrarla. */
@media (max-width: 599px) {
	/* En mobile: burger a la izquierda, logo a la derecha (como el ejemplo).
	   justify-content explícito: el layout base (desktop) centra el group
	   (.eoc-header-inner queda en column + center), así que acá hay que
	   restaurar space-between para que burger y logo se vayan a los extremos
	   en vez de quedar juntos/centrados. */
	.eoc-header-inner {
		flex-direction: row-reverse;
		justify-content: space-between;
	}

	.eoc-mobile-title {
		display: block;
		margin-top: 0.6rem;
		font-family: var(--wp--preset--font-family--playfairdisplay);
		font-size: clamp(1.9rem, 8vw, 2.6rem);
		line-height: 1.05;
		color: #fff;
		text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
	}

	.eoc-mobile-title a {
		color: #fff;
		text-decoration: none;
	}
}

/* ==========================================================================
   Mensaje "sin resultados" / "en reconstrucción" (bloque eoc/no-results,
   dentro de wp:query-no-results). Centrado y con aire para no quedar pelado.
   ========================================================================== */
.eoc-no-results {
	text-align: center;
	padding: 2.5rem 1rem;
	color: #555;
	font-size: 1.05rem;
}

.eoc-no-results.eoc-rebuilding {
	font-style: italic;
}