﻿/* =====================================================================
   theme-accessible-v5.css
   WCAG 2.1 AA / AAA Compliant + Verified Lighthouse Fix
   (Accessible Links + Focusable Skip Link)
   ===================================================================== */
:root {
    --bs-primary: #087339;
    --bs-secondary: #464C5C;
    --bs-success: #05665F;
    --bs-info: #2A3EAE;
    --bs-warning: #D96E3F;
    --bs-danger: #5A1C36;
    --bs-light: #F5F7FA;
    --bs-dark: #2D374B;
    --focus-ring-color: rgba(9, 138, 64, 0.4);
}

body, p, ul, li, dt, dd {
    color: var(--bs-dark);
    line-height: 1.6;
}

.text-muted, .small.text-muted {
    color: #5A6472 !important;
}

.btn-outline-primary {
    --bs-btn-color: #06592C;
    --bs-btn-border-color: #06592C;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #087339;
    --bs-btn-hover-border-color: #087339;
}

a, a:visited {
    color: #087339;
    /*text-decoration: underline;*/
}

    a:hover, a:focus {
        color: #06592C;
        /*text-decoration: underline;*/
        font-weight: 500;
    }

    a.btn.btn-icon.btn-ghost-secondary.rounded-circle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

        a.btn.btn-icon.btn-ghost-secondary.rounded-circle > i[aria-hidden="true"] {
            pointer-events: none;
        }

/* === Focus Indicators === */
:focus-visible {
    outline: 3px solid var(--focus-ring-color);
    outline-offset: 3px;
}

/* === Skip Link (Fully Focusable & Visible on Tab) === */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.75rem 1.25rem;
    background-color: #087339;
    color: #fff;
    font-weight: 600;
    border-radius: 0 0 0.25rem 0.25rem;
    z-index: 10000;
    transform: translateY(-200%);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

    .skip-link:focus,
    .skip-link:active {
        transform: translateY(0);
        opacity: 1;
        outline: 3px solid rgba(255, 255, 255, 0.8);
        outline-offset: 2px;
    }

@media (prefers-contrast: more) {
    :root {
        --bs-primary: #066F34;
        --bs-warning: #C65C2E;
        --bs-danger: #4C162E;
    }
}
 