/* ==========================================================================
   Accessibility options panel and the display modes it switches on (classes on <html>).
   Opened from the "Accessibility options" link in the footer. Light theme only.
   ========================================================================== */

/* Atkinson Hyperlegible (SIL OFL) for the "Readable font" option. Only downloaded once that option is on. */
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/atkinson-hyperlegible-latin-700-italic.woff2") format("woff2"); }

.a11y-panel {
  position: fixed; left: 16px; bottom: 16px; z-index: 116; width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 20px; border-radius: var(--r-lg); background: var(--white); color: var(--navy); box-shadow: 0 24px 60px -24px rgba(21, 34, 51, .5), inset 0 0 0 1px var(--hairline);
  transform-origin: bottom left; animation: a11yIn .35s var(--ease);
}
@keyframes a11yIn { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.a11y-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.a11y-head h2 { margin: 0; font-size: 1.5rem; }
.a11y-x { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--hover); color: var(--navy); cursor: pointer; }
.a11y-size { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; margin-bottom: 12px; border-radius: var(--r); background: var(--ivory); font-weight: 600; }
.a11y-stepper { display: flex; align-items: center; gap: 6px; }
.a11y-stepper button { width: 44px; height: 44px; border: 0; border-radius: var(--r); background: var(--white); color: var(--navy); font: 700 1.05rem/1 var(--font-ui); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line-strong); }
.a11y-stepper button:hover { background: var(--navy); color: var(--ivory); }
.a11y-stepper output { min-width: 56px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a11y-grid button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 86px; padding: 14px; border: 0; border-radius: var(--r); text-align: left;
  background: var(--ivory); color: var(--navy); font: 600 .95rem/1.2 var(--font-ui); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s;
}
.a11y-grid button:hover { box-shadow: inset 0 0 0 2px var(--navy); }
.a11y-grid button[aria-pressed="true"] { background: var(--navy); color: var(--ivory); }
.a11y-grid svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.a11y-grid svg .fill { fill: currentColor; }
.a11y-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; }
.a11y-reset { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--r); background: var(--navy); color: var(--ivory); font: 600 .92rem/1 var(--font-ui); cursor: pointer; }
.a11y-foot a { font-weight: 600; font-size: .92rem; }
.a11y-note { margin: 10px 0 0; font-size: .85rem; color: var(--muted); }

/* Reading guide */
.a11y-guide { display: none; position: fixed; left: 0; right: 0; top: 0; z-index: 114; height: 46px; pointer-events: none; transform: translateY(var(--gy, -100px));
  background: rgba(201, 168, 108, .18); box-shadow: 0 0 0 100vmax rgba(21, 34, 51, .38); border-block: 2px solid rgba(201, 168, 108, .9); }
.a11y-guide-on .a11y-guide { display: block; }

/* High contrast */
:root.a11y-contrast { --ink: #000; --ink-soft: #111; --muted: #262626; --cream: #fff; --paper: #fff; --sand: #efefef; --line: rgba(0, 0, 0, .5); --line-strong: #000; --sage: #000; --gold-ink: #5a4520; --amber-ink: #5a4520; --dusk: #5a4520; --hover: rgba(0, 0, 0, .1); --focus: #000; }
.a11y-contrast .h-hero-media::after, .a11y-contrast .cta-photo::after, .a11y-contrast .s-hero-media::after { background: rgba(0, 0, 0, .8) !important; }
.a11y-contrast .btn-ghost, .a11y-contrast .chip, .a11y-contrast .faq, .a11y-contrast .h-svc, .a11y-contrast .tile { box-shadow: inset 0 0 0 2px var(--ink) !important; }
.a11y-contrast .hd, .a11y-contrast .ft, .a11y-contrast .f-strip, .a11y-contrast .h-tool { background: #000 !important; }
.a11y-contrast .ft-bg, .a11y-contrast .ft::after { display: none; }
.a11y-contrast .btn-primary { --bg: #ffd25e; --fg: #000; }

/* Readable font */
.a11y-font { --font-display: "Atkinson Hyperlegible", "Inter Variable", system-ui, sans-serif; --font-ui: "Atkinson Hyperlegible", "Inter Variable", system-ui, sans-serif; }
.a11y-font h1, .a11y-font h2, .a11y-font h3 { letter-spacing: 0 !important; font-weight: 700; }

/* Highlight links */
.a11y-links a:not(.btn), .a11y-links .link-arrow { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 4px !important; }
.a11y-links a, .a11y-links button { outline: 2px dashed var(--navy); outline-offset: 2px; }
.a11y-links .hd a, .a11y-links .hd button, .a11y-links .ft a, .a11y-links .ft button, .a11y-links .f-strip a { outline-color: var(--gold); }
.a11y-links a:hover, .a11y-links a:focus { background: #fff200; color: #000 !important; }

/* Wider spacing */
.a11y-spacing body { letter-spacing: .035em; word-spacing: .14em; }
.a11y-spacing p, .a11y-spacing li, .a11y-spacing dd, .a11y-spacing blockquote { line-height: 2 !important; }
.a11y-spacing p { margin-bottom: 1.4em; }

/* Pause animations */
.a11y-still *, .a11y-still *::before, .a11y-still *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.a11y-still [data-reveal], .a11y-still .h-hero-copy > *, .a11y-still .h-start, .a11y-still .h-title .ln > span, .a11y-still .mega-item, .a11y-still .ov-body > a { opacity: 1 !important; transform: none !important; }
.a11y-still .h-hero-media { clip-path: none !important; }
.a11y-still .h-hero-grid { transform: none !important; opacity: 1 !important; }
.a11y-still .h-ecg-base { stroke-dashoffset: 0 !important; }

/* Big cursor */
.a11y-cursor, .a11y-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 4l32 16-14 4-7 15z' fill='%23000' stroke='%23fff' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4, auto !important; }
.a11y-cursor a, .a11y-cursor a *, .a11y-cursor button, .a11y-cursor button *, .a11y-cursor label { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 4l32 16-14 4-7 15z' fill='%231B2A41' stroke='%23fff' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4, pointer !important; }

@media (max-width: 767px) {
  .a11y-panel { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  .staging-ribbon { bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important; right: 12px !important; left: auto !important; }
}
@media print { .a11y-panel, .a11y-guide { display: none !important; } }