/* HannaWorks accessibility layer, 7 October 2026.
   WCAG 2.2 AA, plus the Apple settings: Larger Text, Bold Text, Increase Contrast, Reduce Transparency,
   Differentiate Without Colour, Smart Invert, Reduce Motion, Full Keyboard Access, Voice Control, Switch Control. */

/* Larger Text / Dynamic Type: on iPhone and iPad Safari the root size follows the system text size.
   Every font size on the site is in rem, so the whole page scales with it (and with browser text zoom). */
@supports (-webkit-touch-callout: none) {
  html { font: -apple-system-body; }
}

/* Focused things are never hidden under the sticky header or the floating motion control (WCAG 2.4.11).
   app.js keeps scroll-padding-top in step with the real header height. */
html { scroll-padding-top: 110px; scroll-padding-bottom: 96px; }
body { overflow-wrap: break-word; }
footer { padding-bottom: 96px; }
/* On very short windows (400% zoom, landscape phones) the header scrolls away instead of covering content. */
@media (max-height: 500px) { .header { position: relative; } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Focus indicator: 3px, at least 3:1 against what it sits on, in light, dark and on the dark sections. */
body { --focus: #185c3f; }
body[data-theme=dark] { --focus: #9fe3b9; --blue: #74b98f; }
.hero-art, .pipeline-section, .closing, .enterprise-card { --focus: #a9f1c7; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}
.provider-choice:has(input:focus-visible) > span { outline: 3px solid var(--focus); outline-offset: 4px; }
/* The proof card straddles the dark artwork and the light page, so it gets a two-tone ring. */
.floating-proof:focus-visible { outline: 3px solid #185c3f; outline-offset: 2px; box-shadow: 0 0 0 8px #a9f1c7; transform: rotate(0); }
.skip { color: var(--ink); border: 2px solid var(--focus); border-radius: 4px; font-weight: 600; text-decoration: underline; }
.skip:focus { top: 8px; left: 8px; }
.capability-panel:focus-visible, .table-scroll:focus-visible { outline-offset: 2px; }

/* Readable secondary text (contrast fixes found by the audit). */
.question-number { opacity: 1; }
.result-cite { color: #091525; font-weight: 600; }
::placeholder { color: var(--muted); opacity: 1; font-style: italic; }

/* Target size: at least 24px everywhere, 44px for the stand-alone links. */
.footer-main nav a, .footer-bottom a, .pricing-hero-foot a { display: inline-flex; align-items: center; gap: .35em; min-height: 44px; }
.provider-comparison th a { display: inline-flex; align-items: center; min-height: 28px; }
.motion-master { min-height: 44px; }

/* Differentiate Without Colour: selected states also change shape or weight, not just colour. */
.nav [aria-current=page] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.question-option.active { box-shadow: inset 3px 0 0 var(--blue); font-weight: 600; }
.source-chip.active, .skill-choices > button[aria-pressed=true] { box-shadow: inset 0 0 0 1px var(--blue); font-weight: 600; }
.connector.active { box-shadow: inset 0 -3px 0 var(--blue); }
.connector.active strong { text-decoration: underline; text-underline-offset: 4px; }
.stage.active { box-shadow: inset 4px 0 0 #a9f1c7; }
.role-switch button.active, .cost-period button.active, .email-timeline button[aria-pressed=true] strong { font-weight: 650; }

/* Larger text: the header and footer wrap instead of running off the page (WCAG 1.4.4 / 1.4.10). */
.nav { height: auto; min-height: 88px; flex-wrap: wrap; row-gap: 8px; padding-block: 8px; }
.nav nav { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
.footer-main nav { flex-wrap: wrap; row-gap: 0; }
.network-diagram { min-width: 0; max-width: 100%; }
.network-nodes > * { min-width: 0; }
@media (max-width: 700px) {
  .nav { min-height: 73px; column-gap: 12px; }
  .nav .brand { flex-shrink: 1; min-width: 0; }
  .nav nav { top: 100%; justify-content: flex-start; }
}
/* Grid and flex children may shrink, so very large text wraps instead of widening the page. */
.wrap > *, .split > *, .demo-layout > *, .hero-grid > *, .section-heading > *, .plan-grid > *, .security-pillars > *,
.review-grid > *, .audience-grid > *, .demo-steps li > div, .footer-main > *, .capability-panel > *, .faq-layout > * { min-width: 0; }
h1, h2, h3, h4 { overflow-wrap: anywhere; }
.capability-tabs > button, .question-option, .accordion summary, .network-node, .record-card dd, .email-timeline small { overflow-wrap: anywhere; }
.accordion summary, .pricing-method summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.stage-counter { right: 20px; }
.stage-counter > span { overflow-wrap: anywhere; }
.capability-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.capability-tabs > button, .email-timeline > button { min-width: 0; }

/* Phones at 320px (400% zoom): the source buttons wrap instead of running off the edge. */
@media (max-width: 700px) {
  .connector-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .connector { min-width: 0; }
  .connector strong { min-width: 0; overflow-wrap: anywhere; }
}

/* Hover parity: anything that reacts to the pointer also reacts to keyboard focus. */
.nav nav > a:not(.button):focus-visible, .text-link:focus-visible, .contact-records button:focus-visible { color: var(--blue); }
.closing .button.white:focus-visible { color: #185c3f; }

/* Accessibility statement (on /security/#accessibility). */
.a11y-statement .a11y-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 10px; }
.a11y-statement h3 { font-size: 1.375rem; margin-bottom: 16px; }
.a11y-statement ul { margin: 0; padding-left: 1.1em; color: var(--muted); }
.a11y-statement li { margin: 0 0 10px; }
.a11y-statement li strong { color: var(--ink); font-weight: 600; }
.a11y-statement a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.a11y-statement .a11y-updated { margin-top: 36px; font-size: 0.875rem; }
@media (max-width: 900px) { .a11y-statement .a11y-columns { grid-template-columns: 1fr; gap: 30px; } }

/* Demo form: required note and inline errors. */
.form-note { font-size: 0.875rem; color: var(--muted); }
.field-error { color: #a1260d; font-size: 0.875rem; font-weight: 600; }
.field-error::before { content: "⚠ "; }
body[data-theme=dark] .field-error, body[data-theme=dark] .cost-error { color: #ffb4a3; }
#demo-form [aria-invalid=true] { border-color: #a1260d; box-shadow: inset 4px 0 0 #a1260d; }
body[data-theme=dark] #demo-form [aria-invalid=true] { border-color: #ffb4a3; box-shadow: inset 4px 0 0 #ffb4a3; }

/* Increase Contrast (prefers-contrast: more). */
@media (prefers-contrast: more) {
  body { --muted: #343d49; --rule: #66736c; }
  body[data-theme=dark] { --muted: #d9ebe0; --rule: #8fb39d; --blue: #8fd3a9; }
  .photo-caption { background: #0b1220; text-shadow: none; }
  .text-link, .footer-main nav a, .footer-bottom a, .direct-contact a { text-decoration: underline; text-underline-offset: 4px; }
  .badge, .source-chip, .skill-choices > button, .redaction, .motion-master, .flow-toggle { border-color: currentColor; }
  .stage { color: #d6ece0; }
  .pipeline-section p, .pipeline-note { color: #e0f2e7; }
}

/* Reduce Transparency (prefers-reduced-transparency: reduce): solid surfaces only. */
@media (prefers-reduced-transparency: reduce) {
  .photo-caption { background: #101b2d; text-shadow: none; }
  .matrix-scene { background-image: none; }
  .answer-window, .capability-visual, .floating-proof, .motion-master, .node-icon { box-shadow: none; }
}

/* Forced colours / Windows contrast themes: show selected states with system colours. */
@media (forced-colors: active) {
  .question-option.active, .source-chip.active, .connector.active, .stage.active, .role-switch button.active,
  .cost-period button.active, [aria-pressed=true], [aria-selected=true], .provider-choice:has(input:checked) > span {
    outline: 2px solid Highlight; outline-offset: -4px;
  }
  .question-option.active:focus-visible, .source-chip.active:focus-visible, [aria-pressed=true]:focus-visible, [aria-selected=true]:focus-visible { outline: 3px solid Highlight; outline-offset: 4px; }
  .button, .motion-control, .role-switch button, .question-option, .connector, .stage, .cost-period button { border: 1px solid ButtonText; }
  .timeline-point { forced-color-adjust: none; }
}

/* Smart Invert (and other inverted-colour modes): keep photos and artwork in their real colours. */
@media (inverted-colors: inverted) {
  img, video, picture, canvas, .art-image { filter: invert(1); }
}

/* Reduce Motion: belt and braces on top of the existing rules and the Pause motion control. */
@media (prefers-reduced-motion: reduce) {
  .hero-art:hover .art-image { transform: none !important; }
  .button:hover { transform: none; }
}
.motion-paused .button:hover { transform: none; }