/*
  Accessibility / interface-guideline layer, loaded AFTER main.css + 768.css.
  Kept in its own file so the ported theme CSS stays untouched (visual parity
  with the live site) — everything here is either invisible to mouse users
  or only kicks in for keyboard / reduced-motion / touch users.
*/

/* Visually hidden but still read by screen readers. */
.sr-only {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
	}

/* Skip link: hidden until focused with the keyboard. */
.skip-link {
	position: fixed; z-index: 10000; top: 8px; left: 8px; padding: 10px 16px; background: #111; color: #fff; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; transform: translateY(-200%);
	}
.skip-link:focus-visible {
	transform: translateY(0); color: #fff;
	}

/* Keyboard focus ring. main.css strips outlines from a/a:focus/.button with
   no replacement; these selectors are at least as specific and load later,
   so they win — but only for :focus-visible (keyboard), never mouse clicks. */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid currentColor; outline-offset: 3px;
	}
/* Programmatic focus target after a page swap (see transitions.ts) —
   it's not interactive, so no ring. */
h1[tabindex="-1"]:focus {
	outline: none;
	}

/* Invalid contact-form fields (set by contact.ts). */
.contact-form [aria-invalid="true"] {
	border-bottom-color: #D44A4A !important;
	}

/* Contact info links (tel:/mailto:) keep the surrounding heading's look. */
.fun-fact a {
	color: inherit;
	}

/* Skill-bar numbers line up. */
.skill-unit .bar .progress span {
	font-variant-numeric: tabular-nums;
	}

/* Heading anchors inside markdown project posts clear the fixed close button. */
.entry-content :is(h2, h3, h4)[id] {
	scroll-margin-top: 80px;
	}

h1, h2, h3 {
	text-wrap: balance;
	}

a, button, [role="button"], input, textarea, select, label {
	touch-action: manipulation;
	}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
		}
	/* The home tagline scrolls via text-indent; finishing that animation
	   instantly would leave the text scrolled out of view, so drop it. */
	.home-marquee {
		animation: none !important;
		}
	}