/* ─── Conjugation / verb-form classes ─────────────────────────────────
   WordBank's VerbFormHtml embeds these class names for semantic parts of a
   conjugated verb. Ported from the old LIUWeb app-fix.css — same colour
   variables, same spacing rules. Used by the conjugation page cards.
   ────────────────────────────────────────────────────────────────────── */
:root {
    --verb-auxiliary: #c0c0c0;   /* auxiliary verb (e.g. "have", "be") */
    --verb-person-grey: #808080; /* pronoun — grayed so the verb stands out */
    --verb-particle: #3d3d3d;    /* particle (e.g. "to" in infinitive, "-ing") */
    --verb-conjugation: #000000; /* verb stem */
    --verb-term: #d9534f;        /* verb ending that changes per person */
}

.graytxt {
    color: var(--verb-person-grey);
    margin-right: 5px;
}

.auxgraytxt {
    color: var(--verb-auxiliary);
    margin-left: 5px;
    margin-right: 5px;
}

.particletxt {
    color: var(--verb-particle);
    margin-right: 5px;
}

.verbtxt {
    color: var(--verb-conjugation);
}

.verbtxt-term {
    color: var(--verb-term);
    font-weight: 600;
}

/* ─── Article body typography ──────────────────────────────────────────
   Applies to the rendered markdown/HTML output inside <div class="post-reader-body">.
   Priorities: readable line-height, clear vertical rhythm, generous space around
   images so they feel like stand-alone figures rather than crammed between paragraphs.
   ────────────────────────────────────────────────────────────────────── */

.post-reader-body {
    font-size: 17px;
    line-height: 1.75;
    color: #2a2a2a;
}

.post-reader-body > p,
.post-reader-body > ul,
.post-reader-body > ol,
.post-reader-body > blockquote {
    margin-bottom: 1.25rem;
}

.post-reader-body h2,
.post-reader-body h3,
.post-reader-body h4 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: #1a1a1a;
    font-weight: 700;
}

.post-reader-body h2 { font-size: 1.8rem; }
.post-reader-body h3 { font-size: 1.45rem; }
.post-reader-body h4 { font-size: 1.2rem; }

.post-reader-body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 2.5rem auto;
    border-radius: 6px;
}

.post-reader-body figure {
    margin: 2.5rem auto;
}

.post-reader-body figure figcaption {
    text-align: center;
    color: #888;
    font-size: 14px;
    margin-top: 0.5rem;
    font-style: italic;
}

.post-reader-body blockquote {
    border-left: 3px solid #ff6b35;
    padding: 0.25rem 0 0.25rem 1.25rem;
    color: #555;
    font-style: italic;
}

.post-reader-body a {
    color: #ff6b35;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 107, 53, 0.4);
}

.post-reader-body a:hover {
    border-bottom-color: #ff6b35;
}

.post-reader-body code {
    background: #f4f4f4;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.9em;
}

.post-reader-body pre {
    background: #f4f4f4;
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
    margin: 2rem 0;
}

.post-reader-body pre code {
    background: transparent;
    padding: 0;
}

/* Inline word-highlight styling + hover tooltip bubble.
   Wrapping is done by /js/liu-reader.js; these styles drive the visuals. */

.liu-word {
    border-bottom: 2px dashed #ff6b35;
    cursor: help;
    position: relative;
    transition: background-color 0.15s ease;
}

.liu-word:hover {
    background-color: rgba(255, 107, 53, 0.08);
}

/* Tooltip bubble — only render when the span has a non-empty data-tip. */
.liu-word[data-tip]:not([data-tip=""]):hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a1a;
    color: #fff;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
    max-width: 360px;
    width: max-content;
    /* pre-line so the Razor-side builder can split per-language entries with \n and each
       flag/line stays on its own row inside the bubble. Normal wrap still applies within
       a line so long definitions break across multiple visual lines. */
    white-space: pre-line;
    text-align: left;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
    z-index: 1000;
    pointer-events: none;
}

/* Arrow pointing down from the bubble. */
.liu-word[data-tip]:not([data-tip=""]):hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1a1a1a;
    z-index: 1000;
    pointer-events: none;
}