/**
 * Utilities.
 *
 * The last cascade layer, so a utility always beats a component without
 * !important.
 *
 * Deliberately small. This is not a utility-first system: anything used more
 * than a few times should become a component instead. The set here covers the
 * cases that genuinely do not justify one — accessibility helpers, alignment
 * and WordPress core alignment classes.
 */

@layer ajp.utilities {

	/* ----------------------------------------------------------------------
	 * Accessibility
	 * -------------------------------------------------------------------- */

	/* Visually hidden but available to screen readers. Used for the accessible
	 * name of icon-only controls and for headings that label a landmark. */
	.ajp-visually-hidden,
	.screen-reader-text {
		position: absolute !important;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	/* Becomes visible on focus, for skip links and similar. */
	.ajp-visually-hidden-focusable:not(:focus):not(:focus-within) {
		position: absolute !important;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	/* ----------------------------------------------------------------------
	 * Display
	 * -------------------------------------------------------------------- */

	.ajp-hidden { display: none !important; }

	/* Matches the hidden attribute, which the navigation script toggles. */
	[hidden] { display: none !important; }

	/* ----------------------------------------------------------------------
	 * Text
	 * -------------------------------------------------------------------- */

	.ajp-text-center { text-align: center; }
	.ajp-text-muted  { color: var(--ajp-color-muted); }
	.ajp-text-meta   { font-size: var(--ajp-text-meta); }

	/* Cap line length on a block of prose that is not inside .ajp-prose. */
	.ajp-measure { max-width: var(--ajp-measure); }

	/* Centre a constrained block. */
	.ajp-center-block { margin-inline: auto; }

	/* ----------------------------------------------------------------------
	 * WordPress core alignment classes
	 *
	 * Emitted by the editor and by the_content(); the theme has to style them
	 * even though it never writes them itself.
	 * -------------------------------------------------------------------- */

	.alignleft {
		float: left;
		margin: 0 var(--ajp-space-5) var(--ajp-space-4) 0;
	}

	.alignright {
		float: right;
		margin: 0 0 var(--ajp-space-4) var(--ajp-space-5);
	}

	.aligncenter {
		display: block;
		margin-inline: auto;
	}

	.alignwide {
		max-width: var(--ajp-container-max);
	}

	.alignfull {
		max-width: none;
	}

	.wp-caption {
		max-width: 100%;
	}

	.wp-caption-text {
		margin-top: var(--ajp-space-2);
		color: var(--ajp-color-muted);
		font-size: var(--ajp-text-meta);
	}

	/* Clear floats introduced by alignleft/alignright. */
	.ajp-clearfix::after {
		content: "";
		display: table;
		clear: both;
	}
}