/* Shared focus treatment, loaded after the page and component styles. */
:root {
  --site-focus-color: #81759e;
}

.voice-page,
.hp-voice,
.sv-footer,
.hp-hero-copy,
.fo-final {
  --site-focus-color: #c7bed9;
}

/* Override the separate, heavy component rings while retaining keyboard focus.
   Programmatically focused containers (such as cookie dialogs) are excluded. */
body :where(a[href], button, summary, input, textarea, select, [tabindex]:not([tabindex="-1"])):focus-visible,
body .uc-buffer-settings label:has(:focus-visible),
body .cc-switch input:focus-visible + .cc-switch-track,
body .st-check-item input:focus-visible + .st-checkbox {
  outline: 1px solid var(--site-focus-color) !important;
  outline-offset: 2px !important;
}

/* Fields keep a quiet edge instead of a second, widely spaced ring or glow. */
body :is(input, textarea, select):not(:where([type="checkbox"], [type="radio"], [type="range"], [type="color"])):focus,
body .field :is(input, textarea, select):focus {
  border-color: var(--site-focus-color);
  outline: 1px solid var(--site-focus-color) !important;
  outline-offset: 0 !important;
  box-shadow: none;
}

/* The support search is a single rounded field with an icon and button. */
body .sv-support-search > div:has(input:focus) {
  border-color: var(--site-focus-color);
  box-shadow: none;
}

body .sv-support-search input:focus {
  outline: none !important;
}

/* Keep the indicator inside controls whose parent clips its contents. */
body :is(.builder-view-switch button, .builder-setting-switch button, .hm-app-content):focus-visible {
  outline-offset: -2px !important;
}

@media (forced-colors: active) {
  :root {
    --site-focus-color: Highlight;
  }

  .voice-page,
  .hp-voice,
  .sv-footer,
  .hp-hero-copy,
  .fo-final {
    --site-focus-color: Highlight;
  }
}