/* ============================================================================
   topiclinks.css — styling for canonical "link to a topic" anchors.
   Every topic link (server- or client-rendered) carries .topic-link plus a
   style modifier. Uses the global theme variables from fa.css.
   ============================================================================ */

.topic-link {
    text-decoration: none;
    color: var(--primary-color, #3b82f6);
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.topic-link .topic-link-ic { font-size: 0.72em; opacity: 0.65; }
.topic-link .topic-link-lbl { }

/* ── inline: reads as part of the surrounding text (default) ──────────────── */
.topic-link--inline {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3em;
}
.topic-link--inline:hover { text-decoration: underline; }
.topic-link--inline:hover .topic-link-ic { opacity: 1; }

/* ── plain: a simple underlined text link ─────────────────────────────────── */
.topic-link--plain {
    display: inline;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.topic-link--plain .topic-link-ic { margin-right: 0.35em; }
.topic-link--plain:hover { border-bottom-color: currentColor; }

/* ── chip: a rounded pill ─────────────────────────────────────────────────── */
.topic-link--chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
}
.topic-link--chip:hover { border-color: var(--primary-color, #3b82f6); color: var(--primary-color, #3b82f6); }
.topic-link--chip .topic-link-ic { color: var(--primary-color, #3b82f6); opacity: 0.8; }

/* ── button: a filled call-to-action ──────────────────────────────────────── */
.topic-link--button {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    background: var(--primary-color, #3b82f6);
    color: #fff;
}
.topic-link--button .topic-link-ic { opacity: 0.85; }
.topic-link--button:hover { filter: brightness(0.95); }

/* ── qh: used inside Quick Help popups (inherits .qh-pop-link look) ────────── */
.topic-link--qh { display: inline-flex; align-items: center; gap: 0.4em; }

/* ── missing target: a topic slug that does not resolve (diagnostic) ───────── */
.topic-link--missing { color: var(--danger, #b91c1c); text-decoration: underline dotted; }