/* ===================================================================
   Keepoint Solutions — shared accessibility layer
   Loaded on every public page via <script src="/a11y.js" defer></script>
   Provides: skip link, keyboard focus rings, an accessibility settings
   panel (text size / high contrast / reduce motion), and respects the
   visitor's OS "reduce motion" setting by default.
   =================================================================== */

/* ---- Skip to content link (visible on keyboard focus) ---- */
.a11y-skip{
  position:fixed; top:-120px; left:16px; z-index:2147483000;
  background:#1B2845; color:#fff;
  font-family:"Plus Jakarta Sans", system-ui, sans-serif;
  font-weight:600; font-size:15px; padding:12px 18px; border-radius:10px;
  text-decoration:none; box-shadow:0 8px 24px rgba(14,20,36,.35);
  transition:top .18s ease;
}
.a11y-skip:focus{ top:16px; outline:3px solid #B8924A; outline-offset:2px; }

/* ---- Visible focus ring for keyboard users (site-wide) ---- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:3px solid #B8924A; outline-offset:2px; border-radius:4px;
}

/* ---- Floating accessibility button ---- */
.a11y-fab{
  position:fixed; left:20px; bottom:20px; z-index:2147482000;
  width:52px; height:52px; border-radius:50%;
  background:#1B2845; color:#fff; border:2px solid #B8924A;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 12px 30px -8px rgba(14,20,36,.55);
  transition:background .18s, transform .15s;
}
.a11y-fab:hover{ background:#0E1424; transform:translateY(-1px); }
.a11y-fab svg{ width:26px; height:26px; }

/* Right-aligned variant — used on the portal so the button clears the sidebar */
.a11y-fab.a11y-right{ left:auto; right:20px; }

/* ---- Settings panel ---- */
.a11y-panel{
  position:fixed; left:20px; bottom:84px; z-index:2147482001;
  width:288px; max-width:calc(100vw - 40px);
  background:#fff; color:#1B2845;
  border:1px solid rgba(27,40,69,.15); border-radius:16px;
  box-shadow:0 24px 60px -18px rgba(14,20,36,.45);
  padding:18px;
  font-family:"Plus Jakarta Sans", system-ui, sans-serif;
  display:none;
}
.a11y-panel.open{ display:block; }
.a11y-panel.a11y-right{ left:auto; right:20px; }
.a11y-panel h2{
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  margin:0 0 16px; color:#1B2845;
  display:flex; justify-content:space-between; align-items:center;
}
.a11y-panel h2 .a11y-x{
  background:none; border:0; font-size:22px; line-height:1; color:#1B2845;
  cursor:pointer; padding:0 4px;
}
.a11y-group{ margin-bottom:14px; }
.a11y-group:last-child{ margin-bottom:0; }
.a11y-group > .lbl{
  display:block; font-size:13px; font-weight:600; margin-bottom:8px; color:#1B2845;
}
.a11y-seg{ display:flex; gap:6px; }
.a11y-seg button{
  flex:1; padding:11px 4px; font-size:14px; font-weight:600;
  background:#F5F2EB; color:#1B2845; border:1px solid rgba(27,40,69,.15);
  border-radius:10px; cursor:pointer;
  font-family:inherit;
}
.a11y-seg button:hover{ border-color:rgba(27,40,69,.35); }
.a11y-seg button[aria-pressed="true"]{ background:#1B2845; color:#fff; border-color:#1B2845; }
.a11y-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; background:#F5F2EB; border:1px solid rgba(27,40,69,.15);
  border-radius:10px; cursor:pointer; font-size:14px; font-weight:600; color:#1B2845;
  font-family:inherit;
}
.a11y-toggle:hover{ border-color:rgba(27,40,69,.35); }
.a11y-toggle .pip{
  width:42px; height:24px; border-radius:999px; background:rgba(27,40,69,.25);
  position:relative; transition:background .2s; flex-shrink:0;
}
.a11y-toggle .pip::after{
  content:""; position:absolute; top:2px; left:2px; width:20px; height:20px;
  border-radius:50%; background:#fff; transition:transform .2s;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.a11y-toggle[aria-pressed="true"] .pip{ background:#B8924A; }
.a11y-toggle[aria-pressed="true"] .pip::after{ transform:translateX(18px); }

/* ===================================================================
   Applied preference states
   =================================================================== */

/* Larger text — zoom scales the px-based layout reliably */
body.a11y-text-1{ zoom:1.12; }
body.a11y-text-2{ zoom:1.25; }

/* High contrast — strengthen the low-opacity ink tokens used site-wide.
   These custom properties cascade into every component that uses var(). */
body.a11y-contrast{
  --ink-70: rgba(27,40,69,.95);
  --ink-55: rgba(27,40,69,.82);
  --ink-35: rgba(27,40,69,.62);
  --ink-12: rgba(27,40,69,.30);
  --ink-06: rgba(27,40,69,.16);
  --rule:   rgba(27,40,69,.32);
  --rule-soft: rgba(27,40,69,.18);
}

/* Reduce motion — manual toggle */
body.a11y-reduce-motion *,
body.a11y-reduce-motion *::before,
body.a11y-reduce-motion *::after{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
  scroll-behavior:auto !important;
}

/* Reduce motion — respect the visitor's OS setting automatically */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}