/* base custom global del theme */
html {
	scroll-behavior: smooth;
}

body {
	background: var(--mbn-surface-page);
	color: var(--mbn-text-primary);
	font-family: var(--wp--preset--font-family--roboto, "Roboto", sans-serif);
}

img,
svg {
	max-width: 100%;
}

a {
	color: var(--mbn-brand-blue);
}

:focus-visible {
	outline: 3px solid var(--mbn-brand-blue);
	outline-offset: 3px;
}

.site {
	display: flex;
	min-height: var(--mbn-viewport-height, 100vh);
	flex-direction: column;
}

.site-main {
	flex: 1 0 auto;
}

/* base.css declara `header { min-height: 100px; padding-bottom: 5px }` pensando
   en el header del sitio, pero la regla alcanza a todo <header>, y los
   encabezados de sección de card-grid, media-cards, news-search y
   procedure-search lo son. Con su `align-items: center`, el título quedaba
   centrado en una caja de 100px: ~23px de aire de más sobre cada título de la
   portada. Se anula solo dentro del contenido; el header del sitio no está en
   `main` y no cambia. */
.site-main header {
	min-height: 0;
	padding-bottom: 0;
}

.mbn-container {
	width: 100%;
	margin-inline: auto;
	padding-inline: 16px;
}

.skip-link {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 1080;
	transform: translateY(-160%);
	padding: 12px 16px;
	background: var(--mbn-surface-white);
	color: var(--mbn-text-primary);
}

.skip-link:focus {
	transform: translateY(0);
}

@media (min-width: 1200px) {
	.mbn-container {
		max-width: var(--mbn-width-content, 1120px);
		padding-inline: 0;
	}
}

/* Grupo de secciones de contenido del Contenido flexible: el `.mbn-container`
   que `mbn_components_render_flexible()` pone a los componentes `contained`
   seguidos (inc/components.php). Reproduce el andamiaje de las plantillas
   hermanas —siac.css, faq.css, participacion.css—: 24px arriba, 24px entre
   piezas y 36px abajo, los tokens --mbn-space-* de tokens.css. Con las migas
   dentro, esos 24 más sus 12 de relleno propio son los 36 que separan la fila
   de migas del header. */
.mbn-sections__group {
	display: flex;
	flex-direction: column;
	gap: var(--mbn-space-stack, 24px);
	padding-block: var(--mbn-space-page-top, 24px) var(--mbn-space-section, 36px);
}

/* Página sin secciones (page.php, rama the_content): el mismo andamiaje que
   las plantillas hermanas. Antes no tenía ninguno y el título quedaba pegado
   al header, con el margen de 22px que base.css le pone a todo h1. */
.mbn-page {
	padding-block: var(--mbn-space-page-top, 24px) var(--mbn-space-section, 36px);
}

.mbn-page > .mbn-container {
	display: flex;
	flex-direction: column;
	gap: var(--mbn-space-stack, 24px);
}

.mbn-page__title {
	margin: 0;
}

/* ---------- Enlaces y listas de documentos en texto del editor ----------
   Para el texto enriquecido que pinta mbn_component_rich_text()
   (inc/components.php): el cuerpo de un acordeón y el bloque de texto de
   `content-tabs`. El contenido migrado rotula los documentos con el nombre del
   archivo —una «palabra» de cien caracteres—, que en móvil salía de la caja.

   1. Los `<wbr>` del PHP dan cortes en `_`, `.`, `-` y `/`; `anywhere` es la
      reserva para un tramo que aun así no quepa. Sin efecto si cabe. */
:is(.mbn-accordion__body, .mbn-content-tabs__prose) a {
	overflow-wrap: anywhere;
}

/* 2. Bajo `md`, una lista que solo enlaza documentos (`.mbn-doc-list`, la marca
   el PHP) pasa de viñetas a filas: icono de documento a la izquierda, el
   nombre a todo el ancho que queda y una línea entre filas. Con la sangría y
   la viñeta, el nombre se quedaba en una columna de ~230px a 402.
   El icono es un `::before` con máscara en `currentColor`: el gris de la fila
   en modo normal y el blanco del barrido en alto contraste, sin regla propia
   en a11y.css (los pseudo-elementos quedan fuera del barrido, §6). */
@media (max-width: 767.98px) {
	:is(.mbn-accordion__body, .mbn-content-tabs__prose) .mbn-doc-list {
		padding-left: 0;
		list-style: none;
	}

	:is(.mbn-accordion__body, .mbn-content-tabs__prose) .mbn-doc-list > li {
		display: grid;
		grid-template-columns: 24px minmax(0, 1fr);
		column-gap: 12px;
		align-items: start;
		margin: 0;
		padding-block: 12px;
		border-top: 1px solid var(--mbn-border-divider, #E6E6E6);
		color: var(--mbn-icon-muted, #4D4D4D);
	}

	:is(.mbn-accordion__body, .mbn-content-tabs__prose) .mbn-doc-list > li:first-child {
		padding-top: 0;
		border-top: 0;
	}

	:is(.mbn-accordion__body, .mbn-content-tabs__prose) .mbn-doc-list > li:last-child {
		padding-bottom: 0;
	}

	:is(.mbn-accordion__body, .mbn-content-tabs__prose) .mbn-doc-list > li::before {
		content: "";
		width: 24px;
		height: 24px;
		background-color: currentColor;
		-webkit-mask-image: url("../images/components/icon-description.svg");
		mask-image: url("../images/components/icon-description.svg");
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: 24px 24px;
		mask-size: 24px 24px;
	}
}