/**
 * Cafe 86 accessibility styles (WCAG 2.1 AA)
 * Focus indicators, skip link, active states, and screen-reader utilities.
 */

/* ------------------------------------------------------------------ */
/* Skip link                                                          */
/* ------------------------------------------------------------------ */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0.5rem;
    z-index: 100000;
    padding: 0.75rem 1.25rem;
    background: #1a1a1a;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid #fff;
    border-radius: 0.25rem;
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 0.5rem;
    outline: 3px solid #0066cc;
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Screen reader only                                                 */
/* ------------------------------------------------------------------ */
.sr-only,
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* ------------------------------------------------------------------ */
/* Global focus indicators (WCAG 2.4.7 / 2.4.11)                      */
/* ------------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-toggle:focus-visible,
.navbar-toggler:focus-visible,
.list-styled-link:focus-visible,
.page-link:focus-visible {
    outline: 3px solid #0066cc !important;
    outline-offset: 2px !important;
    box-shadow: none;
}

/* Preserve Bootstrap focus ring where it already meets contrast */
.btn-primary:focus-visible,
.btn-primary.focus {
    outline: 3px solid #004499 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 102, 204, 0.35) !important;
}

/* ------------------------------------------------------------------ */
/* Active navigation — not color/weight alone (WCAG 1.4.1)              */
/* ------------------------------------------------------------------ */
.nav-item.active > .nav-link,
.nav-item.active > a.nav-link {
    font-weight: bold !important;
    border-bottom: 3px solid #0066cc;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.nav-item.active > .nav-link:focus-visible,
.nav-item.active > a.nav-link:focus-visible {
    outline: 3px solid #0066cc !important;
    outline-offset: 2px !important;
}

/* Category sidebar active link */
.list-styled-link.text-primary,
.nav-link.text-primary {
    font-weight: bold;
    border-left: 3px solid #0066cc;
    padding-left: 0.5rem;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* Admin sidebar active state */
.sidebar-link.bg-warning,
.sidebar-link[aria-current="page"] {
    border-left: 4px solid #0066cc !important;
    font-weight: 700;
}

/* Breadcrumb current page */
.breadcrumb-item.active {
    font-weight: bold;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* ------------------------------------------------------------------ */
/* Active tabs and accordion toggles                                  */
/* ------------------------------------------------------------------ */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    border: 2px solid #0066cc !important;
    border-bottom-color: #f8fafc !important;
    font-weight: 700;
}

.nav-pills .nav-link.active {
    border: 2px solid #004499;
    font-weight: 700;
}

.nav-link.dropdown-toggle[aria-expanded="true"] {
    border: 2px solid #0066cc;
    border-radius: 0.25rem;
    font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* Buttons — active/pressed state                                     */
/* ------------------------------------------------------------------ */
.btn:active,
.btn.active,
.btn:not(:disabled):not(.disabled):active {
    border: 2px solid #004499 !important;
    outline: 2px solid #0066cc;
    outline-offset: 1px;
}

.btn:disabled,
.btn.disabled {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Form fields                                                        */
/* ------------------------------------------------------------------ */
.form-control:focus,
.form-control:focus-visible {
    border-color: #0066cc;
    outline: 3px solid #0066cc;
    outline-offset: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 102, 204, 0.25);
}

.form-control.is-invalid:focus-visible {
    outline-color: #dc3545;
}

/* ------------------------------------------------------------------ */
/* External link indicator (optional visible cue)                     */
/* ------------------------------------------------------------------ */
a[target="_blank"]:not(.no-external-indicator)::after {
    content: " \2197";
    font-size: 0.75em;
    speak: never;
}

/* ------------------------------------------------------------------ */
/* Product image buttons                                              */
/* ------------------------------------------------------------------ */
.card-img button.a-click {
    display: block;
    width: 100%;
    padding: 0;
    cursor: pointer;
}

.card-img button.a-click:focus-visible {
    outline: 3px solid #0066cc;
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* External site confirmation modal                                   */
/* ------------------------------------------------------------------ */
#modal-external-site .custom-control-label {
    cursor: pointer;
    line-height: 1.5;
}

#modal-external-site .modal-footer .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

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