/* Accessibility layer applied to every portal page.

   Target: WCAG 2.1 Level AA, the standard adopted by the DOJ's ADA Title II
   rule for state and local government web content. Rules here are deliberately
   late in the cascade and use targeted overrides so they correct the existing
   design rather than requiring it to be rebuilt. */

/* 2.4.1 Bypass Blocks. A keyboard user should reach page content without
   tabbing through the header and navigation on every page. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: #123763;
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
  outline: 3px solid #C9A227;
  outline-offset: 2px;
}

/* 2.4.7 Focus Visible and 1.4.11 Non-text Contrast. The default focus ring is
   thin and disappears against the darker chrome, so every interactive element
   gets a consistent high-contrast indicator. :focus-visible keeps it off for
   mouse users while guaranteeing it for keyboard users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible {
  outline: 3px solid #1B4B8A;
  outline-offset: 2px;
  border-radius: 3px;
}
/* On dark backgrounds the blue ring has too little contrast, so invert it. */
.portal-header a:focus-visible,
.portal-header button:focus-visible,
.pp-unlock-bar button:focus-visible,
.pp-pdf-bar button:focus-visible,
.pp-pdf-bar input:focus-visible,
.dx-viewer-bar a:focus-visible,
.dx-viewer-bar button:focus-visible,
.dash-viewer-bar button:focus-visible,
.dash-viewer-bar a:focus-visible,
.pp-embed-btn:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: 2px;
}

/* 1.4.3 Contrast (Minimum). These three values fail 4.5:1 on white and are used
   for real text, not decoration:
     #9CA3AF  2.54:1  meta and helper text
     #059669  3.77:1  "Active" and success states
     #C9A227  2.42:1  the gold used for the tagline and small labels
   Replaced with the nearest accessible equivalents that keep the palette. */
.mut,
.ll-note,
.pp-meta,
.dash-card-cat,
.dx-suggest-cat,
.dx-crumb-cat,
.pp-block-caption,
.pp-clause-hint,
.cal-meta,
.pp-tile-meta { color: #5B6473 !important; }

.title-block .tagline { color: #7A600F; }

[style*="color:#9CA3AF"],
[style*="color: #9CA3AF"] { color: #5B6473 !important; }
[style*="color:#059669"],
[style*="color: #059669"] { color: #047857 !important; }

/* 1.4.1 Use of Colour. Status is conveyed by colour alone in several tables;
   a leading glyph makes it perceivable without colour vision. */
.pp-status-active::before,
.dash-status-live::before { content: "\2713\00a0"; }
.pp-status-inactive::before,
.dash-status-hidden::before { content: "\2717\00a0"; }

/* 2.2.2 Pause, Stop, Hide. The grants marquee scrolls automatically and must
   offer a way to stop it. The control is rendered by a11y.js. */
.marquee-pause {
  flex-shrink: 0;
  margin-left: 8px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.45);
  color: #fff;
  border-radius: 14px;
  height: 24px;
  min-width: 24px;
  padding: 0 9px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
}
.marquee-pause:hover { background: rgba(255,255,255,.3); }
.marquee-paused .marquee-inner { animation-play-state: paused !important; }

/* 2.3.3 Animation from Interactions, and respecting the OS setting generally.
   Applies across every stylesheet rather than the one file that had it. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-inner { animation: none !important; transform: none !important; }
}

/* 1.4.4 Resize Text and 1.4.10 Reflow. Prevent the fixed heights that clip
   content when text is enlarged to 200%. */
@media (max-width: 1280px) {
  .pp-builder-content,
  .dash-container,
  .cal-container { overflow-wrap: break-word; }
}

/* 4.1.2 Name, Role, Value. Visually hidden text that remains available to
   assistive technology, used for context that is otherwise conveyed visually. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
  position: static !important;
  width: auto; height: auto;
  margin: 0; overflow: visible; clip: auto; white-space: normal;
}

/* 1.3.1 Info and Relationships. Tab sets get a visible selected state that does
   not rely on colour alone. */
[role="tab"][aria-selected="true"] { font-weight: 700; }

/* 2.5.5 Target Size. Small icon-only controls are enlarged to a comfortable
   touch target without changing their visual size, using padding. */
.pp-pdf-btn,
.dx-btn,
.marquee-pause,
.pp-modal-close { min-height: 32px; min-width: 32px; }

/* 1.4.13 Content on Hover or Focus — tooltips driven by title attributes are
   not dismissible or hoverable, so anything conveying essential information
   also carries an accessible name. Nothing to style here; enforced in markup. */

/* 3.2.4 Consistent Identification: the forced-colours mode used by Windows
   High Contrast must not lose borders that carry meaning. */
@media (forced-colors: active) {
  .pp-card,
  .dash-card,
  .dx-tile-frame,
  .pp-block-iframe iframe,
  .cal-event { border: 1px solid CanvasText; }
  .skip-link:focus { outline: 3px solid Highlight; }
}