/*
 * Accessibility additions (skip link, keyboard focus, mobile menu button, form error position).
 * Separate file because the SCSS sources in build/ no longer reproduce styles.min.css.
 */

/* Skip link: first focusable element, only visible while focused */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
    padding: 0.75rem 1.25rem;
    background: #323233;
    color: #ffffff;
    font-weight: bold;
    text-decoration: underline;
    transform: translateY(-120%);
}

.skip-link:focus {
    transform: translateY(0);
    outline: 2px solid #b29f51;
    outline-offset: -4px;
}

/* Keep the jump target below the sticky header */
#main {
    scroll-margin-top: 102px;
}

#main:focus {
    outline: none;
}

@media (min-width: 576px) {
    #main {
        scroll-margin-top: 118px;
    }
}

@media (min-width: 768px) {
    #main {
        scroll-margin-top: 135px;
    }
}

@media (min-width: 1080px) {
    #main {
        scroll-margin-top: 149px;
    }
}

/* Menu toggle is a <button> now: reset the UA button styles, keep the existing look */
.menu-toggle {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.menu-toggle:focus-visible,
.button--cancel:focus-visible {
    outline: 2px solid #b29f51;
    outline-offset: 4px;
}

/* Closed mobile menu and phone overlay are only transparent; hide them from keyboard and screen readers too */
@media (max-width: 1289px) {
    .menu:not(.menu--open),
    .mobile-contact:not(.mobile-contact--open) {
        visibility: hidden;
    }

    /* .menu already transitions "all"; let the overlay keep its fade-out */
    .mobile-contact {
        transition: opacity 300ms ease-in-out, visibility 300ms ease-in-out;
    }
}

/* The styled checkbox is drawn with pseudo elements on a 0×0 input: show the focus on the visible box */
.form input[type=checkbox]:focus-visible::before {
    outline: 2px solid #b29f51;
    outline-offset: 2px;
}

/* Error message of the privacy checkbox in the text column, like the error messages of the other fields */
@media (min-width: 1080px) {
    .form .nolabel .form__error {
        display: block;
        margin-left: calc(220px + 2rem);
    }
}