/* KO - ADA Keyboard Nav Fix
   Keyboard navigation and visible focus improvements for WordPress/Divi + DiviFlash Advanced Menu.
   V1.1.5: Keyboard-only focus cleanup + Donate button fix.
*/

:root {
  --ko-a11y-focus-color: #FFD400;
  --ko-a11y-skip-bg: #005fcc;
  --ko-a11y-skip-color: #ffffff;
}

html {
  scroll-padding-top: 120px;
}

/* Skip link */
.ko-skip-link {
  position: absolute;
  top: -120px;
  left: 20px;
  z-index: 999999;
  display: inline-block;
  padding: 10px 14px;
  background: var(--ko-a11y-skip-bg);
  color: var(--ko-a11y-skip-color) !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

.ko-skip-link:focus-visible {
  top: 20px;
  outline: 4px solid var(--ko-a11y-focus-color) !important;
  outline-offset: 3px !important;
}

/* Global keyboard focus states.
   Use focus-visible only so mouse clicks do not show the yellow ADA ring.
*/
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
.et_pb_button:focus-visible,
.et_pb_contact_submit:focus-visible,
.et_pb_newsletter_button:focus-visible,
.et_pb_toggle_title:focus-visible,
.et_pb_tab:focus-visible,
.et_pb_tabs_controls a:focus-visible,
.et_pb_accordion_item .et_pb_toggle_title:focus-visible,
.et_mobile_menu a:focus-visible,
.mobile_menu_bar:focus-visible,
.df-mobile-menu-button:focus-visible,
.ko-a11y-main-nav .df-menu-nav a:focus-visible {
  outline: 4px solid var(--ko-a11y-focus-color) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
  border-radius: 5px;
  text-decoration-thickness: 2px;
}

/* Remove mouse-click focus rings in modern browsers. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
[role="link"]:focus:not(:focus-visible),
.et_pb_button:focus:not(:focus-visible),
.df-mobile-menu-button:focus:not(:focus-visible),
.ko-a11y-main-nav .df-menu-nav a:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Logo focus fix. Keyboard only. */
.et_pb_image_0_tb_header a:focus-visible .et_pb_image_wrap {
  outline: 4px solid var(--ko-a11y-focus-color) !important;
  outline-offset: 6px !important;
  border-radius: 5px;
}

/* Donate button focus fix.
   Draws the ring with box-shadow so it hugs the actual button shape more reliably.
   Keyboard only.
*/
.ko-a11y-main-nav .df-menu-nav li.nav-donate > a:focus-visible,
.ko-a11y-main-nav .df-menu-nav > li.nav-donate > a:focus-visible,
.ko-a11y-main-nav .df-menu-nav a[href*="friends-of-piedmont"]:focus-visible,
.ko-a11y-main-nav .df-menu-nav a.ko-a11y-donate-focus:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 4px var(--ko-a11y-focus-color) !important;
  border-radius: 6px !important;
}

/* Button-style links */
.et_pb_button:focus-visible,
.et_pb_contact_submit:focus-visible,
.et_pb_newsletter_button:focus-visible {
  outline-offset: 4px !important;
}

/* Static mega menu text should not look or behave like a keyboard link. */
.ko-a11y-main-nav .df-menu-nav li.nav-text > a,
.ko-a11y-main-nav .df-menu-nav li.mobile-hide-nav.nav-text > a {
  pointer-events: none;
  cursor: default;
}

.ko-a11y-main-nav .df-menu-nav li.nav-text > a:focus,
.ko-a11y-main-nav .df-menu-nav li.nav-text > a:focus-visible,
.ko-a11y-main-nav .df-menu-nav li.mobile-hide-nav.nav-text > a:focus,
.ko-a11y-main-nav .df-menu-nav li.mobile-hide-nav.nav-text > a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Ensure focused targets are not hidden under sticky/fixed headers. */
#main-content,
.et_pb_section,
.et_pb_row,
.et_pb_module,
[id] {
  scroll-margin-top: 120px;
}

/* Divi toggle/accordion titles need to feel like keyboard controls when JS adds focusability. */
.et_pb_toggle_title[tabindex="0"],
.et_pb_accordion_item .et_pb_toggle_title[tabindex="0"],
.mobile_menu_bar[tabindex="0"] {
  cursor: pointer;
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}