/* shared.css */
/* Utility classes that can be used globally across components */
@import "../components/font-size.css";
@import "../components/text-color.css";
@import "../components/buttons.css";
@import "../components/inputs.css";
@import "../components/forms.css";
@import "../components/content-panel.css";
@import "../components/logo.css";
@import "../layout/header.css";
@import "../layout/footer.css";
@import "../components/content-section.css";
@import '../components/background-container.css';
@import '../components/links.css';
@import '../components/active-marker.css';
@import '../components/text-spacing.css';
@import '../components/underline.css';
@import '../components/sticky.css';
@import '../components/media.css';
@import '../components/checkbox.css';


/* Utility classes — must always win over component display rules
   (e.g. .modal-overlay's display:flex), hence !important. */
.invisible {
	display: none !important;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.visible {
	opacity: 1;
	transition: opacity 0.3s ease;
}

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

.justify {
	text-align: justify !important;
	/* Justify alone stretches inter-word spaces into "rivers". Automatic
	   hyphenation lets long words break at syllable boundaries so lines fill
	   evenly with normal spacing — book-like. Uses the page's <html lang> for
	   language-correct break points; -webkit- prefix for Safari. */
	-webkit-hyphens: auto;
	hyphens: auto;
}

.align-left {
	text-align: left !important;
}

.align-right {
	text-align: right !important;
}

.inline-block {
	display: inline-block !important;
}

.cursor-wait {
	cursor: wait !important;
}

.cursor-pointer {
	cursor: pointer;
}

.text-uppercase {
	text-transform: uppercase;
	letter-spacing: 0.04em;   /* sia step-2.5: refined tracking on uppercase eyebrow labels */
}

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

.animate {
	animation: var(--default-animation);
}


.label {
  display: block;
  width: 100%;
}

/* ---------- Inline-style replacement utility classes ---------- */

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

.form-error-spacing {
	margin-top: 4px;
}

.divider {
	margin-top: 2rem;
	margin-bottom: 2rem;
	border: 0;
	border-bottom: 1px solid var(--brand-ink);
}

.bordered-box {
	border: 1px solid var(--brand-ink);
	padding: 1rem;
	margin-bottom: 1rem;
}

.btn-unstyled {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
}

.modal-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--z-lightbox);
	background: rgba(0, 0, 0, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}