/*! Service Trade Accessibility — styles. All selectors are prefixed "sta-" to avoid conflicts (Oxygen / other plugins). */
:root {
  --sta-navy: #101E38; --sta-navy-2: #1A2A4A; --sta-red: #DE363B; --sta-red-600: #C42A30; --sta-red-700: #B8262B;
  --sta-ink: #101E38; --sta-muted: #4A556B; --sta-muted-hc: #1F2A3F; --sta-line: #D9DDE4; --sta-line-hc: #4A556B;
  --sta-surface: #FFFFFF; --sta-surface-2: #F5F6F8; --sta-focus: #DE363B;
  --sta-radius: 4px; --sta-radius-lg: 6px; --sta-font: Geist, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sta-z: 9000; --sta-fab-size: 44px; --sta-fab-offset: 16px; --sta-ease: cubic-bezier(.2,.7,.1,1);
}

/* ---------- Floating button ---------- */
.sta-fab {
  position: fixed; z-index: var(--sta-z); right: max(var(--sta-fab-offset), env(safe-area-inset-right)); bottom: calc(var(--sta-fab-bottom, 0px) + max(var(--sta-fab-offset), env(safe-area-inset-bottom)));
  width: var(--sta-fab-size); height: var(--sta-fab-size); padding: 0; border: 1px solid rgba(255,255,255,.22); border-radius: 50%;
  background: var(--sta-navy); color: #fff; cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 10px 28px -12px rgba(16,30,56,.55); transition: background-color .25s var(--sta-ease), transform .25s var(--sta-ease), bottom .35s var(--sta-ease);
  -webkit-tap-highlight-color: transparent;
}
.sta-fab:hover { background: var(--sta-navy-2); }
.sta-fab:active { transform: scale(.96); }
.sta-fab:focus-visible, .sta-panel :focus-visible { outline: 3px solid var(--sta-focus); outline-offset: 3px; }
.sta-fab .sta-svg { width: 24px; height: 24px; stroke-width: 2.4; }
.sta-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Panel (native <dialog>: focus trap, Esc, inert background) ---------- */
.sta-panel {
  position: fixed; inset: auto var(--sta-fab-offset) calc(var(--sta-fab-bottom, 0px) + var(--sta-fab-offset) + var(--sta-fab-size) + 12px) auto; margin: 0;
  width: min(360px, calc(100vw - 2 * var(--sta-fab-offset))); max-height: calc(100vh - 120px); overflow: auto;
  padding: 20px; border: 1px solid var(--sta-line); border-radius: var(--sta-radius-lg); background: var(--sta-surface); color: var(--sta-ink);
  font: 400 15px/1.45 var(--sta-font); box-shadow: 0 30px 60px -28px rgba(16,30,56,.45);
}
.sta-panel[open] { display: flex; flex-direction: column; gap: 14px; animation: sta-in .28s var(--sta-ease) both; }
.sta-panel::backdrop { background: rgba(16,30,56,.18); }
@keyframes sta-in { from { opacity: 0; transform: translate3d(0,10px,0); } to { opacity: 1; transform: none; } }
.sta-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sta-title { margin: 0; font: 600 18px/1.2 var(--sta-font); letter-spacing: -.01em; color: var(--sta-ink); outline: none; }
.sta-intro { margin: 0; font-size: 14px; color: var(--sta-muted); }
.sta-close { width: 44px; height: 44px; margin: -8px -8px -8px 0; border: 0; border-radius: var(--sta-radius); background: transparent; color: var(--sta-ink); cursor: pointer; display: grid; place-items: center; }
.sta-close:hover { background: var(--sta-surface-2); }
.sta-svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.6; fill: none; flex-shrink: 0; }
.sta-ico { color: var(--sta-red); display: grid; place-items: center; width: 24px; }

.sta-row { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--sta-radius); background: var(--sta-surface-2); }
.sta-lbl { font-weight: 500; color: var(--sta-ink); }
.sta-stepper { display: flex; align-items: center; gap: 4px; }
.sta-step { min-width: 44px; height: 44px; padding: 0 10px; border: 1px solid #C9CFD9; border-radius: var(--sta-radius); background: var(--sta-surface); color: var(--sta-ink); font: 600 15px/1 var(--sta-font); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.sta-step:hover:not(:disabled) { background: var(--sta-navy); border-color: var(--sta-navy); color: #fff; }
.sta-step:active:not(:disabled) { transform: scale(.97); }
.sta-step:disabled { opacity: .45; cursor: not-allowed; }
.sta-val { min-width: 52px; text-align: center; font: 600 14px/1 var(--sta-font); font-variant-numeric: tabular-nums; }

.sta-list { display: flex; flex-direction: column; gap: 6px; }
.sta-toggle { width: 100%; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px; border: 1px solid transparent; border-radius: var(--sta-radius); background: var(--sta-surface-2); color: var(--sta-ink); text-align: left; font: inherit; cursor: pointer; transition: background-color .2s, border-color .2s; }
.sta-toggle:hover:not(:disabled) { border-color: #C9CFD9; background: #EEF0F4; }
.sta-toggle:active:not(:disabled) { transform: scale(.99); }
.sta-toggle:disabled { cursor: not-allowed; }
.sta-toggle[aria-pressed="true"] { background: #EAF0FB; border-color: var(--sta-navy); }
.sta-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sta-desc { font-size: 13px; color: var(--sta-muted); }
.sta-switch { position: relative; width: 40px; height: 24px; border-radius: 999px; background: #B4BCCB; transition: background-color .2s; flex-shrink: 0; }
.sta-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s var(--sta-ease); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.sta-toggle[aria-pressed="true"] .sta-switch { background: var(--sta-navy); }
.sta-toggle[aria-pressed="true"] .sta-knob { transform: translateX(16px); }
.sta-toggle[aria-pressed="true"] .sta-switch::after { content: ""; position: absolute; left: 7px; top: 8px; width: 7px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.sta-toggle:disabled .sta-switch { opacity: .6; }
.sta-reset { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; border: 1px solid var(--sta-ink); border-radius: var(--sta-radius); background: transparent; color: var(--sta-ink); font: 500 15px/1 var(--sta-font); cursor: pointer; transition: background-color .2s, color .2s; }
.sta-reset:hover { background: var(--sta-navy); color: #fff; }
.sta-reset .sta-svg { width: 18px; height: 18px; }

/* Mobile: bottom sheet */
@media (max-width: 599px) {
  .sta-panel { inset: auto 0 0 0; width: 100%; max-width: none; max-height: 85vh; border-radius: 12px 12px 0 0; border-width: 1px 0 0; padding: 20px 16px max(20px, env(safe-area-inset-bottom)); }
  .sta-panel[open] { animation-name: sta-up; }
  @keyframes sta-up { from { transform: translate3d(0,100%,0); } to { transform: none; } }
}
/* Print: never print the widget */
@media print { .sta-fab, .sta-panel { display: none !important; } }

/* =========================================================================================
   Preference classes on <html>
   ========================================================================================= */

/* Text size: scales the rendered page like native zoom so fixed px values (inline styles, Oxygen) grow too,
   while fluid layouts reflow (WCAG 1.4.4). Themes built on rem can instead use: html.sta-text-scaled { font-size: calc(100% * var(--sta-scale)); } */
html.sta-text-scaled body { zoom: var(--sta-scale, 1); }

/* Text spacing — WCAG 1.4.12 reference values */
html.sta-spacing body :where(p, li, dd, dt, label, blockquote, figcaption, td, th, span, a, h1, h2, h3, h4, h5, h6, button, input, textarea, select) {
  line-height: 1.6 !important; letter-spacing: .06em !important; word-spacing: .14em !important;
}
html.sta-spacing .sta-panel * { letter-spacing: normal !important; word-spacing: normal !important; }

/* Highlight links */
html.sta-links body a:not(.sta-skip) { text-decoration-line: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 4px !important; }
html.sta-links body a:not(.sta-skip):focus-visible { outline: 3px solid var(--sta-focus) !important; outline-offset: 3px !important; }

/* Reduce motion (also forced automatically by prefers-reduced-motion in the boot script) */
html.sta-reduce-motion *, html.sta-reduce-motion *::before, html.sta-reduce-motion *::after {
  animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}

/* High contrast — token remap. Site colours are matched by their design-token values
   (inline styles serialise as rgb()). In a WordPress theme prefer mapping tokens to CSS custom properties
   and overriding them under html.sta-contrast (see README). */
html.sta-contrast { --sta-muted: var(--sta-muted-hc); --sta-line: var(--sta-line-hc); }
html.sta-contrast [style^="color: rgb(107, 116, 137)"], html.sta-contrast [style*="; color: rgb(107, 116, 137)"] { color: #1F2A3F !important; }
html.sta-contrast [style^="color: rgb(74, 85, 107)"], html.sta-contrast [style*="; color: rgb(74, 85, 107)"] { color: #1F2A3F !important; }
html.sta-contrast [style^="color: rgb(154, 163, 181)"], html.sta-contrast [style*="; color: rgb(154, 163, 181)"] { color: #1F2A3F !important; }
html.sta-contrast [style^="color: rgb(61, 74, 56)"], html.sta-contrast [style*="; color: rgb(61, 74, 56)"] { color: #1F2A3F !important; }
html.sta-contrast [style^="color: rgb(78, 94, 72)"], html.sta-contrast [style*="; color: rgb(78, 94, 72)"] { color: #1F2A3F !important; }
html.sta-contrast [style^="color: rgb(110, 126, 103)"], html.sta-contrast [style*="; color: rgb(110, 126, 103)"] { color: #1F2A3F !important; }
html.sta-contrast [style^="color: rgb(154, 167, 191)"], html.sta-contrast [style*="; color: rgb(154, 167, 191)"] { color: #FFFFFF !important; }
html.sta-contrast [style^="color: rgb(125, 139, 168)"], html.sta-contrast [style*="; color: rgb(125, 139, 168)"] { color: #FFFFFF !important; }
html.sta-contrast [style^="color: rgb(185, 195, 214)"], html.sta-contrast [style*="; color: rgb(185, 195, 214)"] { color: #FFFFFF !important; }
html.sta-contrast [style^="color: rgb(195, 204, 221)"], html.sta-contrast [style*="; color: rgb(195, 204, 221)"] { color: #FFFFFF !important; }
html.sta-contrast [style^="color: rgb(169, 182, 208)"], html.sta-contrast [style*="; color: rgb(169, 182, 208)"] { color: #FFFFFF !important; }
html.sta-contrast [style^="color: rgb(201, 211, 230)"], html.sta-contrast [style*="; color: rgb(201, 211, 230)"] { color: #FFFFFF !important; }
html.sta-contrast [style^="color: rgb(211, 218, 231)"], html.sta-contrast [style*="; color: rgb(211, 218, 231)"] { color: #FFFFFF !important; }
html.sta-contrast [style^="color: rgb(222, 54, 59)"], html.sta-contrast [style*="; color: rgb(222, 54, 59)"] { color: #B8262B !important; }
html.sta-contrast [style*="rgb(217, 221, 228)"] { border-color: #4A556B !important; }
html.sta-contrast [style*="rgb(230, 233, 238)"] { border-color: #4A556B !important; }
html.sta-contrast [style*="rgb(208, 213, 222)"] { border-color: #4A556B !important; }
html.sta-contrast [style*="rgb(201, 207, 217)"] { border-color: #4A556B !important; }
html.sta-contrast [style*="rgb(180, 188, 203)"] { border-color: #4A556B !important; }
html.sta-contrast body ::placeholder { color: #4A556B !important; opacity: 1 !important; }
html.sta-contrast body :focus-visible { outline: 3px solid #DE363B !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px #FFFFFF !important; }
html.sta-contrast body input, html.sta-contrast body select, html.sta-contrast body textarea { border-color: #101E38 !important; }
html.sta-contrast .sta-panel { border-color: #101E38; }
html.sta-contrast .sta-desc, html.sta-contrast .sta-intro { color: #1F2A3F; }