/*
 * ישרולט — the accessibility toolbar, wearing the theme.
 *
 * Sogo Accessibility ships a white, square-cornered panel bolted flush into a
 * corner of the viewport, and paints an active toggle bright red. On this
 * table that reads as someone else's widget dropped on top of the site, so the
 * chrome is restyled here: the launcher becomes one of the board's gold chips,
 * the panel becomes one of its floating navy panels, and the toggles pick up
 * the same gold as every other "this is on" state in the theme.
 *
 * Nothing here touches what the toolbar *does* — the contrast sheets, the font
 * scaling and the keyboard handling are all the plugin's and stay untouched.
 *
 * The plugin's own placement setting is ignored on purpose. It writes the
 * corner into a class (.bottomleft, .topright …) whose rules live in its
 * stylesheet, and a fresh install defaults to a corner this design does not
 * use; pinning the position here means the theme looks right wherever it is
 * installed, without a database value having to travel with it. That is also
 * why the overrides below carry !important: they are answering a third-party
 * stylesheet and a block of inline CSS the plugin prints in the footer, both
 * of which load after this file.
 *
 * Colours are literal rather than tokens: this sheet also loads on the table,
 * which is the client's demo and does not load tokens.css.
 */

/* ------------------------------------------------------------ the launcher */

#open_sogoacc {
	/* Up off the edge and onto the start side, clear of the footer. */
	inset: auto 18px 22px auto !important;
	display: grid !important;
	place-items: center;
	width: 52px;
	height: 52px;
	padding: 0 !important;
	border: 1px solid rgba(216, 178, 95, .7) !important;
	border-radius: 50% !important;
	background: linear-gradient(160deg, #f6dd8c, #d8b25f 62%, #b8913f) !important;
	color: #071223 !important;
	box-shadow: 0 14px 30px rgba(0, 0, 0, .55), 0 0 22px rgba(216, 178, 95, .26), inset 0 1px 0 rgba(255, 255, 255, .45) !important;
	transition: transform .18s ease, box-shadow .18s ease;
}

#open_sogoacc:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 36px rgba(0, 0, 0, .6), 0 0 30px rgba(216, 178, 95, .42), inset 0 1px 0 rgba(255, 255, 255, .45) !important;
}

#open_sogoacc:focus-visible {
	outline: 3px solid #7fd0f5;
	outline-offset: 3px;
}

/* --------------------------------------------------------------- the panel */

#sogoacc {
	inset: auto 18px 22px auto !important;
	width: min(320px, calc(100vw - 32px)) !important;
	max-height: min(560px, calc(100vh - 44px));
	overflow: auto;
	border: 1px solid rgba(216, 178, 95, .45) !important;
	border-radius: 16px !important;
	background: radial-gradient(130% 120% at 50% -8%, #1d3c6b, #08142a 74%) !important;
	color: #eaf1fc !important;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .7), 0 0 40px rgba(216, 178, 95, .14) !important;
	font-family: 'Assistant', Arial, Helvetica, sans-serif;
	scrollbar-color: #d8b25f rgba(255, 255, 255, .06);
	scrollbar-width: thin;
}

/* The panel's own header doubles as its close button. */

#sogoacc #close_sogoacc {
	background: rgba(216, 178, 95, .16) !important;
	border-bottom: 1px solid rgba(216, 178, 95, .3);
	color: #f3d77e !important;
	font-size: 14px;
	font-weight: 800;
	text-transform: none;
}

#sogoacc #close_sogoacc:hover {
	background: rgba(216, 178, 95, .26) !important;
}

/* ------------------------------------------------------------- the toggles */

#sogoacc .btn.btn-default {
	background: transparent;
	border-bottom: 1px solid rgba(163, 197, 240, .14);
	color: #dce8f9;
	font-size: 14px;
	font-weight: 700;
}

#sogoacc .btn.btn-default:hover,
#sogoacc .btn.btn-default:focus {
	background: rgba(163, 197, 240, .1);
	color: #f3d77e;
}

#sogoacc .btn.btn-default:focus-visible {
	outline: 3px solid #7fd0f5;
	outline-offset: -3px;
}

/*
 * What is switched on. The plugin paints these red !important; gold is what
 * every other "on" state on this site uses, and the bar marks the row's start
 * edge — the right, since the site is RTL.
 */

body.sogo_blank_white #b_n_c,
body.sogo_contrasts #contrasts,
body.sogo_contrasts_white #contrasts_white,
body.sogo_animation_off #animation_off,
body.sogo_readable_font #readable_font,
body.sogo_underline_links #underline_links,
body.sogo_font_2 #sogo_a2,
body.sogo_font_3 #sogo_a3 {
	background-color: rgba(216, 178, 95, .22) !important;
	box-shadow: inset -3px 0 0 #d8b25f;
	color: #f3d77e !important;
}

/*
 * The row icons.
 *
 * The plugin draws them from an icomoon webfont it has shipped since 2016, and
 * Chromium refuses to load it — both the WOFF and the TTF come back as errors
 * from document.fonts, so every row renders an empty glyph box. They are drawn
 * here instead, as masks: the mask takes its colour from the row, so an icon
 * follows the label through rest, hover and switched-on without a second set
 * of rules. The plugin's own :before glyph is cleared so nothing shows twice.
 */

#sogoacc .sogo-btn-group span[class*="sogo-icon-"] {
	top: 50%;
	width: 30px;
	height: 30px;
	transform: translateY(-50%);
}

@supports ((-webkit-mask-image: none) or (mask-image: none)) {
	/* Longhands, not the `mask` shorthand: the shorthand resets mask-image,
	   and this rule outranks the per-icon ones that set it. */
	#sogoacc .sogo-btn-group span[class*="sogo-icon-"] {
		background-color: currentColor;
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: contain;
		mask-size: contain;
	}

	#sogoacc .sogo-icon-black_and_white::before,
	#sogoacc .sogo-icon-black::before,
	#sogoacc .sogo-icon-white::before,
	#sogoacc .sogo-icon-flash::before,
	#sogoacc .sogo-icon-font::before,
	#sogoacc .sogo-icon-link::before {
		content: '';
	}

	/* Black and white: a disc half filled. */
	#sogoacc .sogo-icon-black_and_white {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.2' fill='none' stroke='%23000' stroke-width='1.9'/%3E%3Cpath d='M12 2.8a9.2 9.2 0 0 1 0 18.4z' fill='%23000'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.2' fill='none' stroke='%23000' stroke-width='1.9'/%3E%3Cpath d='M12 2.8a9.2 9.2 0 0 1 0 18.4z' fill='%23000'/%3E%3C/svg%3E");
	}

	/* Dark contrast: a crescent. */
	#sogoacc .sogo-icon-black {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 15.4A9.2 9.2 0 0 1 8.6 3.5 9.2 9.2 0 1 0 20.5 15.4z' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 15.4A9.2 9.2 0 0 1 8.6 3.5 9.2 9.2 0 1 0 20.5 15.4z' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E");
	}

	/* Light contrast: a sun. */
	#sogoacc .sogo-icon-white {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4.4' fill='none' stroke='%23000' stroke-width='1.9'/%3E%3Cpath d='M12 1.8v3M12 19.2v3M1.8 12h3M19.2 12h3M4.7 4.7l2.1 2.1M17.2 17.2l2.1 2.1M19.3 4.7l-2.1 2.1M6.8 17.2l-2.1 2.1' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4.4' fill='none' stroke='%23000' stroke-width='1.9'/%3E%3Cpath d='M12 1.8v3M12 19.2v3M1.8 12h3M19.2 12h3M4.7 4.7l2.1 2.1M17.2 17.2l2.1 2.1M19.3 4.7l-2.1 2.1M6.8 17.2l-2.1 2.1' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
	}

	/* Stop movement: a bolt. */
	#sogoacc .sogo-icon-flash {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.2 2.2 5 13.4h5.6l-.8 8.4 8.2-11.2h-5.6z' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.2 2.2 5 13.4h5.6l-.8 8.4 8.2-11.2h-5.6z' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E");
	}

	/* Readable font: a letter. */
	#sogoacc .sogo-icon-font {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.6 20 12 4l7.4 16M7.8 14.6h8.4' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.6 20 12 4l7.4 16M7.8 14.6h8.4' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	}

	/* Underline links: a chain over a rule. */
	#sogoacc .sogo-icon-link {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.2 12.4a4.3 4.3 0 0 0 6.5.5l2.5-2.5a4.3 4.3 0 0 0-6.1-6.1l-1.4 1.4M13.8 11.6a4.3 4.3 0 0 0-6.5-.5l-2.5 2.5a4.3 4.3 0 0 0 6.1 6.1l1.4-1.4M3.6 22h16.8' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.2 12.4a4.3 4.3 0 0 0 6.5.5l2.5-2.5a4.3 4.3 0 0 0-6.1-6.1l-1.4 1.4M13.8 11.6a4.3 4.3 0 0 0-6.5-.5l-2.5 2.5a4.3 4.3 0 0 0 6.1 6.1l1.4-1.4M3.6 22h16.8' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
	}
}

/* The A A A row: the plugin's inline block colours these to match its own
   header, which on a navy panel would be navy on navy. */

#sogoacc div#sogo_font_a button {
	color: #f3d77e !important;
}

#sogoacc div#sogo_font_a {
	border-bottom: 1px solid rgba(163, 197, 240, .14);
}

/* --------------------------------------------- statement and cancel links */

#sogoacc .accessibility-info {
	border-top: 1px solid rgba(216, 178, 95, .22);
	color: #b6c9e4;
	font-size: 12.5px;
	font-weight: 600;
}

#sogoacc a[href] {
	color: #dce8f9;
}

#sogoacc a[href]:hover {
	color: #f3d77e;
}

#sogoacc .green {
	color: #7fd0f5;
}

#sogoacc .red {
	color: #ff876d;
}

/* The plugin's own credit line, kept but quietened. */

#sogoacc .sogo-logo {
	background: rgba(0, 0, 0, .28) !important;
	border-top: 1px solid rgba(163, 197, 240, .12);
}

#sogoacc .sogo-logo a {
	color: #9fb3d1;
}

/*
 * "Readable font" replaces every font on the page, the toolbar's own icons
 * included — so switching it on used to turn the launcher and the two links
 * below into empty boxes. Icon glyphs are not reading matter and keep theirs.
 * (The row icons above are masks and were never affected.)
 */

body.sogo_readable_font #open_sogoacc .fa,
body.sogo_readable_font #sogoacc .fa {
	font-family: FontAwesome !important;
}

/* ------------------------------------------------------------- small screens */

@media (max-width: 720px) {
	#open_sogoacc {
		inset: auto 12px 16px auto !important;
		width: 46px;
		height: 46px;
	}

	#sogoacc {
		inset: auto 12px 16px auto !important;
		max-height: calc(100dvh - 32px);
	}
}

/*
 * The toolbar's own "stop movement" switch is the one that should quiet the
 * page, so the launcher's hover lift goes when the visitor asks for stillness
 * or the system does.
 */

@media (prefers-reduced-motion: reduce) {
	#open_sogoacc,
	#open_sogoacc:hover {
		transform: none;
		transition: none;
	}
}