:root {
  --nav-height: 4.2rem;
  --a11y-focus-color: #ff7a1a;
  --a11y-focus-inner: #ffffff;
}

.skip-link {
  position: absolute;
  top: calc(var(--nav-height) + 0.5rem);
  inset-inline-start: 0.5rem;
  padding: 0.6rem 1rem;
  background: #000;
  color: #fff;
  text-decoration: none;
  border-radius: 0.375rem;
  transform: translateY(-1000%);
  z-index: 9999;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  color: #fff;
  outline: 3px solid var(--a11y-focus-inner);
  outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--a11y-focus-color);
  outline-offset: 3px;
}

.nav-icon:focus-visible,
.arrowdown:focus-visible,
.play-icon:focus-visible,
.video-play-button:focus-visible,
.close-button:focus-visible,
.video-close-popup:focus-visible,
.plus-icon:focus-visible,
.blog-share-btn:focus-visible,
.img-post:focus-visible,
.popup-image:focus-visible,
.accord-head:focus-visible {
  outline: 3px solid var(--a11y-focus-color);
  outline-offset: 4px;
}

[role="button"],
[role="link"],
.play-icon,
.video-play-button,
.close-button,
.video-close-popup,
.arrowdown,
.plus-icon,
.blog-share-btn,
.img-post,
.popup-image,
.accord-head {
  cursor: pointer;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 1px, 1px) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.popup[role="dialog"]:focus,
.vid-popup-wrap[role="dialog"]:focus {
  outline: 3px solid var(--a11y-focus-color);
  outline-offset: 4px;
}

.wpcf7-not-valid-tip[role="alert"],
.wpcf7-response-output[role="alert"] {
  display: block;
}

@media (forced-colors: active) {
  .skip-link,
  button,
  .button,
  [role="button"],
  [role="link"],
  .play-icon,
  .video-play-button,
  .close-button,
  .video-close-popup,
  .plus-icon,
  .arrowdown,
  .blog-share-btn {
    forced-color-adjust: none;
    color: ButtonText;
    background: ButtonFace;
    border: 1px solid ButtonText;
  }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [role="button"]:focus-visible,
  [role="link"]:focus-visible,
  [tabindex]:focus-visible {
    outline: 3px solid Highlight;
  }

  svg,
  svg *,
  .nav-icon span {
    forced-color-adjust: auto;
    stroke: ButtonText !important;
    fill: currentColor;
  }

  img,
  .responsive-bg,
  .img-post,
  .header-image,
  .bg-img {
    forced-color-adjust: auto;
  }
}

@media (min-width: 783px) {
  body.admin-bar .skip-link {
    top: calc(var(--nav-height) + 2.5rem);
  }
}