﻿:root {
    --focus-ring: #2B3494;
}
/* your low-blue */

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

/* WCAG need to integrate and organize*/
/* Skip link: visible when focused (WCAG 2.4.1, 2.4.7) */
/* Skip link: hidden until keyboard focus */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 9999;
}

    .skip-link:focus,
    .skip-link:focus-visible {
        left: 1rem;
        top: 1rem;
        width: auto;
        height: auto;
        padding: 0.75rem 1rem;
        overflow: visible;
        text-decoration: none;
        border-radius: 0.25rem;
        /* let it inherit your theme colors, or set explicit ones if you prefer */
        background: #fff;
        border: 2px solid #B62A32;
        color: #000;
    }



/* Ensure keyboard focus is clearly visible */
a:focus-visible,
button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.tooltip {
    pointer-events: auto;
}
/* allow mouse interaction with popover bubble */
.popover {
    pointer-events: auto !important;
}

/* ===== Library toolbar WCAG contrast fix ===== */

/* Darker outline buttons for 3:1 compliance */
.library-toolbar .btn-outline-secondary {
    color: var(--low-blue);
    border-color: var(--low-blue);
}

    .library-toolbar .btn-outline-secondary:hover,
    .library-toolbar .btn-outline-secondary:focus {
        background-color: #495057;
        color: #ffffff;
        border-color: #495057;
    }

    /* Ensure icon inside meets contrast */
    .library-toolbar .btn-outline-secondary i {
        color: inherit;
    }

/* Search icon contrast */
.library-toolbar .input-group-text {
    color: #495057; /* darker than default */
}

/* ===== Library toolbar: search control 3:1 contrast ===== */

.library-toolbar .input-group-text {
    color: var(--low-blue); /* darker icon */
    border-color: var(--low-blue); /* darker border */
    background-color: #fff; /* keep white */
}

.library-toolbar #libSearch {
    border-color: #495057; /* darker border so the control outline hits 3:1 */
}

    /* When focused: keep a strong visible indicator (also satisfies focus visibility) */
    .library-toolbar #libSearch:focus {
        border-color: #2B3494; /* your --low-blue */
        box-shadow: 0 0 0 0.2rem rgba(43, 52, 148, 0.35);
    }

/* Optional: ensure the seam between the icon box and input is also dark */
.library-toolbar .input-group-text + #libSearch {
    border-left-color: #495057;
}