/*
 * Cross-cutting helpers used by more than one component.
 */

/* Visually hidden but available to assistive tech; visible again on focus
   (used by the skip-link, form labels, and the submenu toggle's label). */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.skip-link.screen-reader-text:focus {
    background-image: var(--gradient-accent);
    border-radius: 0 0 0.5em 0;
    box-shadow: var(--shadow-elevated);
    clip: auto !important;
    clip-path: none;
    color: var(--crust);
    display: block;
    font-weight: 600;
    height: auto;
    left: 0;
    line-height: normal;
    padding: 0.75em 1.25em;
    text-decoration: none;
    top: 0;
    width: auto;
    z-index: 1000;
}

/* Consistent, visible keyboard-focus ring for every interactive element. */
:focus-visible {
    outline: 3px solid var(--focus-ring-color);
    outline-offset: 2px;
}

/* Native <button> doesn't get a pointer cursor by default like <a> does. */
button,
[role="button"],
summary {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}