/**
 * Shared global components and visual utilities.
 */

.df-glass {
	border: 0.0625rem solid rgba(255, 255, 255, 0.68);
	background: var(--df-color-glass);
	box-shadow: var(--df-shadow-md);
	backdrop-filter: blur(var(--df-glass-blur)) saturate(130%);
	-webkit-backdrop-filter: blur(var(--df-glass-blur)) saturate(130%);
}

.df-glass--strong {
	background: var(--df-color-glass-strong);
}

.df-glass--dark {
	border-color: var(--df-color-line-light);
	background: var(--df-color-glass-dark);
	box-shadow: var(--df-shadow-lg);
}

.df-eyebrow {
	display: flex;
	align-items: center;
	gap: var(--df-space-3);
	margin: 0 0 var(--df-space-5);
	color: var(--df-color-taupe);
	font-size: var(--df-font-size-xs);
	font-weight: var(--df-font-weight-bold);
	letter-spacing: var(--df-letter-spacing-label);
	line-height: 1.3;
	text-transform: uppercase;
}

.df-eyebrow::before {
	content: "";
	flex: 0 0 1.375rem;
	height: 0.0625rem;
	background: currentColor;
}

.df-display {
	font-family: var(--df-font-serif);
	font-size: var(--df-font-size-display);
	font-weight: var(--df-font-weight-semibold);
	line-height: var(--df-line-height-tight);
	letter-spacing: var(--df-letter-spacing-tight);
}

.df-lead {
	color: var(--df-color-muted);
	font-size: var(--df-font-size-md);
	line-height: var(--df-line-height-loose);
}

.df-muted {
	color: var(--df-color-muted);
}

.df-visually-hidden {
	position: absolute !important;
	width: 0.0625rem !important;
	height: 0.0625rem !important;
	padding: 0 !important;
	margin: -0.0625rem !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.df-skip-link {
	position: fixed;
	z-index: var(--df-z-skip-link);
	top: -6.25rem;
	left: var(--df-space-5);
	padding: var(--df-space-3) var(--df-space-5);
	border-radius: var(--df-radius-sm);
	background: var(--df-color-ink);
	color: var(--df-color-white);
	transition: top var(--df-duration-fast) var(--df-ease);
}

.df-skip-link:focus {
	top: var(--df-space-5);
}