/*
 * Officina 365 - Accessibilità WCAG 2.1 AA
 */

/* ===========================================
   SKIP TO CONTENT
   =========================================== */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    background: #1c1f23;
    color: #ffffff;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 6px 0;
    transition: none;
}
.skip-to-content:focus {
    left: 0;
    outline: 3px solid #ff8445;
    outline-offset: 0;
}

/* ===========================================
   FOCUS VISIBLE (keyboard users)
   =========================================== */
*:focus-visible {
    outline: 3px solid #ff8445 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px rgba(255, 132, 69, 0.25) !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #ff8445 !important;
    outline-offset: 2px !important;
}

/* Remove focus for mouse users */
:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* ===========================================
   CONTRAST IMPROVEMENTS (4.5:1 minimum)
   =========================================== */

/* Body text: ensure minimum contrast */
body {
    color: #1c1f23;
}

/* Links: must have 3:1 against surrounding text AND 4.5:1 against background */
a {
    color: #c05d1e;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
a:hover,
a:focus {
    color: #8b4513;
    text-decoration-thickness: 2px;
}

/* Muted text that may fail contrast */
.text-muted,
.entry-meta,
.post-date,
.comment-date,
small {
    color: #555555 !important;
}

/* Placeholder text */
::placeholder {
    color: #666666 !important;
    opacity: 1;
}

/* ===========================================
   BUTTONS: accessible contrast
   =========================================== */
.btn,
button,
input[type="submit"],
input[type="button"],
.button {
    min-height: 44px;
    min-width: 44px;
    cursor: pointer;
}

/* ===========================================
   FORM ACCESSIBILITY
   =========================================== */
input,
textarea,
select {
    border: 2px solid #767676;
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 16px;
    min-height: 44px;
}

input:focus,
textarea:focus,
select:focus {
    border-color: #ff8445;
    box-shadow: 0 0 0 3px rgba(255, 132, 69, 0.25);
}

/* Error states */
.error input,
input.error,
input:invalid {
    border-color: #cc0000;
}

/* ===========================================
   MOTION: respect reduced motion preference
   =========================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===========================================
   HIGH CONTRAST MODE
   =========================================== */
@media (forced-colors: active) {
    a {
        text-decoration: underline;
    }
    button,
    .btn {
        border: 2px solid ButtonText;
    }
}

/* ===========================================
   RESPONSIVE: ensure usability at 200% zoom
   =========================================== */
@media (min-resolution: 192dpi) {
    body {
        font-size: 100%;
    }
}

/* Touch targets: minimum 44x44px */
nav a,
.menu a,
.navbar a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
}

/* ===========================================
   IMAGES & MEDIA
   =========================================== */
img {
    max-width: 100%;
    height: auto;
}

/* Decorative images shouldn't be announced */
img[alt=""],
img[role="presentation"] {
    user-select: none;
}