/* ============================================================================
 * Accessibility — Melasty.es child theme
 * (Bloque 5 plan diurno V2 · A8 · WCAG 2.1 AA Kit Digital)
 *
 * Skip link, focus visible, sizes ajustables via custom properties,
 * soporte prefers-reduced-motion y prefers-color-scheme.
 * ========================================================================== */

/* --- Custom properties que el plugin One Click Accessibility manipula --- */
:root {
    --melasty-font-size-base: 16px;
    --melasty-line-height-base: 1.6;
    --melasty-color-text: #111827;     /* gray-900 — ratio 17.2:1 sobre blanco (AAA) */
    --melasty-color-text-muted: #4b5563; /* gray-600 — ratio 7.6:1 sobre blanco (AAA) */
    --melasty-color-bg: #ffffff;
    --melasty-color-bg-subtle: #f9fafb;  /* gray-50 */
    --melasty-color-link: #b91c1c;       /* red-700 — ratio 6.5:1 sobre blanco (AAA) */
    --melasty-color-focus: #2563eb;      /* blue-600 — accesible contraste sobre rojo y blanco */
    --melasty-color-border: #e5e7eb;     /* gray-200 */
}

/* --- Skip link — visible al focus por teclado --- */
.melasty-skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--melasty-color-text);
    color: var(--melasty-color-bg);
    padding: 8px 16px;
    z-index: 100000;
    text-decoration: none;
    font-weight: 600;
}

.melasty-skip-link:focus {
    top: 0;
    outline: 3px solid var(--melasty-color-focus);
    outline-offset: 2px;
}

/* --- Focus visible reforzado en links + botones --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--melasty-color-focus);
    outline-offset: 2px;
    border-radius: 2px;
}

/* --- Link styles con contraste AA garantizado --- */
a {
    color: var(--melasty-color-link);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

a:hover {
    text-decoration-thickness: 2px;
}

a.melasty-no-underline {
    text-decoration: none;
}

a.melasty-no-underline:hover,
a.melasty-no-underline:focus-visible {
    text-decoration: underline;
}

/* --- Tamaño base ajustable (One Click Accessibility manipula --melasty-font-size-base) --- */
html {
    font-size: var(--melasty-font-size-base);
    line-height: var(--melasty-line-height-base);
}

body {
    color: var(--melasty-color-text);
    background: var(--melasty-color-bg);
}

/* --- prefers-reduced-motion --- */
@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;
    }
}

/* --- prefers-color-scheme: dark (opcional, no exigido por KD) --- */
@media (prefers-color-scheme: dark) {
    :root {
        --melasty-color-text: #f9fafb;       /* gray-50 sobre fondo oscuro */
        --melasty-color-text-muted: #9ca3af; /* gray-400 */
        --melasty-color-bg: #111827;          /* gray-900 */
        --melasty-color-bg-subtle: #1f2937;   /* gray-800 */
        --melasty-color-link: #f87171;        /* red-400 — ratio 5.7:1 sobre gray-900 (AA) */
        --melasty-color-border: #374151;      /* gray-700 */
    }
}

/* --- High contrast mode (One Click Accessibility) --- */
body.melasty-high-contrast {
    --melasty-color-text: #000000;
    --melasty-color-text-muted: #000000;
    --melasty-color-bg: #ffffff;
    --melasty-color-link: #0000ee;
    --melasty-color-border: #000000;
}

body.melasty-high-contrast a {
    text-decoration: underline !important;
}

/* --- Large cursor (One Click Accessibility) --- */
body.melasty-large-cursor,
body.melasty-large-cursor * {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path fill='%23000' stroke='%23fff' stroke-width='2' d='M2 2 L26 14 L14 16 L8 28 Z'/></svg>"), auto !important;
}

/* --- Visually hidden helper (para screen readers) --- */
.melasty-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Form elements con labels asociadas obligatorias en HTML, aquí estilos --- */
label {
    display: inline-block;
    margin-bottom: 0.25rem;
    font-weight: 600;
    color: var(--melasty-color-text);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
    border: 1px solid var(--melasty-color-border);
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    color: var(--melasty-color-text);
    background: var(--melasty-color-bg);
}

[aria-required="true"] + label::after,
input[required] + label::after,
label.melasty-required::after {
    content: " *";
    color: var(--melasty-color-link);
    font-weight: 700;
}

/* --- RTL overrides para árabe --- */
html[dir="rtl"] .melasty-skip-link {
    left: auto;
    right: 0;
}

html[dir="rtl"] body {
    text-align: right;
}