/*
 * Content of pages and posts (2026-10, dec-content-refactor): what the editor puts in post_content — headings, lists,
 * tables, notes, links, video — inside div.text (pages, materials, events, taxonomy landings) and
 * div.announcement-text (news, announcements). Only markup without a class of its own is styled (a:not([class]),
 * ul:not([class])…), so file blocks (.dec-doc), buttons and shortcode output keep their looks.
 * Same visual language as css/doc.css: square corners, no shadows, no animation; teal accents.
 * Deploy as themes/dec/css/content.css, enqueued next to doc.css (inc/functions/assets.php, !is_front_page()),
 * then set DCR_CONTENT_CSS = true in the skill's scripts/lib.php (turns on M8 and table styles in M1).
 */
:is(div.text, div.announcement-text) {
    --c-teal: #00A9AF;
    --c-teal-ink: #007F84;
    --c-blue: #006AB6;
    --c-blue-ink: #00538f;
    --c-ink: #1f2a30;
    --c-muted: #5d6d76;
    --c-line: #e3e8ec;
    --c-line-strong: #c9d3da;
    --c-bg: #f6f8fa;
    --c-note: #eef8f8;
    --c-alert: #c62f25;
    --c-alert-bg: #fdf1f0;
    color: var(--c-ink);
    font-size: 16px;
    line-height: 1.6;
    overflow-wrap: break-word;
}

/* text */
:is(div.text, div.announcement-text) p {
    margin: 0 0 14px;
}
:is(div.text, div.announcement-text) a:not([class]) {
    color: var(--c-blue);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
:is(div.text, div.announcement-text) a:not([class]):hover,
:is(div.text, div.announcement-text) a:not([class]):focus-visible {
    color: var(--c-blue-ink);
    text-decoration-thickness: 2px;
}

/* headings: h2 = section (teal bar, as the sidebar titles), h3 = subsection (line under), h4 = small heading */
:is(div.text, div.announcement-text) h2:not([class]) {
    margin: 32px 0 14px;
    padding: 2px 0 2px 12px;
    border-left: 4px solid var(--c-teal);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--c-ink);
}
:is(div.text, div.announcement-text) h3:not([class]) {
    margin: 28px 0 12px;
    padding: 0 0 8px;
    border-bottom: 2px solid var(--c-line);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--c-ink);
}
:is(div.text, div.announcement-text) h4:not([class]) {
    margin: 22px 0 10px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--c-ink);
}
:is(div.text, div.announcement-text) :is(h2, h3, h4):not([class]):first-child {
    margin-top: 0;
}
:is(div.text, div.announcement-text) :is(h2, h3, h4):not([class]) :is(strong, b) {
    font-weight: inherit;
}

/* lists: square teal markers */
:is(div.text, div.announcement-text) :is(ul, ol):not([class]) {
    margin: 0 0 14px;
    padding-left: 24px;
}
:is(div.text, div.announcement-text) ul:not([class]) {
    list-style: square;
}
:is(div.text, div.announcement-text) :is(ul, ol):not([class]) > li {
    margin: 0 0 6px;
    padding-left: 4px;
}
:is(div.text, div.announcement-text) ul:not([class]) > li::marker {
    color: var(--c-teal);
}
:is(div.text, div.announcement-text) ol:not([class]) > li::marker {
    color: var(--c-teal-ink);
    font-weight: 700;
}
:is(div.text, div.announcement-text) li > :is(ul, ol):not([class]) {
    margin: 6px 0 0;
}

/* tables: thin lines, a light header row; wide ones scroll on phones (js/responsive.js wraps them) */
:is(div.text, div.announcement-text) table:not([class]) {
    width: 100%;
    margin: 0 0 18px;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.45;
}
:is(div.text, div.announcement-text) table:not([class]) :is(th, td) {
    padding: 8px 12px;
    border: 1px solid var(--c-line-strong);
    text-align: left;
    vertical-align: top;
}
:is(div.text, div.announcement-text) table:not([class]) th,
:is(div.text, div.announcement-text) table:not([class]) thead td {
    background: var(--c-bg);
    font-weight: 700;
}
:is(div.text, div.announcement-text) table:not([class]) caption {
    caption-side: top;
    padding: 0 0 8px;
    color: var(--c-muted);
    font-size: 14px;
    text-align: left;
}
:is(div.text, div.announcement-text) table:not([class]) p:last-child {
    margin-bottom: 0;
}

/* notes: <p class="dec-note"> (or <div class="dec-note"> for several paragraphs); --alert for warnings */
:is(div.text, div.announcement-text) .dec-note {
    margin: 0 0 16px;
    padding: 14px 18px;
    border-left: 4px solid var(--c-teal);
    background: var(--c-note);
}
:is(div.text, div.announcement-text) .dec-note--alert {
    border-left-color: var(--c-alert);
    background: var(--c-alert-bg);
}
:is(div.text, div.announcement-text) .dec-note > :last-child {
    margin-bottom: 0;
}
:is(div.text, div.announcement-text) .dec-note--alert > strong:first-child {
    color: var(--c-alert);
}

/* quotes, rules */
:is(div.text, div.announcement-text) blockquote:not([class]) {
    margin: 0 0 16px;
    padding: 4px 0 4px 16px;
    border-left: 3px solid var(--c-line-strong);
    color: var(--c-muted);
}
:is(div.text, div.announcement-text) hr {
    margin: 24px 0;
    border: 0;
    border-top: 1px solid var(--c-line);
}

/* video: <div class="dec-video"><iframe src="https://www.youtube.com/embed/ID" …></iframe></div> */
:is(div.text, div.announcement-text) .dec-video {
    position: relative;
    margin: 0 0 18px;
    aspect-ratio: 16 / 9;
    background: #000;
}
:is(div.text, div.announcement-text) .dec-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 767.98px) {
    :is(div.text, div.announcement-text) h2:not([class]) {
        font-size: 20px;
    }
    :is(div.text, div.announcement-text) h3:not([class]) {
        font-size: 18px;
    }
    :is(div.text, div.announcement-text) table:not([class]) {
        font-size: 14px;
    }
}