/* global; ada styles */

body.keyboard-navigation
  :is(
    .dp-btn-normal,
    .dp-btn-primary,
    .dp-blue-orange-btn,
    .dp-blue-white-btn,
    .dp-orange-white-btn,
    .dp-orange-blue-btn,
    .btn-navy,
    .btn-orange
  ):active {
  background-color: transparent;
}

/* nav */

body.keyboard-navigation .skip-container {
  width: 100%;
  position: absolute;
  height: 100%;
  background: var(--surface-overlay);
  z-index: 99;
  display: none;
  justify-content: center;
  align-items: center;
}

body.keyboard-navigation .skip-container .skip-link.screen-reader-text {
  position: relative;
  top: 0;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  overflow: auto;
  transform: none;
  padding: 12px 16px;
  background: var(--white-color);
  border: 2px solid var(--border-default);
  border-radius: 0;
  transition: all ease 0.3s;
  color: var(--text-primary-default);
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
}

body.keyboard-navigation .skip-container.skip-container-focused {
  display: flex;
  z-index: 9999;
}

body.keyboard-navigation header.dp-header a.dp-main-header-link:focus {
  outline: auto !important;
  border-color: var(--border-focus);
  outline-color: var(--border-focus) !important;
}

body.keyboard-navigation
  header.dp-header
  a.dp-main-header-link.employees-main-nav:focus::after {
  outline: 0 !important;
}

body.keyboard-navigation
  header.dp-header
  .lets-talk-wrap-btn
  a:is(:focus, :focus-within, :focus-visible) {
  outline: none !important;
  border-color: var(--border-focus) !important;
  color: var(--white-color) !important;
  background: var(--border-focus);
}

body.keyboard-navigation
  header.dp-header
  :is(
    a.dp-mega-menu-resources-content-link,
    .dp-logo-container-header a.dailypay-logo,
    .lets-talk-wrap-link a,
    .dp-mega-menu-row-sublinks-wrap a,
    a.login-btn-header
  ):is(:focus, :focus-within, :focus-visible) {
  outline: auto !important;
  border-color: var(--border-focus);
  outline-color: var(--border-focus) !important;
}

body.keyboard-navigation
  header.dp-header
  a.dp-mega-menu-resources-content-link:is(
    :focus,
    :focus-within,
    :focus-visible
  )
  .dp-mega-menu-resources-content-text-title {
  color: var(--text-link-primary-hover) !important;
}

body.keyboard-navigation
  header.dp-header
  button.search-popup-trigger:is(:focus, :focus-within) {
  outline: auto !important;
  border-color: var(--border-focus);
  outline-color: var(--border-focus) !important;
}

/* Links with Primary Hover Color + Outline Auto */
body.keyboard-navigation
  :is(
    header.dp-header .dp-mega-menu-inner-links-column a,
    .popular-search-listing-outer a,
    .search-popup-header-logo a,
    footer a.footer-logo,
    footer .footer-visit-dp-wrap a,
    .insight-article-inner a,
    .resource-insights-right-content a,
    footer button.footer-language-changer-trigger,
    input.slider[type="range"],
    .info-icon
  ):is(:focus, :focus-within, :focus-visible) {
  color: var(--text-link-primary-hover) !important;
  outline: auto !important;
  outline-color: var(--text-link-primary-hover) !important;
}

/* Links with Primary Hover Color + Underline (No Outline) */
body.keyboard-navigation
  :is(
    .announcement-banner-top-inner-new a.learnmore-btn,
    footer a,
    .dp-primary-link
  ):is(:focus, :focus-within, :focus-visible) {
  color: var(--text-link-primary-hover) !important;
  outline: none !important;
  text-decoration: underline !important;
}

/* Links with Primary Hover Color (No Outline, No Underline) */
body.keyboard-navigation
  footer
  .footer-social-icons
  a:is(:focus, :focus-within, :focus-visible) {
  color: var(--text-link-primary-hover) !important;
  outline: none !important;
  text-decoration: none !important;
}

/* footer language switcher */

footer button.footer-language-changer-trigger {
  font-size: 14px;
  line-height: 14px;
  min-width: max-content;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  color: var(--blue-color);
  transition: all ease 0.3s;
  margin-bottom: 0px;
  border: none;
  background: none;
  font-weight: 500;
}

footer .footer-language-changer-popup hr {
  width: 100%;
}

/* Slick Slider Pagination Dots Focus */
body.keyboard-navigation
  .slick-dots
  button:is(:focus, :focus-within, :focus-visible) {
  outline: auto !important;
  outline-color: var(--border-focus) !important;
  outline-offset: 2px !important; /* Pushes the outline slightly away from the dot for better visibility */
}

/* Optional: If you want to visually hide the default outline generated by mouse clicks just in case */
.slick-dots button {
  outline: none;
}