/*
 * Utilities: accessibility helpers and WordPress alignment classes.
 */

/* Visually hidden but available to screen readers (WordPress core pattern). */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;

	&:focus {
		background: var(--wp--preset--color--white);
		clip-path: none;
		color: var(--wp--preset--color--ink);
		display: block;
		height: auto;
		left: 0.5rem;
		padding: 0.75rem 1rem;
		top: 0.5rem;
		width: auto;
		z-index: 100000;
		box-shadow: 0 0 0 2px var(--wp--preset--color--primary);
	}
}

.alignleft {
	float: inline-start;
	margin-inline-end: var(--wp--preset--spacing--30);
}

.alignright {
	float: inline-end;
	margin-inline-start: var(--wp--preset--spacing--30);
}

.aligncenter {
	margin-inline: auto;
}

/* Shared button look for theme links styled as buttons (CTA, hero, section links).
 * Every state sets its own colours (AGENTS.md rule 11). */
.button {
	display: inline-block;
	padding: 0.625em 1.25em;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 4px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;

	&:hover,
	&:focus-visible {
		background: var(--wp--preset--color--primary-dark);
		border-color: var(--wp--preset--color--primary-dark);
		color: var(--wp--preset--color--white);
	}
}

.button--light {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary-dark);

	&:hover,
	&:focus-visible {
		background: var(--wp--preset--color--surface);
		border-color: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--primary-dark);
	}
}