/*
 * The accessibility floor — story 1.7's last two criteria.
 *
 * NOT VENDORED, and the split is deliberate. `tokens.css` is a generated copy the
 * checker holds byte-for-byte against the brand kit; this file is written here
 * because the floor is about how a WordPress page BEHAVES, and the brand kit has
 * no opinion about `wp_body_open` or a Bricks section wrapper. Anything in here
 * that turns out to belong to every consumer of the brand kit should move there,
 * and then it stops being editable.
 *
 * Everything below carries the rule it satisfies, because a floor whose reasons
 * are not written down is a floor somebody optimises away.
 */

/* ─────────────────────────────────────────────────────────
   REDUCED MOTION IS HONOURED BY DEFAULT, NOT AS AN OPT-IN
   ─────────────────────────────────────────────────────────

   The story says "by default and not as an opt-in", and the difference is which
   way round the query goes. The common pattern asks for `prefers-reduced-motion:
   reduce` and switches animation OFF, which means a browser that reports nothing
   — an old one, a privacy tool that strips the hint, a webview — gets the motion.
   The default is then "animate", and the accessible case is the exception.

   `no-preference` inverts it: motion is switched ON only where the visitor has
   actively said they do not mind. Silence means stillness. The design system
   already does this in `src/styles/global.css` and it is carried here so a page
   built in Bricks inherits it rather than depending on a component to remember.

   Bricks' own interactions and any third-party animation land in here too, which
   is the point — the floor holds for markup this repository never wrote. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

html {
	scroll-behavior: auto;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ─────────────────────────────────────────────────────────
   TOUCH TARGETS ARE AT LEAST 44 PIXELS
   ─────────────────────────────────────────────────────────

   WCAG 2.2 AA asks for 24; the design system asks for 44, which is the figure in
   the story and the one that matters outside a pharmacy in the rain. Applied to
   what is actually pressable rather than to every element, because inflating an
   inline link inside a paragraph breaks the line box and moves the text.

   `--space-44px` comes from the vendored token set, so this reads the brand kit's
   figure rather than repeating it. */
button,
[type='button'],
[type='submit'],
[type='reset'],
[role='button'],
select,
summary,
.mlc-tap-target {
	min-block-size: var(--space-44px);
	min-inline-size: var(--space-44px);
}

/* An input is pressable but sizes from its own line height, so it takes the floor
   on height alone — a 44px-wide text field would be unusable.

   The exclusions sit inside :where() so they add nothing to the rule's weight. Written
   as five :not()s they outranked any component's own rule for its field, so the home
   hero's 54px search box rendered at 44px with the rule in place and no error
   (measured 18 Sep 2026). A floor is the least a field gets, never a ceiling. */
input:where(:not([type='button']):not([type='submit']):not([type='reset']):not([type='checkbox']):not([type='radio'])),
textarea {
	min-block-size: var(--space-44px);
}

/* A checkbox or radio is a small control with a large LABEL, and enlarging the box
   itself is the wrong fix — the hit area belongs to the pair. */
label:has(> input[type='checkbox']),
label:has(> input[type='radio']) {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--space-44px);
	gap: var(--space-2);
}

/* ─────────────────────────────────────────────────────────
   THE FOCUS RING IS VISIBLY RENDERED
   ─────────────────────────────────────────────────────────

   `tokens.css` sets `:focus-visible` already. Two things are added here that a
   token file cannot know about.

   First, `outline` is reinstated rather than assumed: a reset — Bricks', a
   plugin's, or a component's — removing it is the single most common way a
   keyboard user loses their place, and it fails silently for everyone who uses a
   mouse. Stating it at the theme level means a component has to work to undo it.

   Second, `:focus:not(:focus-visible)` explicitly draws NOTHING, so a mouse click
   does not leave a ring behind. Without it the honest fix above is usually
   reverted on the grounds that it "looks broken". */
:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) {
	outline: none;
}

/* On a dark ground the navy ring disappears into it. */
.mlc-on-dark :focus-visible,
[data-mlc-tone='dark'] :focus-visible {
	outline-color: var(--color-accent);
}

/* ─────────────────────────────────────────────────────────
   A SKIP LINK EXISTS
   ─────────────────────────────────────────────────────────

   Carried from the design system's own rule. It is off-screen rather than
   `display: none`, because a hidden element is not focusable and a skip link that
   cannot be focused is decoration.

   The markup is printed on `wp_body_open` in `functions.php`, so it exists on
   every page a Bricks template renders without anybody adding it to a template. */
.mlc-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: var(--space-2) var(--space-4);
	background: var(--color-primary);
	color: var(--color-on-dark-heading, #fff);
	font-family: var(--font-body);
	font-weight: 700;
	text-decoration: none;
}

.mlc-skip-link:focus {
	left: 0;
}

/* ─────────────────────────────────────────────────────────
   THE PAGE NEVER SCROLLS SIDEWAYS
   ─────────────────────────────────────────────────────────

   "A wide result or option list scrolls within its own container so the page never
   scrolls sideways." Stated as a floor rather than left to each component, because
   a single overflowing table on one page kind is enough to break every page that
   shares its template, and nobody tests for it on a phone.

   `overflow-x: clip` rather than `hidden`: `hidden` on `html` creates a scroll
   container, which silently breaks `position: sticky` on anything inside it —
   including the booking rail `--container-wide` exists for. */
html {
	overflow-x: clip;
}

.mlc-scroll-x {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}