/* The motion switch (inc/still.php). With html.ce-still, which is set when the
   visitor turned the switch on or the system asks for reduced motion, nothing
   moves: no transitions, no animations, no smooth scrolling. This is the
   safety net under the rules that are written for html:not(.ce-still) in the
   other files, so a transition added later is switched off too. Content that
   waits for a motion to appear is not hidden in this state (motion.css). */

html.ce-still,
html.ce-still *,
html.ce-still *::before,
html.ce-still *::after {
	scroll-behavior: auto !important;
	transition: none !important;
	animation: none !important;
}

/* The switch: a pill with the same shape and colors as the Menu pill (without
   its hover fill), so it reads as part of the site and not as an ad. The knob
   does not slide: with motion off the switch must not move either.

   Where it sits depends on the screen. From 600px up it floats in the lower
   right corner, under the menu lightbox and the loader (z-index 100000).
   --ce-still-lift is set by still.js and lifts it above the footer, where the
   legal links are. On a phone a floating pill would cover content, so there it
   is a compact pill in the header row instead (see below).

   The copies at the end of each section (--section, added by still.js) are for
   the keyboard, which would meet the floating pill only once, at the start of
   the page. They are invisible and can not be clicked, but they can be
   focused, and then they sit exactly where the floating pill sits (on a phone:
   where the top pill sits), one layer above it, so the focus looks like it is
   on the pill the visitor already sees. */
.ce-motion-toggle--float,
.ce-motion-toggle--section {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: calc(clamp(1rem, 3vw, 2rem) + var(--ce-still-lift, 0px));
	z-index: 50;
}

.ce-motion-toggle--section {
	z-index: 51;
	opacity: 0;
	pointer-events: none;
}

.ce-motion-toggle--section:focus-within {
	opacity: 1;
	pointer-events: auto;
}

@media (max-width: 599.98px) {
	.ce-motion-toggle--float {
		display: none !important;
	}
}

.ce-motion-toggle[hidden] {
	display: none !important;
}

/* Already asked for in the system: nothing left to switch. */
@media (prefers-reduced-motion: reduce) {
	.ce-motion-toggle {
		display: none !important;
	}
}

.ce-motion-toggle__button {
	--ce-toggle-bg: var(--wp--preset--color--background);
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	box-sizing: border-box;
	min-height: 2.75rem;
	padding: 0.4em 1em 0.4em 1.15em;
	border: 2px solid var(--ce-primary);
	border-radius: 999px;
	background: var(--ce-toggle-bg);
	color: var(--ce-primary);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	text-transform: lowercase;
	cursor: pointer;
}

/* No color change on hover, the pill stays quiet. The label is underlined, like
   the links of the site, so it still answers the pointer. */
.ce-motion-toggle__button:hover .ce-motion-toggle__label {
	text-decoration: underline;
	text-decoration-thickness: 0.06em;
	text-underline-offset: 0.2em;
}

.ce-motion-toggle__button:focus-visible {
	outline: 3px solid var(--ce-focus-ring);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--ce-focus-band);
}

.ce-motion-toggle__switch {
	position: relative;
	display: inline-block;
	flex: none;
	box-sizing: border-box;
	width: 2.25rem;
	height: 1.25rem;
	border: 2px solid currentColor;
	border-radius: 999px;
	background: transparent;
}

.ce-motion-toggle__switch::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 2px;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background: currentColor;
	transform: translateY(-50%);
}

.ce-motion-toggle__button[aria-pressed="true"] .ce-motion-toggle__switch {
	background: currentColor;
}

.ce-motion-toggle__button[aria-pressed="true"] .ce-motion-toggle__switch::before {
	left: calc(100% - 0.75rem - 2px);
	background: var(--ce-toggle-bg);
}

/* Top left, below 600px: the logo leaves once the page scrolls (html.ce-scrolled,
   navigation.css), and the switch comes in its place, with the logo's top and
   the Menu pill's height so the two line up. It has no outline, only the cream
   chip the logo has, so it sits quietly next to the Menu pill, and its text
   starts where the logo did. While it is out it is hidden, not only
   transparent, so it leaves the tab order and cannot be tapped by accident.
   With the lightbox open the logo is back, so the switch steps aside. */
.ce-motion-toggle--top {
	display: none;
}

@media (max-width: 599.98px) {
	.ce-motion-toggle--top {
		display: block;
		position: fixed;
		top: calc(var(--ce-header-pad-y) + var(--wp-admin--admin-bar--height, 0px));
		left: calc(var(--ce-header-pad-x, 1.25rem) - 0.75rem);
		z-index: 50;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition:
			opacity 0.25s ease,
			visibility 0s linear 0.25s;
	}

	html.ce-scrolled:not(.has-modal-open) .ce-motion-toggle--top {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition:
			opacity 0.25s ease,
			visibility 0s linear 0s;
	}

	.ce-motion-toggle--section {
		top: calc(var(--ce-header-pad-y) + var(--wp-admin--admin-bar--height, 0px));
		right: auto;
		bottom: auto;
		left: calc(var(--ce-header-pad-x, 1.25rem) - 0.75rem);
	}

	:is(.ce-motion-toggle--top, .ce-motion-toggle--section) .ce-motion-toggle__button {
		gap: 0.5rem;
		height: 2.84rem;
		padding-inline: 0.75rem;
		border: 0;
		font-size: 0.875rem;
		font-weight: 400;
	}
}