/*
 * סרגל הנגישות - הנגשת אתר ד״ר קפלן
 * מבוסס על Real Accessability 1.0 של ריל מדיה, עם שלושה הבדלים:
 *   1. הפקדים הם <button> ולא <a href="#">, ולכן כל סלקטור עודכן בהתאם.
 *   2. נוסף מצב פוקוס נראה לעין - סרגל נגישות שאי אפשר לראות בו את הפוקוס
 *      נכשל ב-2.4.7 בדיוק מול המשתמשים שהוא נועד לשרת.
 *   3. הוסרו הכללים של #real-accessability-player, שלא קיים בשום מקום בקוד.
 */

@font-face {
	font-family: 'realaccessability';
	src:url('fonts/realaccessability.eot?717675');
	src:url('fonts/realaccessability.eot?717675#iefix') format('embedded-opentype'),
		url('fonts/realaccessability.ttf?717675') format('truetype'),
		url('fonts/realaccessability.woff?717675') format('woff'),
		url('fonts/realaccessability.svg?717675#realaccessability') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* ---------- קישורי דילוג ----------
   מוסתרים מהעין עד שהם מקבלים פוקוס, ואז קופצים לפינה העליונה.
   לא display:none ולא visibility:hidden - שניהם היו מוציאים אותם
   מסדר הטאבים ומבטלים את כל התועלת שבהם. */

#realmedia-accessibility-skip-links a.realmedia-accessibility-skip-link {
	position: absolute;
	top: -100em;
	right: 0;
	z-index: 1000000000;
	display: block;
	width: auto;
	padding: 12px 24px;
	background: #fff;
	color: #063d8d;
	border: 2px solid #063d8d;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: bold;
	line-height: normal;
	text-decoration: underline;
	white-space: nowrap;
}

html[dir="ltr"] #realmedia-accessibility-skip-links a.realmedia-accessibility-skip-link {
	right: auto;
	left: 0;
}

#realmedia-accessibility-skip-links a.realmedia-accessibility-skip-link:focus {
	top: 0;
	outline: 3px solid #d40000;
	outline-offset: -3px;
}

.realmedia-accessibility-body {
	-webkit-transition: all 0.2s;
	transition: all 0.2s;
}

#realmedia-accessibility-toolbar {
	width: 200px;
	background: #fff;
	border: 1px #063d8d solid;
	border-right-width: 0;
	position: fixed;
	top: 210px;
	right: -200px;
	min-height: 35px;
	z-index: 999999999;
	-webkit-transition: all 0.2s;
	transition: all 0.2s;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;

	/* הסרגל מנורמל ל-Arial תמיד, ולא יורש את גופן התבנית.
	   הוא נועד להיות קריא גם כשהאתר משתמש בגופן דקורטיבי, וגם כדי שהמראה
	   שלו יהיה זהה בכל אתר שהתוסף יורכב עליו. אין לזה קשר ללחצן
	   "גופן קריא (אריאל)", שמשנה את גופן התוכן של האתר. */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
}

#realmedia-accessibility-toolbar.open {
	right: 0;
}

/* ---------- הסתרת הפקדים כשהסרגל סגור ----------
   הסרגל הסגור יושב מחוץ למסך, אבל position בלבד אינו מוציא אלמנט מסדר הטאבים.
   בלי הכלל הזה משתמש מקלדת עובר בכל עמוד שמונה עצירות פוקוס שאינן נראות
   בשום מקום על המסך - כשל 2.4.7 שנוצר על ידי סרגל הנגישות עצמו.

   visibility:hidden מוציא מסדר הטאבים ועדיין מאפשר אנימציה, בשונה מ-display:none.
   ההשהיה בסגירה מתוזמנת לאורך אנימציית ההחלקה, כדי שהתפריט לא ייעלם באמצע. */
#realmedia-accessibility-toolbar ul,
#realmedia-accessibility-toolbar #realmedia-accessibility-statement-bar {
	visibility: hidden;
	-webkit-transition: visibility 0s linear 0.2s;
	transition: visibility 0s linear 0.2s;
}

#realmedia-accessibility-toolbar.open ul,
#realmedia-accessibility-toolbar.open #realmedia-accessibility-statement-bar {
	visibility: visible;
	-webkit-transition: visibility 0s linear 0s;
	transition: visibility 0s linear 0s;
}

/* ---------- לחצן הפתיחה ---------- */

#realmedia-accessibility-toolbar button#realmedia-accessibility-toggle {
	background-color: #063d8d;
	position: absolute;
	top: -1px;
	left: -40px;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
	text-decoration: none;
	border: 0;
	padding: 0;
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}

#realmedia-accessibility-toolbar button#realmedia-accessibility-toggle span[aria-hidden] {
	font-family: 'realaccessability';
	font-size: 26px;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
	display: inline-block;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #fff;
}

#realmedia-accessibility-toolbar button#realmedia-accessibility-toggle span.realmedia-accessibility-icon:before {
	content: "\e907";
}

#realmedia-accessibility-toolbar button#realmedia-accessibility-toggle span.realmedia-accessibility-loading {
	display: none;
}

#realmedia-accessibility-toolbar button#realmedia-accessibility-toggle span.realmedia-accessibility-loading:before {
	content: "\e908";
	font-size: 20px;
	-webkit-animation: realmedia-accessibility-spin 2500ms linear infinite;
	animation: realmedia-accessibility-spin 2500ms linear infinite;
}

@-webkit-keyframes realmedia-accessibility-spin {
	from { -webkit-transform: rotate(0deg); }
	to   { -webkit-transform: rotate(360deg); }
}

@keyframes realmedia-accessibility-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* מכבדים משתמש שביקש פחות תנועה */
@media (prefers-reduced-motion: reduce) {
	#realmedia-accessibility-toolbar,
	.realmedia-accessibility-body,
	#realmedia-accessibility-toolbar button#realmedia-accessibility-toggle span.realmedia-accessibility-loading:before {
		-webkit-transition: none;
		transition: none;
		-webkit-animation: none;
		animation: none;
	}
}

/* ---------- פריטי הסרגל ---------- */

#realmedia-accessibility-toolbar ul {
	margin: 0;
	padding: 0;
	list-style: none;
	background: #fff;
}

#realmedia-accessibility-toolbar ul li {
	line-height: 38px;
	border-top: 1px #ccc solid;
}

#realmedia-accessibility-toolbar ul li:first-child {
	border-top: 0;
}

#realmedia-accessibility-toolbar ul li button {
	display: block;
	width: 100%;
	padding: 0 10px;
	color: #222;
	text-decoration: none;
	position: relative;
	background: none;
	border: 0;
	margin: 0;
	/* מוצהר במפורש ולא font:inherit - כלל תבנית כמו "button { font-family: X }"
	   הוא הצהרה ישירה על האלמנט, והיה גובר על ירושה מהמכל */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: normal;
	font-style: normal;
	letter-spacing: normal;
	line-height: 38px;
	text-align: right;
	cursor: pointer;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}

html[dir="ltr"] #realmedia-accessibility-toolbar ul li button {
	text-align: left;
}

#realmedia-accessibility-toolbar ul li button:before {
	font-family: 'realaccessability';
	content: " ";
	font-size: 17px;
	margin-right: 10px;
	position: relative;
	top: 2px;
	display: inline-block;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#realmedia-accessibility-toolbar ul li button#realmedia-accessibility-biggerFont:before  { content: "\e901"; }
#realmedia-accessibility-toolbar ul li button#realmedia-accessibility-smallerFont:before { content: "\e902"; }
#realmedia-accessibility-toolbar ul li button#realmedia-accessibility-invert:before      { content: "\e904"; }
#realmedia-accessibility-toolbar ul li button#realmedia-accessibility-grayscale:before   { content: "\e903"; }
#realmedia-accessibility-toolbar ul li button#realmedia-accessibility-linkHighlight:before { content: "\e906"; }
#realmedia-accessibility-toolbar ul li button#realmedia-accessibility-regularFont:before { content: "\e900"; }
#realmedia-accessibility-toolbar ul li button#realmedia-accessibility-reset:before       { content: "\e905"; }

#realmedia-accessibility-toolbar ul li button:hover:before,
#realmedia-accessibility-toolbar ul li button.clicked:before,
#realmedia-accessibility-toolbar ul li button[aria-pressed="true"]:before {
	background-position-y: bottom !important;
}

#realmedia-accessibility-toolbar ul li button:hover {
	background-color: #fafafa;
	color: #063d8d;
}

#realmedia-accessibility-toolbar ul li button.clicked,
#realmedia-accessibility-toolbar ul li button[aria-pressed="true"] {
	background-color: #fafafa;
	color: #063d8d;
	-webkit-box-shadow: inset 0 0 3px #ccc;
	box-shadow: inset 0 0 3px #ccc;
}

/* מצב פוקוס נראה לעין - לא היה בגרסה המקורית */
#realmedia-accessibility-toolbar button:focus-visible {
	outline: 3px solid #d40000;
	outline-offset: -3px;
}

#realmedia-accessibility-toolbar button#realmedia-accessibility-toggle:focus-visible {
	outline: 3px solid #d40000;
	outline-offset: -4px;
}

/* ---------- הצהרת הנגישות ----------
   יושבת בפס התחתון של הסרגל, במקום שבו היה קרדיט היצרן. */

#realmedia-accessibility-statement-bar {
	text-align: center;
	line-height: 25px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: normal;
}

#realmedia-accessibility-statement-bar a {
	background: #eaedf2;
	color: #424e5f;
	display: block;
	padding: 8px 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-decoration: none;
}

#realmedia-accessibility-statement-bar a:hover,
#realmedia-accessibility-statement-bar a:focus-visible {
	background: #355f9d;
	text-decoration: underline;
	color: #fff;
}

#realmedia-accessibility-statement-bar a:focus-visible {
	outline: 3px solid #d40000;
	outline-offset: -3px;
}

/* ---------- האפקטים עצמם ---------- */

.realmedia-accessibility-grayscale {
	filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale");
	filter: gray;
	-webkit-filter: grayscale(100%);
}

.realmedia-accessibility-invert {
	-webkit-filter: invert(100%);
	filter: invert(100%);
	color: #000;
}

.realmedia-accessibility-linkHighlight a {
	text-decoration: underline !important;
}

.realmedia-accessibility-regularFont {
	font-family: Arial, Helvetica, sans-serif !important;
}

/* ---------- תמיכת RTL ---------- */

html[dir="rtl"] #realmedia-accessibility-toolbar {
	left: -200px;
	right: auto;
	border-right-width: 1px;
	border-left-width: 0;
}

html[dir="rtl"] #realmedia-accessibility-toolbar.open {
	right: auto;
	left: 0;
}

html[dir="rtl"] #realmedia-accessibility-toolbar button#realmedia-accessibility-toggle {
	right: -40px;
	left: auto;
}

html[dir="rtl"] #realmedia-accessibility-toolbar ul li button:before {
	margin-right: 0;
	margin-left: 10px;
}
