/*
 * Keyboard access on top of the ported theme. NOT on live.
 *
 * Loaded at every width from src/app/layout.tsx. Nothing here changes what a
 * mouse or touch user sees: every rule is keyed to :focus-visible, which the
 * browser sets only for keyboard focus.
 */

/* A visible focus ring in the site's accent red. The theme and Elementor
   remove outlines (outline:none, some with !important). The white halo keeps
   the ring visible on the red buttons and on the dark navy sections. */
:focus-visible {
  outline: 2px solid #fa0f3e !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px #fff !important;
}

/* The desktop header's drop-downs (About Us, Services, Our Work, Resources)
   open on hover only, and stay visibility:hidden (so out of the tab order)
   while closed. Open one while its top link or anything inside it has
   keyboard focus, exactly as hover opens it. Escape closes it again
   (public/a11y.js sets .mm-dismissed until focus leaves the item). */
@media (min-width: 768px) {
  .new_header .main_menu ul li:not(.mm-dismissed):has(> a:focus-visible) > .mega_menu,
  .new_header .main_menu ul li:not(.mm-dismissed):has(> .mega_menu :focus-visible) > .mega_menu,
  .new_header .main_menu ul li:not(.mm-dismissed):has(> a:focus-visible) > ul,
  .new_header .main_menu ul li:not(.mm-dismissed):has(> ul :focus-visible) > ul {
    visibility: visible;
    opacity: 1;
    margin-top: 27px;
    z-index: 99;
  }
}