/* bituch-site · the accessibility toolbar (תפריט נגישות) and every mode it switches on.
   Modes are classes on <html>, set by assets/a11y.js before the first paint. Colours, font and radii
   come from the theme's tokens (theme.json presets) with the palette as fallback.
   No shadows, like the theme. Nothing here needs an inline style. */

/* ================================================================
   1. The button and the panel
   ================================================================ */

.bituch-a11y {
	--a11y-ink: var(--wp--preset--color--ink, #221D37);
	--a11y-ink-soft: var(--wp--preset--color--ink-soft, #524E69);
	--a11y-surface: var(--wp--preset--color--surface, #FFFEFB);
	--a11y-rule: var(--wp--preset--color--rule, #D7D4D7);
	--a11y-line: var(--wp--preset--color--line, #8A8496);
	--a11y-brand: var(--wp--preset--color--brand, #624BBC);
	--a11y-lilac: var(--wp--preset--color--lilac, #E2D9FF);
	--a11y-soft: var(--wp--preset--color--soft, #F7F4FC);
	--a11y-marker: var(--wp--preset--color--marker, #FFE228);
	--a11y-font: var(--wp--preset--font-family--plex, "IBM Plex Sans Hebrew", "Segoe UI", "Arial Hebrew", "Noto Sans Hebrew", Arial, sans-serif);
	--a11y-r-card: var(--wp--custom--radius--card, 16px);
	--a11y-r-pill: var(--wp--custom--radius--pill, 999px);

	position: fixed;
	z-index: 2147483000;
	/* bottom-left: the questionnaire's buttons sit on the right (the start side in RTL). Lifted above the
	   cookie banner while it shows (consent.js sets --bituch-consent-h on <html>). */
	left: 16px;
	bottom: calc(16px + var(--bituch-consent-h, 0px));
	direction: rtl;
	font-family: var(--a11y-font);
	font-size: calc(16px * var(--bituch-a11y-fs, 1));
	font-weight: 400;
	line-height: 1.4;
	color: var(--a11y-ink);
	text-align: start;
}

.bituch-a11y *,
.bituch-a11y *::before,
.bituch-a11y *::after {
	box-sizing: border-box;
}

.bituch-a11y button {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.bituch-a11y__icon {
	flex: none;
	width: 22px;
	height: 22px;
}

/* The floating button: a 52px yellow disc with the figure, like the theme's buttons. */
.bituch-a11y__btn {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 1.5px solid var(--a11y-ink);
	border-radius: var(--a11y-r-pill);
	background: var(--a11y-marker);
	color: var(--a11y-ink);
}

.bituch-a11y__btn .bituch-a11y__icon {
	width: 32px;
	height: 32px;
}

.bituch-a11y__btn:hover,
.bituch-a11y__btn[aria-expanded="true"] {
	background: #E8C506;
}

.bituch-a11y :is(button, a):focus-visible {
	outline: 2px solid var(--a11y-ink);
	outline-offset: 3px;
}

/* The panel opens above the button. */
.bituch-a11y__panel {
	position: absolute;
	left: 0;
	bottom: calc(100% + 12px);
	width: min(340px, calc(100vw - 32px));
	max-height: min(calc(100vh - 100px), 660px);
	max-height: min(calc(100dvh - 100px), 660px);
	overflow: auto;
	overscroll-behavior: contain;
	padding: 12px 14px 14px;
	border: 1.5px solid var(--a11y-ink);
	border-radius: var(--a11y-r-card);
	background: var(--a11y-surface);
	color: var(--a11y-ink);
}

.bituch-a11y__panel[hidden] {
	display: none;
}

.bituch-a11y__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
}

.bituch-a11y__title {
	margin: 0;
	font-family: inherit;
	font-size: 1.125em;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	color: inherit;
}

.bituch-a11y__close,
.bituch-a11y__step {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1.5px solid var(--a11y-line);
	border-radius: var(--a11y-r-pill);
	background: var(--a11y-surface);
}

.bituch-a11y__close {
	margin-inline-end: -6px;
	border-color: transparent;
}

.bituch-a11y__close:hover,
.bituch-a11y__step:hover:not(:disabled) {
	background: var(--a11y-soft);
	border-color: var(--a11y-ink);
}

.bituch-a11y__step:disabled {
	opacity: 0.4;
	cursor: default;
}

/* Text size: label, then [+] current [-]. The steps wrap under the label when the text is big. */
.bituch-a11y__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 10px;
	min-height: 52px;
	padding: 4px 0;
	border-top: 1px solid var(--a11y-rule);
	border-bottom: 1px solid var(--a11y-rule);
}

.bituch-a11y__label {
	font-weight: 700;
	white-space: nowrap;
}

.bituch-a11y__steps {
	display: flex;
	align-items: center;
	gap: 6px;
}

.bituch-a11y__fs {
	min-width: 5em;
	font-size: 0.875em;
	white-space: nowrap;
	text-align: center;
	color: var(--a11y-ink-soft);
}

/* The toggles: full-width rows with the icon, the label and a switch. */
.bituch-a11y__list {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	display: grid;
	gap: 2px;
}

.bituch-a11y__list li {
	margin: 0;
}

.bituch-a11y__toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 44px;
	padding: 6px 8px;
	border: 1.5px solid transparent;
	border-radius: 10px;
	background: none;
	text-align: start;
}

.bituch-a11y__toggle span {
	flex: 1 1 auto;
}

.bituch-a11y__toggle:hover {
	background: var(--a11y-soft);
}

.bituch-a11y__toggle[aria-pressed="true"] {
	background: var(--a11y-lilac);
	border-color: var(--a11y-ink);
}

/* the switch: track + knob; on = knob at the end, ink track */
.bituch-a11y__toggle::after {
	content: "";
	flex: none;
	width: 36px;
	height: 20px;
	border: 1.5px solid var(--a11y-ink);
	border-radius: var(--a11y-r-pill);
	background:
		radial-gradient(circle at calc(100% - 9px) 50%, var(--a11y-ink) 0 5.5px, transparent 6.5px),
		var(--a11y-surface);
}

.bituch-a11y__toggle[aria-pressed="true"]::after {
	background:
		radial-gradient(circle at 9px 50%, var(--a11y-surface) 0 5.5px, transparent 6.5px),
		var(--a11y-ink);
}

.bituch-a11y__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 8px;
	padding-top: 10px;
	border-top: 1px solid var(--a11y-rule);
}

.bituch-a11y__reset {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px 0 12px;
	border: 1.5px solid var(--a11y-ink);
	border-radius: var(--a11y-r-pill);
	background: var(--a11y-surface);
	font-weight: 700;
}

.bituch-a11y__reset:hover {
	background: var(--a11y-marker);
}

.bituch-a11y__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--a11y-brand);
	font-size: 0.9375em;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The fallback "דילוג לתוכן" (a11y.js adds it only when core's is missing): hidden until it has focus. */
.bituch-a11y-skip {
	position: absolute;
	top: -1000px;
	left: -1000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.bituch-a11y-skip:focus {
	position: fixed;
	top: 8px;
	right: 8px;
	left: auto;
	z-index: 2147483001;
	width: auto;
	height: auto;
	overflow: visible;
	clip-path: none;
	padding: 12px 20px;
	border: 1.5px solid var(--wp--preset--color--ink, #221D37);
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--marker, #FFE228);
	color: var(--wp--preset--color--ink, #221D37);
	font-family: var(--wp--preset--font-family--plex, Arial, sans-serif);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	outline: 2px solid var(--wp--preset--color--ink, #221D37);
	outline-offset: 3px;
}

@media print {
	.bituch-a11y,
	.bituch-a11y-skip {
		display: none;
	}
}

/* ================================================================
   2. Text size: 3 steps up, 1 down
   The theme sizes text in px through theme.json presets; the presets are redefined here with a factor.
   The few literal px sizes in the theme and in the questionnaire (bituch-leads) get their own lines.
   ================================================================ */

html.bituch-a11y-fs { --bituch-a11y-fs: 1; }
html.bituch-a11y-font-up-1 { --bituch-a11y-fs: 1.15; }
html.bituch-a11y-font-up-2 { --bituch-a11y-fs: 1.3; }
html.bituch-a11y-font-up-3 { --bituch-a11y-fs: 1.5; }
html.bituch-a11y-font-down-1 { --bituch-a11y-fs: 0.9; }

html.bituch-a11y-fs {
	/* the fluid presets: the theme's min/max between 390px and 1440px */
	--wp--preset--font-size--caption: calc(13px * var(--bituch-a11y-fs));
	--wp--preset--font-size--meta: calc(14px * var(--bituch-a11y-fs));
	--wp--preset--font-size--label: calc(15px * var(--bituch-a11y-fs));
	--wp--preset--font-size--base: calc(17px * var(--bituch-a11y-fs));
	--wp--preset--font-size--card: calc(18px * var(--bituch-a11y-fs));
	--wp--preset--font-size--body: calc(var(--bituch-a11y-fs) * clamp(17px, 17px + (100vw - 390px) * 0.0019, 19px));
	--wp--preset--font-size--lead: calc(var(--bituch-a11y-fs) * clamp(17px, 17px + (100vw - 390px) * 0.00286, 20px));
	--wp--preset--font-size--title: calc(var(--bituch-a11y-fs) * clamp(20px, 20px + (100vw - 390px) * 0.0019, 22px));
	--wp--preset--font-size--heading: calc(var(--bituch-a11y-fs) * clamp(30px, 30px + (100vw - 390px) * 0.01524, 46px));
	--wp--preset--font-size--page-title: calc(var(--bituch-a11y-fs) * clamp(34px, 34px + (100vw - 390px) * 0.01714, 52px));
	--wp--preset--font-size--display: calc(var(--bituch-a11y-fs) * clamp(40px, 40px + (100vw - 390px) * 0.03333, 75px));
}

/* literal sizes in the theme */
html.bituch-a11y-fs .wp-element-button,
html.bituch-a11y-fs .wp-block-button__link { font-size: calc(16px * var(--bituch-a11y-fs)); }
html.bituch-a11y-fs .wp-block-table { font-size: calc(15.5px * var(--bituch-a11y-fs)); }
html.bituch-a11y-fs .bituch-faq summary { font-size: calc(20px * var(--bituch-a11y-fs)); }
html.bituch-a11y-fs .bituch-keren figcaption { font-size: calc(13px * var(--bituch-a11y-fs)); }
html.bituch-a11y-fs .bituch-author p[style] { font-size: calc(16px * var(--bituch-a11y-fs)) !important; }

/* literal sizes in the questionnaire (bituch-leads 1.0.x) */
html.bituch-a11y-fs :is(.bl-small, .bl-help, .bl-foot, .bl-why, .bl-notice, .bl-err) { font-size: calc(13px * var(--bituch-a11y-fs)); }
html.bituch-a11y-fs :is(.bl-top, .bl-muted, .bl-label, .bl-note, .bl-check, .bl-errbox, .bl-formerr, .bl-ok, .bl-transfer, .bl-guides-t) { font-size: calc(14px * var(--bituch-a11y-fs)); }
html.bituch-a11y-fs :is(.bl-body-s, .bl-check-list ul, .bl-chip, .bl-link, .bl-ok-l, .bl-guides a, .bl-exit-links a) { font-size: calc(15px * var(--bituch-a11y-fs)); }
html.bituch-a11y-fs :is(.bl-lead, .bl-body, .bl-muted-l, .bl-opt, .bl-primary, .bl-input, .bl-mask, .bl-pill) { font-size: calc(16px * var(--bituch-a11y-fs)); }
html.bituch-a11y-fs .bl-legend { font-size: calc(20px * var(--bituch-a11y-fs)); }
html.bituch-a11y-fs :is(.bl-h, .bl-code) { font-size: calc(22px * var(--bituch-a11y-fs)); }

/* ================================================================
   3. High contrast: dark background, light text, strong (yellow) links
   The palette presets are redefined, so everything that uses the tokens follows.
   ================================================================ */

html.bituch-a11y-contrast-high {
	--wp--preset--color--ink: #FFFFFF;
	--wp--preset--color--ink-soft: #E8E8E8;
	--wp--preset--color--canvas: #000000;
	--wp--preset--color--surface: #101010;
	--wp--preset--color--rule: #8A8A8A;
	--wp--preset--color--line: #C4C4C4;
	--wp--preset--color--brand: #FFFF00;
	--wp--preset--color--brand-deep: #FFFF80;
	--wp--preset--color--lilac: #333333;
	--wp--preset--color--soft: #1E1E1E;
	--wp--preset--color--marker: #FFE228;
	--wp--custom--color--line-strong: #CFCFCF;
	color-scheme: dark;
	background: #000;
	color: #fff;
}

html.bituch-a11y-contrast-high body {
	background: #000;
	color: #fff;
}

/* every link is yellow (the theme mutes the footer and menu links; a high-contrast page needs them strong) */
html.bituch-a11y-contrast-high body a:not(.bituch-a11y *, .wp-element-button, .wp-block-button__link) {
	color: #FFFF00;
}

/* yellow backgrounds keep dark text */
html.bituch-a11y-contrast-high :is(.wp-element-button, .wp-block-button__link, .bituch-a11y__btn, .bituch-a11y__reset:hover, .bl-primary),
html.bituch-a11y-contrast-high :is(.wp-element-button, .wp-block-button__link, .bl-primary):is(:hover, :focus) {
	color: #000 !important;
}

html.bituch-a11y-contrast-high .wp-block-button.is-style-outline .wp-block-button__link,
html.bituch-a11y-contrast-high .wp-block-button__link.is-style-outline {
	color: #fff !important;
}

/* the marker band under a heading phrase becomes an underline, so the text never sits on yellow */
html.bituch-a11y-contrast-high .bituch-marker::after {
	display: none;
}

html.bituch-a11y-contrast-high .bituch-marker {
	text-decoration: underline;
	text-decoration-color: #FFE228;
	text-decoration-thickness: 0.12em;
	text-underline-offset: 0.12em;
}

/* ================================================================
   4. Inverted contrast and greyscale: a filter on the root element
   (the root is exempt from the containing-block rule, so position: fixed keeps working).
   Photos and videos are inverted back.
   ================================================================ */

html.bituch-a11y-contrast-invert {
	filter: invert(1) hue-rotate(180deg);
	background: #000;
}

html.bituch-a11y-gray {
	filter: grayscale(1);
}

html.bituch-a11y-contrast-invert.bituch-a11y-gray {
	filter: invert(1) hue-rotate(180deg) grayscale(1);
}

html.bituch-a11y-contrast-invert :is(img, video, picture, iframe):not(.bituch-a11y *) {
	filter: invert(1) hue-rotate(180deg);
}

/* ================================================================
   5. Links: underline and a marker background
   ================================================================ */

html.bituch-a11y-links a:not(.bituch-logo, .bituch-a11y *) {
	color: #221D37 !important;
	text-decoration: underline !important;
	text-decoration-thickness: 0.12em;
	text-decoration-color: #221D37;
	text-underline-offset: 0.18em;
}

/* text links get the marker; buttons that are links keep their own shape */
html.bituch-a11y-links a:not(.bituch-logo, .bituch-a11y *, .wp-block-button__link, .wp-element-button) {
	background-color: #FFE228;
	padding-inline: 0.15em;
	border-radius: 0.2em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

html.bituch-a11y-links .bituch-card a::before {
	background: none;
}

html.bituch-a11y-links .bituch-card a {
	position: relative;
	z-index: 1;
}

/* ================================================================
   6. Readable font: Arial / the system sans, still right-to-left
   ================================================================ */

html.bituch-a11y-readable {
	--wp--preset--font-family--plex: Arial, "Arial Hebrew", Helvetica, "Noto Sans Hebrew", "Segoe UI", sans-serif;
}

html.bituch-a11y-readable body,
html.bituch-a11y-readable :is(button, input, select, textarea, .bl) {
	font-family: Arial, "Arial Hebrew", Helvetica, "Noto Sans Hebrew", "Segoe UI", sans-serif;
	letter-spacing: 0;
}

/* ================================================================
   7. Big cursor: a 40px arrow, yellow over links and buttons
   ================================================================ */

html.bituch-a11y-cursor,
html.bituch-a11y-cursor * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M6 3l25 20-10.5 1.6 6 11.4-5.6 2.8-6-11.4L6 34.6z' fill='%23221D37' stroke='%23fff' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}

html.bituch-a11y-cursor :is(a, button, [role="button"], label, summary, select, input[type="checkbox"], input[type="radio"]) {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M6 3l25 20-10.5 1.6 6 11.4-5.6 2.8-6-11.4L6 34.6z' fill='%23FFE228' stroke='%23221D37' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, pointer !important;
}

/* ================================================================
   8. No motion: every animation and transition stops; the theme's hero.js and motion.css also read this class
   ================================================================ */

html.bituch-a11y-no-motion *,
html.bituch-a11y-no-motion ::before,
html.bituch-a11y-no-motion ::after {
	animation: none !important;
	transition: none !important;
	scroll-behavior: auto !important;
}

/* ================================================================
   9. Headings: a brand underline on every heading
   ================================================================ */

html.bituch-a11y-headings :is(h1, h2, h3, h4, h5, h6):not(.bituch-a11y *) {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--brand, #624BBC);
	text-decoration-thickness: 0.1em;
	text-underline-offset: 0.16em;
}