/*
 * a11y.css — THE ONLY STYLESHEET IN THIS THEME THAT IS NOT COPIED FROM PRODUCTION.
 *
 * css/travel.css and css/ng-globals.css at the web root are production's files byte-for-byte.
 * They are the visual contract the whole gate exists to defend, so they are read-only. Every
 * accessibility fix that genuinely needs CSS lives here instead, and nothing else does.
 *
 * THE RULE FOR EVERY RULE IN THIS FILE: it must not change the page a sighted visitor sees at
 * rest. That is not a style preference, it is what keeps the VRT gate honest — a screenshot is
 * taken with nothing focused and nothing hovered, so anything scoped to :focus-visible or
 * :focus-within is invisible to it, and anything not so scoped does not belong here.
 *
 * Verified: adding this file left the desktop @vrt run at its exact baseline (6 known failures,
 * the same 6). If a rule below ever moves a pixel, it is the rule that is wrong, not the golden.
 */

/* ---------------------------------------------------------------------------
 * 1. Skip to content (WCAG 2.4.1)
 *
 * The header puts roughly forty links — two social bars, seven nav items with dropdowns, a
 * search, a phone number, a CTA — in front of the content on EVERY page. Without a skip link a
 * keyboard or screen-reader user tabs through all of it again on each navigation.
 *
 * Hidden by clip rather than `display: none`: a display-none element is removed from the
 * accessibility tree AND from the tab order, so it would never receive the focus that is
 * supposed to reveal it. clip-path keeps it focusable and silent.
 *
 * On focus it becomes a real, visible, high-contrast button pinned to the top-left. That IS a
 * visual change — and it happens only while it holds focus, which a screenshot never does.
 * ------------------------------------------------------------------------ */
.agt-skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10000;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	background: #000;
	color: #fff;
	font-family: var(--font-body, sans-serif);
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: underline;
}

.agt-skip-link:focus {
	width: auto;
	height: auto;
	padding: 12px 20px;
	overflow: visible;
	clip-path: none;
	outline: 3px solid #fff;
	outline-offset: -6px;
}

/* ---------------------------------------------------------------------------
 * 2. Header dropdowns reachable by keyboard (WCAG 2.1.1)
 *
 * travel.css:622 hides `.agt-header__dropdown` with `visibility: hidden` and reveals it on
 * `:hover` only. visibility:hidden also removes its links from the tab order, so the six
 * submenu destinations (About us, Our experts, Get in touch, and the rest) were reachable with
 * a mouse and by no other means at all.
 *
 * `:focus-within` on the same list item, with the same three declarations the hover rule uses,
 * so a keyboard produces exactly what a mouse produces. Nothing changes until something inside
 * the item has focus.
 * ------------------------------------------------------------------------ */
.agt-header__nav-item.has-dropdown:focus-within .agt-header__dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* ---------------------------------------------------------------------------
 * 3. Focus indicators that travel.css removes and does not replace (WCAG 2.4.7)
 *
 * Nine `outline: none` declarations in travel.css. Most are fine — they swap the ring for a
 * border-colour change plus a 3px box-shadow, which is a visible indicator. These three swap it
 * for NOTHING, leaving a control that can hold focus with no way to see that it does:
 *
 *   travel.css:7260  .australia-map__state:focus     — the eight tabbable state paths
 *   travel.css:8013  .blog-search-bar__input         — outline killed in the resting rule
 *   (header search)  .agt-header__search-input       — no focus style of any kind
 *
 * :focus-visible, not :focus, so a mouse click does not draw a ring the design never had.
 * ------------------------------------------------------------------------ */
.australia-map__state:focus-visible {
	outline: 3px solid #000;
	outline-offset: 2px;
}

.blog-search-bar__input:focus-visible,
.agt-header__search-input:focus-visible {
	outline: 2px solid var(--agt-orange, #c4582c);
	outline-offset: -2px;
}

/* ---------------------------------------------------------------------------
 * 4. Honour prefers-reduced-motion (WCAG 2.3.3, and part of 2.2.2)
 *
 * travel.css has no reduced-motion branch at all. Two things it does that this covers:
 *
 *   travel.css:4917  .why-agt__image   animation: 10s ease-in-out INFINITE zoomInOut
 *   travel.css:98    html { scroll-behavior: smooth }
 *
 * Infinite motion with no way to stop it is exactly what 2.3.3 is about, and a vestibular
 * visitor who has set the OS switch currently gets it anyway.
 *
 * Not `@keyframes moveText` (travel.css:5187), which looks like the marquee and is not: nothing
 * in either stylesheet ever references it, and the marquee actually moves by rAF setting an
 * inline transform (components/marquee.php). Dead CSS, copied verbatim like the rest, left
 * alone. The real marquee is guarded in its own component.
 *
 * PIXEL-NEUTRAL BY CONSTRUCTION, which is why it belongs in this phase: the whole block sits
 * behind a media query the gate never matches. Playwright's default is
 * `reducedMotion: 'no-preference'` and the config does not override it, so every golden is taken
 * with these rules inert. Verified: desktop @vrt stayed on its exact baseline.
 *
 * `animation-play-state: paused` on the two infinite ones rather than `animation: none`: paused
 * holds the CURRENT frame, so a visitor who sets the preference mid-visit sees the image stay
 * where it is instead of snapping back to scale(1). Everything else keeps a 0.01ms duration
 * rather than `none`, because a real `transitionend`/`animationend` listener still has to fire —
 * killing the event is how a reduced-motion rule breaks a carousel that waits on it.
 *
 * DOES NOT COVER anything driven by script: the marquee's rAF, and the setInterval autoplay in
 * components/testimonials.php, components/why-agt.php and the tour carousel. CSS cannot stop a
 * timer. Each of those checks the same media query itself at its own call site.
 * ------------------------------------------------------------------------ */
@media ( prefers-reduced-motion: reduce ) {
	html {
		scroll-behavior: auto;
	}

	/* The one infinite animation, paused rather than removed. Higher specificity than the
	 * universal rule below, so this is what applies to it. */
	.why-agt__image {
		animation-play-state: paused;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
		transition-duration: 0.01ms;
		scroll-behavior: auto;
	}
}