/*
 * Kotlet — utilities.
 *
 * One job per class, and that job is visible from the name. Utilities sit in the
 * second-to-last layer, so they override component rules without !important and
 * user CSS in the overrides layer still beats them.
 *
 * Add a utility only when the same declaration is needed in three unrelated
 * places. Anything else belongs to a component.
 */
@layer utilities {
	/*
	 * Present for screen readers, invisible on screen. This is what WordPress'
	 * own .screen-reader-text does; the alias exists so theme markup does not have
	 * to use a core class name.
	 */
	.klt-visually-hidden,
	.screen-reader-text {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		border: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/*
	 * Visible only when focused. Keyboard users need this link; everyone else
	 * never sees it. Removing it breaks WCAG 2.4.1.
	 *
	 * It sits in this layer rather than in base.css because what hides it is the
	 * rule right above: a layer earlier in the cascade cannot take the clipping
	 * back off, however specific its selector is.
	 */
	.klt-skip-link:focus {
		position: fixed;
		top: var(--klt-space-s);
		left: var(--klt-space-s);
		z-index: 100;
		padding: var(--klt-space-xs) var(--klt-space-s);
		background: var(--klt-color-accent);
		color: var(--klt-color-accent-contrast);
		clip: auto;
		clip-path: none;
		width: auto;
		height: auto;
	}

	.klt-hidden {
		display: none;
	}

	.klt-text-center {
		text-align: center;
	}

	.klt-text-muted {
		color: var(--klt-color-muted);
	}

	.klt-text-s {
		font-size: var(--klt-text-s);
	}

	.klt-text-l {
		font-size: var(--klt-text-l);
	}

	.klt-flow-none > * + * {
		margin-block-start: 0;
	}

	/* Trim the space a band would otherwise add above or below itself. */
	.klt-mt-0 {
		margin-block-start: 0;
	}

	.klt-mb-0 {
		margin-block-end: 0;
	}
}