/*
 * Accessibility helpers. Plain CSS, intentionally outside the gulp build:
 * enqueued as-is by accessibility.decl.php.
 */

/* "Skip to main content" link (header.php): hidden until it gets keyboard focus. */
.skip-link {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 100000; /* above the sticky header, admin bar and widgets */
    padding: 12px 16px;
    background: #ffffff;
    color: #151515;
    border: 2px solid #cb333b;
    border-radius: 4px;
    font-family: ProximaNova, Verdana, Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}

.skip-link:not(:focus) {
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/*
 * <main> takes focus from the skip link. No outline around the whole page,
 * and a scroll margin at least as tall as the sticky header (+ admin bar)
 * so the jump doesn't slide the top of the content under the header.
 */
#main-content {
    scroll-margin-top: 160px;
}

#main-content:focus {
    outline: none;
}