/* ==========================================================================
   BB Accessibility Plugin — OpenDyslexic Font
   ========================================================================== */
@font-face {
  font-family: 'OpenDyslexic';
  src: url('../fonts/OpenDyslexic.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Widget: Trigger Button
   ========================================================================== */
#bb-a11y-widget {
  position: fixed;
  bottom: 80px;
  right: 20px;
  z-index: 10000; /* Above alert bar (9999) and reading mask (9800) */
}

#bb-a11y-widget.bb-a11y-pos-bottom-left {
  right: auto;
  left: 20px;
}

#bb-a11y-trigger {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #007fb3;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: background 0.2s, transform 0.15s;
  padding: 0;
}

#bb-a11y-trigger:hover {
  background: #005f8a;
  transform: scale(1.08);
}

#bb-a11y-trigger:focus-visible {
  outline: 3px solid #f7941d;
  outline-offset: 3px;
}

#bb-a11y-trigger svg {
  pointer-events: none;
}

/* ==========================================================================
   Widget: Panel
   ========================================================================== */
#bb-a11y-panel {
  position: absolute;
  bottom: 56px;
  right: 0;
  width: 300px;
  max-height: 80vh;
  overflow-y: auto;
  background: #1a1a2e;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  /* No z-index needed — panel is inside #bb-a11y-widget which owns the stacking context */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

.bb-a11y-pos-bottom-left #bb-a11y-panel {
  right: auto;
  left: 0;
}

#bb-a11y-panel[hidden] {
  display: none;
}

/* Panel header */
.bb-a11y-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.bb-a11y-panel-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  line-height: 1;
}

.bb-a11y-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 22px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}

.bb-a11y-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.bb-a11y-close:focus-visible {
  outline: 2px solid #f7941d;
  outline-offset: 2px;
}

/* Panel sections */
.bb-a11y-section {
  padding: 12px 16px;
}

.bb-a11y-section + .bb-a11y-section {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.bb-a11y-section h3 {
  margin: 0 0 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
}

/* 3-step control */
.bb-a11y-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.bb-a11y-step-label-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}

.bb-a11y-step-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.bb-a11y-step-minus,
.bb-a11y-step-plus {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: background 0.15s;
}

.bb-a11y-step-minus:hover:not(:disabled),
.bb-a11y-step-plus:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.22);
}

.bb-a11y-step-minus:disabled,
.bb-a11y-step-plus:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.bb-a11y-step-minus:focus-visible,
.bb-a11y-step-plus:focus-visible {
  outline: 2px solid #f7941d;
  outline-offset: 2px;
}

.bb-a11y-step-current {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  min-width: 44px;
  text-align: center;
}

/* Toggle button */
.bb-a11y-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 5px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}

.bb-a11y-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
}

.bb-a11y-toggle[aria-pressed="true"] {
  background: #007fb3;
  border-color: #007fb3;
  color: #fff;
}

.bb-a11y-toggle:focus-visible {
  outline: 2px solid #f7941d;
  outline-offset: 2px;
}

/* Toggle switch indicator */
.bb-a11y-toggle-indicator {
  display: inline-block;
  width: 32px;
  height: 18px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.2);
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s;
}

.bb-a11y-toggle[aria-pressed="true"] .bb-a11y-toggle-indicator {
  background: rgba(255, 255, 255, 0.4);
}

.bb-a11y-toggle-indicator::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}

.bb-a11y-toggle[aria-pressed="true"] .bb-a11y-toggle-indicator::after {
  transform: translateX(14px);
}

/* Panel footer */
.bb-a11y-panel-footer {
  padding: 10px 16px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#bb-a11y-reset {
  width: 100%;
  padding: 7px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

#bb-a11y-reset:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

#bb-a11y-reset:focus-visible {
  outline: 2px solid #f7941d;
  outline-offset: 2px;
}

/* ==========================================================================
   Body Class Overrides — Font Size
   Scale html root font-size so all rem/em values increase proportionally.
   Widget uses px throughout so it is unaffected by this change.
   ========================================================================== */
html:has(body.bb-a11y-text-md) {
  font-size: 115%;
}

html:has(body.bb-a11y-text-lg) {
  font-size: 135%;
}

/* ==========================================================================
   Body Class Overrides — Letter Spacing
   ========================================================================== */
body.bb-a11y-ls-md p,
body.bb-a11y-ls-md li,
body.bb-a11y-ls-md td,
body.bb-a11y-ls-md th {
  letter-spacing: 0.05em !important;
}

body.bb-a11y-ls-lg p,
body.bb-a11y-ls-lg li,
body.bb-a11y-ls-lg td,
body.bb-a11y-ls-lg th {
  letter-spacing: 0.1em !important;
}

/* ==========================================================================
   Body Class Overrides — Line Height
   ========================================================================== */
body.bb-a11y-lh-md p,
body.bb-a11y-lh-md li {
  line-height: 1.8 !important;
}

body.bb-a11y-lh-lg p,
body.bb-a11y-lh-lg li {
  line-height: 2.2 !important;
}

/* ==========================================================================
   Body Class Overrides — High Contrast
   Wildcard color rule catches any theme-colored text (blue headings, etc.)
   that element-level rules would miss.
   ========================================================================== */

/* Force all non-widget text to white */
body.bb-a11y-high-contrast *:not(#bb-a11y-widget):not(#bb-a11y-widget *) {
  color: #fff !important;
}

/* Force container backgrounds dark — includes div to catch themed section wrappers */
body.bb-a11y-high-contrast body,
body.bb-a11y-high-contrast section,
body.bb-a11y-high-contrast article,
body.bb-a11y-high-contrast aside,
body.bb-a11y-high-contrast main,
body.bb-a11y-high-contrast header,
body.bb-a11y-high-contrast footer,
body.bb-a11y-high-contrast nav,
body.bb-a11y-high-contrast .navbar,
body.bb-a11y-high-contrast .fcl,
body.bb-a11y-high-contrast div:not(#bb-a11y-widget):not(#bb-a11y-widget *) {
  background-color: #000 !important;
}

/* Strip background images that would contrast poorly */
body.bb-a11y-high-contrast section,
body.bb-a11y-high-contrast div:not(#bb-a11y-widget):not(#bb-a11y-widget *) {
  background-image: none !important;
}

/* Links stand out in yellow against the black backgrounds */
body.bb-a11y-high-contrast a:not(#bb-a11y-widget a) {
  color: #ffff00 !important;
}

/* Keep widget visually stable in high contrast */
body.bb-a11y-high-contrast #bb-a11y-trigger {
  background: #007fb3 !important;
  color: #fff !important;
}

body.bb-a11y-high-contrast #bb-a11y-panel {
  background: #1a1a2e !important;
  color: #fff !important;
}

body.bb-a11y-high-contrast #bb-a11y-panel * {
  color: #fff !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* ==========================================================================
   Body Class Overrides — Monochrome
   IMPORTANT: Do NOT apply filter to body — CSS filter on an ancestor creates a
   new stacking context that breaks position:fixed children (the widget moves
   out of its viewport corner). Apply to body's direct children instead.
   ========================================================================== */
body.bb-a11y-monochrome > *:not(#bb-a11y-widget):not(#bb-a11y-mask) {
  filter: grayscale(100%) !important;
}

/* ==========================================================================
   Body Class Overrides — Pause Animations
   ========================================================================== */
body.bb-a11y-pause-anim *:not(#bb-a11y-widget) {
  animation: none !important;
  transition: none !important;
}

/* Restore transitions/animations for the widget and its children */
body.bb-a11y-pause-anim #bb-a11y-widget,
body.bb-a11y-pause-anim #bb-a11y-widget * {
  animation: revert !important;
  transition: revert !important;
}

/* ==========================================================================
   Body Class Overrides — Large Cursor
   (SVG cursor as data URI — no extra file needed)
   ========================================================================== */
body.bb-a11y-large-cursor,
body.bb-a11y-large-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 2L6 27L11 21L16 31L19 29L14 20L23 20Z' fill='%23000' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 0 0, auto !important;
}

/* ==========================================================================
   Body Class Overrides — Dyslexia Font
   ========================================================================== */
body.bb-a11y-dyslexia,
body.bb-a11y-dyslexia p,
body.bb-a11y-dyslexia li,
body.bb-a11y-dyslexia h1,
body.bb-a11y-dyslexia h2,
body.bb-a11y-dyslexia h3,
body.bb-a11y-dyslexia h4,
body.bb-a11y-dyslexia h5,
body.bb-a11y-dyslexia h6,
body.bb-a11y-dyslexia a,
body.bb-a11y-dyslexia label,
body.bb-a11y-dyslexia td,
body.bb-a11y-dyslexia th,
body.bb-a11y-dyslexia input,
body.bb-a11y-dyslexia textarea {
  font-family: 'OpenDyslexic', sans-serif !important;
}

/* ==========================================================================
   Body Class Overrides — Highlight Links
   ========================================================================== */
body.bb-a11y-highlight-links a:not(#bb-a11y-widget a):not(.skip-link) {
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  background-color: rgba(255, 255, 0, 0.18) !important;
  outline: 1px solid currentColor !important;
  outline-offset: 2px !important;
  border-radius: 2px !important;
  padding: 1px 3px !important;
}

/* Whole-card links (funnel cards) — yellow outline instead of bg tint,
   copy-wrap gets solid yellow so text is always readable */
body.bb-a11y-highlight-links a.single-funnel-card:not(#bb-a11y-widget a) {
  background-color: transparent !important;
  outline: 3px solid #ffcc00 !important;
  outline-offset: 2px !important;
  padding: 0 !important;
}

body.bb-a11y-highlight-links a.single-funnel-card .copy-wrap {
  background-color: rgba(255, 200, 0, 0.95) !important;
}

body.bb-a11y-highlight-links a.single-funnel-card .copy-wrap,
body.bb-a11y-highlight-links a.single-funnel-card .copy-wrap * {
  color: #000 !important;
}

/* ==========================================================================
   Body Class Overrides — Enhanced Focus
   Use :focus (not :focus-visible) so the ring shows on mouse clicks too —
   useful for motor-impaired users who may not navigate by keyboard.
   box-shadow adds a visible glow halo for maximum noticeability.
   ========================================================================== */
body.bb-a11y-focus *:focus:not(#bb-a11y-widget *) {
  outline: 5px solid #ffff00 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 8px rgba(255, 255, 0, 0.25) !important;
}

/* ==========================================================================
   Reading Mask
   ========================================================================== */
#bb-a11y-mask {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9800;
  --mask-y: 50vh;
  background: rgba(0, 0, 0, 0.7);
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0,
    black calc(var(--mask-y) - 40px),
    transparent calc(var(--mask-y) - 40px),
    transparent calc(var(--mask-y) + 40px),
    black calc(var(--mask-y) + 40px),
    black 100%
  );
  mask-image: linear-gradient(
    to bottom,
    black 0,
    black calc(var(--mask-y) - 40px),
    transparent calc(var(--mask-y) - 40px),
    transparent calc(var(--mask-y) + 40px),
    black calc(var(--mask-y) + 40px),
    black 100%
  );
}

#bb-a11y-mask[hidden] {
  display: none;
}