/**
 * Block muduex/tiempo: what every section shares.
 *
 * - Colour variables. On the sky (which does not change with the theme)
 *   everything is white; without a scene (the page without forecast and the
 *   card without sky) they come from the theme tokens, which follow the dark
 *   mode by themselves. Sections only use these variables and the fixed
 *   colours of the spec.
 * - .muduex-nivel: the warning level pill shared by the card and the bands
 *   (the level is written: colour is never the only cue).
 * - The focus ring on the sky, the page grid and scroll-margin-top.
 *
 * Each section has its own file (tarjeta.css, avisos.css, horas.css,
 * sol.css, luna.css, detalles.css and semana.css), declared in block.json.
 */

/* ---- Variables ------------------------------------------------------- */

/* On the sky every scene keeps white text at >= 5.08:1 at its lightest
   stop (theme style.css, «El cielo»): no translucent white is left for a
   softer tone, so --tiempo-suave is white too and secondary text differs
   by size and weight. */
.muduex-cielo {
	--tiempo-texto: #fff;
	--tiempo-suave: #fff;
	--tiempo-vidrio: rgba(0, 0, 0, 0.28);
	--tiempo-trazo: rgba(255, 255, 255, 0.22);
	--tiempo-foco: #fff;
	--tiempo-foco-ancho: 3px;
	--tiempo-foco-separacion: 2px;
	--tiempo-foco-sombra: 0 0 0 5px rgba(0, 0, 0, 0.55);
}

.muduex-tiempo--sin-datos,
.muduex-widget--tiempo:not(.muduex-widget--cielo) {
	--tiempo-texto: var(--muduex-texto);
	--tiempo-suave: var(--muduex-texto-secundario);
	--tiempo-vidrio: var(--muduex-tarjeta);
	--tiempo-trazo: var(--muduex-separador);
	--tiempo-foco: var(--muduex-acento);
	--tiempo-foco-ancho: 3px;
	--tiempo-foco-separacion: 2px;
	--tiempo-foco-sombra: none;
}

/* ---- Warning level pill (spec §5.3), the same in both themes ---------- */

.muduex-nivel {
	display: inline-block;
	padding: 0.125rem 0.625rem;
	border-radius: 999px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.375;
	white-space: nowrap;
}

/* The theme's severity tokens (style.css), which the colour palettes
   change; the fallbacks are the standard palette. */
.muduex-nivel--amarillo {
	background-color: var(--muduex-precaucion, #ffd60a);
	color: var(--muduex-precaucion-texto, #1c1c1e); /* 12.05:1 */
}

.muduex-nivel--naranja {
	background-color: var(--muduex-alerta, #ff9f0a);
	color: var(--muduex-alerta-texto, #1c1c1e); /* 8.28:1 */
}

.muduex-nivel--rojo {
	background-color: var(--muduex-peligro, #c0261d);
	color: var(--muduex-peligro-texto, #fff); /* 5.94:1 */
}

@media (forced-colors: active) {

	.muduex-nivel {
		border: 2px solid CanvasText;
	}
}

/* ---- Focus on the sky (spec §5.3) ------------------------------------ */

/* White ring with a dark halo, visible on every scene. .muduex-cielo clips
   (overflow: hidden): focusable things inside keep 8 px to the root's
   padding edge, and the scrolling strip draws its ring inwards. */
.muduex-tiempo.muduex-cielo :is(a, button, summary, [tabindex]):focus-visible {
	outline: var(--tiempo-foco-ancho) solid var(--tiempo-foco);
	outline-offset: var(--tiempo-foco-separacion);
	box-shadow: var(--tiempo-foco-sombra);
}

/* ---- Page grid -------------------------------------------------------- */

/* One column; from 40rem two, every section across both but «Sol» and
   «Luna», side by side when both are there. The margins of the sections
   keep the spacing they had in normal flow (no row gap). */
.muduex-tiempo {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 1rem;
}

@media (min-width: 40rem) {

	.muduex-tiempo {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.muduex-tiempo > [data-seccion] {
		grid-column: 1 / -1;
	}

	.muduex-tiempo > [data-seccion="sol"]:has(+ [data-seccion="luna"]),
	.muduex-tiempo > [data-seccion="sol"] + [data-seccion="luna"] {
		grid-column: auto;
	}
}

/* ---- Under the fixed header (WCAG 2.4.11) ----------------------------- */

/* The sticky header's height, as style.css «Calendar sheet» and
   carreteras.css measure it (one pixel less than the bar): a section
   reached from the index (muduex/indice) lands under it. */
.muduex-tiempo {
	--muduex-alto-cabecera: 48px;
	--muduex-bajo-cabecera: calc(var(--wp-admin--admin-bar--height, 0px) + var(--muduex-alto-cabecera));
}

@media (min-width: 1024px) and (max-width: 69.99rem) {

	.muduex-tiempo {
		--muduex-alto-cabecera: 112px;
	}
}

@media (min-width: 70rem) {

	.muduex-tiempo {
		--muduex-alto-cabecera: 56px;
	}
}

/* Up to 600 px the admin bar scrolls away and the header sticks at 0. */
@media screen and (max-width: 600px) {

	.muduex-tiempo {
		--muduex-bajo-cabecera: var(--muduex-alto-cabecera);
	}
}

.muduex-tiempo [data-seccion],
.muduex-tiempo :is(a, button, summary, [tabindex]) {
	scroll-margin-top: calc(var(--muduex-bajo-cabecera, 48px) + 1rem + var(--muduex-estas-en, 0px));
}

/* ---- The source line ---------------------------------------------------- */

/* The source is the theme's credit icon (Creditos), the only link in its
   line: a 48 px target (Global Constraints) through muduex-credito--48. */

/* ---- Print: still (spec §1, point 10) --------------------------------- */

/* The icons of the strip and the week, the strip's edge and the entrances
   stop on paper: nothing of the block animates in print. */
@media print {

	:is(.muduex-tiempo, .muduex-widget--tiempo),
	:is(.muduex-tiempo, .muduex-widget--tiempo) *,
	:is(.muduex-tiempo, .muduex-widget--tiempo) *::before,
	:is(.muduex-tiempo, .muduex-widget--tiempo) *::after {
		animation: none !important;
		transition: none !important;
	}
}