/* CODISH Nova – Aussehen aus dem Theme.
 *
 * Schrift, Textfarbe, Links, Überschrift, Knöpfe und Eingabefeld kommen aus
 * dem Theme. Das Fenster bekommt den Seitenhintergrund und die Textfarbe der
 * Seite: nova.js liest beide beim Laden aus (`--cn-hg`, `--cn-vg`) – das
 * funktioniert bei Block-Themes UND klassischen Themes, auch bei
 * Dunkelmodus-Umschaltern. Die Akzentfarbe ist die Hintergrundfarbe, die das
 * Theme dem Senden-Knopf gibt (`--cn-akzent`).
 *
 * ZWEI SORTEN REGELN
 * ------------------
 *   1. Erzwungen (normale Spezifität): nur was ein schwebendes Fenster
 *      braucht, um lesbar zu sein – deckender Hintergrund, Textfarbe,
 *      Rahmen, Schatten.
 *   2. Ersatzwerte in `:where(…)` – Spezifität 0. Jede Theme-Regel für
 *      `button`, `textarea`, `a` oder `.wp-element-button` schlägt sie. Sie
 *      greifen nur, wenn das Theme selbst nichts festlegt (viele Block-Themes
 *      gestalten z. B. kein <textarea>).
 *
 * Grautöne entstehen aus der Textfarbe (`color-mix` mit currentColor) und
 * passen damit zu hellen und dunklen Themes gleichermaßen.
 */

.cn-theme{
  --cn-hg-wert:var(--cn-hg,var(--wp--preset--color--base,Canvas));
  --cn-vg-wert:var(--cn-vg,var(--wp--preset--color--contrast,CanvasText));
  --cn-akzent-wert:var(--cn-akzent,currentColor);
  color:var(--cn-vg-wert);
}

/* 1. Erzwungen: Flächen des Fensters */
.cn-theme .cn-win,
.cn-theme .cn-kopf,
.cn-theme .cn-form,
.cn-theme .cn-ds-text,
.cn-theme .cn-noscript{background-color:var(--cn-hg-wert);color:var(--cn-vg-wert)}

.cn-theme .cn-win{
  border:1px solid rgba(128,128,128,.35);
  border:1px solid color-mix(in srgb,currentColor 22%,transparent);
  border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.08);
}
.cn-theme .cn-kopf{border-bottom:1px solid rgba(128,128,128,.25);border-bottom:1px solid color-mix(in srgb,currentColor 14%,transparent)}
.cn-theme .cn-form{border-top:1px solid rgba(128,128,128,.25);border-top:1px solid color-mix(in srgb,currentColor 14%,transparent)}
.cn-theme .cn-ds-text,
.cn-theme .cn-noscript{border:1px solid rgba(128,128,128,.35);border:1px solid color-mix(in srgb,currentColor 22%,transparent);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.14)}

/* Die Überschrift behält Schrift und Gewicht des Themes – nur die Größe
   bleibt fensterfreundlich (eine Theme-h2 ist oft 2,5rem groß) */
.cn-theme .cn-titel-symbol{color:var(--cn-akzent-wert)}

/* Nachrichten: Flächen aus der Textfarbe getönt */
.cn-theme .cn-msg{border-radius:8px}
.cn-theme .cn-msg-bot{background:rgba(128,128,128,.08);background:color-mix(in srgb,currentColor 6%,transparent);border:1px solid rgba(128,128,128,.2);border:1px solid color-mix(in srgb,currentColor 12%,transparent)}
.cn-theme .cn-msg-ich{background:rgba(128,128,128,.14);background:color-mix(in srgb,var(--cn-akzent-wert) 12%,transparent);border:1px solid rgba(128,128,128,.3);border:1px solid color-mix(in srgb,var(--cn-akzent-wert) 40%,transparent)}
.cn-theme .cn-msg-laedt::after{background:var(--cn-akzent-wert)}

/* Fehlermeldung: nicht nur über Farbe – fett und mit Randstrich, lesbar auf
   hellen wie dunklen Themes */
.cn-theme .cn-fehler{font-weight:600;border-left:3px solid #d63638;padding-left:8px}
.cn-theme .cn-fld textarea[aria-invalid="true"]{border-color:#d63638}

/* 2. Ersatzwerte mit Spezifität 0 – das Theme gewinnt immer */

:where(.cn-theme) :where(.cn-opener,.cn-senden){
  padding:.75em 1.25em;border:0;border-radius:4px;
  background-color:var(--cn-vg-wert);color:var(--cn-hg-wert);
  font:inherit;font-weight:600;line-height:1.2;
}
:where(.cn-theme) :where(.cn-opener){box-shadow:0 6px 20px rgba(0,0,0,.2)}
:where(.cn-theme) :where(.cn-senden:disabled){opacity:.55;cursor:not-allowed}

/* Nebenknöpfe (Schließen, Datenschutz) zurückhaltend – Themes gestalten
   jeden <button> gern als Hauptknopf */
.cn-theme .cn-zu,
.cn-theme .cn-ds-knopf{
  background:transparent;color:inherit;box-shadow:none;text-shadow:none;
  border:1px solid rgba(128,128,128,.4);border:1px solid color-mix(in srgb,currentColor 30%,transparent);
  border-radius:4px;font-weight:400;text-transform:none;letter-spacing:normal;
}
.cn-theme .cn-zu:hover,.cn-theme .cn-zu:focus-visible,
.cn-theme .cn-ds-knopf:hover,.cn-theme .cn-ds-knopf:focus-visible{border-color:currentColor;background:transparent;color:inherit}

:where(.cn-theme .cn-fld textarea){
  background-color:transparent;color:inherit;
  border:1px solid rgba(128,128,128,.6);border:1px solid color-mix(in srgb,currentColor 45%,transparent);
  border-radius:4px;padding:.75em .875em;
}
:where(.cn-theme .cn-fld textarea)::placeholder{color:inherit;opacity:.7}
:where(.cn-theme) :where(button:focus-visible,textarea:focus-visible,a:focus-visible){outline:2px solid currentColor;outline-offset:2px}
:where(.cn-theme) :where(a){color:inherit;text-decoration:underline;text-underline-offset:3px}