/* =========================================================
   Gtheme — rich-text content
   =========================================================

   The single source of truth for how authored rich-text content looks —
   whether it is **inside** the editor or **displayed** on a page.

   - `.ajus-content` marks a rich-text area (a postcard body, an article,
     a comment) and styles every element an editor can produce.
   - The editor surface carries `.ajus-content` too (added by
     `Assets/js/gquill.js`); `Assets/css/gquill.css` re-declares the same
     rules against the identical `--rich-*` tokens below, so the editing
     view and the published view are typographically one and the same.

   The scale lives here as `--rich-*` tokens; the editor stylesheet consumes
   the very same tokens — change a value here and both sides follow.

   Public stylesheet: usable by modules, never edited by them.
   ========================================================= */

:root {
    /* Content scale (the values `.ajus-content` and the editor both use) */
    --rich-font-size: 0.94rem;
    --rich-line-height: 1.58;
    --rich-measure: 670px;

    --rich-h1: 1.32rem;
    --rich-h2: 1.22rem;
    --rich-h3: 1.12rem;
    --rich-h4: 1.04rem;
    --rich-h5: 0.98rem;
    --rich-h6: 0.86rem;
}

@media (max-width: 767.98px) {
    :root {
        --rich-font-size: 0.9rem;
        --rich-line-height: 1.55;
        --rich-h1: 1.16rem;
        --rich-h2: 1.1rem;
        --rich-h3: 1.04rem;
    }
}

/* The content box: colour, rhythm and the measure a reader can scan.
   Modules may re-tune the measure on their own container. */
.ajus-content {
    color: var(--color-text-main);
    font-size: var(--rich-font-size);
    line-height: var(--rich-line-height);
}

.ajus-content > :first-child {
    margin-top: 0;
}

.ajus-content > :last-child {
    margin-bottom: 0;
}

/* ---------- Paragraphs ---------- */

.ajus-content p {
    margin-bottom: 0.6rem;
}

/* ---------- Headings ----------
   Deliberately compact: content never out-shouts the title of the card it
   sits in. Levels come from the `--rich-h*` scale the editor shares. */

.ajus-content h1,
.ajus-content h2,
.ajus-content h3,
.ajus-content h4,
.ajus-content h5,
.ajus-content h6 {
    color: var(--color-text-main);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 1.1rem 0 0.5rem;
    padding: 0;
    border: 0;
}

.ajus-content h1 { font-size: var(--rich-h1); }
.ajus-content h2 { font-size: var(--rich-h2); }
.ajus-content h3 { font-size: var(--rich-h3); }
.ajus-content h4 { font-size: var(--rich-h4); }
.ajus-content h5 { font-size: var(--rich-h5); }

.ajus-content h6 {
    font-size: var(--rich-h6);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* ---------- Lists ---------- */

.ajus-content ul,
.ajus-content ol {
    margin: 0.5rem 0 0.7rem 1.2rem;
    padding: 0;
}

.ajus-content ul { list-style: disc; }
.ajus-content ol { list-style: decimal; }

.ajus-content li {
    margin-bottom: 0.3rem;
    line-height: var(--rich-line-height);
}

/* ---------- Links ---------- */

.ajus-content a {
    color: var(--color-text-primary);
    text-decoration: none;
}

.ajus-content a:hover,
.ajus-content a:focus {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

/* ---------- Emphasis ---------- */

.ajus-content strong { font-weight: 700; }
.ajus-content em { font-style: italic; }

/* ---------- Quotes ---------- */

.ajus-content blockquote {
    border-left: 3px solid var(--color-border-primary);
    background: var(--color-bg-primary-soft);
    padding: 0.65rem 0.8rem;
    border-radius: var(--radius-sm);
    margin: 0.8rem 0;
}

/* ---------- Inline code ---------- */

.ajus-content code {
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-soft);
    background: var(--color-bg-surface-soft);
    font-family: var(--font-mono);
    font-size: 0.88em;
    color: var(--color-text-main);
}

/* ---------- Media & rules ---------- */

.ajus-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    margin: 0.5rem 0;
    display: block;
}

.ajus-content hr {
    border: 0;
    border-top: 1px solid var(--color-border-soft);
    margin: 1rem 0;
}