/* ==========================================================================
   Beit Midrash — accessibility panel.

   Two halves: the button and panel's own chrome (the .bm-a11y block), and the
   reader's settings (the html.bm-a11y-* modes at the foot of the file).

   The modes use !important without apology. design.css paints the header with
   it, WooCommerce paints its own buttons with it, and a reader who has asked
   for high contrast has to win that argument every time.
   ========================================================================== */

.bm-a11y {
	--bm-a11y-navy: #1B2960;
	--bm-a11y-cream: #FFFCF3;
	--bm-a11y-blue: #7481B5;
	font-family: Heebo, 'Segoe UI', 'Arial Hebrew', Arial, sans-serif;
	direction: rtl;
}

/* ---------- the button ----------
   "Unobtrusive" is a real constraint and a trap: the usual way to make a badge
   recede is to fade it, and fading a control is how you make it fail contrast.

   So: it is small, it sits in the corner furthest from the reading column, and
   it rests at .72 opacity — measured, not guessed. Composited over the cream
   ground at that alpha the navy reads rgb(91,100,137), which against the cream
   is 5.6:1, comfortably past the 4.5:1 that text needs and the 3:1 that WCAG
   1.4.11 asks of a control. Hover, focus and touch take it to full strength.

   44x44 is not negotiable in the other direction: that is the WCAG 2.5.5 target
   size, and shrinking the button to make it politer is how these widgets end up
   unusable by the people they are for. */
.bm-a11y__toggle {
	position: fixed;
	inset-block-end: 1.25rem;
	inset-inline-start: 1.25rem;
	z-index: 9990;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--bm-a11y-navy);
	color: var(--bm-a11y-cream);
	cursor: pointer;
	opacity: .72;
	box-shadow: 0 2px 10px rgb(27 41 96 / .28);
	transition: opacity .2s ease, transform .2s ease;
}

.bm-a11y__toggle:hover,
.bm-a11y__toggle:focus-visible {
	opacity: 1;
	transform: scale(1.06);
}

.bm-a11y__toggle:focus-visible {
	outline: 3px solid var(--bm-a11y-blue);
	outline-offset: 3px;
}

/* A finger cannot hover, so there is no way to discover the full-strength
   state on a phone. Rest at full strength there instead. */
@media (hover: none) {
	.bm-a11y__toggle { opacity: .92; }
}

@media (prefers-reduced-motion: reduce) {
	.bm-a11y__toggle { transition: none; }
	.bm-a11y__toggle:hover,
	.bm-a11y__toggle:focus-visible { transform: none; }
}

/* ---------- the panel ---------- */
.bm-a11y__panel {
	position: fixed;
	inset-block-end: 4.75rem;
	inset-inline-start: 1.25rem;
	z-index: 9991;
	inline-size: 17.5rem;
	max-inline-size: calc(100vw - 2.5rem);
	max-block-size: calc(100vh - 7rem);
	overflow-y: auto;
	padding: 1rem;
	border-radius: 6px;
	background: var(--bm-a11y-cream);
	color: var(--bm-a11y-navy);
	box-shadow: 0 6px 28px rgb(27 41 96 / .3);
}

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

.bm-a11y__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin-block-end: .85rem;
}

.bm-a11y__title {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--bm-a11y-navy);
}

.bm-a11y__close {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 32px;
	block-size: 32px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--bm-a11y-navy);
	cursor: pointer;
}

.bm-a11y__close:hover { background: rgb(27 41 96 / .09); }

/* ---------- text size ---------- */
.bm-a11y__size {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin-block-end: .75rem;
	padding: .35rem;
	border: 1px solid rgb(27 41 96 / .22);
	border-radius: 4px;
}

.bm-a11y__step {
	inline-size: 36px;
	block-size: 36px;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: var(--bm-a11y-navy);
	color: var(--bm-a11y-cream);
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
}

.bm-a11y__step:disabled { opacity: .4; cursor: default; }

/* The percentage is a Latin numeral inside an RTL box; without this the sign
   and the digits change places. */
.bm-a11y__size-value {
	font-size: .95rem;
	font-weight: 500;
	unicode-bidi: plaintext;
}

/* ---------- the toggles ---------- */
.bm-a11y__list {
	margin: 0 0 .75rem;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .3rem;
}

.bm-a11y__list li { margin: 0; }

.bm-a11y__item {
	inline-size: 100%;
	padding: .55rem .7rem;
	border: 1px solid rgb(27 41 96 / .22);
	border-radius: 4px;
	background: transparent;
	color: var(--bm-a11y-navy);
	font-size: .95rem;
	font-family: inherit;
	text-align: start;
	cursor: pointer;
}

.bm-a11y__item:hover { background: rgb(27 41 96 / .07); }

/* aria-pressed is the state, so it is also the hook — the styling cannot drift
   away from what a screen reader is told. */
.bm-a11y__item[aria-pressed="true"] {
	background: var(--bm-a11y-navy);
	border-color: var(--bm-a11y-navy);
	color: var(--bm-a11y-cream);
	font-weight: 500;
}

.bm-a11y__item[aria-pressed="true"]::after {
	content: " ✓";
}

.bm-a11y__reset,
.bm-a11y__statement {
	display: block;
	inline-size: 100%;
	padding: .5rem;
	border: 0;
	border-radius: 4px;
	background: rgb(27 41 96 / .09);
	color: var(--bm-a11y-navy);
	font-family: inherit;
	font-size: .9rem;
	text-align: center;
	cursor: pointer;
	box-sizing: border-box;
}

.bm-a11y__statement {
	margin-block-start: .4rem;
	text-decoration: underline;
}

.bm-a11y :where(button, a):focus-visible {
	outline: 3px solid var(--bm-a11y-blue);
	outline-offset: 2px;
}

/* ==========================================================================
   The reader's settings.
   ========================================================================== */

/* ---------- ניגודיות כהה ----------
   Black ground, yellow text: the pairing Israeli readers who use this expect,
   and 19.6:1. The fixed artwork goes — it is a pale image whose whole purpose
   is atmosphere, and atmosphere is what this mode is turning off. */
html.bm-a11y-dark body::before { display: none !important; }

html.bm-a11y-dark,
html.bm-a11y-dark body,
html.bm-a11y-dark :where(div, section, article, header, footer, aside, main, nav, li, tr, td, th, form, figure, blockquote) {
	background: #000 !important;
	background-image: none !important;
	color: #ff0 !important;
}

html.bm-a11y-dark :where(h1, h2, h3, h4, h5, h6, p, span, strong, em, label, dt, dd, time, small, figcaption) {
	color: #ff0 !important;
	background: transparent !important;
}

html.bm-a11y-dark :where(a, a *) {
	color: #4ff !important;
	text-decoration: underline !important;
}

html.bm-a11y-dark :where(button, .wp-element-button, .wp-block-button__link, input, select, textarea) {
	background: #000 !important;
	color: #ff0 !important;
	border: 2px solid #ff0 !important;
}

html.bm-a11y-dark :where(img, svg, video) { opacity: .85; }

/* ---------- ניגודיות בהירה ---------- */
html.bm-a11y-light body::before { display: none !important; }

html.bm-a11y-light,
html.bm-a11y-light body,
html.bm-a11y-light :where(div, section, article, header, footer, aside, main, nav, li, tr, td, th, form, figure, blockquote) {
	background: #fff !important;
	background-image: none !important;
	color: #000 !important;
}

html.bm-a11y-light :where(h1, h2, h3, h4, h5, h6, p, span, strong, em, label) {
	color: #000 !important;
	background: transparent !important;
}

html.bm-a11y-light :where(a, a *) {
	color: #00c !important;
	text-decoration: underline !important;
}

html.bm-a11y-light :where(button, .wp-element-button, .wp-block-button__link) {
	background: #fff !important;
	color: #000 !important;
	border: 2px solid #000 !important;
}

/* The panel must not be repainted by the mode it is switching on, or the
   reader cannot find the control to switch it off again. */
html.bm-a11y-dark .bm-a11y__panel,
html.bm-a11y-light .bm-a11y__panel,
html.bm-a11y-dark .bm-a11y__panel *,
html.bm-a11y-light .bm-a11y__panel * {
	background-color: transparent !important;
	color: var(--bm-a11y-navy) !important;
}

html.bm-a11y-dark .bm-a11y__panel,
html.bm-a11y-light .bm-a11y__panel {
	background: var(--bm-a11y-cream) !important;
}

html.bm-a11y-dark .bm-a11y__item[aria-pressed="true"],
html.bm-a11y-light .bm-a11y__item[aria-pressed="true"],
html.bm-a11y-dark .bm-a11y__step,
html.bm-a11y-light .bm-a11y__step,
html.bm-a11y-dark .bm-a11y__toggle,
html.bm-a11y-light .bm-a11y__toggle {
	background: var(--bm-a11y-navy) !important;
	color: var(--bm-a11y-cream) !important;
}

/* ---------- גווני אפור ----------
   On <html> rather than <body>: a filter on body would establish a containing
   block for the fixed artwork and the panel, which quietly breaks both. */
html.bm-a11y-grayscale { filter: grayscale(1); }

/* ---------- הדגשת קישורים ---------- */
html.bm-a11y-links :where(a, a *) {
	text-decoration: underline !important;
	text-underline-offset: .18em !important;
}

html.bm-a11y-links a:focus-visible {
	outline: 3px solid currentColor !important;
	outline-offset: 2px;
}

/* ---------- גופן קריא ----------
   Frank Ruhl Libre and Yiddishkeit are display faces; this swaps the whole page
   to the sans, which is the one of the three with the plainest letterforms. */
html.bm-a11y-readable :where(body, h1, h2, h3, h4, h5, h6, p, li, a, button, input, label, blockquote, td, th) {
	font-family: Heebo, 'Segoe UI', 'Arial Hebrew', Arial, sans-serif !important;
	font-style: normal !important;
	letter-spacing: normal !important;
}

/* ---------- ריווח שורות ----------
   The values are WCAG 1.4.12's, which is the point: a page that survives them
   is the page that passes that criterion. */
html.bm-a11y-spacing :where(p, li, dd, blockquote) {
	line-height: 1.5 !important;
	letter-spacing: .12em !important;
	word-spacing: .16em !important;
	margin-block-end: 2em !important;
}

/* ---------- סמן גדול ---------- */
html.bm-a11y-cursor,
html.bm-a11y-cursor * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 10-6 1 3.5 7-2.7 1.3L10 14l-5 4z' fill='%23fff' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") 4 2, auto !important;
}

/* ---------- עצירת תנועה ----------
   The reveal is applied by JS as a class, so switching this on mid-page has to
   force the finished state too, or whatever has not yet scrolled into view
   stays invisible for good. */
html.bm-a11y-nomotion *,
html.bm-a11y-nomotion *::before,
html.bm-a11y-nomotion *::after {
	animation-duration: .001s !important;
	animation-iteration-count: 1 !important;
	transition-duration: .001s !important;
	scroll-behavior: auto !important;
}

html.bm-a11y-nomotion .bm-reveal {
	opacity: 1 !important;
	transform: none !important;
}

/* ---------- enlarged text ----------
   Raising the root font size widens the header nav, and the row is a wrapping
   flex line (D-064). Let it wrap to the centre rather than leaving the CTA
   stranded against the far edge. */
html[style*="font-size"] header.wp-block-template-part .wp-block-group.is-content-justification-space-between {
	justify-content: center;
	row-gap: .75rem;
}