/*! a11y-debug.css | MIT License | github.com/manuelsanchez2/a11y-debug-stylesheet */

/* ==========================================================================
   Variables
   ========================================================================== */

/**
 * These are the color variables used across all debug styles.
 * You can override them in your own CSS to customize the look.
 */

:root {
    --color-debug-dark: #121212;
    --color-debug-dark-rgb: 18, 18, 18;
    --color-debug-light: #ffffff;

    --color-debug-info: oklch(0.709 0.112 274.8);
    --color-debug-light-info: oklch(0.925 0.062 274.8);

    --color-debug-warning: oklch(0.823 0.194 64.0);
    --color-debug-light-warning: oklch(0.925 0.062 64.0);

    --color-debug-error: oklch(0.603 0.183 25.3);
    --color-debug-light-error: oklch(0.885 0.062 18.334);
}

/* ==========================================================================
   Accessibility Debug Styles
   ========================================================================== */

.a11y-debug {

    /* --------------------------------------------------------------------------
     Role without Keyboard Support
     --------------------------------------------------------------------------
     Highlight elements with role="button" or role="link" that are not
     natively interactive and might lack keyboard interaction.
    */

    [role="button"],
    [role="link"] {
        outline: 2px dashed var(--color-debug-warning);
        outline-offset: 4px;
        position: relative;
    }

    [role="button"]::after,
    [role="link"]::after {
        content: "⚠️ Role needs keyboard support";
        color: var(--color-debug-warning);
        font-size: 0.675rem;
        font-weight: bold;
        display: block;
        margin-top: 0.25em;
        border: 1px solid var(--color-debug-dark);
        background-color: var(--color-debug-light);
        padding: 0.25em 0.75em;
        border-radius: 1.25em;
    }

    /* --------------------------------------------------------------------------
     Missing <caption> in <table>
     --------------------------------------------------------------------------
     Visually identify tables without a caption element.
    */

    table:not(:has(caption)) {
        outline: 2px dashed var(--color-debug-error);
        outline-offset: 4px;
        position: relative;
        width: 100%;
    }

    table:not(:has(caption))::after {
        content: "❌ Table missing <caption>";
        color: var(--color-debug-dark);
        font-size: 0.675rem;
        font-weight: bold;
        display: block;
        margin-block: 0.25em;
        background-color: var(--color-debug-light-error);
        border: 1px solid var(--color-debug-dark);
        padding: 0.25em 0.75em;
        border-radius: 1.25em;
        width: fit-content;
    }


    /* --------------------------------------------------------------------------
     Non-<li> Elements in Lists
     --------------------------------------------------------------------------
     Warn if <ul> or <ol> has direct children that are not <li>.
    */

    ul:has(> :not(li)),
    ol:has(> :not(li)) {
        outline: 2px dashed var(--color-debug-warning);
        outline-offset: 4px;
        position: relative;
    }

    ul:has(> :not(li))::before,
    ol:has(> :not(li))::before {
        content: "⚠️ List has children that aren't <li>";
        color: var(--color-debug-warning);
        font-size: 0.675rem;
        font-weight: bold;
        display: block;
        margin-top: 0.25em;
        border: 1px solid var(--color-debug-dark);
        background-color: var(--color-debug-light);
        padding: 0.25em 0.75em;
        border-radius: 1.25em;
        width: fit-content;
    }

    /* --------------------------------------------------------------------------
     Empty Headings
     --------------------------------------------------------------------------
     Mark any heading tags that are visually present but have no content.
    */

    h1:empty,
    h2:empty,
    h3:empty,
    h4:empty,
    h5:empty,
    h6:empty {
        outline: 2px solid var(--color-debug-error);
        outline-offset: 4px;
        position: relative;
    }

    h1:empty::before,
    h2:empty::before,
    h3:empty::before,
    h4:empty::before,
    h5:empty::before,
    h6:empty::before {
        content: "⚠️ Empty heading";
        color: var(--color-debug-warning);
        font-size: 0.675rem;
        font-weight: bold;
        display: block;
        margin-top: 0.25em;
        border: 1px solid var(--color-debug-dark);
        background-color: var(--color-debug-light);
        padding: 0.25em 0.75em;
        border-radius: 1.25em;
        width: fit-content;
    }


    /* --------------------------------------------------------------------------
     Missing Alt Text on Images
     --------------------------------------------------------------------------
     Detect <img> elements without an alt attribute inside any container.
    */

    *:has(> img:not([alt])) {
        outline: 2px dashed var(--color-debug-error);
        outline-offset: 4px;
        position: relative;
    }

    *:has(> img:not([alt]))::after {
        content: "❌ Image missing alt text";
        color: var(--color-debug-dark);
        font-size: 0.675rem;
        font-weight: bold;
        display: block;
        margin-top: 0.25em;
        background-color: var(--color-debug-light-error);
        border: 1px solid var(--color-debug-dark);
        padding: 0.25em 0.75em;
        border-radius: 1.25em;
        width: fit-content;
    }

    /* --------------------------------------------------------------------------
     Label without Associated Control
     --------------------------------------------------------------------------
     Highlight <label> elements that are missing a 'for' attribute or have no input/select/textarea child.
  */


    label:not([for]):not(:has(input, select, textarea)),
    label[for]+input:not([id]),
    label[for]+select:not([id]),
    label[for]+textarea:not([id]) {
        outline: 2px dashed var(--color-debug-error);
        outline-offset: 4px;
        position: relative;
    }

    label:not([for]):not(:has(input, select, textarea))::before,
    label[for]+input:not([id])::before,
    label[for]+select:not([id])::before,
    label[for]+textarea:not([id])::before {
        content: " ⚠️ Label missing 'for' or control";
        color: var(--color-debug-error);
        font-size: 0.675rem;
        font-weight: bold;
        display: block;
        margin-top: 0.25em;
        background-color: var(--color-debug-light-error);
        border: 1px solid var(--color-debug-dark);
        padding: 0.25em 0.75em;
        border-radius: 1.25em;
        width: fit-content;
    }

    /* --------------------------------------------------------------------------
     Icon-Only Buttons Without aria-label
     --------------------------------------------------------------------------
     Mark buttons that have only an <svg> and no accessible label via text, aria-label, aria-labelledby or title.
    */
    button:has(svg:only-child):not([aria-label]):not([title]):not(:has([aria-labelledby])) {
        outline: 2px dashed var(--color-debug-warning);
        outline-offset: 4px;
        position: relative;
    }

    button:has(svg:only-child):not([aria-label]):not([title]):not(:has([aria-labelledby]))::after {
        content: "⚠️ Icon-only button needs a label";
        color: var(--color-debug-error);
        font-size: 0.675rem;
        font-weight: bold;
        display: block;
        margin-top: 0.25em;
        background-color: var(--color-debug-light-error);
        border: 1px solid var(--color-debug-dark);
        padding: 0.15em 0.75em;
        border-radius: 1.25em;
        width: fit-content;
    }
}