/* BY SHIRA accessibility (ported from Noela): the menu itself + site-wide basics (visible keyboard focus, reduced motion). */

/* ---------- always on ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid #1f5fd1; outline-offset: 2px; }
@media (forced-colors: active) { :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid LinkText; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- the button + panel ---------- */
#na11y-root { font-family: 'Open Sans', Arial, sans-serif; }
#na11y-root .na11y-btn { position: fixed; inset-block-end: 18px; left: 18px; z-index: 30; inline-size: 46px; block-size: 46px;
  border-radius: 50%; border: 2px solid #fff; background: #212121; color: #fff; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); padding: 0; }
#na11y-root .na11y-btn:hover { background: #333; }
#na11y-root .na11y-panel { position: fixed; inset-block-end: 76px; left: 18px; z-index: 31; inline-size: min(330px, calc(100vw - 40px));
  max-block-size: calc(100dvh - 110px); overflow: auto; background: #fff; color: #111; border-radius: 14px; padding: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25); text-align: right; }
#na11y-root .na11y-panel[hidden] { display: none; }
#na11y-root .na11y-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 14px; }
#na11y-root .na11y-title { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: 0; color: #111; }
#na11y-root .na11y-close { inline-size: 40px; block-size: 40px; border: 0; background: #f2f2f2; border-radius: 50%; font-size: 24px; line-height: 1; cursor: pointer; color: #111; }
#na11y-root .na11y-text { display: flex; align-items: center; gap: 10px; margin-block-end: 10px; }
#na11y-root .na11y-level { flex: 1; text-align: center; font-size: 15px; font-weight: 500; }
#na11y-root .na11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#na11y-root .na11y-opt, #na11y-root .na11y-reset { min-block-size: 46px; border: 1.5px solid #d6d6d6; background: #fff; color: #111; border-radius: 10px;
  font: 500 15px/1.2 'Open Sans', Arial, sans-serif; cursor: pointer; padding: 8px 10px; }
#na11y-root .na11y-text .na11y-opt { min-inline-size: 84px; }
#na11y-root .na11y-opt[aria-pressed="true"] { background: #111; color: #fff; border-color: #111; }
#na11y-root .na11y-opt:disabled { opacity: 0.4; cursor: default; }
#na11y-root .na11y-reset { inline-size: 100%; margin-block-start: 10px; background: #f2f2f2; border-color: #f2f2f2; }
#na11y-root .na11y-link { display: block; margin-block-start: 12px; text-align: center; color: #111; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
#na11y-root :focus-visible { outline: 3px solid #1f5fd1; outline-offset: 2px; }
@media print { #na11y-root { display: none !important; } }

/* ---------- modes (class on <html>) ---------- */
html.na11y-contrast body, html.na11y-contrast body *:not(#na11y-root, #na11y-root *, img, video, svg, svg *, picture) {
  background-color: #000 !important; color: #fff !important; border-color: #fff !important; text-shadow: none !important; box-shadow: none !important; }
html.na11y-contrast body a:not(#na11y-root *), html.na11y-contrast body a:not(#na11y-root *) * { color: #ffe14d !important; }
html.na11y-contrast header img, html.na11y-contrast footer img:not([src*=payment]) { filter: invert(1) brightness(2); }
html.na11y-contrast [class*="overlay"]:not(#na11y-root *) { background: rgba(0, 0, 0, 0.6) !important; }

html.na11y-gray body > *:not(#na11y-root) { filter: grayscale(1); }

html.na11y-links body a:not(#na11y-root *) { text-decoration: underline !important; text-underline-offset: 3px !important; outline: 2px solid #1f5fd1 !important; outline-offset: 2px; }

html.na11y-font body *:not(#na11y-root *):not(svg, svg *) { font-family: Arial, 'Open Sans', sans-serif !important; font-weight: 400 !important; letter-spacing: 0.01em !important; }

html.na11y-motion *, html.na11y-motion *::before, html.na11y-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

html.na11y-cursor, html.na11y-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11.5-6.6.6 3.9 7.4-3 1.5-3.8-7.5L4 20z' fill='%23111' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") 4 2, auto !important; }

/* our intro/reveal must not stay hidden when animations are stopped */
html.na11y-motion .logo .ch, html.na11y-motion .tagline, html.na11y-motion .intro, html.na11y-motion .brand-meta, html.na11y-motion .nav { opacity: 1 !important; filter: none !important; transform: none !important; }
html.na11y-motion .tile img { clip-path: none !important; transform: none !important; }
html.na11y-contrast .menu, html.na11y-contrast .lb { background: #000 !important; }
html.na11y-contrast .burger span, html.na11y-contrast .burger span::before, html.na11y-contrast .burger span::after { background-color: #fff !important; }
html.na11y-contrast .menu-close svg, html.na11y-contrast .lb svg { stroke: #fff !important; }
html.na11y-motion .sig { -webkit-mask-image: none !important; mask-image: none !important; opacity: 1 !important; }
html.na11y-motion .tile img { scale: 1 !important; translate: none !important; }
html.na11y-cursor .view-cursor { display: none !important; }
html.na11y-cursor.has-view-cursor .tile { cursor: inherit; }
html.na11y-motion .cover { display: none !important; }
html.na11y-motion .note-sig { -webkit-mask-image: none !important; mask-image: none !important; }
html.na11y-motion .reel { overflow-x: auto !important; }
@media (max-height: 500px) { #na11y-root .na11y-btn { inline-size: 38px; block-size: 38px; inset-block-end: 10px; left: 10px; } #na11y-root .na11y-btn svg { width: 20px; height: 20px; } #na11y-root .na11y-panel { inset-block-end: 56px; left: 10px; } }
#na11y-root .na11y-link { padding: 10px 0; margin-block-start: 4px; }