/* Pristupacnost. Ucitava se zadnji da fokus prsten nadjaca sve ostalo. */

/* Dizajn ima dvije podloge, pa i dva fokus prstena.
   Zlatni na tamnom, broncani na pjescanom i bijelom. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--nv-focus-width) solid var(--nv-focus-dark);
	outline-offset: var(--nv-focus-offset);
	border-radius: var(--nv-focus-radius);
}

.nv-band--light :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.nv-search :where(a, button, input, select, textarea):focus-visible,
.nv-field :where(input, select, textarea):focus-visible {
	outline-color: var(--nv-focus-light);
}

/* Zlatni prsten na zlatnom gumbu se ne vidi — tamo ide tamni. */
.nv-btn:focus-visible {
	outline-color: var(--nv-ink-800);
}

.nv-btn--outline:focus-visible {
	outline-color: var(--nv-focus-dark);
}

.nv-band--light .nv-btn--outline:focus-visible {
	outline-color: var(--nv-focus-light);
}

.nv-skip {
	background: var(--nv-gold-500);
	color: var(--nv-ink-800);
	inset-inline-start: 50%;
	padding: var(--nv-s3) var(--nv-s5);
	position: absolute;
	transform: translate(-50%, -200%);
	z-index: 999;
}

.nv-skip:focus {
	transform: translate(-50%, 0);
}

.screen-reader-text {
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
	}
}