/*
 * Public a11y baseline (Spec 169 Phase 3).
 *
 * Canonical :focus-visible outline and reduced-motion fallback for
 * public pages. Product landing page and homepage already carry their
 * own good patterns; this stylesheet normalizes the rest (search,
 * quiz, fragrance finder, referral join).
 *
 * Intentionally minimal: uses :focus-visible so mouse clicks don't
 * trigger the outline. Brand color #199BAA with a 2px outline at 2px
 * offset — matches the product-LP pattern referenced in the a11y audit.
 */

/* Canonical keyboard focus indicator */
:focus-visible {
    outline: 2px solid #199BAA;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Buttons / inputs with their own outline should still win, but the
   a11y outline applies when they do not define :focus-visible. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #199BAA;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(25, 155, 170, 0.15);
}

/* Skip-link pattern — visible only when focused */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: 0.5rem 1rem;
    background: #199BAA;
    color: #fff;
    font-weight: 600;
    z-index: 10000;
    text-decoration: none;
}
.skip-link:focus-visible,
.skip-link:focus {
    left: 0.5rem;
    top: 0.5rem;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Respect reduced motion for animations added by later polish passes */
@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;
    }
}