/**
 * Utility classes and the accessibility helpers WordPress expects.
 *
 * Single-purpose classes only. Anything that grows past one declaration
 * belongs in components.css.
 */

/* ===============================================================
 * Accessibility helpers
 * =============================================================== */

/**
 * Visually hidden but available to assistive technology.
 * .screen-reader-text is the class WordPress core markup emits; .sr-only is
 * the alias used in theme markup. Both must exist.
 */
.screen-reader-text,
.sr-only {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * Hidden until focused — for controls that should surface on keyboard
 * navigation only.
 */
.sr-only--focusable:focus,
.sr-only--focusable:focus-visible,
.screen-reader-text:focus {
	position: static !important;
	inline-size: auto;
	block-size: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
	white-space: normal;
}

/* Removed from the accessibility tree as well as the layout. */
[hidden],
.is-hidden {
	display: none !important;
}

/* Decorative elements — hide from AT with aria-hidden in the markup too. */
.is-decorative {
	pointer-events: none;
	user-select: none;
}

/* ===============================================================
 * Text
 * =============================================================== */
.text-start {
	text-align: start;
}

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

.text-end {
	text-align: end;
}

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

.text-primary {
	color: var(--color-primary);
}

.text-danger {
	color: var(--color-danger);
}

/*
 * No .text-success utility is provided on purpose: --color-success is 4.4:1 on
 * white, which clears AA for large text (3:1) but not for normal body text
 * (4.5:1). Use it on icons, borders and headings rather than small text.
 */

.text-balance {
	text-wrap: balance;
}

.text-pretty {
	text-wrap: pretty;
}

.text-uppercase {
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.text-nowrap {
	white-space: nowrap;
}

/* Clamp to a set number of lines. */
.text-truncate {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--lines, 2);
	line-clamp: var(--lines, 2);
	overflow: hidden;
}

.font-medium {
	font-weight: var(--weight-medium);
}

.font-semibold {
	font-weight: var(--weight-semibold);
}

.font-bold {
	font-weight: var(--weight-bold);
}

/* ===============================================================
 * Surfaces
 * =============================================================== */
.bg-alt {
	background-color: var(--color-bg-alt);
}

.rounded-sm {
	border-radius: var(--radius-sm);
}

.rounded-md {
	border-radius: var(--radius-md);
}

.rounded-lg {
	border-radius: var(--radius-lg);
}

.rounded-pill {
	border-radius: var(--radius-pill);
}

.shadow-sm {
	box-shadow: var(--shadow-sm);
}

.shadow-md {
	box-shadow: var(--shadow-md);
}

.bordered {
	border: var(--border-width) solid var(--color-border);
}

/* ===============================================================
 * Spacing — logical, so RTL is handled automatically
 * =============================================================== */
.mt-0 {
	margin-block-start: var(--space-0);
}

.mt-2 {
	margin-block-start: var(--space-2);
}

.mt-4 {
	margin-block-start: var(--space-4);
}

.mt-6 {
	margin-block-start: var(--space-6);
}

.mt-8 {
	margin-block-start: var(--space-8);
}

.mb-0 {
	margin-block-end: var(--space-0);
}

.mb-2 {
	margin-block-end: var(--space-2);
}

.mb-4 {
	margin-block-end: var(--space-4);
}

.mb-6 {
	margin-block-end: var(--space-6);
}

.mb-8 {
	margin-block-end: var(--space-8);
}

.mx-auto {
	margin-inline: auto;
}

/* ===============================================================
 * Sizing
 * =============================================================== */
.w-full {
	inline-size: 100%;
}

.max-w-content {
	max-inline-size: var(--content-max);
}

/*
 * Strips list chrome while keeping list semantics, so a group that is genuinely
 * a list can stay a <ul> and still be laid out as a grid or a row. Also cancels
 * the prose rhythm typography.css puts on li + li.
 */
.list-plain {
	padding: 0;
	margin: 0;
	list-style: none;
}

.list-plain > li + li {
	margin-block-start: 0;
}

/* Reserve image space to prevent layout shift. */
.aspect-video {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.aspect-square {
	aspect-ratio: 1;
	object-fit: cover;
}

/* ===============================================================
 * WordPress core classes
 *
 * Required for editor content to render correctly. Do not remove.
 * =============================================================== */
.alignleft {
	float: left;
	margin-inline-end: var(--space-6);
	margin-block-end: var(--space-4);
}

.alignright {
	float: right;
	margin-inline-start: var(--space-6);
	margin-block-end: var(--space-4);
}

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

.alignwide {
	max-inline-size: var(--container-max);
}

.alignfull {
	max-inline-size: none;
}

.wp-caption {
	max-inline-size: 100%;
}

.wp-caption-text {
	color: var(--color-text-light);
	font-size: var(--text-sm);
	text-align: center;
}

.sticky,
.bypostauthor {
	/* Required by the WordPress theme review guidelines. */
	position: relative;
}