/**
 * Visible focus indicators (WCAG 2.4.7 Focus Visible, 1.4.11 Non-text Contrast).
 *
 * Loaded LAST in delhi_gov.libraries.yml so it overrides the `outline: 0`
 * rules that Bootstrap and older theme CSS apply to buttons and form fields.
 *
 * The indicator is a two-tone ring: an amber outline wrapped in a dark halo.
 * A single colour cannot satisfy contrast in both themes, because the dark
 * theme (darkvariable.css) inverts page backgrounds to black. Amber carries
 * the contrast on dark backgrounds, the dark halo carries it on light ones,
 * so the indicator stays visible either way.
 *
 * `:focus` is used rather than `:focus-visible` so the indicator is shown for
 * mouse and touch activation as well as keyboard, which is what STQC / GIGW
 * manual testing checks for.
 */

:root {
  --focus-ring-color: #ffbf47;
  --focus-ring-halo: #0b0c0c;
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
}

/* ---------------------------------------------------------------------------
   1. Base indicator for every natively interactive element.
   --------------------------------------------------------------------------- */

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
summary:focus,
area:focus,
object:focus,
embed:focus,
iframe:focus,
[tabindex]:not([tabindex="-1"]):focus,
[role="button"]:focus,
[role="link"]:focus,
[role="tab"]:focus,
[role="menuitem"]:focus,
[role="checkbox"]:focus,
[role="radio"]:focus,
[contenteditable="true"]:focus {
  outline: var(--focus-ring-width) solid var(--focus-ring-color) !important;
  outline-offset: var(--focus-ring-offset) !important;
  box-shadow: 0 0 0 6px var(--focus-ring-halo) !important;
  /* Keep the ring above adjacent stacking contexts so it is never overlapped. */
  position: relative;
  z-index: 100;
}

/* ---------------------------------------------------------------------------
   2. Undo the specific `outline: 0` declarations in style.css / bootstrap.
      These selectors are more specific than the generic ones above, so they
      are restated here rather than relying on source order alone.
   --------------------------------------------------------------------------- */

.key-intiative .owl-nav button:focus,
.form-textarea-wrapper textarea:focus,
.view-filters select:focus,
.feedback-form textarea:focus,
.block-lang-dropdown select:focus,
.block-lang-dropdown select.form-control:focus,
.navbar-light .navbar-nav .nav-link:focus,
.form-control:focus,
.btn:focus,
.btn.focus,
.custom-select:focus,
.page-link:focus {
  outline: var(--focus-ring-width) solid var(--focus-ring-color) !important;
  outline-offset: var(--focus-ring-offset) !important;
  box-shadow: 0 0 0 6px var(--focus-ring-halo) !important;
}

/* ---------------------------------------------------------------------------
   3. Auto-moving content controls.
      Carousel arrows, dots, pause/play buttons and news-ticker controls sit on
      photographic or coloured backgrounds, so they get the same ring. The
      carousel viewport clips overflow, which would cut the box-shadow halo, so
      the offset is reduced and the halo is drawn as an inset ring instead.
   --------------------------------------------------------------------------- */

.owl-carousel .owl-nav button:focus,
.owl-carousel .owl-dots .owl-dot:focus,
.owl-pause-play-btn:focus,
#photo-pp-btn:focus,
.bn-controls button:focus,
#news-toggle:focus {
  outline: var(--focus-ring-width) solid var(--focus-ring-color) !important;
  outline-offset: 1px !important;
  box-shadow: inset 0 0 0 2px var(--focus-ring-halo),
    0 0 0 4px var(--focus-ring-halo) !important;
}

/* ---------------------------------------------------------------------------
   4. Containers focused programmatically (skip links target #maincontent with
      tabindex="-1"). Drawing the full ring around the whole content area is
      visually overwhelming, so these get a restrained indicator.
   --------------------------------------------------------------------------- */

[tabindex="-1"]:focus,
#maincontent:focus,
.webform-confirmation__message:focus {
  outline: 2px dashed var(--focus-ring-color) !important;
  outline-offset: 4px !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------------------
   5. Skip link must become visible when it receives focus.
   --------------------------------------------------------------------------- */

.visually-hidden.focusable:focus,
.skip-link:focus,
.skip-content:focus {
  position: static !important;
  clip: auto !important;
  clip-path: none !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  display: inline-block !important;
  padding: 8px 16px;
  background: var(--focus-ring-halo);
  color: var(--focus-ring-color);
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   6. Windows High Contrast Mode: forced-colors ignores author colours, so the
      ring is re-expressed using the system highlight colour.
   --------------------------------------------------------------------------- */

@media (forced-colors: active) {
  a:focus,
  button:focus,
  input:focus,
  select:focus,
  textarea:focus,
  [tabindex]:not([tabindex="-1"]):focus,
  [role="button"]:focus {
    outline: 3px solid Highlight !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
  }
}

/* ---------------------------------------------------------------------------
   7. Focus indicators must survive printing of a focused state and must not be
      suppressed by reduced-motion preferences (they are not motion).
   --------------------------------------------------------------------------- */

@media print {
  *:focus {
    outline: 2px solid #000 !important;
    box-shadow: none !important;
  }
}