/* =========================================================================
   Prüfwerkzeuge (SH Site Tools)

   Ein Werkzeug, das Barrierefreiheit prüft, muss sie selbst vorleben. Deshalb
   hier bewusst: kein Befund nur über Farbe (jedes Ergebnis trägt sein Label
   als Text), durchgehend geprüfte Kontraste, sichtbarer Fokus, und Größen in
   rem, damit die Browser-Schriftgröße durchschlägt.

   Übernommen aus style.css des Themes (vormals Abschnitt 20) und auf die
   generischen .sh-tool-Klassen umgestellt. Die Variablen des Themes werden
   genutzt, wo sie da sind – mit Rückfallwert, damit das Plugin auch unter
   einem fremden Theme brauchbar aussieht.
   ========================================================================= */
.sh-tool {
    --sh-tool-fail: #b3261e;   /* 6,5:1 auf Weiss */
    --sh-tool-warn: #8a5a00;   /* 5,9:1 auf Weiss */
    --sh-tool-pass: #1e6b3a;   /* 6,5:1 auf Weiss */
    --sh-tool-info: #1f5f7a;   /* 7,1:1 auf Weiss */

    --sh-tool-surface: var(--sh-bg-soft, #f6f8fa);
    --sh-tool-border: var(--sh-border, #dfe3e8);
    --sh-tool-heading: var(--sh-heading, #11181c);
    --sh-tool-text: var(--sh-text, #2c3338);
    --sh-tool-muted: var(--sh-muted, #5a646e);
    --sh-tool-accent: var(--sh-accent-darker, #005f88);
    --sh-tool-radius: var(--sh-radius, 8px);
    --sh-tool-radius-lg: var(--sh-radius-lg, 16px);

    margin: 2.6em 0;
    padding: clamp(1.4rem, 3vw, 2.2rem);
    background: var(--sh-tool-surface);
    border: 1px solid var(--sh-tool-border);
    border-radius: var(--sh-tool-radius-lg);
}

.sh-content .sh-tool ul { list-style: none; padding-left: 0; margin: 0; }
.sh-content .sh-tool li { margin-bottom: 0; }

.sh-tool__title { margin: 0 0 0.5rem; font-size: 1.35rem; color: var(--sh-tool-heading); }
.sh-article .sh-content .sh-tool__title { margin-top: 0; color: var(--sh-tool-heading); font-size: 1.35rem; }
.sh-tool__lead { margin: 0 0 1.4rem; color: var(--sh-tool-text); }
.sh-article .sh-content .sh-tool__lead { margin-bottom: 1.4rem; }

/* --- Formular --- */
.sh-tool__form { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: flex-end; }
.sh-tool__field { flex: 1 1 22rem; }
.sh-tool__label { display: block; margin-bottom: 0.4rem; font-weight: 600; color: var(--sh-tool-heading); font-size: 0.95rem; }

.sh-tool__input {
    width: 100%;
    padding: 0.9rem 1.1rem;
    font: inherit;
    font-size: 1rem;
    color: var(--sh-tool-text);
    background: #fff;
    border: 1px solid var(--sh-tool-border);
    border-radius: var(--sh-tool-radius);
}
.sh-tool__input:focus-visible,
.sh-tool__submit:focus-visible,
.sh-tool__result:focus-visible,
.sh-tool summary:focus-visible {
    outline: 3px solid var(--sh-tool-accent);
    outline-offset: 2px;
}
.sh-tool__submit[disabled] { opacity: 0.6; cursor: progress; }

/* Rückfall, falls kein .sh-btn aus dem Theme da ist. Die Theme-Regeln sind
   spezifischer und gewinnen, wo sie existieren. */
.sh-tool__submit:not(.sh-btn) {
    padding: 0.9rem 1.6rem;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--sh-tool-accent);
    border: 1px solid var(--sh-tool-accent);
    border-radius: var(--sh-tool-radius);
    cursor: pointer;
}

.sh-tool__note { margin: 1rem 0 0; font-size: 0.9rem; color: var(--sh-tool-muted); }
.sh-article .sh-content .sh-tool__note { margin: 1rem 0 0; }

.sh-tool__disclaimer {
    margin: 0.8rem 0 0 !important;
    padding-left: 0.9rem;
    border-left: 3px solid var(--sh-tool-border);
    font-size: 0.88rem;
    color: var(--sh-tool-muted);
}

.sh-tool__status { margin: 0.9rem 0 0; font-weight: 600; color: var(--sh-tool-accent); }
.sh-tool__status:empty { margin: 0; }
.sh-article .sh-content .sh-tool__status { margin-bottom: 0; }

/* --- Ergebnis: Kopf --- */
.sh-tool__result { margin-top: 1.6rem; }
.sh-tool__result[hidden] { display: none; }

.sh-tool__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    align-items: center;
    padding: 1.4rem;
    background: #fff;
    border: 1px solid var(--sh-tool-border);
    border-radius: var(--sh-tool-radius);
}

.sh-tool__score {
    /* Grid statt Flex: align-content zentriert die Zeile vertikal im Kreis,
       align-items: baseline haelt "/100" auf der Grundlinie der Zahl. */
    display: grid;
    grid-auto-flow: column;
    align-content: center;
    justify-content: center;
    align-items: baseline;
    flex: 0 0 auto;
    /* Muss auch die dreistellige 100 fassen, ohne dass sie den Ring berührt. */
    width: 7.2rem;
    height: 7.2rem;
    border-radius: 50%;
    border: 6px solid var(--sh-tool-pass);
    color: var(--sh-tool-heading);
}
.sh-tool__summary--ok   .sh-tool__score { border-color: var(--sh-tool-info); }
.sh-tool__summary--weak .sh-tool__score { border-color: var(--sh-tool-warn); }
.sh-tool__summary--bad  .sh-tool__score { border-color: var(--sh-tool-fail); }

.sh-tool__score-value { font-size: 2.2rem; font-weight: 700; line-height: 1; }
.sh-tool__score-max { font-size: 0.85rem; color: var(--sh-tool-muted); }

.sh-tool__summary-main { flex: 1 1 16rem; }
.sh-tool__result-title { margin: 0 0 0.3rem; font-size: 1.1rem; word-break: break-word; }
.sh-tool__verdict { margin: 0 0 0.8rem; font-weight: 600; }
.sh-article .sh-content .sh-tool__verdict { margin-bottom: 0.8rem; }

.sh-tool__counts { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; font-size: 0.95rem; }
.sh-tool__count { position: relative; padding-left: 1.1rem; }
.sh-tool__count::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: currentColor;
}
.sh-tool__count--fail { color: var(--sh-tool-fail); }
.sh-tool__count--warn { color: var(--sh-tool-warn); }
.sh-tool__count--pass { color: var(--sh-tool-pass); }

.sh-tool__warning,
.sh-tool__error {
    margin: 1.2rem 0 0;
    padding: 1rem 1.2rem;
    background: #fdecea;
    border-left: 4px solid var(--sh-tool-fail);
    border-radius: 0 var(--sh-tool-radius) var(--sh-tool-radius) 0;
    color: #7d1a14;
}
.sh-tool__warning { background: #fdf3e0; border-left-color: var(--sh-tool-warn); color: #6b4600; }
.sh-tool__error p:last-child,
.sh-tool__warning p:last-child { margin-bottom: 0; }

.sh-tool__hint { margin: 1rem 0 0 !important; font-size: 0.9rem; color: var(--sh-tool-muted); }

/* --- Ergebnis: Prüfpunkte --- */
.sh-tool__checks { margin-top: 1.2rem !important; }

.sh-tool-check {
    background: #fff;
    border: 1px solid var(--sh-tool-border);
    border-left: 5px solid var(--sh-tool-border);
    border-radius: var(--sh-tool-radius);
    margin-bottom: 0.6rem !important;
}
.sh-tool-check--fail { border-left-color: var(--sh-tool-fail); }
.sh-tool-check--warn { border-left-color: var(--sh-tool-warn); }
.sh-tool-check--info { border-left-color: var(--sh-tool-info); }
.sh-tool-check--pass { border-left-color: var(--sh-tool-pass); }

.sh-tool-check__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    padding: 0.9rem 1.1rem;
    cursor: pointer;
    list-style: none;
}
.sh-tool-check__summary::-webkit-details-marker { display: none; }
.sh-tool-check__summary::after {
    content: "+";
    margin-left: auto;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--sh-tool-muted);
}
.sh-tool-check details[open] .sh-tool-check__summary::after { content: "–"; }

.sh-tool-check__badge {
    flex: 0 0 auto;
    padding: 0.2rem 0.7rem;
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    white-space: nowrap;
}
.sh-tool-check--fail .sh-tool-check__badge { background: var(--sh-tool-fail); }
.sh-tool-check--warn .sh-tool-check__badge { background: var(--sh-tool-warn); }
.sh-tool-check--info .sh-tool-check__badge { background: var(--sh-tool-info); }
.sh-tool-check--pass .sh-tool-check__badge { background: var(--sh-tool-pass); }

.sh-tool-check__label { font-weight: 600; color: var(--sh-tool-heading); }

.sh-tool-check__body { padding: 0 1.1rem 1.1rem; font-size: 0.98rem; }
.sh-tool-check__body p { margin: 0 0 0.8rem !important; }
.sh-tool-check__finding { color: var(--sh-tool-text); }
.sh-tool-check__meta { font-size: 0.86rem; color: var(--sh-tool-muted); }
.sh-tool-check__howto { padding: 0.9rem 1.1rem; background: var(--sh-tool-surface); border-radius: var(--sh-tool-radius); }
.sh-tool-check__howto p:last-child { margin-bottom: 0 !important; }
.sh-tool-check__examples-label { font-weight: 600; color: var(--sh-tool-heading); margin-top: 0.9rem !important; }
.sh-tool-check__examples li { margin-bottom: 0.4rem !important; }
.sh-tool-check__examples code {
    display: block;
    padding: 0.5rem 0.7rem;
    background: #f2f4f6;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #2c3338;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}
.sh-tool-check__more { font-size: 0.88rem; color: var(--sh-tool-muted); }

/* --- Handlungsaufruf unter dem Ergebnis --- */
.sh-tool__cta { margin-top: 1.6rem; text-align: center; }
.sh-tool__cta-note { margin: 0.9rem 0 0 !important; font-size: 0.9rem; color: var(--sh-tool-muted); }

/* --- Handlungsaufruf als eigener Block ---
   Hintergrund ist --sh-accent-darker, nicht --sh-accent: Weiss auf #0099cc
   waere 3,3:1 und damit zu schwach fuer Fliesstext. Auf #005f88 sind es 7,0:1.
   Aus demselben Grund traegt die Schaltflaeche ihre Beschriftung in
   --sh-accent-darker statt in der helleren Akzentfarbe. */
.sh-tool-cta {
    --sh-tool-accent: var(--sh-accent-darker, #005f88);
    --sh-tool-radius: var(--sh-radius, 8px);
    --sh-tool-radius-lg: var(--sh-radius-lg, 16px);

    margin: 2.6em 0;
    padding: clamp(1.6rem, 3vw, 2.4rem);
    background: var(--sh-tool-accent);
    border-radius: var(--sh-tool-radius-lg);
    text-align: center;
    color: #fff;
}
.sh-tool-cta__title { margin: 0 0 0.6rem; font-size: 1.35rem; color: #fff; }
.sh-article .sh-content .sh-tool-cta__title { margin-top: 0; color: #fff; font-size: 1.35rem; }
.sh-tool-cta__text { max-width: 44rem; margin: 0 auto 1.6rem; color: rgba(255, 255, 255, 0.92); }
.sh-article .sh-content .sh-tool-cta__text { margin: 0 auto 1.6rem; }

.sh-tool-cta__button {
    background: #fff;
    border-color: #fff;
    color: var(--sh-tool-accent);
}
.sh-content .sh-tool-cta__button { text-decoration: none; }
.sh-tool-cta__button:hover { background: rgba(255, 255, 255, 0.9); color: var(--sh-tool-accent); }
.sh-tool-cta__button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.sh-tool-cta__button:not(.sh-btn) {
    display: inline-block;
    padding: 0.9rem 1.6rem;
    font-weight: 600;
    border: 1px solid #fff;
    border-radius: var(--sh-tool-radius);
}

@media (max-width: 600px) {
    .sh-tool__form { display: block; }
    .sh-tool__field { margin-bottom: 0.9rem; }
    .sh-tool__submit { width: 100%; justify-content: center; }
    .sh-tool__score { width: 6rem; height: 6rem; }
    .sh-tool-cta__button { display: flex; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .sh-tool * { transition: none !important; }
}

/* --- Bericht per E-Mail (inc/report.php) --- */
.sh-tool__report {
    position: relative;
    margin: 1.6rem 0 0;
    padding: 1.3rem 1.4rem;
    background: #fff;
    border: 1px solid var(--sh-tool-border);
    border-left: 4px solid var(--sh-tool-accent);
    border-radius: var(--sh-tool-radius);
}
.sh-tool__report-title { margin: 0 0 0.4rem; font-size: 1.1rem; color: var(--sh-tool-heading); }
.sh-tool__report-text { margin: 0 0 1rem; color: var(--sh-tool-text); }
.sh-tool__report .sh-tool__field { margin-bottom: 0.9rem; }
.sh-tool__check { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; align-items: flex-start; margin-bottom: 0.7rem; font-size: 0.9rem; color: var(--sh-tool-text); }
.sh-tool__check input { margin-top: 0.3em; flex: 0 0 auto; }
.sh-tool__check label { flex: 1 1 0; min-width: 0; }
.sh-tool__check a { flex-basis: 100%; padding-left: 1.6rem; color: var(--sh-tool-accent); }
.sh-tool__report .sh-tool__submit { margin-top: 0.4rem; }
.sh-tool__report-status { min-height: 1.2em; margin: 0.7rem 0 0; font-size: 0.9rem; color: var(--sh-tool-fail); }
.sh-tool__report-done { margin: 0; padding: 0.8rem 1rem; background: #e6f4ea; color: #1e4d2b; border-radius: var(--sh-tool-radius); }