/*
 * Accessibility + UI hardening for puskes.web.id
 * Put this file at: /assets/css/app-accessibility.css
 */

:root {
    --site-focus: #0d6efd;
    --site-text: #212529;
    --site-muted: #495057;
    --site-border: #d9e2ec;
    --site-soft: #f8fafc;
}

/* Skip link: visible only when focused */
.skip-link {
    position: absolute;
    left: .75rem;
    top: .75rem;
    z-index: 1100;
    transform: translateY(-150%);
    padding: .65rem .9rem;
    color: #fff;
    background: #0b5ed7;
    border-radius: .5rem;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .18);
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
    outline: 3px solid #ffc107;
    outline-offset: 3px;
}

/* Better focus visibility for keyboard users */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.nav-link:focus-visible,
.navbar-toggler:focus-visible {
    outline: 3px solid var(--site-focus);
    outline-offset: 3px;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .18);
}

/* Main should not show outline except when jumped from skip link */
#main-content:focus {
    outline: 0;
}

#main-content:focus-visible {
    outline: 3px solid var(--site-focus);
    outline-offset: 6px;
}

/* Keep footer/nav links readable */
.site-footer a,
.footer-nav a {
    color: #0b5ed7;
    text-decoration-thickness: .08em;
    text-underline-offset: .18em;
}

.site-footer a:hover,
.footer-nav a:hover {
    color: #084298;
}

/* Higher contrast than default text-muted where used heavily */
.text-muted,
.small-muted {
    color: var(--site-muted) !important;
}

/* Navbar tap target and readability */
.navbar .nav-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.navbar-brand {
    line-height: 1.25;
    max-width: 78vw;
    white-space: normal;
}

/* Card and badge readability */
.card-soft {
    border-color: var(--site-border);
}

.badge {
    white-space: normal;
    line-height: 1.25;
}

/* Forms: larger hit area on mobile */
.form-control,
.form-select,
.btn {
    min-height: 44px;
}

/* Screen-reader only utility if Bootstrap CSS is changed later */
.visually-hidden-focusable:not(:focus):not(:focus-within),
.sr-only:not(:focus):not(:focus-within) {
    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;
}

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