/*
 * Estilos globales de marca: header y footer (parts/header.html, parts/footer.html)
 * y el sistema de botones ".mwm-btn". Usa las custom properties de variables.css.
 */

/* twentytwentyfive (tema padre) fija el body a font-weight:300; con esa base,
   el "bolder" relativo del user-agent para <strong>/<b> solo llega a 400 (ver
   tabla de bolder/lighter de la spec CSS), así que no se distingue del texto
   normal. Lo fijamos en absoluto para que la negrita del RichText de los
   bloques (y de cualquier contenido) se vea realmente en negrita. */
strong,
b {
	font-weight: 700;
}

/* ==========================================================================
   Layout — contenedor fluido hasta 1920px (ver los tokens --mwm-* en
   variables.css). theme.json fija layout.contentSize en 1200px y wideSize en
   1440px; con el contenedor fluido eso dejaría cualquier párrafo o grupo nativo
   de WordPress capado a 1200px mientras los bloques mwm llegan a ~1724px. Aquí
   reapuntamos las custom properties que usa el layout "constrained" del core a
   los tokens. Solo afecta a los layouts SIN contentSize propio (los <main> de
   las plantillas, el post-content de page/index/page-no-title y la barra
   inferior del footer): header (1104), grupo del footer (1104), .mwm-legal
   (1104/920) y el 404 (640) llevan valor explícito y no se tocan.
   Se declara en body y no en :root porque una declaración en el propio elemento
   gana a la que WordPress hereda desde :root, sin depender del orden de los
   <style> del <head>. En el editor, add_editor_style reescribe "body" a
   .editor-styles-wrapper, así que aplica igual dentro del lienzo.
   ========================================================================== */
body {
	--wp--style--global--content-size: var(--mwm-content-max, 1104px);
	--wp--style--global--wide-size: var(--mwm-container-cap, 1920px);
}

/* ==========================================================================
   Header (parts/header.html) — sticky, breakpoint 1024px
   ========================================================================== */

.mwm-header,
.mwm-header *,
.mwm-footer,
.mwm-footer * {
	font-size: 14px;
	line-height: 24px;
	font-weight: 400;
}


.mwm-header-wrap {
	background: linear-gradient(135deg, rgb(134, 182, 203) 0%, rgb(157, 167, 167) 27%, rgb(164, 144, 140) 51%, rgb(182, 122, 106) 75%, rgb(175, 92, 81) 100%);
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	transition: box-shadow 0.2s ease;
	z-index: 100;
}

/* Clase añadida por assets/js/header-sticky.js al hacer scroll (position:sticky por sí solo no distingue "pegado" de "en flujo normal") */
.mwm-header-wrap.is-stuck {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.mwm-header {
	padding: 24px 0;
}

/* Misma caja que los contenedores de los bloques (--mwm-container-max + gutter),
   no la del padding global: aunque WordPress marca .mwm-header como
   .has-global-padding (layout constrained), el `padding: 24px 0` de la regla de
   arriba anula ese padding lateral, así que el hueco disponible del header es el
   viewport completo, igual que en una sección a sangre. Con la misma fórmula que
   los bloques, el logo y el menú caen en la misma vertical que el contenido y
   que el footer (comprobado a 1200/1244/1440/1920/2560).
   Se hace por CSS y no editando parts/header.html a propósito: si el template
   part está sobrescrito en la BD (Site Editor), esta regla (0,2,0) sigue
   ganando a la que WordPress genera para el contentSize (0,1,0). */
.mwm-header .wp-block-columns {
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	max-width: var(--mwm-container-max, 1144px);
	padding-left: var(--mwm-gutter, 20px);
	padding-right: var(--mwm-gutter, 20px);
}

.mwm-header__logo{
	min-width: 160px;
}

.mwm-header__logo img {
	height: auto;
	max-height: 48px;
	max-width: 100%;
	width: auto;
}

/* Hover underline en los enlaces del menú nativo (wp:navigation ref=14), excluyendo el CTA "Contacto" */
.mwm-header .wp-block-navigation-item:not(.mwm-btn) > .wp-block-navigation-item__content {
	position: relative;
	text-decoration: none;
}

.mwm-header .wp-block-navigation-item:not(.mwm-btn) > .wp-block-navigation-item__content::after {
	background-color: currentColor;
	bottom: 2px;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.3s ease;
	width: 100%;
}

.mwm-header .wp-block-navigation-item:not(.mwm-btn) > .wp-block-navigation-item__content:hover::after,
.mwm-header .wp-block-navigation-item:not(.mwm-btn) > .wp-block-navigation-item__content:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left;
}

.mwm-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--horizonte-color-blanco);
}

/* El overlay móvil por defecto del bloque nativo es blanco con texto heredado (blanco):
   sin esto el texto y el botón de cerrar quedan invisibles sobre fondo blanco */
.mwm-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--horizonte-celeste-texto) !important;
}

.wp-block-navigation .wp-block-navigation-item.mwm-btn__primary{
	background-color: var(--horizonte-color-resalto);
}

.wp-block-navigation .wp-block-navigation-item.mwm-btn__primary:hover{
	background-color: var(--horizonte-color-secundario);
}

.mwm-header .wp-block-navigation.is-content-justification-right {
	margin-top: .25rem;
}

.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content{
	outline-style: none;
}

.current-menu-item{
	border-bottom: 2px solid white;
}

/* Punto de ruptura del menú a hamburguesa: 1024px (el bloque nativo trae 600px por defecto, hay que forzarlo) */
@media (max-width: 1024px) {
	.mwm-header {
		padding: 16px 0;
	}

	.mwm-header__help {
		display: none;
	}

	.mwm-header .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}

	.mwm-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	.mwm-header .wp-block-navigation.is-content-justification-right {
		margin: 0;
	}

	/* El menú responsive hereda "items-justified-right" del bloque (pensado
	   para el layout horizontal de escritorio); en el listado móvil apilado
	   se ve centrado en su lugar. Cada <li> ocupa el 100% del ancho (si no,
	   "text-align:center" no tiene espacio dentro del que centrar el texto). */
	.mwm-header .wp-block-navigation__responsive-container-content,
	.mwm-header .wp-block-navigation__responsive-container-content .wp-block-navigation-container {
		align-items: center !important;
		justify-content: center !important;
		width: 100%;
	}

	.mwm-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
		width: 100% !important;
		text-align: center;
	}

	.mwm-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
		width: 100%;
		justify-content: center;
		text-align: center;
	}

	/* El CTA "Contacto" (mwm-btn mwm-btn__primary) se ve como los demás items
	   del listado móvil: en escritorio conserva su aspecto de botón. */
	.mwm-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item.mwm-btn {
		padding: 0 !important;
		border: none !important;
		border-radius: 0 !important;
	}

	.mwm-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item.mwm-btn__primary,
	.mwm-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item.mwm-btn__primary:hover,
	.mwm-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item.mwm-btn__primary:focus-visible {
		background-color: transparent !important;
		color: inherit !important;
	}

	/* Mismo hover (subrayado animado) para todo el menú móvil: items de
	   primer nivel (incluido "Contacto", sin excluirlo por ".mwm-btn" como en
	   escritorio) y el submenú de "Adicciones" (.mwm-menu-desplegable__mobile-list,
	   ver mega-menu.css). El efecto va sobre el <span class="wp-block-navigation-item__label">
	   (ancho de su propio texto), no sobre el <a> de ancho completo, para que
	   la línea abrace solo el texto aunque el item esté centrado; por eso
	   primero se anula el ::after de la regla de escritorio (línea ~73) que
	   sí va sobre el <a>. Necesita !important: esa regla de escritorio usa
	   ":not(.mwm-btn)" y sin él empataba en especificidad, así que ganaba
	   por ir declarada antes y quedaban las dos líneas superpuestas. */
	.mwm-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content::after {
		content: none !important;
	}

	.mwm-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item__label {
		position: relative;
		display: inline-block;
	}

	.mwm-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item__label::after {
		background-color: currentColor;
		bottom: -2px;
		content: "";
		height: 2px;
		left: 0;
		position: absolute;
		transform: scaleX(0);
		transform-origin: right;
		transition: transform 0.3s ease;
		width: 100%;
	}

	.mwm-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:hover .wp-block-navigation-item__label::after,
	.mwm-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:focus-visible .wp-block-navigation-item__label::after {
		transform: scaleX(1);
		transform-origin: left;
	}

	/* Jerarquía del listado móvil: los items de primer nivel (Adicciones,
	   Terapia Online, Para familias, Quiénes somos, El Centro, Blog y Contacto)
	   en negrita y algo más grandes que "Sustancias" y "Comportamentales", que
	   son subcategorías de Adicciones (el panel [data-mwm-mobile-panel] del
	   bloque mwm/menu-desplegable, ver mega-menu.css). Esos dos títulos y el
	   tercer nivel NO llevan la clase del bloque nativo, así que se quedan en
	   los 14px/400 heredados y el contraste se lee solo.
	   El selector es largo a propósito: hay que ganar a ".mwm-header *" (línea
	   ~21), que fuerza 14px/400 a todo el header; con 0,3,0 gana sin !important.
	   Va sobre el <span> del label (no sobre el <a>) porque es el mismo elemento
	   que lleva el subrayado animado de arriba, y así la línea sigue abrazando
	   el texto al nuevo tamaño. */
	.mwm-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item__label {
		font-size: 18px;
		line-height: 28px;
		font-weight: 700;
	}
}

/* ==========================================================================
   Footer (parts/footer.html)
   ========================================================================== */

footer{
	margin: 0;
}

.mwm-footer {
	display: flex;
	flex-direction: column;
}

/* Los grupos de primer nivel del footer van con layout "constrained"
   (parts/footer.html: contentSize 1104px arriba, wideSize 1104px en la barra
   inferior) y reciben el padding global del tema, igual que el header:
   apuntamos su ancho de contenido al token para que el footer acompañe al
   contenido en pantallas grandes. A 1200px de viewport sigue mandando el hueco
   disponible (1085px) → idéntico a hoy. Por CSS y no editando
   parts/footer.html: si el template part está sobrescrito en la BD, esta regla
   (0,2,0) sigue ganando a la del contentSize (0,1,0). */
.mwm-footer > .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: var(--mwm-content-max, 1104px);
}

.mwm-footer__logo img {
	height: auto;
	max-height: 48px;
	width: auto;
}

/* Hover underline en los menús de navegación del footer (wp:navigation refs 13/12/6/93),
   mismo efecto que el menú del header (.mwm-header más arriba) */
.mwm-footer .wp-block-navigation-item:not(.mwm-btn) > .wp-block-navigation-item__content {
	position: relative;
	text-decoration: none;
}

.mwm-footer .wp-block-navigation-item:not(.mwm-btn) > .wp-block-navigation-item__content::after {
	background-color: currentColor;
	bottom: 2px;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.3s ease;
	width: 100%;
}

.mwm-footer .wp-block-navigation-item:not(.mwm-btn) > .wp-block-navigation-item__content:hover::after,
.mwm-footer .wp-block-navigation-item:not(.mwm-btn) > .wp-block-navigation-item__content:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left;
}

.mwm-footer__title{
	font-size: 20px;
	font-family: var(--horizonte-font-heading);
}

.mwm-legal {
	padding: 0 20px;
	color: #314B57;
	font-size: 16px;
	margin-top: 1rem;
}

.mwm-legal__title{
	color: var(--horizonte-color-secundario);
	margin-bottom: 3.5rem;
	font-weight: 500;
}

.mwm-legal h2, .mwm-legal h3, .mwm-legal h4 {
	font-size: 1.5rem !important;
	color: inherit;
	margin-top: 40px;
}

@media (max-width: 767px){
	.mwm-legal h2, .mwm-legal h3, .mwm-legal h4 {
		font-size: 1.125rem !important;
	}

	.mwm-footer__title{
		font-weight: 600;
	}
}

/* ==========================================================================
   404 (templates/404.html)
   ========================================================================== */

.mwm-404 {
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	overflow: hidden;
	min-height: 70vh;
	padding: 96px 24px;
	text-align: center;
	background-color: var(--horizonte-gris-1);
}

.mwm-404::before,
.mwm-404::after {
	content: "";
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	filter: blur(70px);
	opacity: 0.35;
}

.mwm-404::before {
	top: -160px;
	left: -120px;
	width: 360px;
	height: 360px;
	background: var(--horizonte-color-principal);
}

.mwm-404::after {
	bottom: -180px;
	right: -120px;
	width: 420px;
	height: 420px;
	background: var(--horizonte-color-resalto);
}

.mwm-404__eyebrow {
	position: relative;
	z-index: 1;
	margin: 0;
	font-family: var(--horizonte-font-body);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--horizonte-celeste-texto);
}

.mwm-404__code {
	position: relative;
	z-index: 1;
	margin: 0;
	font-family: var(--horizonte-font-heading);
	font-weight: 500;
	font-size: clamp(96px, 16vw, 200px);
	line-height: 0.9;
	color: var(--horizonte-color-secundario);
}

.mwm-404__message {
	position: relative;
	z-index: 1;
	max-width: 480px;
	margin: 0;
	font-family: var(--horizonte-font-body);
	font-size: clamp(16px, 1.5vw, 18px);
	line-height: 1.6;
	color: var(--horizonte-morado-oscuro);
}

.mwm-404__actions {
	position: relative;
	z-index: 1;
	margin: 8px 0 0;
}

@media (max-width: 640px) {
	.mwm-404 {
		min-height: 60vh;
		padding: 64px 20px;
	}
}

/* ==========================================================================
   Single post (templates/single.html)
   ========================================================================== */
/* Padre: título + fecha + imagen destacada + Hijo. Ancho 880px con gutter
   de 20px por lado (max-width, no width fijo) para que nunca toque el borde
   en mobile. */
.mwm-single__padre {
	box-sizing: border-box;
	max-width: 880px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Hijo: contiene the_content() + botón. Ancho 656px empujado al lado derecho
   del Padre (margin-left:auto); al ser max-width (no width fijo) se vuelve
   fluido y ocupa el 100% disponible en mobile en vez de desbordar. */
.mwm-single__hijo {
	box-sizing: border-box;
	width: 100%;
	max-width: 656px !important;
	margin-left: auto !important;
	margin-right: 0 !important;
}

.mwm-single__hijo p {
	text-align: left;
}

.mwm-single__back {
	margin-top: 2rem;
	text-align: left;
}

/* ==========================================================================
   Botones (.mwm-btn + modificadores)
   ========================================================================== */

.mwm-btn {
	align-items: center;
	border: 2px solid transparent;
	border-radius: var(--horizonte-radius-sm);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--horizonte-font-body);
	font-size: 14px;
	font-weight: 500;
	gap: 8px;
	justify-content: center;
	line-height: 1.5rem;
	padding: 8px 16px !important;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.mwm-btn a:hover{
	text-decoration: none;
}

.mwm-btn a {
	margin-top: 0;
}

.mwm-btn:focus-visible {
	outline: 2px solid var(--horizonte-color-principal);
	outline-offset: 2px;
}

.mwm-btn__primary {
	background-color: var(--horizonte-color-resalto);
	color: var(--horizonte-morado-oscuro);
}

.mwm-btn__primary:hover,
.mwm-btn__primary:focus-visible {
	background-color: var(--horizonte-color-secundario);
	color: var(--horizonte-color-blanco);
}

.mwm-btn__secondary {
	background-color: var(--horizonte-color-principal);
	color: var(--horizonte-color-blanco);
}

.mwm-btn__secondary:hover,
.mwm-btn__secondary:focus-visible {
	background-color: var(--horizonte-color-secundario);
	color: var(--horizonte-color-blanco);
}

.mwm-btn__outline {
	width: fit-content;
	background-color: transparent;
	border-color: var(--horizonte-color-secundario);
	color: var(--horizonte-color-secundario);
}

.mwm-btn__outline:hover,
.mwm-btn__outline:focus-visible {
	background-color: var(--horizonte-color-resalto);
	color: var(--horizonte-morado-oscuro);
	border-color: var(--horizonte-color-resalto);

}
