/*
 * accessibility Styles

 * Provides default styling for accessibility features such as alt captions
 *
 * @package     iw-wp-utils
 * @subpackage  assets/style/accessibility
 * @since       1.0.0
 -------------------------------------------------------------- */

/* Alt caption for images */
.iw-image-alt-caption {
    display: none;
    position: absolute;
    padding: 1em;
    color: #333;
    font-size: 1rem;
}

.iw-image-alt-caption--center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.iw-image-alt-caption--left {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.9);
    white-space: normal;
    word-break: break-word;
    text-align: left;
}

.iw-a11y-hide_images .iw-image-alt-caption {
    display: block;
}

/* Focus ring (SC 2.4.7)
 *
 * A floor, not a design: every focusable element shows an outline while the keyboard is in use.
 * Two colors (WCAG technique C40): a dark ring with a light band between it and the element, so
 * it stays visible on light and dark surroundings and does not depend on the element's own text
 * color, which an icon button may set to transparent.
 * !important because the usual reason for a missing ring is a theme reset such as
 * `*:focus { outline: none }`. A theme with its own ring switches this off with
 * add_theme_support('iw-wp-utils-own-focus-ring'), which removes the class. Containers that only
 * receive the focus programmatically (tabindex="-1", e.g. the skip link target) are left alone.
 * Placed before the widget and the skip link, whose own stronger rings have the same specificity
 * and win by coming later.
 -------------------------------------------------------------- */
.iw-a11y-focus-ring :where(a[href], area[href], button, input, select, textarea, summary, iframe, [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid #101010 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #ffffff !important;
}

/* Widget */
.iw-a11y-widget {
    position: fixed;
    right: 0;
    z-index: 99990;
    cursor: pointer;
    display: none;
    background-color: #ef17ef;
    border: 4px solid #ef17ef;
    padding: 17px;
    bottom: 50px;
}

.iw-a11y-contrast_mode .iw-a11y-widget {
    background-color: #101010;
    border: 4px solid #101010;
}

.no-touchevents .iw-a11y-widget:hover,
.no-touchevents .iw-a11y-widget.active,
.touchevents .iw-a11y-widget.active {
    background-color: #17ef17;
}

/* The toggle is a real button; reset the user agent styles so the theme colors of the widget stay
   in charge. The option buttons of the modes carry their own reset below. */
.iw-a11y-widget__toggle {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.iw-a11y-widget__toggle {
    display: block;
    padding: 0;
    line-height: 0;
}

/* Visible focus for keyboard users, in every mode (SC 2.4.7, 2.4.11). !important, because a theme
   reset such as `button:focus-visible { outline: none }` must not take the only focus ring of
   the accessibility widget away. */
.iw-a11y-widget__toggle:focus-visible,
.iw-a11y-widget__choice:focus-visible {
    outline: 3px solid #101010 !important;
    outline-offset: 3px !important;
}

.iw-a11y-contrast_mode .iw-a11y-widget__toggle:focus-visible,
.iw-a11y-contrast_mode .iw-a11y-widget__choice:focus-visible {
    outline-color: #ef17ef !important;
}

.iw-a11y-widget .iw-a11y-widget__button {
    display: block;
    width: 48px;
    height: 48px;
}

.iw-a11y-widget .iw-a11y-widget__button svg {
    width: 100%;
    height: 100%;
}

.iw-a11y-widget.active .iw-a11y-widget__button.open,
.iw-a11y-widget .iw-a11y-widget__button.close {
    display: none;
}

.iw-a11y-widget.active .iw-a11y-widget__button.close {
    display: block;
}

/* Menu
 *
 * Above a fixed theme header (the Foundation header sits at z-index 999), below the admin bar
 * (99999). At most 70% of the window high; a longer list scrolls inside the menu.
 -------------------------------------------------------------- */
.iw-a11y-widget__menu {
    position: fixed;
    right: 0;
    z-index: 99990;
    cursor: pointer;
    flex-direction: column;
    display: none;
    box-sizing: border-box;
    max-width: 100vw;
    max-height: 70vh;
    overflow-y: auto;
    background-color: #17ef17;
    bottom: 138px;
    border: 4px solid #ef17ef;
    padding: 8px;
    gap: 4px;
}

.iw-a11y-contrast_mode .iw-a11y-widget__menu {
    background-color: #FFFFFF;
    border: 4px solid #101010;
}

.iw-a11y-widget__menu.active {
    display: flex;
}

/* One row per mode: icon, label, options. On / Off sit next to the label; the three options of a
   mode with a device setting get their own line below it. The row is a group, not a button; only
   its options are. Each option is at least 32px high, above the 24px minimum (SC 2.5.8). */
.iw-a11y-widget__menu .menu-item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    grid-template-areas: "icon text choices";
    align-items: center;
    column-gap: 12px;
    row-gap: 6px;
    min-height: 44px;
    box-sizing: border-box;
    border: 2px solid transparent;
    padding: 6px 12px;
    cursor: default;
}

.iw-a11y-widget__menu .menu-item--device {
    grid-template-areas: "icon text text" "icon choices choices";
}

/* The chosen option is the only state the menu shows, as with Wikipedia, MDN and GitHub; the row
   keeps the class `active` while the mode is in effect as a hook for themes, without a style. */

.iw-a11y-widget__menu .menu-item .icon {
    grid-area: icon;
    display: block;
    width: 24px;
    height: 24px;
}

.iw-a11y-widget__menu .menu-item .icon svg {
    width: 100%;
    height: 100%;
}

.iw-a11y-widget__menu .menu-item .text {
    grid-area: text;
    line-height: 1.3;
}

.iw-a11y-widget__choices {
    grid-area: choices;
    justify-self: end;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
}

.iw-a11y-widget__choice {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    min-height: 32px;
    padding: 4px 10px;
    border: 2px solid #101010;
    border-radius: 0;
    background: #FFFFFF;
    color: #101010;
    font: inherit;
    font-size: 0.875em;
    line-height: 1.2;
    cursor: pointer;
}

.iw-a11y-widget__choice:hover {
    border-color: #ef17ef;
}

/* The chosen option: inverted and bold, not by color alone. */
.iw-a11y-widget__choice[aria-pressed="true"] {
    background: #101010;
    color: #FFFFFF;
    font-weight: 700;
}

/* Modes with generic CSS
 *
 * large_font and contrast_mode are styled by the theme. The modes below work on any theme, so
 * their rules ship here. Every rule is scoped to the body and skips the admin bar, the widget,
 * SVG, code, form controls and icon fonts; !important because the point is to win over the theme.
 -------------------------------------------------------------- */

/* Reduce motion (SC 2.3.3). Near-zero durations instead of `animation: none`, so scripts waiting
   for animationend / transitionend still get their event. The html element itself is in the list
   because `html { scroll-behavior: smooth }` is the usual source of smooth anchor scrolling. */
.iw-a11y-reduce_motion,
.iw-a11y-reduce_motion *,
.iw-a11y-reduce_motion *::before,
.iw-a11y-reduce_motion *::after {
    animation-duration: 1ms !important;
    animation-delay: -1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: -1ms !important;
    scroll-behavior: auto !important;
}

/* The same rule without JavaScript: the head script (A11y::getModesScript()) sets the class
   above when the system asks for less motion. When it does not run, the media query does, on a
   page where the mode follows the system (auto class) and the visitor did not switch it off (the
   server then prints the no- class instead of the auto class). */
@media (prefers-reduced-motion: reduce) {
    .iw-a11y-auto-reduce_motion,
    .iw-a11y-auto-reduce_motion *,
    .iw-a11y-auto-reduce_motion *::before,
    .iw-a11y-auto-reduce_motion *::after {
        animation-duration: 1ms !important;
        animation-delay: -1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        transition-delay: -1ms !important;
        scroll-behavior: auto !important;
    }
}

/* Text spacing (SC 1.4.12): line height 1.5, paragraph spacing 2em, letter spacing 0.12em,
   word spacing 0.16em. */
.iw-a11y-text_spacing body :where(:not(#wpadminbar):not(#wpadminbar *):not(.iw-a11y-widget):not(.iw-a11y-widget *):not(.iw-a11y-widget__menu):not(.iw-a11y-widget__menu *):not(svg):not(svg *):not(code):not(code *):not(pre):not(pre *):not(kbd):not(kbd *):not(input):not(select):not(select *):not(textarea):not(button):not(button *):not([class*="icon"]):not([class*="icon"] *):not([class^="fa-"]):not([class*=" fa-"]):not(.dashicons):not(.material-symbols-outlined)) {
    line-height: 1.5 !important;
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
}

.iw-a11y-text_spacing body p:where(:not(#wpadminbar *):not(.iw-a11y-widget *):not(.iw-a11y-widget__menu *):not(svg *):not(code *):not(pre *):not(button *):not([class*="icon"]):not([class*="icon"] *):not([class^="fa-"]):not([class*=" fa-"]):not(.dashicons):not(.material-symbols-outlined)) {
    margin-bottom: 2em !important;
}

/* Highlight links (SC 1.4.1, G183): a cue that is not color alone, a thick underline. No permanent
   outline on text links: that would look like the focus ring on every link and hide the focused
   one (SC 2.4.7). The focus ring itself gets stronger in this mode. A link that carries an image,
   an SVG or an icon font anywhere inside (also wrapped, also next to visually hidden text) gets an
   outline, because an underline under clipped or missing text is no cue. */
.iw-a11y-highlight_links body a:where(:not(#wpadminbar *):not(.iw-a11y-widget *):not(.iw-a11y-widget__menu *)) {
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 0.15em !important;
}

.iw-a11y-highlight_links body a:where(:not(#wpadminbar *):not(.iw-a11y-widget *):not(.iw-a11y-widget__menu *)):has(img, svg, picture, video, [class*="icon"], [class^="fa-"], [class*=" fa-"], .bi, [class^="bi-"], [class*=" bi-"], .glyphicon, [class^="eicon-"], [class*=" eicon-"], [class^="ion-"], [class*=" ion-"], .dashicons, .material-icons, .material-symbols-outlined),
.iw-a11y-highlight_links body a:where(:not(#wpadminbar *):not(.iw-a11y-widget *):not(.iw-a11y-widget__menu *)):where([class*="icon"], [class^="fa-"], [class*=" fa-"], .bi, [class^="bi-"], [class*=" bi-"], .glyphicon, [class^="eicon-"], [class*=" eicon-"], [class^="ion-"], [class*=" ion-"], .dashicons, .material-icons, .material-symbols-outlined) {
    outline: 2px solid currentColor !important;
    outline-offset: 2px !important;
}

.iw-a11y-highlight_links body a:where(:not(#wpadminbar *)):focus-visible {
    outline: 3px solid currentColor !important;
    outline-offset: 3px !important;
}

/* Readable font: the @font-face and the rule are printed into the head by A11y::printReadableFontFace(),
   because the font URL depends on the plugin location and the exclusion list is filterable. */

/* Dark mode: opt-in per theme (add_theme_support('iw-wp-utils-dark-mode')). The module only sets
   the class and the color scheme of the user agent styles; the colors come from the theme. */
.iw-a11y-dark_mode {
    color-scheme: dark;
}

/* Skip link (SC 2.4.1)
 *
 * Printed by A11y::printSkipLink() as the first element of the body. Visually hidden until it
 * receives the focus, then in the top left corner of the window above the page, but below the
 * admin bar (99999) and clear of it: WordPress sets --wp-admin--admin-bar--height to the bar's
 * height at every breakpoint.
 -------------------------------------------------------------- */
.iw-skip-link {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99995;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.iw-skip-link:focus {
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 8px);
    left: 8px;
    width: auto;
    height: auto;
    min-height: 24px;
    padding: 12px 16px;
    overflow: visible;
    clip-path: none;
    background-color: #ffffff;
    color: #101010;
    font-size: 1rem;
    line-height: 1.5;
    text-decoration: underline;
    outline: 3px solid #101010 !important;
    outline-offset: 2px !important;
}