/* =========================================
   ASMC ACCESSIBILITY UTILITIES
========================================= */


/* =========================================
   1. SKIP TO CONTENT LINK
========================================= */

.skip-link {

    position:
        fixed;

    top:
        1rem;

    left:
        1rem;

    z-index:
        3000;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        46px;

    padding:
        0.75rem
        1.2rem;

    border-radius:
        var(--radius-pill);

    background:
        var(--color-orange);

    color:
        var(--color-ink);

    font-family:
        var(--font-display);

    font-size:
        0.9rem;

    font-weight:
        var(--fw-semibold);

    line-height:
        1;

    text-decoration:
        none;

    box-shadow:
        var(--shadow-md);

    opacity:
        0;

    transform:
        translateY(-160%);

    pointer-events:
        none;

    transition:
        opacity
        var(--motion-fast)
        ease,

        transform
        var(--motion-base)
        var(--ease-standard);
}


.skip-link:focus {

    opacity:
        1;

    transform:
        translateY(0);

    pointer-events:
        auto;
}



/* =========================================
   2. MAIN CONTENT FOCUS
========================================= */

#main-content:focus {

    outline:
        none;
}



/* =========================================
   3. GLOBAL KEYBOARD FOCUS
========================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {

    outline:
        3px solid
        rgba(
            247,
            148,
            29,
            0.60
        );

    outline-offset:
        4px;
}



/* =========================================
   4. CURRENT REGISTRATION OPTION
========================================= */

.register-option[aria-current="page"] {

    background:
        var(--color-orange-soft);
}


.register-option[aria-current="page"]
.register-option-title {

    color:
        var(--color-violet);
}



/* =========================================
   5. SCREEN-READER ONLY CONTENT
========================================= */

.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;
}



/* =========================================
   6. FORM TEXT CLARITY
========================================= */

.contact-form-shell,
.contact-field,
.reg8b-form-panel,
.reg8b-field,
.reg8c-form-card,
.reg8c-field {

    will-change:
        auto !important;

    backface-visibility:
        visible !important;
}



/* =========================================
   7. TYPED FORM TEXT
========================================= */

form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
form textarea,
form select {

    opacity:
        1 !important;

    filter:
        none !important;

    text-shadow:
        none !important;

    color:
        #211627 !important;

    -webkit-text-fill-color:
        #211627 !important;

    caret-color:
        #662E93;
}



/* =========================================
   8. PLACEHOLDER TEXT
========================================= */

form input::placeholder,
form textarea::placeholder {

    color:
        #6D6171 !important;

    opacity:
        1 !important;

    -webkit-text-fill-color:
        #6D6171 !important;
}



/* =========================================
   9. SELECTED FORM VALUES
========================================= */

form select,
form option {

    color:
        #211627;

    opacity:
        1;

    text-shadow:
        none;
}



/* =========================================
   10. ACTIVE FORM CONTROLS
========================================= */

form input:focus,
form textarea:focus,
form select:focus {

    opacity:
        1 !important;

    filter:
        none !important;

    text-shadow:
        none !important;

    -webkit-text-fill-color:
        #211627 !important;
}



/* =========================================
   11. FORM LABEL CLARITY
========================================= */

form label {

    opacity:
        1;

    filter:
        none;

    text-shadow:
        none;
}



/* =========================================
   12. CONTACT PAGE HEADER CONTRAST
========================================= */

/*
    CONTACT PAGE — TOP OF PAGE

    While the header is transparent and sits
    over the dark Contact hero, navigation
    links remain white for clear visibility.
*/

body.contact-page
.site-header:not(.is-scrolled)
.nav-link {

    color:
        var(--color-white) !important;
}



/*
    CONTACT PAGE — AFTER SCROLL

    Once the normal translucent/light header
    appears, navigation links return to the
    original ASMC violet used elsewhere.
*/

body.contact-page
.site-header.is-scrolled
.nav-link {

    color:
        var(--color-violet) !important;
}



/*
    The active Contact link follows the same
    colour behaviour.

    Its active indicator / underline remains
    controlled by the existing header styles.
*/

body.contact-page
.site-header:not(.is-scrolled)
.nav-link.is-active {

    color:
        var(--color-white) !important;
}


body.contact-page
.site-header.is-scrolled
.nav-link.is-active {

    color:
        var(--color-violet) !important;
}



/* =========================================
   13. REDUCED MOTION
========================================= */

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

    .skip-link {

        transition:
            none;
    }

}