/*
 * 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--cream);
		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--gold-dark);
	}
}

.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;
}

/* Buttons used by theme components (block buttons are styled in blocks.css). */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 26px;
	border: 1.5px solid transparent;
	border-radius: var(--wp--custom--radius-small);
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.button--primary {
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--white);

	&:hover {
		background: var(--wp--preset--color--ink);
		color: var(--wp--preset--color--white);
	}
}

.button--secondary {
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);

	&:hover {
		background: var(--wp--preset--color--ink);
		color: var(--wp--preset--color--cream);
	}
}

.button--gold {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);

	&:hover {
		background: var(--wp--preset--color--line-strong);
		color: var(--wp--preset--color--ink);
	}
}