/* Meyuchadim accessibility toolbar 1.2
   Part 1: what each choice does to the page. Every rule skips the toolbar itself (.ma11y). */

/* Spacing, by the values of WCAG 1.4.12 and above */
html.ma11y-word-1 body *:not(.ma11y):not(.ma11y *) { word-spacing: .16em !important; }
html.ma11y-word-2 body *:not(.ma11y):not(.ma11y *) { word-spacing: .32em !important; }
html.ma11y-word-3 body *:not(.ma11y):not(.ma11y *) { word-spacing: .48em !important; }
html.ma11y-letter-1 body *:not(.ma11y):not(.ma11y *) { letter-spacing: .06em !important; }
html.ma11y-letter-2 body *:not(.ma11y):not(.ma11y *) { letter-spacing: .12em !important; }
html.ma11y-letter-3 body *:not(.ma11y):not(.ma11y *) { letter-spacing: .18em !important; }
html.ma11y-line-1 body *:not(.ma11y):not(.ma11y *) { line-height: 1.6 !important; }
html.ma11y-line-2 body *:not(.ma11y):not(.ma11y *) { line-height: 1.9 !important; }
html.ma11y-line-3 body *:not(.ma11y):not(.ma11y *) { line-height: 2.2 !important; }

/* A plain, readable font. Icon fonts keep their own font, or the icons would turn into letters. */
html.ma11y-font body *:not(.ma11y):not(.ma11y *):not(i):not(.fa):not([class*="fa-"]):not([class*="icon"]):not([class*="dashicons"]):not([class*="eicon"]) {
	font-family: Arial, "Segoe UI", Tahoma, sans-serif !important;
}

html.ma11y-headings body :is(h1, h2, h3, h4, h5, h6, [role="heading"]):not(.ma11y *) {
	outline: 3px solid #0063A1 !important;
	outline-offset: 4px !important;
}


/* Dark high contrast: black background, white text, yellow links */
html.ma11y-dark body,
html.ma11y-dark body *:not(.ma11y):not(.ma11y *) {
	-webkit-text-fill-color: currentColor !important;
	background-color: #000 !important;
	color: #fff !important;
	border-color: #fff !important;
	text-shadow: none !important;
	box-shadow: none !important;
}
html.ma11y-dark body a:not(.ma11y):not(.ma11y *),
html.ma11y-dark body a:not(.ma11y):not(.ma11y *) * { color: #ffeb3b !important; -webkit-text-fill-color: #ffeb3b !important; }
/* Buttons and links with a gradient or picture behind the text lose it, so the text stays readable, and buttons get a visible edge. */
html.ma11y-dark body :is(a, button, [role="button"], input[type="submit"], input[type="button"], [class*="btn"]):not(.ma11y):not(.ma11y *) { background-image: none !important; }
html.ma11y-dark body :is(button, [role="button"], input[type="submit"], input[type="button"], [class*="btn"]):not(.ma11y):not(.ma11y *) { box-shadow: inset 0 0 0 2px currentColor !important; }
html.ma11y-dark body :is(input, textarea, select):not(.ma11y):not(.ma11y *) { border: 1px solid #fff !important; }

/* Light high contrast: white background, black text, blue links */
html.ma11y-light body,
html.ma11y-light body *:not(.ma11y):not(.ma11y *) {
	-webkit-text-fill-color: currentColor !important;
	background-color: #fff !important;
	color: #000 !important;
	border-color: #000 !important;
	text-shadow: none !important;
	box-shadow: none !important;
}
html.ma11y-light body a:not(.ma11y):not(.ma11y *),
html.ma11y-light body a:not(.ma11y):not(.ma11y *) * { color: #0033cc !important; -webkit-text-fill-color: #0033cc !important; }
/* Buttons and links with a gradient or picture behind the text lose it, so the text stays readable, and buttons get a visible edge. */
html.ma11y-light body :is(a, button, [role="button"], input[type="submit"], input[type="button"], [class*="btn"]):not(.ma11y):not(.ma11y *) { background-image: none !important; }
html.ma11y-light body :is(button, [role="button"], input[type="submit"], input[type="button"], [class*="btn"]):not(.ma11y):not(.ma11y *) { box-shadow: inset 0 0 0 2px currentColor !important; }
html.ma11y-light body :is(input, textarea, select):not(.ma11y):not(.ma11y *) { border: 1px solid #000 !important; }

/* Highlighted links. These come after the contrast rules and are as specific, so they win when both are on. */
html.ma11y-links body a:not(.ma11y):not(.ma11y *) {
	background-color: #ffeb3b !important;
	color: #000 !important;
	-webkit-text-fill-color: #000 !important;
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 3px !important;
}
html.ma11y-links body a:not(.ma11y):not(.ma11y *) * { color: #000 !important; -webkit-text-fill-color: #000 !important; }

/* Colour filters sit on the root element, where they do not move fixed headers and buttons. */
html.ma11y-gray { filter: grayscale(1); }
html.ma11y-low { filter: saturate(.4); }
html.ma11y-high { filter: saturate(1.8); }
html.ma11y-invert { filter: invert(1) hue-rotate(180deg); }
/* Photos and the toolbar are turned back, so only the page colours are inverted.
   The filter goes on the button and the panel, not on their container: a filter on the container would pin them to it instead of to the screen. */
html.ma11y-invert body :is(img, picture, video, iframe):not(.ma11y *),
html.ma11y-invert .ma11y-fab,
html.ma11y-invert .ma11y-panel { filter: invert(1) hue-rotate(180deg); }

html.ma11y-motion *,
html.ma11y-motion *::before,
html.ma11y-motion *::after {
	animation-duration: 0s !important;
	animation-iteration-count: 1 !important;
	animation-delay: 0s !important;
	transition: none !important;
	scroll-behavior: auto !important;
}

html.ma11y-cursor-black,
html.ma11y-cursor-black * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 3 L6 40 L15 31 L21 45 L28 42 L22 28 L35 28 Z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}
html.ma11y-cursor-white,
html.ma11y-cursor-white * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 3 L6 40 L15 31 L21 45 L28 42 L22 28 L35 28 Z' fill='%23fff' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}

html.ma11y-images body :is(img, picture, video, svg image):not(.ma11y *) { opacity: 0 !important; }
html.ma11y-images body *:not(.ma11y):not(.ma11y *) { background-image: none !important; }

html.ma11y-focus body *:not(.ma11y *):focus {
	outline: 3px solid #ffbf00 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 6px #000 !important;
}

/* Part 2: the toolbar, in the design language of the new portal (colours, type and shapes from the portal prototype).
   It resets what the site's own styles might add to buttons, headings and lists. */

.ma11y,
.ma11y * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	letter-spacing: normal;
	word-spacing: normal;
	text-transform: none;
	text-shadow: none;
	float: none;
}
.ma11y {
	--ma11y-navy: #2C2F85;
	--ma11y-blue: #0063A1;
	--ma11y-blue2: #007CB2;
	--ma11y-sky: #F1F6F9;
	--ma11y-ink: #001D29;
	--ma11y-grey: #647177;
	--ma11y-line: #E5E8EA;
	--ma11y-comm: #037DCA;
	--ma11y-comm-t: #e4f2fb;
	--ma11y-pink: #DC3A74;
	--ma11y-pink-t: #fdeaf1;
	--ma11y-jobs: #0E8A7E;
	--ma11y-jobs-t: #e2f4f1;
	--ma11y-violet: #615DCB;
	--ma11y-violet-t: #eeedfb;
	--ma11y-grad: linear-gradient(67deg, #DC3A74 -12%, #615DCB 42%, #037DCA 70%, #3EA7E9 115%);
	font-family: "Noto Sans Hebrew", NotoSansHebrew, "Noto Sans", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var(--ma11y-ink);
	direction: rtl;
	text-align: right;
}
.ma11y button,
.ma11y a {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	font-family: inherit;
}
.ma11y svg { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ma11y :focus-visible { outline: 3px solid var(--ma11y-blue2) !important; outline-offset: 2px; }
.ma11y .ma11y-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* The button in the corner: the portal's brand gradient */
.ma11y .ma11y-fab {
	position: fixed;
	bottom: 18px;
	z-index: 2147483000;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--ma11y-grad) !important;
	color: #fff !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px rgba(0, 29, 41, .28);
	border: 3px solid #fff !important;
}
.ma11y .ma11y-fab:hover { box-shadow: 0 8px 24px rgba(0, 29, 41, .38); }
.ma11y .ma11y-fab svg { width: 30px; height: 30px; stroke-width: 2.2; }
.ma11y[data-side="left"] .ma11y-fab { left: 18px; }
.ma11y[data-side="right"] .ma11y-fab { right: 18px; }
.ma11y .ma11y-fab[hidden] { display: none !important; }
/* Shrunk: a small tab stuck to the edge of the screen, still visible and still a button */
.ma11y .ma11y-fab.ma11y-fab-min { width: 30px; height: 60px; bottom: 90px; border-width: 2px !important; }
.ma11y .ma11y-fab.ma11y-fab-min svg { width: 20px; height: 20px; }
.ma11y[data-side="left"] .ma11y-fab.ma11y-fab-min { left: 0; border-radius: 0 16px 16px 0; border-left: 0 !important; }
.ma11y[data-side="right"] .ma11y-fab.ma11y-fab-min { right: 0; border-radius: 16px 0 0 16px; border-right: 0 !important; }

/* The panel: a portal dialog (white, 18px corners, soft shadow) */
.ma11y .ma11y-panel {
	position: fixed;
	top: 12px;
	bottom: 12px;
	z-index: 2147483001;
	width: 460px;
	max-width: calc(100vw - 24px);
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 20px 60px rgba(0, 29, 41, .28);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.ma11y .ma11y-panel[hidden] { display: none !important; }
.ma11y[data-side="left"] .ma11y-panel { left: 12px; }
.ma11y[data-side="right"] .ma11y-panel { right: 12px; }

.ma11y .ma11y-head {
	position: relative;
	background: #fff;
	padding: 18px 18px 14px;
	border-bottom: 1px solid var(--ma11y-line);
	flex: none;
}
.ma11y .ma11y-head::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 5px;
	background: var(--ma11y-grad);
}
.ma11y .ma11y-head-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ma11y .ma11y-title { font-size: 20px; font-weight: 800; color: var(--ma11y-navy); margin: 0; line-height: 1.3; }
.ma11y .ma11y-close {
	width: 40px; height: 40px;
	border-radius: 50%;
	border: 1px solid var(--ma11y-line) !important;
	background: #fff;
	display: flex !important; align-items: center; justify-content: center;
	color: var(--ma11y-ink);
}
.ma11y .ma11y-close:hover { background: var(--ma11y-sky); }
.ma11y .ma11y-close svg { width: 20px; height: 20px; }

/* Header actions: the portal's small outline buttons */
.ma11y .ma11y-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.ma11y .ma11y-pill {
	flex: 1 1 0;
	min-width: 0;
	min-height: 40px;
	padding: 6px 10px;
	border-radius: 999px;
	border: 2px solid var(--ma11y-blue) !important;
	background: #fff;
	color: var(--ma11y-blue);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	display: flex !important; align-items: center; justify-content: center; gap: 6px;
	text-align: center;
}
.ma11y .ma11y-pill:hover { background: var(--ma11y-blue); color: #fff; }
.ma11y .ma11y-pill svg { width: 17px; height: 17px; }

.ma11y .ma11y-body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 14px;
	background: var(--ma11y-sky);
	overscroll-behavior: contain;
}

/* Sections: portal tiles, a light header strip with a coloured icon square */
.ma11y .ma11y-section {
	background: #fff;
	border: 1px solid var(--ma11y-line);
	border-radius: 16px;
	margin-bottom: 14px;
	overflow: hidden;
}
.ma11y .ma11y-section-title {
	font-size: 16.5px; font-weight: 700;
	display: flex; align-items: center; gap: 10px;
	padding: 10px 14px;
	background: var(--ma11y-sky);
	color: var(--ma11y-navy);
	border-bottom: 1px solid var(--ma11y-line);
}
.ma11y .ma11y-section-title .ma11y-ico {
	width: 32px; height: 32px; border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
	color: #fff; background: var(--ma11y-tone, var(--ma11y-blue));
	flex: none;
}
.ma11y .ma11y-section-title svg { width: 18px; height: 18px; }
.ma11y .ma11y-section[data-tone="comm"] { --ma11y-tone: var(--ma11y-comm); --ma11y-tone-t: var(--ma11y-comm-t); }
.ma11y .ma11y-section[data-tone="pink"] { --ma11y-tone: var(--ma11y-pink); --ma11y-tone-t: var(--ma11y-pink-t); }
.ma11y .ma11y-section[data-tone="jobs"] { --ma11y-tone: var(--ma11y-jobs); --ma11y-tone-t: var(--ma11y-jobs-t); }
.ma11y .ma11y-section[data-tone="violet"] { --ma11y-tone: var(--ma11y-violet); --ma11y-tone-t: var(--ma11y-violet-t); }
.ma11y .ma11y-section-body { padding: 12px; }
.ma11y .ma11y-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; }

/* Steppers: one row, label at the start, outline round buttons */
.ma11y .ma11y-stepper {
	grid-column: 1 / -1;
	border: 1px solid var(--ma11y-line);
	border-radius: 14px;
	padding: 8px 12px;
	display: grid;
	grid-template-columns: 1fr 42px 84px 42px;
	align-items: center;
	gap: 6px;
	background: #fff;
}
.ma11y .ma11y-stepper-label { font-weight: 700; font-size: 15.5px; display: flex; align-items: center; gap: 8px; color: var(--ma11y-ink); }
.ma11y .ma11y-stepper-label svg { width: 18px; height: 18px; color: var(--ma11y-tone, var(--ma11y-blue)); }
.ma11y .ma11y-step {
	width: 42px; height: 42px;
	border-radius: 50%;
	border: 2px solid var(--ma11y-blue) !important;
	background: #fff !important;
	color: var(--ma11y-blue) !important;
	display: flex !important; align-items: center; justify-content: center;
}
.ma11y .ma11y-step:hover { background: var(--ma11y-blue) !important; color: #fff !important; }
.ma11y .ma11y-step svg { width: 20px; height: 20px; stroke-width: 2.6; }
.ma11y .ma11y-step[aria-disabled="true"] { border-color: var(--ma11y-line) !important; color: #b4bec3 !important; background: #fff !important; cursor: default; }
.ma11y .ma11y-value { text-align: center; font-weight: 700; font-size: 16px; color: var(--ma11y-blue); font-variant-numeric: tabular-nums; }

/* Toggles: white tiles; when on, solid portal blue with a small "פעיל" chip */
.ma11y .ma11y-toggle {
	background: #fff;
	border: 1px solid var(--ma11y-line) !important;
	border-radius: 14px;
	min-height: 92px;
	padding: 12px 6px;
	display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
	text-align: center;
	font-size: 14px; font-weight: 600; line-height: 1.3;
	color: var(--ma11y-ink);
}
.ma11y .ma11y-toggle svg { width: 26px; height: 26px; color: var(--ma11y-tone, var(--ma11y-blue)); }
.ma11y .ma11y-toggle:hover { border-color: var(--ma11y-blue) !important; background: var(--ma11y-sky); }
.ma11y .ma11y-toggle[aria-pressed="true"] {
	background: var(--ma11y-blue) !important;
	border-color: var(--ma11y-blue) !important;
	color: #fff !important;
	font-weight: 700;
}
.ma11y .ma11y-toggle[aria-pressed="true"] svg { color: #fff; }
.ma11y .ma11y-toggle[aria-pressed="true"]::after {
	content: "פעיל";
	font-size: 12.5px;
	font-weight: 700;
	background: #fff;
	color: var(--ma11y-blue);
	border-radius: 99px;
	padding: 0 9px;
	line-height: 1.6;
}

/* Help items: portal list rows */
.ma11y .ma11y-info {
	background: #fff;
	border: 1px solid var(--ma11y-line) !important;
	border-radius: 14px;
	padding: 10px 12px;
	display: flex !important; align-items: center; gap: 12px;
	margin-bottom: 8px;
	width: 100%;
	color: var(--ma11y-ink);
}
.ma11y .ma11y-info:last-child { margin-bottom: 0; }
.ma11y .ma11y-info:hover { border-color: var(--ma11y-blue) !important; background: var(--ma11y-sky); }
.ma11y .ma11y-info-icon {
	width: 40px; height: 40px; border-radius: 10px;
	background: var(--ma11y-tone-t, var(--ma11y-sky)); color: var(--ma11y-tone, var(--ma11y-blue));
	display: flex; align-items: center; justify-content: center; flex: none;
}
.ma11y .ma11y-info-icon svg { width: 20px; height: 20px; }
.ma11y .ma11y-info strong { display: block; font-size: 15.5px; font-weight: 700; color: var(--ma11y-navy); }
.ma11y .ma11y-info span.ma11y-info-sub { display: block; font-size: 14px; color: var(--ma11y-grey); }
.ma11y .ma11y-keys { border: 1px solid var(--ma11y-line); border-radius: 14px; padding: 10px 14px; margin-bottom: 8px; font-size: 14.5px; background: var(--ma11y-sky); }
.ma11y .ma11y-keys[hidden] { display: none !important; }
.ma11y .ma11y-keys li { list-style: none; padding: 4px 0; }
.ma11y .ma11y-keys kbd {
	display: inline-block; min-width: 28px; padding: 0 6px; margin: 0 2px;
	border: 1px solid #b9c4c9; border-bottom-width: 3px; border-radius: 6px;
	background: #fff; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12.5px; text-align: center; direction: ltr;
	color: var(--ma11y-ink);
}

.ma11y .ma11y-foot {
	flex: none;
	background: var(--ma11y-ink);
	color: #cfe0e8;
	font-size: 13px;
	padding: 9px 16px;
	text-align: center;
}

.ma11y .ma11y-guide {
	position: fixed;
	left: 0; right: 0;
	height: 14px;
	z-index: 2147482999;
	pointer-events: none;
	background: rgba(255, 213, 0, .55);
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
	transform: translateY(-50%);
}
.ma11y .ma11y-guide[hidden] { display: none !important; }

@media (max-width: 520px) {
	.ma11y .ma11y-stepper { grid-template-columns: 1fr 42px 66px 42px; }
	.ma11y .ma11y-pill { font-size: 13px; padding: 6px; white-space: normal; line-height: 1.2; }
	.ma11y .ma11y-pill svg { display: none; }
	.ma11y .ma11y-panel { top: 0; bottom: 0; left: 0 !important; right: 0 !important; width: 100%; max-width: 100%; border-radius: 0; }
	.ma11y .ma11y-fab { width: 52px; height: 52px; bottom: 14px; }
	.ma11y[data-side="left"] .ma11y-fab { left: 12px; }
	.ma11y[data-side="right"] .ma11y-fab { right: 12px; }
	.ma11y .ma11y-fab.ma11y-fab-min { width: 28px; height: 56px; bottom: 84px; }
	.ma11y[data-side="left"] .ma11y-fab.ma11y-fab-min { left: 0; }
	.ma11y[data-side="right"] .ma11y-fab.ma11y-fab-min { right: 0; }
	.ma11y .ma11y-toggle { min-height: 86px; font-size: 13px; }
	.ma11y .ma11y-title { font-size: 18px; }
}

@media (prefers-reduced-motion: no-preference) {
	.ma11y .ma11y-fab { transition: transform .15s ease, box-shadow .15s ease; }
	.ma11y .ma11y-fab:hover { transform: scale(1.06); }
	.ma11y .ma11y-fab.ma11y-fab-min:hover { transform: none; width: 36px; }
	.ma11y .ma11y-toggle, .ma11y .ma11y-step, .ma11y .ma11y-pill { transition: background-color .12s ease, border-color .12s ease, color .12s ease; }
}