/*
 * eno-body.css — Alinea la tipografía, fondo y ancho del cuerpo del blog
 * con los tokens de la app (SSG en /). Complementa a eno-header.css.
 * Cargado tras wp_head() en header.php para ganar al style.css del tema
 * (Twenty Twelve, 5.110 líneas). Alcance QUIRÚRGICO: solo colores, fuentes
 * y anchos, para no romper el HTML clásico de posts con Elementor.
 *
 * Tokens (idénticos a lovable_repo/src/index.css):
 *   fondo claro   hsl(40 20% 96%)
 *   card          hsl(40 15% 94%)
 *   texto         hsl(0 0% 8%)
 *   muted         hsl(0 0% 40%)
 *   acento (link) hsl(42 85% 48%)
 *   fuentes       Montserrat (display) / Raleway (body)
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Raleway:wght@300;400;500;600;700&display=swap');

body.blog,
body.single,
body.archive,
body.search,
body.page,
body.error404 {
	background: hsl(40 20% 96%) !important;
	color: hsl(0 0% 12%);
	font-family: 'Raleway', Helvetica, Arial, sans-serif !important;
	font-size: 16px;
	line-height: 1.65;
}

/* Contenedor central: mismo max-width que la app (section-container = max-w-6xl = 72rem) */
#page {
	max-width: 100%;
	background: transparent;
}

#ContainerAll {
	max-width: 72rem !important;
	width: auto !important;
	margin: 0 auto !important;
	padding: 0 1rem !important;
	float: none !important;
}

@media (min-width: 640px) {
	#ContainerAll { padding: 0 1.5rem !important; }
}
@media (min-width: 1024px) {
	#ContainerAll { padding: 0 2rem !important; }
}

/* Reset del layout float-based del tema Twenty Twelve */
#main,
#primary,
#content,
.site-content {
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
}

#main.wrapper {
	padding: 2rem 0 !important;
}

/* Sidebar antigua (Twenty Twelve la usaba flotada; ya no hay contenido) */
#LeftNotMain,
#secondary,
.widget-area {
	display: none !important;
}

/* Titulares — Montserrat, tamaños de la app */
body.blog h1,
body.single h1,
body.archive h1,
body.page h1,
#primary h1,
.entry-title,
h1.entry-title,
h2.entry-title,
h1.page-title {
	font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
	color: hsl(0 0% 8%);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 1rem;
}

#primary h1,
h1.page-title,
h1.entry-title {
	font-size: 32px !important;
}

@media (min-width: 768px) {
	#primary h1,
	h1.page-title,
	h1.entry-title {
		font-size: 40px !important;
	}
}

h2.entry-title,
h2.entry-title a {
	font-size: 22px !important;
	font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
	font-weight: 700 !important;
	color: hsl(0 0% 8%) !important;
	text-decoration: none;
}

h2.entry-title a:hover {
	color: hsl(42 85% 48%) !important;
}

#primary h2,
#primary h3,
#primary h4 {
	font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
	color: hsl(0 0% 10%);
	font-weight: 600;
	line-height: 1.3;
}

/* Enlaces del cuerpo: acento dorado como la app */
#primary a,
#primary a:link,
#primary a:visited,
.entry-content a,
.entry-summary a,
article.hentry a {
	color: hsl(42 85% 35%) !important;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	transition: color 0.15s ease;
}

/* Los títulos de post en el listado no van subrayados */
h1.entry-title a,
h2.entry-title a,
h3.entry-title a {
	text-decoration: none !important;
}

#primary a:hover,
.entry-content a:hover,
article.hentry a:hover {
	color: hsl(42 85% 48%) !important;
	text-decoration-thickness: 2px;
}

/* Tarjeta de post en el listado — mismo look que las cards de la app */
article.post,
article.hentry,
.hentry,
#content article.hentry,
#primary article.hentry {
	background: hsl(40 15% 94%) !important;
	border: 1px solid hsl(40 12% 86%) !important;
	border-radius: 0.75rem !important;
	padding: 1.5rem 1.75rem !important;
	margin: 0 0 1.5rem !important;
	box-shadow: 0 1px 3px hsl(0 0% 0% / 0.06);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

article.post:hover,
article.hentry:hover {
	box-shadow: 0 4px 16px hsl(0 0% 0% / 0.1), 0 8px 24px hsl(0 0% 0% / 0.06);
	transform: translateY(-1px);
}

/* Meta (fecha, autor, categorías) */
.entry-meta,
.entry-meta a,
.byline,
.cat-links,
.tag-links,
.comments-link {
	font-family: 'Raleway', Helvetica, Arial, sans-serif !important;
	font-size: 13px !important;
	color: hsl(0 0% 40%) !important;
}

.entry-meta a {
	text-decoration: none;
}

.entry-meta a:hover {
	color: hsl(42 85% 40%) !important;
}

/* Contenido del post */
.entry-content,
.entry-summary {
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: hsl(0 0% 15%);
}

.entry-content p,
.entry-summary p {
	margin: 0 0 1.1em;
}

.entry-content img,
.entry-content .wp-caption {
	max-width: 100%;
	height: auto;
	border-radius: 0.5rem;
}

.entry-content blockquote {
	border-left: 3px solid hsl(42 85% 48%);
	background: hsl(42 40% 96%);
	padding: 0.75rem 1.25rem;
	margin: 1.5rem 0;
	border-radius: 0 0.5rem 0.5rem 0;
	font-style: italic;
	color: hsl(0 0% 20%);
}

.entry-content code,
.entry-content pre {
	background: hsl(40 12% 91%);
	border-radius: 0.35rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.entry-content code {
	padding: 0.15em 0.35em;
	font-size: 0.9em;
}

.entry-content pre {
	padding: 1rem;
	overflow-x: auto;
}

/* Paginación */
.paging-navigation,
.post-navigation,
.pagination,
nav.navigation {
	margin: 2rem 0;
	font-family: 'Montserrat', Helvetica, Arial, sans-serif;
}

.paging-navigation a,
.pagination a,
nav.navigation a {
	color: hsl(0 0% 8%);
	text-decoration: none;
}

.paging-navigation a:hover,
.pagination a:hover,
nav.navigation a:hover {
	color: hsl(42 85% 48%);
}

/* Comentarios */
#comments {
	background: hsl(40 15% 94%);
	border: 1px solid hsl(40 12% 86%);
	border-radius: 0.75rem;
	padding: 1.5rem;
	margin-top: 2rem;
}

#comments .comments-title {
	font-family: 'Montserrat', Helvetica, Arial, sans-serif;
	font-size: 22px;
	color: hsl(0 0% 8%);
}

/* Formulario de búsqueda de la subbarra ya está estilado en eno-header.css.
   El del sidebar (si aparece) se apagó porque #secondary está oculto. */

/* Footer del tema — al menos que no chirríe */
#colophon {
	background: hsl(0 0% 4%);
	color: hsl(45 60% 90%);
	padding: 2rem 0;
	margin-top: 3rem;
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-size: 14px;
	border-top: 1px solid hsl(45 60% 40% / 0.2);
}

#colophon a {
	color: hsl(42 85% 48%);
	text-decoration: none;
}

#colophon .site-info,
#colophon p {
	max-width: 72rem;
	margin: 0 auto;
	padding: 0 1rem;
}

/* Móvil */
@media (max-width: 768px) {
	#ContainerAll { padding: 0 0.75rem; }
	#primary h1,
	h1.page-title,
	h1.entry-title { font-size: 26px !important; }
	h2.entry-title { font-size: 19px !important; }
	article.post,
	article.hentry { padding: 1rem 1.1rem; }
	body { font-size: 15px; }
}
