/* ============================================================
   SLN Finance – Accessibility Stylesheet
   Fixes: skip link, focus indicators, screen-reader utilities
   ============================================================ */

/* --- Skip to main content link ---
   Visually hidden by default; revealed on keyboard focus.   */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 99999;
    padding: 12px 20px;
    background: #1a237e;
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border-bottom-right-radius: 4px;
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 0;
    outline: 3px solid #febe28;
    outline-offset: 2px;
}

/* --- Screen-reader only utility (sr-only) ---
   Hides content visually but keeps it available to AT.      */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Visible focus indicator ---
   Applies to all interactive elements for keyboard users.   */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #1a237e !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(26, 35, 126, 0.25) !important;
}

/* Fallback for browsers that don't support :focus-visible    */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
    outline: 3px solid #1a237e;
    outline-offset: 2px;
}

/* --- Override: remove the aggressive outline:none in script.js / inline styles ---
   Specific to .btn and button elements on this site.        */
.btn:focus,
.btn:active,
button:focus,
button:active {
    outline: 3px solid #1a237e !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(26, 35, 126, 0.25) !important;
}

/* --- Color-switcher label: use <p> styled like the old h6 --- */
.color-palate-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px;
    color: inherit;
    letter-spacing: 0.03em;
}