/* =============================================================================
 * VNM — mobile navigation disclosure, accessibility repair (A6 / hub#4279)
 * -----------------------------------------------------------------------------
 * WHAT WAS ACTUALLY BROKEN — and what was not.
 *
 * MEASURED FIRST, on dev at 414px with isMobile+hasTouch, using a real
 * touchscreen.tap at the burger's centre (not el.click(), which would bypass the
 * hit-testing this test exists to check):
 *
 *     before tap : nav display:none    0    x 0     visible links 0 / 3
 *     after  tap : nav display:block   372.6 x 169.4 visible links 3 / 3
 *     after tap 2: nav display:none    0    x 0     visible links 0 / 3
 *
 * So THE TOGGLE WORKS. A2's CSS-only checkbox disclosure opens, closes, does not
 * trap scroll (body overflow stays `visible`, the document stays scrollable),
 * pushes content rather than overlaying it (doc height 2372 -> 2554), and the
 * touch target is 44x44. None of that needed fixing and none of it was touched.
 * Anyone "fixing" this by rewriting the disclosure would have been repairing a
 * component that was already working, and would have said so in a green report.
 *
 * WHAT IS REALLY BROKEN is that only a POINTER can reach it:
 *
 *   1. `<input class="vnm-header__state" hidden>` — the `hidden` attribute
 *      applies `display:none`, and a `display:none` control is not focusable.
 *      Measured: `state.focus()` leaves `document.activeElement` elsewhere.
 *      The burger is a <label>, which is never in the tab order either. Net
 *      effect: at <=899px THERE IS NO KEYBOARD PATH TO THE PRIMARY NAVIGATION
 *      AT ALL. Not "awkward" — absent. WCAG 2.1.1 (Keyboard), level A.
 *   2. `<label class="vnm-header__burger" aria-hidden="true">` — the only
 *      control is explicitly removed from the accessibility tree, and the thing
 *      it toggles is display:none, so a screen-reader user is offered neither
 *      the menu nor the means to open it. WCAG 4.1.2 (Name, Role, Value).
 *   3. No visible focus indicator, because nothing could take focus.
 *
 * THE FIX IS TO STOP HIDING THE CONTROL FROM THE PLATFORM, not to add a
 * JavaScript menu. The checkbox stays the state, the label stays the affordance,
 * the CSS-only disclosure stays exactly as A2 built it — the input is merely
 * visually hidden in the one way that PRESERVES focusability. `opacity:0` +
 * offscreen-safe box, never `display:none`, never `visibility:hidden`, never
 * `hidden`: all three of those un-focus an element, which is the bug.
 *
 * A6 does not use !important anywhere in this file. This sheet is enqueued after
 * A2's vnm-chrome.css, so at equal specificity it already wins; A4 and A5 each
 * measured !important to be unnecessary on this estate and it was unnecessary
 * here too.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * The state checkbox: invisible, but a first-class focusable control.
 *
 * A2 declared `position:absolute; opacity:0; pointer-events:none` — correct, and
 * then the `hidden` ATTRIBUTE in the markup overrode all of it with the UA's
 * `[hidden]{display:none}`. A6 removes the attribute (see inc/blocks.php) and
 * pins the box here so an absolutely-positioned control with no offsets cannot
 * land somewhere that widens the document. `pointer-events:none` is deliberately
 * KEPT: the label is the hit target, and the measured tap already works.
 * -------------------------------------------------------------------------- */
.vnm-header__state {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

/* At >=900px the burger is display:none and the nav is permanently open, so a
   focusable toggle there would be a tab stop that does nothing observable — a
   keyboard trapdoor. Remove it from the tab order at exactly the width where it
   stops meaning anything, and nowhere else. */
@media (min-width: 900px) {
	.vnm-header__state {
		display: none;
	}
}

/* -----------------------------------------------------------------------------
 * The focus ring. The control that takes focus is invisible, so the ring has to
 * be drawn on the thing the user can actually see — its sibling label. `~` works
 * because A2 emits input, then label, then nav as siblings; that ordering is
 * also what makes `:checked ~ .vnm-header__nav` work, so it is not an accident
 * this lane is free to rely on.
 *
 * :focus-visible, not :focus — a mouse tap on the label moves focus to the
 * checkbox, and a ring flashing on every tap is noise. Browsers without
 * :focus-visible support simply do not match this rule and are no worse off than
 * before; the fallback is the current (absent) ring, never a broken layout.
 * -------------------------------------------------------------------------- */
.vnm-header__state:focus-visible ~ .vnm-header__burger {
	outline: 3px solid var(--vnm-brand, #8888ea);
	outline-offset: 3px;
	border-radius: 6px;
}

/* -----------------------------------------------------------------------------
 * The open panel's own focus states. The links inside the drawer were reachable
 * by tab only once the drawer was open — which, per the above, could never
 * happen. They get a real indicator now that they can be reached.
 * -------------------------------------------------------------------------- */
@media (max-width: 899px) {
	.vnm-header__nav a:focus-visible {
		outline: 2px solid var(--vnm-brand, #8888ea);
		outline-offset: -2px;
	}
}