/* ============================================================
   Travinger accessibility layer — visible focus + skip link.
   Loaded site-wide (after core) so it wins on focus styling.
   ============================================================ */

/* Skip-to-content link: hidden until focused, then revealed top-left. */
.smyk-skip-link:focus,
.smyk-skip-link:focus-visible {
  position: fixed !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 100000 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 12px 20px !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  white-space: normal !important;
  background: #e41d56 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25) !important;
  outline: 2px solid #ffffff !important;
  outline-offset: 2px !important;
}

/* Restore a visible keyboard-focus ring everywhere. `:where()` keeps this at
   zero specificity for normal rules, and `!important` overrides the various
   `outline:none` declarations across the component stylesheets. `:focus-visible`
   means it only appears for keyboard users, never on mouse click. */
:where(a, button, input, select, textarea, summary, [tabindex], [role="button"], [role="tab"], [role="option"]):focus-visible {
  outline: 2px solid #e41d56 !important;
  outline-offset: 2px !important;
  border-radius: 3px;
}

/* On dark surfaces (footer, hero overlays) a white ring reads better. */
.smyk-footer :where(a, button, input, [tabindex]):focus-visible,
.smyk-newsletter :where(a, button, input, [tabindex]):focus-visible {
  outline-color: #ffffff !important;
}

.smyk-ck-lock { overflow: hidden; }