/**
 * Modern News UI — Skins.
 * Los tokens los aplica cada skin como variables; aquí solo van los matices
 * propios de cada estilo. Sin skin activo, este archivo no cambia nada.
 */

/* Minimal: sin sombras, todo apoyado en líneas finas. */

.mnui-skin-minimal .mnui-card-item,
.mnui-skin-minimal .mnui-widget {
	border: 1px solid var(--mnui-color-border);
	box-shadow: none;
}

.mnui-skin-minimal .mnui-card-item:hover { transform: none; box-shadow: none; border-color: var(--mnui-color-accent); }
.mnui-skin-minimal .mnui-hero__category { border-radius: 4px; }
.mnui-skin-minimal .mnui-hero__item { box-shadow: none; }

/* Editorial: aire clásico, mayúsculas discretas y separadores. */

.mnui-skin-editorial .mnui-hero__category {
	border-radius: 0;
	background: transparent;
	color: var(--mnui-color-accent);
	padding-inline: 0;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.mnui-skin-editorial .mnui-widget__title,
.mnui-skin-editorial .mnui-hero__title { letter-spacing: -0.01em; }

.mnui-skin-editorial .mnui-card-item {
	border-bottom: 1px solid var(--mnui-color-border);
	box-shadow: none;
	border-radius: 0;
}

.mnui-skin-editorial .mnui-card-item__media { border-radius: 4px; }

/* Magazine: contraste alto, formas redondeadas y titulares con fuerza. */

.mnui-skin-magazine .mnui-hero__category {
	text-transform: uppercase;
	font-weight: 800;
	letter-spacing: 0.08em;
}

.mnui-skin-magazine .mnui-hero__item--lead .mnui-hero__title { letter-spacing: -0.03em; }
.mnui-skin-magazine .mnui-card-item:hover { transform: translateY(-6px); }

.mnui-skin-magazine .mnui-widget__title {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 800;
}

/* Catholic: tonos cálidos, serena y muy legible. */

.mnui-skin-catholic body,
.mnui-skin-catholic .mnui-card-item,
.mnui-skin-catholic .mnui-widget {
	background-color: var(--mnui-color-surface);
}

.mnui-skin-catholic .mnui-hero__category {
	background: var(--mnui-color-accent);
	letter-spacing: 0.08em;
}

.mnui-skin-catholic .mnui-reading blockquote {
	font-style: italic;
	border-left-width: 4px;
}

.mnui-skin-catholic .mnui-widget__title { letter-spacing: 0.02em; }

/* Modern: amplio, suave y ligero. */

.mnui-skin-modern .mnui-card-item,
.mnui-skin-modern .mnui-widget { border: 1px solid var(--mnui-color-border); }
.mnui-skin-modern .mnui-hero { gap: var(--mnui-space-lg); }
.mnui-skin-modern .mnui-hero__body { padding: var(--mnui-space-lg); }
.mnui-skin-modern .mnui-hero__category { letter-spacing: 0.04em; }

/**
 * Aplicación del skin al tema.
 * Solo se activa con la opción "Aplicar el skin a toda la web".
 * Son cambios de forma y tipografía; los colores de fondo del tema no se tocan.
 */

body.mnui-skin-site,
body.mnui-skin-site p,
body.mnui-skin-site li,
body.mnui-skin-site .entry-content,
body.mnui-skin-site .entry-summary,
body.mnui-skin-site .widget {
	font-family: var(--mnui-font-body);
	line-height: var(--mnui-line-height);
}

body.mnui-skin-site h1,
body.mnui-skin-site h2,
body.mnui-skin-site h3,
body.mnui-skin-site h4,
body.mnui-skin-site h5,
body.mnui-skin-site h6,
body.mnui-skin-site .entry-title,
body.mnui-skin-site .post-title,
body.mnui-skin-site .widget-title,
body.mnui-skin-site .mnui-widget__title {
	font-family: var(--mnui-font-heading);
	font-weight: var(--mnui-heading-weight);
	letter-spacing: -0.015em;
}

body.mnui-skin-site button,
body.mnui-skin-site .button,
body.mnui-skin-site .btn,
body.mnui-skin-site input[type="submit"],
body.mnui-skin-site input[type="button"] {
	border-radius: var(--mnui-radius-button);
}

body.mnui-skin-site input[type="text"],
body.mnui-skin-site input[type="search"],
body.mnui-skin-site input[type="email"],
body.mnui-skin-site input[type="url"],
body.mnui-skin-site textarea,
body.mnui-skin-site select {
	border-radius: var(--mnui-radius-input);
}

body.mnui-skin-site .wp-post-image,
body.mnui-skin-site .post-thumbnail img,
body.mnui-skin-site .attachment-post-thumbnail,
body.mnui-skin-site .widget img,
body.mnui-skin-site figure.wp-block-image img {
	border-radius: var(--mnui-radius-card);
}

/* Etiquetas de categoría del tema con el color del skin. */
body.mnui-skin-site .cat-links a,
body.mnui-skin-site .category a,
body.mnui-skin-site .entry-category a {
	color: var(--mnui-color-accent);
}