/*
 * Accessibility preferences, shared by every page: the Next.js pages
 * (A11yMenu.tsx) and the hand-written pages under /he/ and /services/*
 * (a11y.js). Both toggle the same html.a11y-* classes and store the same
 * localStorage keys, so a choice made on one page holds on every page.
 *
 * Filters sit on <html>, never on <body>: a filter on body makes it the
 * containing block for position:fixed, and the accessibility button and
 * cookie notice would then scroll away with the page.
 */

html.a11y-underline a {
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
html.a11y-font body,
html.a11y-font .font-display,
html.a11y-font .font-mono {
  font-family: Arial, Verdana, system-ui, sans-serif !important;
}
html.a11y-spacing body {
  line-height: 2 !important;
  letter-spacing: 0.02em;
  word-spacing: 0.08em;
}
html.a11y-contrast { filter: contrast(1.25); }
html.a11y-gray { filter: grayscale(1); }
html.a11y-contrast.a11y-gray { filter: contrast(1.25) grayscale(1); }

html.a11y-stop-anim *,
html.a11y-stop-anim *::before,
html.a11y-stop-anim *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html.a11y-stop-anim video {
  visibility: hidden; /* the poster backdrop behind it stays visible */
}

/* Keyboard focus that cannot be missed: thick amber ring plus a dark halo,
   visible on both the dark and the light sections. */
html.a11y-focus :focus,
html.a11y-focus :focus-visible {
  outline: 3px solid #ffbf00 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.75) !important;
}

/* Large cursor (48px), black with a white edge so it reads on any background. */
html.a11y-cursor,
html.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='M4 2l15 12h-7l4 8-3 1.5-4-8-5 5z' fill='%23000' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}
html.a11y-cursor a,
html.a11y-cursor button,
html.a11y-cursor [role="button"],
html.a11y-cursor label,
html.a11y-cursor select {
  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='M9 11V4.5a1.5 1.5 0 013 0V10l.5-1a1.5 1.5 0 013 .5V11l.3-.4a1.5 1.5 0 012.7.9V16c0 3.3-2.4 6-5.5 6h-1.5c-1.8 0-3.4-.9-4.4-2.4L4.3 15a1.5 1.5 0 012.4-1.8L9 15.5z' fill='%23000' stroke='%23fff' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 14 3, pointer !important;
}

/* ------------------------------------------------------------------
 * Widget chrome for the hand-written pages (a11y.js). The Next.js pages
 * style the same widget with Tailwind in A11yMenu.tsx / CookieNotice.tsx;
 * the two are kept visually the same.
 * ------------------------------------------------------------------ */
.lhv-a11y-btn {
  position: fixed;
  z-index: 40;
  left: max(1.25rem, env(safe-area-inset-left));
  bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + var(--cookie-h, 0px));
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid rgba(159, 179, 200, 0.16);
  background: rgba(22, 32, 43, 0.95);
  color: #9fb3c8;
  cursor: pointer;
  touch-action: manipulation;
}
.lhv-a11y-btn:hover { border-color: #3ce6ee; color: #3ce6ee; }
.lhv-a11y-btn:focus-visible,
.lhv-a11y-panel button:focus-visible,
.lhv-a11y-panel a:focus-visible,
.lhv-cookie button:focus-visible {
  outline: 2px solid #3ce6ee;
  outline-offset: 2px;
}
.lhv-a11y-panel {
  position: fixed;
  z-index: 40;
  left: max(1.25rem, env(safe-area-inset-left));
  bottom: calc(max(5rem, calc(env(safe-area-inset-bottom) + 4rem)) + var(--cookie-h, 0px));
  width: min(20rem, calc(100vw - 2.5rem));
  max-height: calc(100dvh - 7rem - var(--cookie-h, 0px));
  overflow-y: auto;
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(159, 179, 200, 0.16);
  background: #16202b;
  color: #9fb3c8;
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.lhv-a11y-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 0.5rem; padding: 0 0.25rem; }
.lhv-a11y-head p { margin: 0; font-weight: 600; color: #fff; }
.lhv-a11y-panel button,
.lhv-a11y-panel a {
  font: inherit;
  color: inherit;
  touch-action: manipulation;
}
.lhv-a11y-x,
.lhv-a11y-step {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
}
.lhv-a11y-step { border-color: rgba(159, 179, 200, 0.16); font-weight: 600; }
.lhv-a11y-x:hover, .lhv-a11y-step:hover { color: #3ce6ee; border-color: #3ce6ee; }
.lhv-a11y-size { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.375rem 0.75rem; }
.lhv-a11y-size span.v { width: 1.25rem; text-align: center; color: #9fb3c8; }
.lhv-a11y-size .ctl { display: flex; align-items: center; gap: 0.375rem; }
.lhv-a11y-row {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0.75rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  text-align: start;
  cursor: pointer;
}
.lhv-a11y-row:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.lhv-a11y-chip {
  flex: none;
  width: 40px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 2px;
  border-radius: 9999px;
  border: 1px solid rgba(159, 179, 200, 0.16);
  background: rgba(255, 255, 255, 0.04);
}
.lhv-a11y-chip i { width: 16px; height: 16px; border-radius: 9999px; background: #7c8696; }
.lhv-a11y-row[aria-pressed="true"] .lhv-a11y-chip { justify-content: flex-end; border-color: #3ce6ee; background: rgba(60, 230, 238, 0.2); }
.lhv-a11y-row[aria-pressed="true"] .lhv-a11y-chip i { background: #3ce6ee; }
.lhv-a11y-reset {
  width: 100%;
  min-height: 44px;
  margin-top: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(159, 179, 200, 0.16);
  background: transparent;
  cursor: pointer;
}
.lhv-a11y-reset:hover { color: #3ce6ee; border-color: #3ce6ee; }
.lhv-a11y-link {
  display: flex;
  min-height: 44px;
  margin-top: 0.25rem;
  align-items: center;
  justify-content: center;
  color: #3ce6ee !important;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lhv-cookie {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  border-top: 1px solid rgba(159, 179, 200, 0.16);
  background: rgba(22, 32, 43, 0.97);
  color: #9fb3c8;
  padding: 0.875rem 1.5rem max(0.9rem, env(safe-area-inset-bottom));
  font: 13px/1.6 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
.lhv-cookie-in { max-width: 72rem; margin: 0 auto; display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) {
  .lhv-cookie-in { flex-direction: row; align-items: center; justify-content: space-between; }
}
.lhv-cookie p { margin: 0; }
.lhv-cookie a { color: #3ce6ee; text-decoration: underline; text-underline-offset: 2px; }
.lhv-cookie .en { display: block; margin-top: 0.25rem; color: #9fb3c8; }
.lhv-cookie button {
  flex: none;
  min-height: 44px;
  padding: 0 1.5rem;
  border: 0;
  border-radius: 0.5rem;
  background: #3ce6ee;
  color: #04222a;
  font: 600 14px system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}