/**
 * Universal Accessibility CSS
 * Version: 1.0.0
 * Base riutilizzabile per WordPress e temi differenti.
 */

:root {
    --a11y-focus-color: #ffbf00;
    --a11y-focus-secondary-color: #111111;
    --a11y-focus-width: 3px;
    --a11y-focus-offset: 3px;
    --a11y-focus-radius: 4px;
    --a11y-skip-bg: #111111;
    --a11y-skip-color: #ffffff;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="tab"]:focus-visible,
[role="checkbox"]:focus-visible,
[role="radio"]:focus-visible,
[role="switch"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: var(--a11y-focus-width) solid var(--a11y-focus-color) !important;
    outline-offset: var(--a11y-focus-offset) !important;
    border-radius: var(--a11y-focus-radius);
    box-shadow: 0 0 0 1px var(--a11y-focus-secondary-color) !important;
}

@supports not selector(:focus-visible) {
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus,
    summary:focus,
    [role="button"]:focus,
    [role="link"]:focus,
    [role="menuitem"]:focus,
    [role="tab"]:focus,
    [role="checkbox"]:focus,
    [role="radio"]:focus,
    [role="switch"]:focus,
    [tabindex]:not([tabindex="-1"]):focus {
        outline: var(--a11y-focus-width) solid var(--a11y-focus-color) !important;
        outline-offset: var(--a11y-focus-offset) !important;
        border-radius: var(--a11y-focus-radius);
        box-shadow: 0 0 0 1px var(--a11y-focus-secondary-color) !important;
    }
}

@supports selector(:focus-visible) {
    :focus:not(:focus-visible) {
        outline: none;
        box-shadow: none;
    }
}

a:focus-visible img,
a:focus-visible svg {
    outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
    outline-offset: var(--a11y-focus-offset);
}

.skip-link,
.skip-to-content {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 999999;
    padding: 12px 16px;
    background: var(--a11y-skip-bg);
    color: var(--a11y-skip-color);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    border-radius: 4px;
    transform: translateY(-200%);
    transition: transform 0.15s ease;
}

.skip-link:focus,
.skip-link:focus-visible,
.skip-to-content:focus,
.skip-to-content:focus-visible {
    transform: translateY(0);
    outline: var(--a11y-focus-width) solid var(--a11y-focus-color) !important;
    outline-offset: 2px !important;
}

.screen-reader-text,
.sr-only,
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.screen-reader-text:focus,
.sr-only:focus,
.visually-hidden:focus {
    position: fixed !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 999999 !important;
    width: auto !important;
    height: auto !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    background: var(--a11y-skip-bg);
    color: var(--a11y-skip-color);
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (forced-colors: active) {
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus,
    summary:focus,
    [role="button"]:focus,
    [role="link"]:focus,
    [tabindex]:not([tabindex="-1"]):focus {
        outline: 3px solid CanvasText !important;
        outline-offset: 3px !important;
        box-shadow: none !important;
    }
}

input:disabled,
select:disabled,
textarea:disabled,
button:disabled,
[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.65;
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline-offset: 4px !important;
}

.a11y-readable-content a:not([class]) {
    text-decoration: underline;
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.15em;
}

.a11y-readable-content a:not([class]):hover {
    text-decoration-thickness: 0.18em;
}

:target {
    scroll-margin-top: 100px;
}

@media print {
    .skip-link,
    .skip-to-content {
        display: none !important;
    }
}