/* The look of the accessibility menu of the landing pages (public/landing/a11y.js builds it; what its settings do to the page is a11y-effects.css).
 * The same panel as the app's (src/components/AccessibilityMenu.tsx): a tab on the edge of the screen and a sheet that slides over it. Sizes are in rem on purpose:
 * the "text size" setting moves the root font size, so the menu itself grows with it. Left to right or right to left follows the page (logical properties only). */
.a11y-root { font-family: var(--font-head, "Assistant", system-ui, sans-serif); font-size: 1rem; line-height: 1.4; color: #2C362A; text-align: start; letter-spacing: 0; }
.a11y-root *, .a11y-root *::before, .a11y-root *::after { box-sizing: border-box; }
.a11y-root [hidden] { display: none !important; }
.a11y-root button { font: inherit; color: inherit; margin: 0; cursor: pointer; }

/* the tab: halfway down the edge where the page ends (the left edge of a Hebrew page), 44px wide at least */
.a11y-tab {
  position: fixed; z-index: 90; inset-inline-end: 0; top: 50%; transform: translateY(-50%);
  width: 44px; height: 56px; padding: 0; display: flex; align-items: center; justify-content: center;
  background: #2C362A; color: #fff; border: 2px solid #fff; border-inline-end-width: 0;
  border-start-start-radius: 16px; border-end-start-radius: 16px; box-shadow: 0 6px 18px rgba(44, 54, 42, .35);
}
.a11y-tab:hover { background: #1F2820; }
.a11y-dot { display: none; position: absolute; top: 6px; inset-inline-start: 6px; width: 10px; height: 10px; border-radius: 50%; background: #fbbf24; border: 1px solid #fff; }
.a11y-tab.a11y-active .a11y-dot { display: block; }

.a11y-backdrop { position: fixed; inset: 0; z-index: 998; background: rgba(0, 0, 0, .4); }
.a11y-panel {
  position: fixed; z-index: 999; inset-block: 0; inset-inline-end: 0; width: min(100vw, 24rem);
  display: flex; flex-direction: column; background: #fff; color: #2C362A; box-shadow: 0 0 40px rgba(0, 0, 0, .3);
}
.a11y-head { flex: none; display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; background: #F9F4EC; border-bottom: 1px solid #E9DFD0; }
.a11y-badge { flex: none; width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: #2C362A; color: #fff; display: flex; align-items: center; justify-content: center; }
.a11y-title { flex: 1; min-width: 0; margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.25; outline: none; }
.a11y-close { flex: none; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: .75rem; }
.a11y-close:hover { background: #F5EDE1; }

.a11y-body { flex: 1; overflow-y: auto; padding: 1rem; }
.a11y-body > * + * { margin-top: 1.25rem; }
.a11y-intro { margin: 0; font-size: .875rem; line-height: 1.6; opacity: .85; }
.a11y-section > * + * { margin-top: .5rem; }
.a11y-h3 { margin: 0; font-size: .875rem; font-weight: 700; line-height: 1.3; }
.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.a11y-size { display: flex; align-items: stretch; gap: .5rem; }
.a11y-step { flex: none; width: 4rem; min-height: 56px; display: flex; align-items: center; justify-content: center; background: #fff; border: 2px solid #DCD3C7; border-radius: 1rem; }
.a11y-step:hover { background: #F7F3ED; }
.a11y-step[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.a11y-readout { flex: 1; display: flex; align-items: center; justify-content: center; padding: .25rem .5rem; background: #F9F4EC; border: 2px solid #E9DFD0; border-radius: 1rem; font-size: .875rem; font-weight: 700; text-align: center; }

.a11y-option { width: 100%; min-height: 56px; padding: .5rem .75rem; display: flex; align-items: center; gap: .6rem; text-align: start; background: #fff; border: 2px solid #DCD3C7; border-radius: 1rem; }
.a11y-option:hover { background: #F7F3ED; }
.a11y-option svg { flex: none; }
.a11y-option-label { flex: 1; font-size: .875rem; font-weight: 700; line-height: 1.25; }
.a11y-option-check { display: none; flex: none; }
.a11y-option[aria-pressed="true"] { background: #2C362A; border-color: #2C362A; color: #fff; }
.a11y-option[aria-pressed="true"]:hover { background: #2C362A; }
.a11y-option[aria-pressed="true"] .a11y-option-check { display: inline-flex; }

.a11y-foot { flex: none; display: flex; flex-direction: column; gap: .5rem; padding: .75rem 1rem; background: #F9F4EC; border-top: 1px solid #E9DFD0; }
.a11y-action { min-height: 48px; padding: .25rem 1rem; display: flex; align-items: center; justify-content: center; gap: .5rem; font-size: .875rem; font-weight: 700; background: #fff; color: #2C362A; border: 2px solid #2C362A; border-radius: 1rem; }
.a11y-action:hover { background: #F7F3ED; }
.a11y-action[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.a11y-primary { background: #2C362A; color: #fff; }
.a11y-primary:hover { background: #1F2820; }
[dir="ltr"] .a11y-back-arrow { display: inline-flex; transform: scaleX(-1); }

.a11y-statement { font-size: .875rem; line-height: 1.7; }
.a11y-statement p { margin: 0; }
.a11y-statement p + p { margin-top: .75rem; }
.a11y-mail { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-weight: 700; color: #1a3d8f; text-decoration: underline; text-underline-offset: 4px; }
.a11y-updated { font-size: .75rem; opacity: .7; }
.a11y-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The link that skips to the main content (it is in the HTML of every page, first in the body): hidden until it has the focus, then at the top corner of the screen.
   The page's <main> takes the focus when it is followed, without an outline around the whole page, and scrolls below the header that follows the page down. */
.a11y-skip { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.a11y-skip:focus {
  position: fixed; z-index: 1001; top: 12px; inset-inline-start: 12px; width: auto; height: auto; margin: 0; overflow: visible; clip: auto;
  display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1.25rem; border-radius: .75rem;
  background: #2C362A; color: #fff; font: 700 1rem/1.3 var(--font-head, "Assistant", system-ui, sans-serif); text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35); outline: 3px solid #1a3d8f; outline-offset: 2px;
}
main[tabindex="-1"] { outline: none; scroll-margin-top: 9rem; }

/* A visitor who made the text bigger must not have to scroll sideways to read it (WCAG 1.4.4 and 1.4.10): while the setting is on, a long word may break and what the page
   kept on one line (a button, a chip) may wrap. Only on the landing pages: the rules are not in the file the app shares. */
html[data-a11y-font] body * { overflow-wrap: anywhere !important; }
html[data-a11y-font] body *:not(pre, textarea, input, select, script, style) { white-space: normal !important; }

/* the header: the wordmark is a logo and is never broken, so with big text the row (logo, button) wraps to a second line instead of squeezing it */
html[data-a11y-font] .nav .wrap { flex-wrap: wrap !important; height: auto !important; min-height: 72px; padding-block: 8px; row-gap: 8px; }
html[data-a11y-font] .brand span { overflow-wrap: normal !important; white-space: nowrap !important; }

.a11y-root :focus-visible { outline: 3px solid #1a3d8f; outline-offset: 2px; }

@media print { .a11y-root { display: none !important; } }