/* Accessible reading mode (inc/reading-mode.php).
   While it is on (html.rhr-a11y) the theme's and product cards' stylesheets
   are switched off, so everything below starts from the browser's plain
   page: one high contrast column in Atkinson Hyperlegible Next. The
   reader's settings (font, size, spacing, colours, line length, pictures)
   are attributes on <html>, set by the script in inc/reading-mode.php. */

/* Atkinson Hyperlegible Next, from the Braille Institute, and OpenDyslexic
   by Abbie Gonzalez, both under the SIL Open Font License (OFL.txt in each
   font's folder). The files only download once the mode is on and the font
   is chosen. */
@font-face {
	font-family: "Atkinson Hyperlegible Next";
	src: url(../fonts/atkinson-hyperlegible-next/atkinson-hyperlegible-next-400-normal.woff2) format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Atkinson Hyperlegible Next";
	src: url(../fonts/atkinson-hyperlegible-next/atkinson-hyperlegible-next-400-italic.woff2) format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Atkinson Hyperlegible Next";
	src: url(../fonts/atkinson-hyperlegible-next/atkinson-hyperlegible-next-700-normal.woff2) format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Atkinson Hyperlegible Next";
	src: url(../fonts/atkinson-hyperlegible-next/atkinson-hyperlegible-next-700-italic.woff2) format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "OpenDyslexic";
	src: url(../fonts/opendyslexic/opendyslexic-400-normal.woff2) format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "OpenDyslexic";
	src: url(../fonts/opendyslexic/opendyslexic-400-italic.woff2) format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "OpenDyslexic";
	src: url(../fonts/opendyslexic/opendyslexic-700-normal.woff2) format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "OpenDyslexic";
	src: url(../fonts/opendyslexic/opendyslexic-700-italic.woff2) format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

/* ---- With the mode off ---- */

/* The words written in a drawing, shown in its place in the plain layout. */
.rhr-art-label,
.rhr-reading-toggle__off,
.rhr-read-aloud__stop {
	display: none;
}

/* The button at the bottom of the page, small and in the handwriting. */
.rhr-reading-mode {
	margin: 1.4em 0 0;
	text-align: center;
	font-size: 0.75em;
}

.rhr-reading-toggle {
	padding: 0.2em 0.1em;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.rhr-reading-toggle:hover {
	color: var(--ink-blue, #1a5fb4);
}

/* ---- With the mode on ---- */

.rhr-a11y {
	--a11y-font: "Atkinson Hyperlegible Next", Verdana, Tahoma, sans-serif;
	--a11y-leading: 1.8;
	--a11y-tracking: 0.01em;
	--a11y-word: 0.04em;
	--a11y-measure: 42rem;
	/* Black on white. */
	--a11y-ink: #000;
	--a11y-paper: #fff;
	--a11y-link: #0b3fa8;
	--a11y-visited: #5b2a86;
	--a11y-line: #555;
	--a11y-bar: #ffd500;
	--a11y-bar-ink: #000;
	--a11y-focus: #ffd500;
	color-scheme: light;
	background: var(--a11y-paper);
	font-family: var(--a11y-font);
}

/* Fonts. */
.rhr-a11y[data-rhr-font="dyslexic"] {
	--a11y-font: "OpenDyslexic", Verdana, Tahoma, sans-serif;
	--a11y-tracking: 0;
	--a11y-word: 0;
}

.rhr-a11y[data-rhr-font="sans"] {
	--a11y-font: Verdana, Tahoma, "DejaVu Sans", sans-serif;
	--a11y-tracking: 0;
	--a11y-word: 0;
}

.rhr-a11y[data-rhr-font="serif"] {
	--a11y-font: Georgia, "Times New Roman", serif;
	--a11y-tracking: 0;
	--a11y-word: 0;
}

/* Line spacing, and letter and word spacing (the widest is the spacing
   WCAG 1.4.12 asks pages to cope with). */
.rhr-a11y[data-rhr-line="normal"] {
	--a11y-leading: 1.5;
}

.rhr-a11y[data-rhr-line="loose"] {
	--a11y-leading: 2.2;
}

.rhr-a11y[data-rhr-spacing="wide"] {
	--a11y-tracking: 0.06em;
	--a11y-word: 0.1em;
}

.rhr-a11y[data-rhr-spacing="wider"] {
	--a11y-tracking: 0.12em;
	--a11y-word: 0.16em;
}

/* Line length. The column is measured in rem, so it grows with the text and
   keeps about the same number of words to a line. */
.rhr-a11y[data-rhr-width="narrow"] {
	--a11y-measure: 32rem;
}

.rhr-a11y[data-rhr-width="wide"] {
	--a11y-measure: 58rem;
}

/* Colours. "Match the site" follows the site's dark mode (html.rhr-dark),
   which is on only when the reader tapped the moon. */
.rhr-a11y[data-rhr-colours="cream"] {
	--a11y-ink: #1b1a17;
	--a11y-paper: #fbf5e4;
	--a11y-link: #0a3a8c;
	--a11y-visited: #5b2a86;
	--a11y-line: #6b6455;
}

.rhr-a11y[data-rhr-colours="dark"],
.rhr-a11y.rhr-dark[data-rhr-colours="site"] {
	--a11y-ink: #f2f2f2;
	--a11y-paper: #121212;
	--a11y-link: #8cb8ff;
	--a11y-visited: #d2adff;
	--a11y-line: #9a9a9a;
	--a11y-bar: #262626;
	--a11y-bar-ink: #ffd84d;
	color-scheme: dark;
}



.rhr-a11y[data-rhr-colours="yellow"] {
	--a11y-ink: #ffeb00;
	--a11y-paper: #000;
	--a11y-link: #7fe7ff;
	--a11y-visited: #ffb3ff;
	--a11y-line: #ffeb00;
	--a11y-bar: #ffeb00;
	--a11y-focus: #7fe7ff;
	color-scheme: dark;
}

.rhr-a11y body {
	max-width: var(--a11y-measure);
	margin: 0 auto;
	padding: 0 1rem 3rem;
	background: var(--a11y-paper);
	color: var(--a11y-ink);
	font-size: 1.125rem;
	line-height: var(--a11y-leading);
	letter-spacing: var(--a11y-tracking);
	word-spacing: var(--a11y-word);
	text-align: left;
	overflow-wrap: break-word;
}

/* Nothing tilted, moving, layered, textured or in another font
   (WordPress's toolbar for signed-in writers is left alone). */
.rhr-a11y body > :not(#wpadminbar),
.rhr-a11y body > :not(#wpadminbar) *,
.rhr-a11y body > :not(#wpadminbar) *::before,
.rhr-a11y body > :not(#wpadminbar) *::after {
	box-sizing: border-box;
	font-family: inherit !important;
	transform: none !important;
	rotate: none !important;
	animation: none !important;
	transition: none !important;
	text-shadow: none !important;
	-webkit-text-stroke: 0 !important;
	filter: none !important;
	background-image: none !important;
	letter-spacing: inherit;
	word-spacing: inherit;
}

.rhr-a11y h1,
.rhr-a11y h2,
.rhr-a11y h3,
.rhr-a11y h4,
.rhr-a11y h5,
.rhr-a11y h6 {
	margin: 1.6em 0 0.5em;
	font-weight: 700;
	line-height: calc(var(--a11y-leading) * 0.75);
	text-transform: none;
}

.rhr-a11y h1 {
	font-size: 1.75rem;
}

.rhr-a11y h2 {
	font-size: 1.4rem;
}

.rhr-a11y h3,
.rhr-a11y h4,
.rhr-a11y h5,
.rhr-a11y h6 {
	font-size: 1.15rem;
}

.rhr-a11y p,
.rhr-a11y ul,
.rhr-a11y ol,
.rhr-a11y dl,
.rhr-a11y blockquote,
.rhr-a11y figure,
.rhr-a11y table {
	margin: 0 0 calc(var(--a11y-leading) * 0.7em);
}

.rhr-a11y ul,
.rhr-a11y ol {
	padding-left: 1.5em;
}

.rhr-a11y li + li {
	margin-top: 0.4em;
}

.rhr-a11y blockquote {
	padding-left: 1em;
	border-left: 4px solid var(--a11y-ink);
}

.rhr-a11y a {
	color: var(--a11y-link);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.rhr-a11y a:visited {
	color: var(--a11y-visited);
}

.rhr-a11y a:hover {
	color: var(--a11y-ink);
	text-decoration-thickness: 0.15em;
}

.rhr-a11y a:focus-visible,
.rhr-a11y button:focus-visible,
.rhr-a11y input:focus-visible,
.rhr-a11y textarea:focus-visible,
.rhr-a11y select:focus-visible,
.rhr-a11y summary:focus-visible,
.rhr-a11y [tabindex]:focus-visible {
	outline: 3px solid var(--a11y-ink);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px var(--a11y-focus);
}

/* Pictures fit the column; drawings give way to their words. */
.rhr-a11y img,
.rhr-a11y video,
.rhr-a11y iframe,
.rhr-a11y embed,
.rhr-a11y object {
	display: block;
	max-width: 100%;
	height: auto;
}

.rhr-a11y img {
	width: auto;
	max-height: 20rem;
}

.rhr-a11y .rhr-pic {
	display: block;
	margin: 0 0 1em;
}

.rhr-a11y iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

.rhr-a11y .rhr-art,
.rhr-a11y .rhr-theme-toggle,
.rhr-a11y .rhr-pic__placeholder,
.rhr-a11y .rhr-cur,
.rhr-a11y .rhr-slider__arrow,
.rhr-a11y .rhr-hp {
	display: none !important;
}

.rhr-a11y .rhr-art-label {
	display: inline;
}

/* Pictures can be hidden; the words around them stay. */
.rhr-a11y[data-rhr-pictures="hide"] main img,
.rhr-a11y[data-rhr-pictures="hide"] main picture,
.rhr-a11y[data-rhr-pictures="hide"] main video,
.rhr-a11y[data-rhr-pictures="hide"] .rhr-pic,
.rhr-a11y[data-rhr-pictures="hide"] .rhr-product__image,
.rhr-a11y[data-rhr-pictures="hide"] dialog img {
	display: none !important;
}

.rhr-a11y svg {
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	vertical-align: -0.2em;
}

.rhr-a11y svg[width="0"] {
	position: absolute;
	width: 0;
	height: 0;
}

/* Hidden words for screen readers stay hidden... */
.rhr-a11y .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.rhr-a11y .rhr-skip:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 100;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.3em 0.6em;
	clip: auto;
	clip-path: none;
	background: var(--a11y-paper);
}

/* ...except around prices, where the drawn dollar sign and the crossed out
   old price said it: "Was $129.99 Now $99". */
.rhr-a11y .rhr-money > .screen-reader-text,
.rhr-a11y .rhr-prices .screen-reader-text {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
}

/* Forms and buttons: big, plain and clearly outlined. */
.rhr-a11y button,
.rhr-a11y input,
.rhr-a11y select,
.rhr-a11y textarea {
	max-width: 100%;
	padding: 0.45em 0.7em;
	border: 2px solid var(--a11y-ink);
	border-radius: 4px;
	background: var(--a11y-paper);
	color: var(--a11y-ink);
	font: inherit;
	line-height: 1.5;
}

.rhr-a11y input[type="checkbox"],
.rhr-a11y input[type="radio"] {
	width: 1.2em;
	height: 1.2em;
	padding: 0;
	vertical-align: -0.15em;
}

.rhr-a11y input[type="text"],
.rhr-a11y input[type="email"],
.rhr-a11y input[type="search"],
.rhr-a11y input[type="url"],
.rhr-a11y textarea {
	width: 100%;
}

.rhr-a11y button,
.rhr-a11y input[type="submit"] {
	width: auto;
	background: var(--a11y-ink);
	color: var(--a11y-paper);
	font-weight: 700;
	cursor: pointer;
}

.rhr-a11y label {
	display: inline-block;
	margin-bottom: 0.2em;
}

.rhr-a11y summary {
	cursor: pointer;
	font-weight: 700;
}

.rhr-a11y table {
	width: 100%;
	border-collapse: collapse;
}

.rhr-a11y th,
.rhr-a11y td {
	padding: 0.4em 0.6em;
	border: 1px solid var(--a11y-line);
	text-align: left;
	vertical-align: top;
}

.rhr-a11y hr {
	margin: 2em 0;
	border: 0;
	border-top: 2px solid var(--a11y-ink);
}

.rhr-a11y del,
.rhr-a11y s {
	text-decoration-thickness: 2px;
}

/* ---- The page's parts ---- */

/* The bar at the top, with the reader's settings, and the button at the bottom. */
.rhr-a11y .rhr-reading-bar {
	display: block;
	margin: 0 -1rem 1rem;
	padding: 0.6em 1rem;
	background: var(--a11y-bar);
	color: var(--a11y-bar-ink);
	font-size: 1rem;
}

.rhr-a11y .rhr-reading-bar__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em 1em;
	margin: 0;
}

.rhr-a11y .rhr-reading-toggle__on {
	display: none;
}

.rhr-a11y .rhr-reading-toggle__off {
	display: inline;
}

.rhr-a11y .rhr-reading-bar button {
	padding: 0.3em 0.7em;
	border-color: var(--a11y-bar-ink);
	background: var(--a11y-bar-ink);
	color: var(--a11y-bar);
	font-size: 0.95rem;
}

.rhr-a11y .rhr-reading-bar :focus-visible {
	outline-color: var(--a11y-bar-ink);
	box-shadow: 0 0 0 6px var(--a11y-bar);
}

.rhr-a11y .rhr-reading-settings {
	margin-top: 0.6em;
}

.rhr-a11y .rhr-reading-settings > summary {
	display: inline-block;
	padding: 0.2em 0;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.rhr-a11y .rhr-reading-settings > summary::before {
	content: "\25B8\00A0";
}

.rhr-a11y .rhr-reading-settings[open] > summary::before {
	content: "\25BE\00A0";
}

.rhr-a11y .rhr-reading-settings > summary::-webkit-details-marker {
	display: none;
}

.rhr-a11y .rhr-reading-settings__form {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: 0.8em 1.6em;
	margin: 0.6em 0 0.4em;
}

.rhr-a11y .rhr-reading-settings__group {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.rhr-a11y .rhr-reading-settings__legend {
	margin: 0 0 0.2em;
	padding: 0;
	font-weight: 700;
}

.rhr-a11y .rhr-reading-settings__choice {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	padding: 0.15em 0;
	cursor: pointer;
}

.rhr-a11y .rhr-reading-settings__choice input {
	flex: none;
	margin: 0;
	accent-color: var(--a11y-bar-ink);
}

.rhr-a11y .rhr-reading-settings__size {
	display: flex;
	align-items: center;
	gap: 0.8em;
	margin: 0;
}

.rhr-a11y .rhr-reading-settings__size button {
	min-width: 2.8em;
	min-height: 2.4em;
	margin: 0;
	font-size: 1.05rem;
}

.rhr-a11y .rhr-reading-settings__size output {
	min-width: 3.5em;
	font-weight: 700;
	text-align: center;
}

.rhr-a11y .rhr-reading-settings__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	grid-column: 1 / -1;
	margin: 0;
}

.rhr-a11y .rhr-reading-settings__actions button {
	margin: 0;
}

.rhr-a11y .rhr-reading-settings__actions [hidden] {
	display: none;
}

/* Read aloud: the passage being read is marked. */
.rhr-a11y .is-reading .rhr-read-aloud__start {
	display: none;
}

.rhr-a11y .is-reading .rhr-read-aloud__stop {
	display: inline;
}

.rhr-a11y .rhr-reading-now {
	outline: 3px solid var(--a11y-focus);
	outline-offset: 4px;
}

.rhr-a11y .rhr-reading-mode {
	margin: 2em 0 0;
	font-size: 1rem;
}

/* Header: the site's sections as a plain row of links. */
.rhr-a11y .rhr-header {
	padding: 0.5em 0 1em;
	border-bottom: 2px solid var(--a11y-ink);
}

.rhr-a11y .rhr-header__title {
	margin: 0 0 0.4em;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.3;
}

.rhr-a11y .rhr-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2em 1.4em;
	margin: 0 0 0.6em;
	padding: 0;
	list-style: none;
}

.rhr-a11y .rhr-nav li + li {
	margin-top: 0;
}

.rhr-a11y .rhr-find__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.rhr-a11y .rhr-find__panel {
	margin-top: 0.6em;
}

/* Sliders and grids become plain lists, one thing under another. */
.rhr-a11y [data-rhr-slider],
.rhr-a11y .rhr-slider__track {
	display: block;
	overflow: visible;
}

.rhr-a11y .rhr-slider__item {
	display: block;
	width: auto;
}

/* Boxes the theme draws by hand get a plain thin line instead. */
.rhr-a11y .rhr-products,
.rhr-a11y .rhr-pc,
.rhr-a11y .rhr-score,
.rhr-a11y .rhr-newsletter,
.rhr-a11y .rhr-box {
	margin: 1.6em 0;
	padding: 1em;
	border: 2px solid var(--a11y-ink);
	border-radius: 6px;
}

.rhr-a11y .rhr-pc .rhr-box,
.rhr-a11y .rhr-products .rhr-box {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Product cards: picture, name, then each shop with its price and Buy. */
.rhr-a11y .rhr-product + .rhr-product,
.rhr-a11y .rhr-slider__item + .rhr-slider__item {
	margin-top: 1.4em;
	padding-top: 1.4em;
	border-top: 1px solid var(--a11y-line);
}

.rhr-a11y .rhr-product__image img {
	max-height: 18rem;
	width: auto;
}

.rhr-a11y .rhr-pc__brand {
	margin: 0.6em 0 0;
}

.rhr-a11y .rhr-product__name {
	margin: 0 0 0.6em;
	font-size: 1.2rem;
	font-weight: 700;
}

.rhr-a11y .rhr-shops {
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
}

.rhr-a11y .rhr-shop + .rhr-shop {
	margin-top: 0.5em;
}

.rhr-a11y .rhr-shop__link {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3em 1em;
	text-decoration: none;
}

.rhr-a11y .rhr-shop__name {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.rhr-a11y .rhr-shop__price {
	color: var(--a11y-ink);
	font-weight: 700;
}

.rhr-a11y .rhr-shop__buy,
.rhr-a11y .rhr-buy {
	display: inline-block;
	padding: 0.15em 0.9em;
	border: 2px solid var(--a11y-ink);
	border-radius: 4px;
	background: var(--a11y-ink);
	color: var(--a11y-paper);
	font-weight: 700;
	text-decoration: none;
}

.rhr-a11y .rhr-shop__buy::after {
	content: "Buy";
	content: "Buy" / ""; /* Seen, not read: the link already says "buy" to screen readers. */
}

.rhr-a11y .rhr-shop__buy .rhr-art-label,
.rhr-a11y .rhr-shop__buy .rhr-pc__buy-text {
	display: none;
}

/* Footer links in a row. */
.rhr-a11y .rhr-footer {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 1.6em;
	margin-top: 2.4em;
	padding-top: 1em;
	border-top: 2px solid var(--a11y-ink);
}

/* The writer's picture beside their name, small. */
.rhr-a11y .rhr-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em 0.8em;
}

.rhr-a11y .rhr-byline__avatar img {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	object-fit: cover;
}

/* The used prices window from the product cards. */
.rhr-a11y dialog {
	width: min(40rem, calc(100% - 2rem));
	max-height: calc(100% - 2rem);
	padding: 1.2em;
	border: 3px solid var(--a11y-ink);
	border-radius: 6px;
	background: var(--a11y-paper);
	color: var(--a11y-ink);
}

.rhr-a11y dialog::backdrop {
	background: rgba(0, 0, 0, 0.6);
}

.rhr-a11y .rhr-used__close {
	float: right;
	min-width: 2.6em;
	min-height: 2.6em;
	font-size: 1.1rem;
}

.rhr-a11y .rhr-used__shop-name {
	font-weight: 700;
}

.rhr-a11y .rhr-used__shop-note {
	display: block;
}

.rhr-a11y .rhr-used__shop-price {
	display: inline-block;
	margin-left: 0.4em;
}

.rhr-a11y form button,
.rhr-a11y form input[type="submit"] {
	margin-top: 0.5em;
}

/* A review's score. */
.rhr-a11y .rhr-score__mark {
	margin: 0;
	font-size: 1.6rem;
	font-weight: 700;
}

.rhr-a11y .rhr-score__title {
	margin-top: 0.3em;
}

.rhr-a11y dt {
	font-weight: 700;
}

.rhr-a11y dd {
	margin: 0 0 0.6em;
}

/* Phones: a little smaller, so lines are not too short. */
@media (max-width: 600px) {
	.rhr-a11y body {
		font-size: 1rem;
	}

	.rhr-a11y h1 {
		font-size: 1.45rem;
	}

	.rhr-a11y h2 {
		font-size: 1.25rem;
	}

	.rhr-a11y .rhr-products,
	.rhr-a11y .rhr-pc,
	.rhr-a11y .rhr-score,
	.rhr-a11y .rhr-newsletter,
	.rhr-a11y .rhr-box {
		padding: 0.8em;
	}
}

/* Lists of reviews, videos and deals: a line between each. */
.rhr-a11y article + article,
.rhr-a11y .rhr-used-check + article {
	margin-top: 1.6em;
	padding-top: 1.6em;
	border-top: 1px solid var(--a11y-line);
}

.rhr-a11y .rhr-reading-toggle {
	text-decoration: none;
}

/* Scampers the gecko stays away while the mode is on (his script sends him off too). */
.rhr-a11y .rhr-scampers {
	display: none !important;
}