/* WCAG Compliant Focus Styles for Keyboard Navigation */

/* General focus styles for all interactive elements */
*:focus-visible {
  outline: 4px solid #F9641F !important;
  outline-offset: 4px !important;
}

/* Remove default browser outline to use our custom one */
*:focus {
  outline: none !important;
}

/* Specific focus styles for common interactive elements */

/* Links */
a:focus-visible {
  outline: 4px solid #F9641F !important;
  outline-offset: 4px !important;
}

.testimonials-filters button:focus-visible, .results-filters button:focus-visible {
  outline: 4px solid #F9641F !important;
  outline-offset: 4px !important;
}

/* Buttons */
button:focus-visible,
.btn:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible {
  outline: 4px solid #F9641F !important;
  outline-offset: 4px !important;
}

/* Form inputs */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 4px solid #F9641F !important;
  outline-offset: 4px !important;
}

/* Navigation elements */
nav a:focus-visible,
.nav-link:focus-visible,
.navbar-nav .nav-link:focus-visible {
  outline: 4px solid #F9641F !important;
  outline-offset: 4px !important;
}

/* Specific elements that might need focus styles */
.dropdown-toggle:focus-visible,
.dropdown-item:focus-visible,
.pagination .page-link:focus-visible,
.carousel-control-prev:focus-visible,
.carousel-control-next:focus-visible {
  outline: 4px solid #F9641F !important;
  outline-offset: 4px !important;
}

/* Custom elements that might be focusable */
[tabindex]:focus-visible,
.focusable:focus-visible {
  outline: 4px solid #F9641F !important;
  outline-offset: 4px !important;
}

/* Ensure focus is visible even on elements with background images or complex styling */
.slick-arrow:focus-visible,
.slick-dots button:focus-visible {
  outline: 4px solid #F9641F !important;
  outline-offset: 4px !important;
}

/* Focus for custom interactive elements */
.result-card-link:focus-visible,
.hero-video-controls .feature-video-control-item:focus-visible,
.slider-control-btn:focus-visible {
  outline: 4px solid #F9641F !important;
  outline-offset: 4px !important;
}

/* Ensure focus outline is visible on all custom buttons and controls */
.gform_wrapper input:focus-visible,
.gform_wrapper select:focus-visible,
.gform_wrapper textarea:focus-visible,
.gform_wrapper button:focus-visible {
  outline: 4px solid #F9641F !important;
  outline-offset: 4px !important;
}

/* Focus for any WordPress-specific elements */
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
  outline: 4px solid #F9641F !important;
  outline-offset: 4px !important;
}

/* Focus for media elements */
video:focus-visible,
audio:focus-visible,
iframe:focus-visible {
  outline: 4px solid #F9641F !important;
  outline-offset: 4px !important;
}

/* Ensure focus is maintained for skip links and screen reader elements */
.sr-only-focusable:focus-visible {
  outline: 4px solid #F9641F !important;
  outline-offset: 4px !important;
}

/* Focus for any custom interactive cards or clickable areas */
.card:focus-visible,
.card-link:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible {
  outline: 4px solid #F9641F !important;
  outline-offset: 4px !important;
} 

.result-card-content a:focus-visible {
  border-radius: 40px !important;
}

/* Fallback for browsers that don't support :focus-visible */
/* This provides progressive enhancement */
@supports not selector(:focus-visible) {
  /* Use :focus as fallback, but remove outline on mouse down */
  *:focus {
    outline: 4px solid #F9641F !important;
    outline-offset: 4px !important;
  }
  
  /* Remove outline when mouse is pressed down */
  *:focus:active {
    outline: none !important;
  }
  
  a:focus, button:focus, .btn:focus,
  input[type="button"]:focus, input[type="submit"]:focus, input[type="reset"]:focus,
  input:focus, textarea:focus, select:focus,
  nav a:focus, .nav-link:focus, .navbar-nav .nav-link:focus,
  .dropdown-toggle:focus, .dropdown-item:focus, .pagination .page-link:focus,
  .carousel-control-prev:focus, .carousel-control-next:focus,
  [tabindex]:focus, .focusable:focus,
  .slick-arrow:focus, .slick-dots button:focus,
  .result-card-link:focus, .hero-video-controls .feature-video-control-item:focus,
  .slider-control-btn:focus, .gform_wrapper input:focus, .gform_wrapper select:focus,
  .gform_wrapper textarea:focus, .gform_wrapper button:focus,
  .wp-block-button__link:focus, .wp-element-button:focus,
  video:focus, audio:focus, iframe:focus,
  .sr-only-focusable:focus, .card:focus, .card-link:focus,
  [role="button"]:focus, [role="link"]:focus {
    outline: 4px solid #F9641F !important;
    outline-offset: 4px !important;
  }
  
  /* Remove outline when mouse is pressed down on interactive elements */
  a:focus:active, button:focus:active, .btn:focus:active,
  input[type="button"]:focus:active, input[type="submit"]:focus:active, input[type="reset"]:focus:active {
    outline: none !important;
  }
}