/* Hamilku accessibility baseline — WCAG 2.2 AA helpers */

/* Skip link */
.hamilku-skip-link {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: 100000;
    padding: var(--space-2) var(--space-4);
    background: var(--color-on-surface);
    color: var(--color-surface);
    font: var(--type-label-md);
    text-decoration: none;
    border-radius: var(--shape-sm);
    transform: translateY(-200%);
    transition: transform var(--motion-duration-short) var(--motion-easing-standard);
}

.hamilku-skip-link:focus,
.hamilku-skip-link:focus-visible {
    transform: translateY(0);
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

/* Focus not obscured — bottom nav clearance */
main#main-content,
main {
    scroll-padding-bottom: calc(var(--nav-height) + var(--space-4));
}

/* Global focus-visible for interactive controls */
:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

/* Button focus — replaces outline:none on .plainBtn */
.plainBtn:focus {
    outline: none;
}

.plainBtn:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

/* Coach mark focus — keep visible ring alongside overlay */
.highlightArea:focus-visible {
    outline: var(--focus-ring-width) solid #faca38 !important;
    outline-offset: var(--focus-ring-offset);
}

/* Touch target minimum */
.hamilku-touch-target {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Visually hidden (screen reader only) */
.hamilku-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;
}

/* Reduced motion */
@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;
    }
}