/* ==========================================================================
   Accessibility — Focus Indicators, Skip Link, Touch Targets, Reduced Motion
   Loaded after sages.css. All a11y-specific CSS lives here.
   ========================================================================== */

/* --- Focus Indicators --------------------------------------------------- */

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex="0"]:focus-visible {
	outline: 3px solid var(--wa-color-brand-fill-loud);
	outline-offset: 2px;
}

wa-button:focus-visible::part(base),
wa-input:focus-visible::part(base),
wa-tab:focus-visible::part(base) {
	outline: 3px solid var(--wa-color-brand-fill-loud);
	outline-offset: 2px;
}

.sages-sidebar-close:focus-visible {
	outline: 3px solid var(--wa-color-brand-fill-loud);
	outline-offset: 2px;
}

/* --- Skip Link ---------------------------------------------------------- */

.skip-link {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0.75rem 1.5rem;
	background: var(--wa-color-brand-fill-loud);
	color: var(--wa-color-brand-on-loud);
	font-weight: 600;
	z-index: 10000;
	transform: translateY(-100%);
	transition: transform 0.2s ease;
}

.skip-link:focus {
	transform: translateY(0);
}

/* --- Heading Hierarchy -------------------------------------------------- */

.brand-h1 {
	display: inline-flex;
	align-items: center;
	margin: 0;
}

/* --- SVG Node Focus Ring ------------------------------------------------ */

.node:focus .node-bg {
	stroke: var(--wa-color-brand-fill-loud);
	stroke-width: 3;
	filter: drop-shadow(0 0 4px var(--wa-color-brand-fill-loud));
}

.node:focus {
	outline: none;
}

/* --- Touch Targets ------------------------------------------------------ */

.banner-dismiss {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.sages-sidebar-close {
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* --- Reduced Motion ----------------------------------------------------- */

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