/* 1. Target any image inside a focused link, regardless of how many divs are in between */
a:focus-visible img {
outline: 5px solid #CFCFCF;
outline-offset: 5px !important;
box-shadow: 0 0 15px rgba(23, 129, 185, 0.7);
position: relative !important;
z-index: 9999 !important;
}

/* 2. Force the specific Colibri containers to show the border */
a:focus-visible div,
a:focus-visible .h-element {
overflow: visible !important;
}

/* 3. Remove default browser styling */
a:focus {
outline: none !important;
}

/* 4. Ensure the parent link isn't cutting off the outline */
#custom-2 a {
overflow: visible !important;
display: inline-block !important;
}


.h-hamburger-button:focus,
.h-hamburger-button:focus-visible {
    outline: 3px solid #0073aa  /* Prominent outline color */
    outline-offset: 2px;
    box-shadow: 0 0 5px rgba(0,0,0,0.5); /* Optional shadow */
}

/* General focus style for all buttons and links */
button:focus, 
.button:focus, 
a:focus {
    outline: 3px solid #005fcc; /* Change color to match your brand */
    outline-offset: 2px;       /* Adds space between the button and the outline */
    box-shadow: 0 0 5px rgba(0, 95, 204, 0.5); /* Optional glow effect */
}

/* focus-visible only shows the outline for keyboard users, not mouse clicks */
button:focus-visible {
    outline: 3px solid #005fcc;
}