/* a11y.css — focus rings, skip-link, reduced-motion, mobile fallbacks. */

:where(a, button, [role="button"], select, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-accent, #185FA5);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  top: -40px; left: 0;
  background: var(--brand-primary, #0F0F0F);
  color: #fff;
  padding: 8px 14px;
  z-index: 10000;
  font-size: 13px;
  text-decoration: none;
}
.skip-link:focus { top: 8px; left: 8px; }

@media (prefers-reduced-motion: reduce) {
  .cc-pulse, .skel { animation: none !important; }
}

@media (max-width: 768px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  .rail { width: 48px !important; flex: 0 0 48px !important; }
  #chat-panel { width: auto !important; left: 8px !important; right: 8px !important; }
  #chat-panel.open { width: auto !important; }
  .rail a { width: 36px !important; height: 36px !important; }
  body.wp-sidebar-left #content,
  body.wp-sidebar-right #content { padding-left: 16px !important; padding-right: 16px !important; }
  body.wp-sidebar-left #wp,
  body.wp-sidebar-right #wp { display: none; }
  #call-card { right: 8px !important; left: 8px !important; width: auto !important; bottom: 16px !important; }
  .h1 { font-size: 20px !important; }
  .row { flex-wrap: wrap; }
  .col-sm-hide { display: none !important; }
}

@media (max-width: 520px) {
  .col-md-hide { display: none !important; }
  body.compact .row, .row { padding: 12px 4px !important; gap: 8px !important; }
}