/**
 * Tieu Hao Pro accessibility CSS.
 *
 * Scope: keyboard navigation, skip-link presentation, forced-colors support
 * and motion preferences. Semantic markup is owned by PHP/templates.
 */

.thp-skip-link {
    position: fixed;
    z-index: 10000;
    top: var(--thp-space-3);
    left: var(--thp-space-3);
    width: auto;
    padding: var(--thp-space-3) var(--thp-space-4);
    border: 2px solid var(--thp-color-brand-deep);
    border-radius: var(--thp-radius-sm);
    background: var(--thp-color-surface);
    color: var(--thp-color-brand-deep);
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-180%);
    transition: transform var(--thp-duration-fast) var(--thp-ease-standard);
}

.thp-skip-link:focus,
.thp-skip-link:focus-visible {
    transform: translateY(0);
}

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--thp-color-action);
    outline-offset: 3px;
}

:where([disabled], [aria-disabled="true"]) {
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .thp-skip-link {
        transition: none;
    }
}

@media (forced-colors: active) {
    .thp-skip-link {
        border: 2px solid ButtonText;
        background: Canvas;
        color: ButtonText;
    }

    :where(a, button, input, select, textarea, summary):focus-visible {
        outline: 2px solid Highlight;
        outline-offset: 2px;
    }
}

.screen-reader-text{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}
.screen-reader-text:focus{position:fixed!important;z-index:100000;top:8px;left:8px;width:auto!important;height:auto!important;padding:12px 16px!important;margin:0!important;overflow:visible!important;clip:auto!important;white-space:normal!important;border:1px solid var(--thp-color-border);border-radius:8px;background:var(--thp-color-surface);color:var(--thp-color-text)}

.thp-project-card a:focus-visible,
.thp-project-filter__item:focus-visible {
    outline: 2px solid var(--thp-color-action);
    outline-offset: 2px;
}