/* ==========================================================================
   Comella Orthodontics — Accessibility styles (site-a11y.css)
   Dedicated home for accessibility CSS, kept separate from style.css.
   Enqueued via salient_child_enqueue_styles() in functions.php.
   ========================================================================== */

/* ==========================================================================
   Accessibility: visible keyboard focus indicator (Phase 1)

   A runtime-injected `<style>:focus{outline:0}::-moz-focus-inner{border:0}</style>`
   strips the native focus ring site-wide, so keyboard focus is invisible. We
   override it here.

   Two design choices:
   1. Dark ring (#111827) + white halo (box-shadow) so the indicator stays
      visible on ANY background — light, dark, or the brand-blue sections where
      a plain blue/black ring disappeared.
   2. Selectors are prefixed with `body` (e.g. `body :focus-visible`) to raise
      specificity to (0,1,1), which beats the injected reset's `:focus` (0,1,0)
      REGARDLESS of source order — no !important needed. A `:focus` fallback is
      included for elements/browsers that don't distinguish :focus-visible.

   `outline` (not only box-shadow) is kept so the ring also shows in Windows
   High Contrast / forced-colors mode, where box-shadow is dropped.
   ========================================================================== */
body :focus-visible {
	outline: 3px solid #111827;
	outline-offset: 2px;
	box-shadow: 0 0 0 6px #fff, 0 0 0 8px #111827;
	border-radius: 2px;
}

/* Fallback for UAs/elements that only fire :focus (not :focus-visible).
   Scoped to interactive elements so plain containers don't get a ring on
   programmatic focus. Still (0,1,1)+ specificity to beat the reset. */
body a:focus,
body button:focus,
body input:focus,
body select:focus,
body textarea:focus,
body [tabindex]:focus,
body .slide-out-widget-area-toggle a:focus,
body .sf-menu a:focus {
	outline: 3px solid #111827;
	outline-offset: 2px;
	box-shadow: 0 0 0 6px #fff, 0 0 0 8px #111827;
	border-radius: 2px;
}

/* Skip link: guarantee a visible ring when focused (Salient reveals it on
   :focus). Higher specificity via the class + body prefix. */
body .nectar-skip-to-content:focus,
body .nectar-skip-to-content:focus-visible {
	outline: 3px solid #111827;
	outline-offset: 2px;
	box-shadow: 0 0 0 6px #fff, 0 0 0 8px #111827;
}

/* Forced-colors / Windows High Contrast: rely on the system focus color and
   a thick outline; drop our custom colors so the OS can enforce contrast. */
@media (forced-colors: active) {
	body :focus-visible,
	body a:focus,
	body button:focus,
	body input:focus,
	body select:focus,
	body textarea:focus,
	body [tabindex]:focus,
	body .nectar-skip-to-content:focus {
		outline: 3px solid Highlight;
		box-shadow: none;
	}
}