/* ===========================
   Stafflancer's Accessibility
   Frontend (plugin-only)
   =========================== */

/* Skip link injected by JS */
/* Skip links (Menu / Content / Footer) */
.sl-skip-links{
  position: absolute;
  top: 12px;
  left: 16px;
  z-index: 100000;
  display: flex;
  gap: 10px;
}

.sl-skip-link{
  position: absolute;
  left: -9999px;
  top: 0;

  background: #fff;
  color: #111;
  padding: 14px 16px;
  border-radius: 999px;
  border: 2px solid rgba(59,130,246,.7); /* blue ring */
  box-shadow: 0 10px 30px rgba(0,0,0,.18);

  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

/* Show when focused */
.sl-skip-link:focus{
  position: relative;
  left: 0;
  outline: none;
}

/* "ENTER" badge */
.sl-skip-link::after{
  content: "ENTER";
  font-size: 12px;
  font-weight: 800;
  padding: 8px 12px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  letter-spacing: .5px;
}


/* Screen-reader only utility
   !important required: these rules must win over any theme layout that could
   accidentally make the element visible (e.g. theme sets overflow:visible globally). */
.sl-sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* Focus ring — uses :focus-visible so rings only appear on keyboard navigation,
   not on mouse clicks. This is native browser behaviour and WCAG 2.2 compliant.
   The .sl-has-keyboard class is kept for older browsers that don't support :focus-visible. */

/* Modern browsers: show focus ring only on keyboard navigation */
:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--sl-a11y-focus-ring, rgba(106,77,255,.25));
  border-radius: 12px;
}

/* Legacy fallback for browsers without :focus-visible support (pre-2021) */
html.sl-has-keyboard a:focus,
html.sl-has-keyboard button:focus,
html.sl-has-keyboard input:focus,
html.sl-has-keyboard select:focus,
html.sl-has-keyboard textarea:focus,
html.sl-has-keyboard [tabindex]:focus{
  outline: none;
  box-shadow: 0 0 0 4px var(--sl-a11y-focus-ring, rgba(106,77,255,.25));
  border-radius: 12px;
}

/* Suppress default outline only on mouse users in legacy-fallback mode */
html:not(.sl-has-keyboard) a:focus:not(:focus-visible),
html:not(.sl-has-keyboard) button:focus:not(:focus-visible),
html:not(.sl-has-keyboard) input:focus:not(:focus-visible),
html:not(.sl-has-keyboard) select:focus:not(:focus-visible),
html:not(.sl-has-keyboard) textarea:focus:not(:focus-visible),
html:not(.sl-has-keyboard) [tabindex]:focus:not(:focus-visible){
  outline: none;
  box-shadow: none;
}

/* Reduced motion (OS setting OR user toggle)
   !important required: animation/transition values must override any theme or
   third-party plugin that sets durations inline or with higher specificity. */
@media (prefers-reduced-motion: reduce){
  html:focus-within{ scroll-behavior:auto !important; }
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}
html.sl-a11y-reduce-motion *,
html.sl-a11y-reduce-motion *::before,
html.sl-a11y-reduce-motion *::after{
  animation-duration:0.01ms !important;
  animation-iteration-count:1 !important;
  transition-duration:0.01ms !important;
}
html.sl-a11y-reduce-motion{ scroll-behavior: auto !important; }

/* Accessibility mode overrides
   !important required: these rules are user-requested overrides and must win
   over theme styles that set text-decoration, background, or cursor. */
html.sl-a11y-underline-links a{ text-decoration: underline !important; text-underline-offset: 3px; }
html.sl-a11y-highlight-links a{ background: rgba(255, 235, 59, .35) !important; border-radius: 4px; outline: 2px solid rgba(255, 214, 0, .6); outline-offset: 1px; }
html.sl-a11y-big-cursor, html.sl-a11y-big-cursor *{ cursor: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"%3E%3Cpath fill="black" d="M5 2l22 14-10 1 4 11-4 1-4-11-8 8z"/%3E%3C/svg%3E') 6 2, auto !important; }

/* Filters are applied via JS as a combined filter string on <body> to avoid breaking position:fixed elements */

html.sl-a11y-line-height body,
html.sl-a11y-line-height body :where(p,li,h1,h2,h3,h4,h5,h6,blockquote,figcaption,td,th,label,legend,dd,dt,span,a,button,input,textarea,.elementor-heading-title,.elementor-icon-list-text,.elementor-text-editor,.wp-block-heading,.wp-block-paragraph):not(.sl-a11y-widget *):not(.sl-a11y-toast *):not(.sl-a11y-reading-ruler *):not(.sl-a11y-reading-mask *):not(.sl-a11y-footer-branding *):not(.sl-lead-toggle *),
html.sl-a11y-line-height body :where(.elementor-widget-container,.elementor-text-editor,.wp-block-column,.wp-block-group,.entry-content,.post-content,.site-content,.elementor-widget-text-editor,.elementor-widget-heading):not(.sl-a11y-widget *):not(.sl-a11y-toast *):not(.sl-a11y-reading-ruler *):not(.sl-a11y-reading-mask *):not(.sl-a11y-footer-branding *):not(.sl-lead-toggle *){ line-height: 2.1 !important; }
html.sl-a11y-letter-spacing body,
html.sl-a11y-letter-spacing body :where(p,li,h1,h2,h3,h4,h5,h6,blockquote,figcaption,td,th,label,legend,dd,dt,span,a,button,input,textarea,.elementor-heading-title,.elementor-icon-list-text,.elementor-text-editor,.wp-block-heading,.wp-block-paragraph):not(.sl-a11y-widget *):not(.sl-a11y-toast *):not(.sl-a11y-reading-ruler *):not(.sl-a11y-reading-mask *):not(.sl-a11y-footer-branding *):not(.sl-lead-toggle *),
html.sl-a11y-letter-spacing body :where(.elementor-widget-container,.elementor-text-editor,.wp-block-column,.wp-block-group,.entry-content,.post-content,.site-content,.elementor-widget-text-editor,.elementor-widget-heading):not(.sl-a11y-widget *):not(.sl-a11y-toast *):not(.sl-a11y-reading-ruler *):not(.sl-a11y-reading-mask *):not(.sl-a11y-footer-branding *):not(.sl-lead-toggle *){ letter-spacing: 0.08em !important; }

/* Word spacing — WCAG 1.4.12: 0.16em is the minimum spacing value specified.
   Same element set and exclusions as letter-spacing above. */
html.sl-a11y-word-spacing body,
html.sl-a11y-word-spacing body :where(p,li,h1,h2,h3,h4,h5,h6,blockquote,figcaption,td,th,label,legend,dd,dt,span,a,button,input,textarea,.elementor-heading-title,.elementor-icon-list-text,.elementor-text-editor,.wp-block-heading,.wp-block-paragraph):not(.sl-a11y-widget *):not(.sl-a11y-toast *):not(.sl-a11y-reading-ruler *):not(.sl-a11y-reading-mask *):not(.sl-a11y-footer-branding *):not(.sl-lead-toggle *),
html.sl-a11y-word-spacing body :where(.elementor-widget-container,.elementor-text-editor,.wp-block-column,.wp-block-group,.entry-content,.post-content,.site-content,.elementor-widget-text-editor,.elementor-widget-heading):not(.sl-a11y-widget *):not(.sl-a11y-toast *):not(.sl-a11y-reading-ruler *):not(.sl-a11y-reading-mask *):not(.sl-a11y-footer-branding *):not(.sl-lead-toggle *){ word-spacing: 0.16em !important; }
/* Protect widget and Lead Forms toggle from word-spacing override */
html.sl-a11y-word-spacing .sl-a11y-widget,
html.sl-a11y-word-spacing .sl-a11y-widget *,
html.sl-a11y-word-spacing .sl-lead-toggle,
html.sl-a11y-word-spacing .sl-lead-toggle *{ word-spacing: normal !important; }

/* Strong focus ring — WCAG 2.4.7 / 2.4.11.
   When active, forces a thick high-visibility focus outline on ALL focusable
   elements regardless of theme styles. This is a stronger layer on top of the
   plugin's baseline :focus-visible ring — the label "Strong Focus Ring" is
   intentional: it enhances an already-present ring to maximum visibility.
   Uses the configurable --sl-a11y-focus-ring CSS variable so admins can match
   their brand colour. !important is required to beat theme resets that do outline:none. */
html.sl-a11y-focus-ring :focus,
html.sl-a11y-focus-ring :focus-visible{
  outline: 3px solid var(--sl-a11y-focus-ring, rgba(106,77,255,1)) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px var(--sl-a11y-focus-ring, rgba(106,77,255,.25)) !important;
  border-radius: 4px !important;
}
/* Prevent focus ring from being applied inside the widget itself (it has its own focus styles) */
html.sl-a11y-focus-ring .sl-a11y-widget :focus,
html.sl-a11y-focus-ring .sl-a11y-widget :focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 4px var(--sl-a11y-focus-ring, rgba(106,77,255,.25)) !important;
  border-radius: 12px !important;
}

/* Image alt text overlay — JS wraps each eligible img in .sl-a11y-img-wrap
   (position:relative) and appends .sl-a11y-alt-badge inside it
   (position:absolute). This gives a true overlay attached to the image frame
   without requiring position:relative on the theme's parent elements. */
.sl-a11y-img-wrap{
  position: relative;
  /* display is set inline by JS based on the img's computed display value */
  vertical-align: bottom; /* aligns inline wrappers the same as the img did */
  line-height: 0; /* prevents extra whitespace gap below the image */
}
.sl-a11y-alt-badge{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-size: 11px;
  line-height: 1.4;
  padding: 4px 8px;
  word-break: break-word;
  pointer-events: none;
  /* Subtle entrance */
  animation: sl-a11y-badge-in .18s ease both;
}
@keyframes sl-a11y-badge-in{
  from{ opacity:0; transform:translateY(4px); }
  to  { opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .sl-a11y-alt-badge{ animation: none; }
}

html.sl-a11y-align-left body :where(p,li,h1,h2,h3,h4,h5,h6,blockquote,figcaption,td,th,label,legend,dd,dt,span,a,button,input,textarea,.elementor-heading-title,.elementor-icon-list-text,.elementor-text-editor,.wp-block-heading,.wp-block-paragraph,.wp-block-button__link,.elementor-widget-container,.entry-content,.post-content,.site-content):not(.sl-a11y-widget *):not(.sl-a11y-toast *):not(.sl-a11y-reading-ruler *):not(.sl-a11y-reading-mask *):not(.sl-a11y-footer-branding *):not(.sl-lead-toggle *){ text-align:left !important; }
html.sl-a11y-align-center body :where(p,li,h1,h2,h3,h4,h5,h6,blockquote,figcaption,td,th,label,legend,dd,dt,span,a,button,input,textarea,.elementor-heading-title,.elementor-icon-list-text,.elementor-text-editor,.wp-block-heading,.wp-block-paragraph,.wp-block-button__link,.elementor-widget-container,.entry-content,.post-content,.site-content):not(.sl-a11y-widget *):not(.sl-a11y-toast *):not(.sl-a11y-reading-ruler *):not(.sl-a11y-reading-mask *):not(.sl-a11y-footer-branding *):not(.sl-lead-toggle *){ text-align:center !important; }
html.sl-a11y-align-right body :where(p,li,h1,h2,h3,h4,h5,h6,blockquote,figcaption,td,th,label,legend,dd,dt,span,a,button,input,textarea,.elementor-heading-title,.elementor-icon-list-text,.elementor-text-editor,.wp-block-heading,.wp-block-paragraph,.wp-block-button__link,.elementor-widget-container,.entry-content,.post-content,.site-content):not(.sl-a11y-widget *):not(.sl-a11y-toast *):not(.sl-a11y-reading-ruler *):not(.sl-a11y-reading-mask *):not(.sl-a11y-footer-branding *):not(.sl-lead-toggle *){ text-align:right !important; }

html.sl-a11y-line-height .sl-a11y-widget,
html.sl-a11y-line-height .sl-a11y-widget *,
html.sl-a11y-letter-spacing .sl-a11y-widget,
html.sl-a11y-letter-spacing .sl-a11y-widget *,
html.sl-a11y-align-left .sl-a11y-widget,
html.sl-a11y-align-left .sl-a11y-widget *,
html.sl-a11y-align-center .sl-a11y-widget,
html.sl-a11y-align-center .sl-a11y-widget *,
html.sl-a11y-align-right .sl-a11y-widget,
html.sl-a11y-align-right .sl-a11y-widget *,
html.sl-a11y-line-height .sl-lead-toggle,
html.sl-a11y-line-height .sl-lead-toggle *,
html.sl-a11y-letter-spacing .sl-lead-toggle,
html.sl-a11y-letter-spacing .sl-lead-toggle *{
  line-height: normal !important;
  letter-spacing: normal !important;
}
html.sl-a11y-align-left .sl-lead-toggle,
html.sl-a11y-align-left .sl-lead-toggle *,
html.sl-a11y-align-center .sl-lead-toggle,
html.sl-a11y-align-center .sl-lead-toggle *,
html.sl-a11y-align-right .sl-lead-toggle,
html.sl-a11y-align-right .sl-lead-toggle *{
  text-align: initial !important;
}

/* Dyslexia-friendly font (best-effort, overrides Elementor per-element fonts).
   Known limitation: elements inside shadow-DOM or cross-origin iframes (some
   WooCommerce widgets, third-party embeds) will not inherit this override —
   that is a browser security boundary and cannot be crossed from a stylesheet. */
html.sl-a11y-dyslexia body,
html.sl-a11y-dyslexia body *{
  font-family: Verdana, Arial, system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
}

/* Widget wrapper */
.sl-a11y-widget{
  position: fixed;
  z-index: var(--sl-a11y-widget-z, 9999);
}

/* Positions (set by JS classes on html) */
html.sl-a11y-pos-left_bottom .sl-a11y-widget{left:var(--sl-a11y-widget-side,22px);bottom:var(--sl-a11y-widget-vert,22px);}
html.sl-a11y-pos-left_middle .sl-a11y-widget{left:var(--sl-a11y-widget-side,22px);top:50%;transform:translateY(-50%);}
html.sl-a11y-pos-left_top .sl-a11y-widget{left:var(--sl-a11y-widget-side,22px);top:var(--sl-a11y-widget-vert,22px);}
html.sl-a11y-pos-right_bottom .sl-a11y-widget{right:var(--sl-a11y-widget-side,22px);bottom:var(--sl-a11y-widget-vert,22px);}
html.sl-a11y-pos-right_middle .sl-a11y-widget{right:var(--sl-a11y-widget-side,22px);top:50%;transform:translateY(-50%);}
html.sl-a11y-pos-right_top .sl-a11y-widget{right:var(--sl-a11y-widget-side,22px);top:var(--sl-a11y-widget-vert,22px);}

/* Trigger button */
.sl-a11y-trigger{
  padding:0;
  border:0;
  border-radius: var(--sl-a11y-widget-radius, 16px);
  background: var(--sl-a11y-widget-bg, var(--sl-primary, #6A4DFF));
  color: var(--sl-a11y-widget-icon, #fff);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 25px rgba(0,0,0,.12);
  cursor: pointer;
}
.sl-a11y-trigger:hover{ filter: brightness(.96); }

.sl-a11y-icon{ width: 22px; height: 22px; display:block; }
.sl-a11y-icon path{ fill: currentColor; }

/* Panel */
.sl-a11y-panel{
  position: fixed;
  width: 460px;
  max-width: calc(100vw - 24px);
  background: linear-gradient(180deg, #f7f8fc 0%, #f1f3fa 100%);
  color: var(--sl-a11y-panel-text, #0B0B0F);
  border: 1px solid rgba(19, 24, 38, .08);
  border-radius: var(--sl-a11y-panel-radius, 20px);
  max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px);
  box-shadow: calc(var(--sl-a11y-panel-shadow, 1) * 0px) calc(var(--sl-a11y-panel-shadow, 1) * 14px) calc(var(--sl-a11y-panel-shadow, 1) * 44px) rgba(16, 24, 40, calc(var(--sl-a11y-panel-shadow, 1) * .16));
}
.sl-a11y-panel:not([hidden]){
  display:flex;
  flex-direction: column;
}

.sl-a11y-panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 18px 18px;
  border-bottom: 1px solid rgba(19, 24, 38, .06);
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(135deg, rgb(82, 9, 229) 0%, rgba(124, 77, 255, 1) 100%);
  color: #fff;
  border-radius: var(--sl-a11y-panel-radius, 20px) var(--sl-a11y-panel-radius, 20px) 0 0;
}
.sl-a11y-panel__title{
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.01em;
}
.sl-a11y-close{
  border: 1px solid rgba(255,255,255,.26);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  width: 40px;
  height: 40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  font-size: 26px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  color: #fff !important;
  font-weight: 400;
  box-shadow: none !important;
}
.sl-a11y-close:hover{ background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.38); }
.sl-a11y-close:focus-visible{ outline: none; box-shadow: 0 0 0 4px rgba(255,255,255,.22); }


.sl-a11y-widget,
.sl-a11y-widget *{
  box-sizing:border-box;
}
.sl-a11y-widget{
  font-size: 16px !important;
  text-align: left !important;
}
.sl-a11y-widget *:not(svg):not(path):not(circle):not(rect):not(line):not(polyline):not(polygon):not(ellipse){
  font-size: inherit;
}
.sl-a11y-panel{
  font-size:16px !important;
  overflow: hidden;
}

.sl-a11y-panel__body{
  padding: 16px;
  padding-bottom: 18px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.sl-a11y-section{
  margin-bottom: 14px;
}

.sl-a11y-section--text{
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(19, 24, 38, .06);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 6px 20px rgba(16,24,40,.04);
}

.sl-a11y-section__label{
  font-size: 13px !important;
  line-height: 1.2;
  font-weight: 700;
  color: #354052;
  margin-bottom: 12px;
  letter-spacing: .01em;
}

.sl-a11y-section__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
}
.sl-a11y-section__meta .sl-a11y-section__label{
  margin-bottom:0;
}

/* Text controls use an intentional 2 + 3 layout:
   row 1 = text size pair, row 2 = spacing controls. */
.sl-a11y-quick-grid{
  display: grid;
  gap: 10px;
}
.sl-a11y-quick-grid--text-controls{
  gap: 12px;
}
.sl-a11y-quick-grid__row{
  display:grid;
  gap:10px;
}
.sl-a11y-quick-grid__row--size{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sl-a11y-quick-grid__row--spacing{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sl-a11y-card--quick-wide{
  min-height: 108px;
}
.sl-a11y-feature-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.sl-a11y-card{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 96px;
  padding: 14px 10px;
  border-radius: 14px;
  border: 1px solid rgba(19,24,38,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(248,249,253,.98) 100%);
  box-shadow: 0 6px 18px rgba(16,24,40,.05);
  color: #1f2937;
  text-align: center;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}
button.sl-a11y-card{
  appearance: none;
}
.sl-a11y-card:hover{
  transform: translateY(-1px);
  border-color: rgba(82,9,229,.18);
  box-shadow: 0 10px 26px rgba(16,24,40,.08);
}
.sl-a11y-card__input{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.sl-a11y-card__icon{
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #20263a;
  flex: 0 0 auto;
}
.sl-a11y-card__icon svg{
  width: 30px;
  height: 30px;
  overflow: visible;
  display: block;
}
.sl-a11y-card__icon--text{
  font-size: 28px !important;
  line-height: 1;
  font-weight: 700;
  width: auto;
  height: auto;
}
.sl-a11y-card__label{
  display: block;
  font-size: 11px !important;
  line-height: 1.18;
  font-weight: 600;
  color: #2a3244;
  letter-spacing: -.015em;
  white-space: normal;
  text-wrap: balance;
}

.sl-a11y-card.is-active,
.sl-a11y-card:has(.sl-a11y-card__input:checked){
  border-color: rgba(82,9,229,.22);
  box-shadow: 0 12px 28px rgba(82,9,229,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,244,255,1) 100%);
}
.sl-a11y-card.is-active::after,
.sl-a11y-card:has(.sl-a11y-card__input:checked)::after{
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 3px;
  border-radius: 999px;
  background: rgb(82, 9, 229);
}
.sl-a11y-card.is-active .sl-a11y-card__icon,
.sl-a11y-card.is-active .sl-a11y-card__label,
.sl-a11y-card:has(.sl-a11y-card__input:checked) .sl-a11y-card__icon,
.sl-a11y-card:has(.sl-a11y-card__input:checked) .sl-a11y-card__label{
  color: rgb(82, 9, 229);
}

.sl-a11y-actions{
  margin-top: 16px;
}
.sl-a11y-reset{
  width: 100%;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, rgb(82, 9, 229) 0%, rgba(124, 77, 255, 1) 100%);
  color: #fff !important;
  min-height: 50px;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  box-shadow: 0 14px 30px rgba(82, 9, 229, .18);
  cursor: pointer;
}
.sl-a11y-reset:hover{ filter: brightness(.98); }

.sl-a11y-statement-link{
  display: block;
  text-align: center;
  margin-top: 14px;
  text-decoration: none;
  font-size: 14px !important;
  font-weight: 600;
  color: rgb(82, 9, 229);
}
.sl-a11y-statement-link--inline{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  text-align:right;
  margin-top:0;
  margin-left:auto;
  white-space:nowrap;
  font-size:13px;
}
.sl-a11y-statement-link:hover{ text-decoration: underline; }

.sl-a11y-toast-slot{
  position: sticky;
  bottom: calc(54px + env(safe-area-inset-bottom, 0px));
  z-index: 4;
  flex: 0 0 auto;
  display: none;
  padding: 0;
  pointer-events: none;
}
.sl-a11y-toast-slot.is-active{
  display: block;
  padding: 0 16px 10px;
}

.sl-a11y-panel__footer{
  position: sticky;
  bottom: 0;
  z-index: 3;
  flex: 0 0 auto;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(19,24,38,.06);
  background: linear-gradient(180deg, rgba(248,249,253,.96) 0%, rgba(244,246,251,.99) 100%);
  box-shadow: 0 -10px 24px rgba(16,24,40,.06);
}

.sl-a11y-branding{
  text-align: center;
  font-size: 13px !important;
  color: #677489;
}
.sl-a11y-branding strong{ color: #2a3244; font-weight: 700; }

.sl-a11y-section--features{
  margin-bottom: 0;
}

/* Panel responsiveness */
@media (max-width: 768px){
  .sl-a11y-panel{
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
  }
  .sl-a11y-feature-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sl-a11y-section__meta{
    flex-wrap:wrap;
    align-items:flex-start;
  }
  .sl-a11y-statement-link--inline{
    width:100%;
    justify-content:flex-start;
    text-align:left;
    margin-top:2px;
  }
}

@media (max-width: 640px){
  .sl-a11y-quick-grid__row--spacing{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


@media (max-width: 1024px) and (orientation: landscape){
  .sl-a11y-panel{
    max-height: calc(100vh - 20px);
  }
}

@media (max-width: 520px){
  .sl-a11y-panel__head{
    padding-right: 62px;
  }
  .sl-a11y-close{
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
  }
  .sl-a11y-panel__body{
    padding: 14px;
  }
  .sl-a11y-card{
    min-height: 92px;
    padding: 12px 8px;
  }
}

@media (max-width: 420px){
  .sl-a11y-quick-grid__row--size,
  .sl-a11y-quick-grid__row--spacing{
    grid-template-columns: 1fr;
  }
  .sl-a11y-card--quick-wide{
    min-height: 96px;
  }
}


/* Mobile browsers: prefer dynamic viewport height for scrollable panel */
@supports (height: 100dvh){
  .sl-a11y-panel{
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px);
  }
}

/* Optional backdrop overlay behind the panel */
.sl-a11y-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: calc(var(--sl-a11y-widget-z, 9999) - 1);
}

/* Reading ruler & mask overlays (created by JS) */
.sl-a11y-reading-ruler{
  position: fixed;
  left: 0;
  right: 0;
  top: -9999px; /* hidden until enabled */
  height: 56px;
  border-top: 2px solid rgba(106,77,255,.70);
  border-bottom: 2px solid rgba(106,77,255,.70);
  background: rgba(106,77,255,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  z-index: calc(var(--sl-a11y-widget-z, 9999) - 2);
  pointer-events: none;
  transform: translateY(-50%);
}

.sl-a11y-mask-top,
.sl-a11y-mask-bottom{
  position: fixed;
  left: 0;
  right: 0;
  background: rgba(0,0,0,.45);
  z-index: calc(var(--sl-a11y-widget-z, 9999) - 3);
  pointer-events: none;
}

.sl-a11y-mask-top{ top: 0; height: 0; }
.sl-a11y-mask-bottom{ bottom: 0; height: 0; }

/* Toast messages — inline above sticky footer when widget is open, with safe fallback */
.sl-a11y-toast{
  width: 100%;
  max-width: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(249,250,255,.98) 100%);
  color: #1e2435;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(82, 9, 229, .12);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
  box-shadow: 0 16px 38px rgba(82, 9, 229, .12);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.sl-a11y-toast.is-show{
  opacity: 1;
  transform: translateY(0);
}

body > .sl-a11y-toast{
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 1000000;
  width: auto;
  max-width: min(360px, calc(100vw - 32px));
}

/* If the widget is on the left/right bottom, move fallback toast up to avoid overlap */
html.sl-a11y-pos-left_bottom body > .sl-a11y-toast{ bottom: 86px; }
html.sl-a11y-pos-right_bottom body > .sl-a11y-toast{ bottom: 86px; }


/* Footer statement link (optional) */
.sl-a11y-footer-link{ text-align:center; padding: 10px 0 20px; font-size: 13px; }
.sl-a11y-footer-link a{ text-decoration: underline; text-underline-offset: 3px; }


/* Panel responsiveness */
@media (max-width: 768px){
  .sl-a11y-panel{
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
  }
}
@media (max-width: 1024px) and (orientation: landscape){
  .sl-a11y-panel{
    max-height: calc(100vh - 20px);
  }
}


@media (max-width: 520px){
  /* Mobile: keep header LEFT-aligned, keep close button clearly visible */
  .sl-a11y-panel__head{
    justify-content: flex-start;
    text-align: left;
    padding-right: 62px; /* room for the close button */
  }
  .sl-a11y-panel__title{ text-align: left; }
  .sl-a11y-close{
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    font-size: 26px;
    background: #fff;
    border-color: rgba(0,0,0,.18);
  }
}


/* ===========================
   Hide Lead Forms floating CTA while Accessibility is open
   (Controlled by Accessibility settings)
   Targets: .slf-float (Stafflancer Lead Forms)
   =========================== */

@media (max-width: 767px){
  body.sl-a11y-open.sl-a11y-hide-cta-mobile .slf-float{ display:none !important; }
}

@media (min-width: 768px) and (max-width: 1024px){
  body.sl-a11y-open.sl-a11y-hide-cta-tablet .slf-float{ display:none !important; }
}

@media (min-width: 1025px){
  body.sl-a11y-open.sl-a11y-hide-cta-desktop .slf-float{ display:none !important; }
}


/* Ensure A-/A+/Reset keep black text (especially in dark mode) */
.sl-a11y-btn[data-a11y-action="text_minus"],
.sl-a11y-btn[data-a11y-action="text_plus"],
.sl-a11y-btn[data-a11y-action="text_reset"],
.sl-a11y-btn.slc-keep-black{
  color:#000 !important;
}

/* Mobile browsers: prefer dynamic viewport height for scrollable panel */
@supports (height: 100dvh){
  .sl-a11y-panel{
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px);
  }
}

/* Statement link: make it look like a pill button and keep it aligned in the A-/A+/Reset row */
.sl-a11y-statement{
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Reset all: white bg + black text in both light and dark mode */
.sl-a11y-btn--danger{
  color: #000 !important;
  background: #fff !important;
  border-color: #000 !important;
}

/* Reset all row + button */
.sl-a11y-row--resetall{
  margin-top: 10px;
}
.sl-a11y-row--resetall .sl-a11y-btn--danger{
  width: 100%;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 14px;
}



@media (max-width: 768px){
  .sl-a11y-row{
    margin-bottom: 10px;
  }
}



/* Mobile (300-400px): push the horizontal scroller (row) down slightly so the scrollbar line is not hugging the buttons */
@media (max-width: 400px){
  .sl-a11y-row{
    padding-bottom: 10px;
  }
}



/* Panel shadow — controlled by --sl-a11y-panel-shadow (0 or 1) set via inline CSS from PHP */
.sl-a11y-panel{
  box-shadow: calc(var(--sl-a11y-panel-shadow, 1) * 1px)
              calc(var(--sl-a11y-panel-shadow, 1) * 4px)
              calc(var(--sl-a11y-panel-shadow, 1) * 32px)
              rgba(0,0,0,calc(var(--sl-a11y-panel-shadow, 1) * 0.14));
}

/* Optional backdrop overlay behind the panel */
.sl-a11y-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: calc(var(--sl-a11y-widget-z, 9999) - 1);
}

.sl-a11y-panel__body::-webkit-scrollbar{width:10px;}
.sl-a11y-panel__body::-webkit-scrollbar-thumb{background:rgba(31,41,55,.18);border-radius:999px;border:2px solid transparent;background-clip:padding-box;}


.sl-a11y-card--mode{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  text-align:left;
  cursor:pointer;
}
.sl-a11y-card--mode .sl-a11y-card__label,
.sl-a11y-card--toggle .sl-a11y-card__label{
  word-break: normal;
  overflow-wrap: normal;
}
button[data-a11y-mode-group="saturation"][data-a11y-mode-value="mono"] .sl-a11y-card__label{
  font-size: 10.5px !important;
  white-space: nowrap;
}
.sl-a11y-card--mode:focus-visible{
  outline:none;
}


/* Keep page scroll available while the accessibility panel is open. */
html.sl-a11y-panel-open,html.sl-a11y-panel-open body{overflow-x:hidden;}
.sl-a11y-backdrop{overscroll-behavior:none;}
.sl-a11y-section__hint{font-size:12px;color:#6b7280;}
.sl-a11y-profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0 0;}
.sl-a11y-profile{display:flex;align-items:center;justify-content:center;min-height:46px;padding:12px 14px;border-radius:14px;border:1px solid rgba(15,23,42,.08);background:#f8fafc;color:#1f2937;font-weight:600;transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;}
.sl-a11y-profile:hover{transform:translateY(-1px);border-color:rgba(82,9,229,.22);box-shadow:0 10px 20px rgba(15,23,42,.07);}
.sl-a11y-profile.is-active{background:rgba(82,9,229,.08);border-color:rgba(82,9,229,.26);color:#5209E5;}
.sl-a11y-profile:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(82,9,229,.16);}
.sl-a11y-toast-slot{min-height:0;transition:min-height .2s ease, margin .2s ease, opacity .2s ease;}
.sl-a11y-toast-slot.is-active{min-height:54px;margin-top:8px;}
@media (max-width: 767px){.sl-a11y-profile-grid{grid-template-columns:1fr;}}