/**
 * ZERONIQ Headline + Text widgets
 * DM/LM sync via -dm/-lm suffixed inline vars → stylesheet maps active var.
 * Setting the "active" var only in stylesheet lets html[data-theme=light]
 * cleanly swap it — inline declarations of the active var would win the
 * cascade and block LM switching.
 */

/* ─────── Headline ─────── */
.zvhl {
    margin: 0;
    /* Both non-sync and sync use --zvhl-color; non-sync gets it directly
       from -dm inline (no LM override); sync uses the html override below. */
    color: var(--zvhl-color, var(--zvhl-color-dm));
}
.zvhl a {
    color: inherit;
    text-decoration: none;
    transition: opacity .2s;
}
.zvhl a:hover { opacity: .8; }

/* DM-mode active mapping — applies to every headline widget (sync or not). */
.zvhl {
    --zvhl-color: var(--zvhl-color-dm);
}
/* LM override — only widgets with data-sync="1" swap. */
html[data-theme="light"] .zvhl[data-sync="1"] {
    --zvhl-color: var(--zvhl-color-lm);
}

/* ─────── Text (body) ─────── */
.zvtx {
    color: var(--zvtx-color, var(--zvtx-color-dm));
    --zvtx-color: var(--zvtx-color-dm);
    --zvtx-link:  var(--zvtx-link-dm);
}
.zvtx p,
.zvtx li,
.zvtx blockquote,
.zvtx span {
    color: inherit;
}
.zvtx p:last-child { margin-bottom: 0; }
.zvtx a {
    color: var(--zvtx-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: opacity .2s;
}
.zvtx a:hover { opacity: .75; }
.zvtx strong, .zvtx b { font-weight: 700; }
.zvtx em, .zvtx i    { font-style: italic; }

html[data-theme="light"] .zvtx[data-sync="1"] {
    --zvtx-color: var(--zvtx-color-lm);
    --zvtx-link:  var(--zvtx-link-lm);
}