/**
 * UN ChromaLab — Tint utility classes.
 *
 * Drop-in classes that colour any element from the currently-selected ChromaLab
 * filter colour. The colour is mirrored into the `--un-chroma-color` custom
 * property of these classes (one injected rule, never :root — see
 * assets/js/un-chroma-tint.js, driven by the `chromalab:color` event). While no colour is active the property is unset and each element falls
 * back to its natural colour — or to an author-supplied `--un-chroma-fallback`.
 *
 * Usage (Elementor → Advanced → CSS Classes, or any theme-part markup):
 *   .un-chroma-fg      → text colour
 *   .un-chroma-bg      → background colour
 *   .un-chroma-fill    → SVG fill (e.g. the header logo)
 *   .un-chroma-border  → border colour
 *   .un-chroma-only    → hidden on pages without a ChromaLab wheel (see bottom)
 *
 * Per-element idle colour: set `--un-chroma-fallback: <color>` on the element.
 * Sticky-header example: target `.is-sticky .un-chroma-fill` to tint the logo
 * only once the header detaches (the sticky class is toggled by un-site-logo.js).
 *
 * Self-contained: no dependency on tokens.css, so it is safe to load site-wide.
 */

.un-chroma-fg {
	color: var(--un-chroma-color, var(--un-chroma-fallback, inherit));
	transition: color 0.25s ease;
}

.un-chroma-bg {
	background-color: var(--un-chroma-color, var(--un-chroma-fallback, transparent));
	transition: background-color 0.25s ease;
}

.un-chroma-fill {
	fill: var(--un-chroma-color, var(--un-chroma-fallback, currentColor));
	transition: fill 0.25s ease;
}

.un-chroma-fill path,
.un-chroma-fill rect,
.un-chroma-fill circle,
.un-chroma-fill polygon {
	fill: inherit;
	transition: fill 0.25s ease;
}

.un-chroma-border {
	border-color: var(--un-chroma-color, var(--un-chroma-fallback, currentColor));
	transition: border-color 0.25s ease;
}

/* While a ChromaLab wheel is dragged the colour changes every frame: follow the
 * finger exactly instead of restarting a 0.25s transition on each frame
 * (html.is-chroma-dragging is set by chroma-channel.js / chroma-product.js). */
.is-chroma-dragging .un-chroma-fg,
.is-chroma-dragging .un-chroma-bg,
.is-chroma-dragging .un-chroma-fill,
.is-chroma-dragging .un-chroma-fill path,
.is-chroma-dragging .un-chroma-fill rect,
.is-chroma-dragging .un-chroma-fill circle,
.is-chroma-dragging .un-chroma-fill polygon,
.is-chroma-dragging .un-chroma-border {
	transition: none;
}

/* ---------------------------------------------------------------------------
 * ChromaLab presence gate — `.un-chroma-only`
 *
 * Hides an element on every page where the ChromaLab wheel does NOT render.
 * `has-chromalab` is emitted by un_chromalab_body_class() from the very same
 * predicate the wheel widget guards itself with (un_chroma_wheel_shows()), so
 * this can never drift from what is actually on screen: parent categories that
 * list sub-category tiles, non-colour listings and plain pages all lack it.
 *
 * Typical use: the mobile "ChromaLab" reveal button (an icon box opening the
 * ChromaLab popup) — pointless on a page with no colour grid to filter.
 * Add via Elementor → Advanced → CSS Classes.
 * ------------------------------------------------------------------------- */

body:not(.has-chromalab) .un-chroma-only {
	display: none !important;
}

/* ---------------------------------------------------------------------------
 * Rainbow line — `.un-rainbow-border`
 *
 * A thin rainbow line (the UN logo's colour ring laid out flat, red → magenta)
 * in place of the button's bottom border. Put the class on an Elementor / The7
 * Button widget (Advanced → CSS Classes) or directly on any <a>/<button>.
 * `--un-rainbow` is reusable on its own: background-image: var(--un-rainbow).
 *
 * Drawn as an ::after laid over the 1px bottom border and spilling below the
 * box, so it never eats into the padding (text stays visually centred) and
 * never shifts layout.
 * ------------------------------------------------------------------------- */

:root {
	/* Sampled from the UN round logo, in hue order. */
	--un-rainbow: linear-gradient(90deg,
		#e3001b, #e07800, #e2d82a, #00d60f, #12d6d9, #1a14d8, #9b05e0, #e000b0);
}

:is(.un-rainbow-border .elementor-button, a.un-rainbow-border, button.un-rainbow-border) {
	position: relative;
}

:is(.un-rainbow-border .elementor-button, a.un-rainbow-border, button.un-rainbow-border)::after {
	content: "";
	position: absolute;
	left: -1px;   /* cover the 1px side borders' corners too */
	right: -1px;
	bottom: -3px; /* 1px over the bottom border + 2px below it = 3px line */
	height: 3px;
	background: var(--un-rainbow);
	pointer-events: none;
}