/**
 * css/moshpit-markup.css
 *
 * Styles for the Mosh Pit markup rendering system.
 * Linked from moshpit-topic.php, moshpit.php, moshpit-user.php.
 */

/* ── Links ─────────────────────────────────────────────────── */
a.mp-link { color: #f5c518; text-decoration: none; word-break: break-all; }
a.mp-link:hover { opacity: 0.8; text-decoration: underline; }

/* ── @Mentions ─────────────────────────────────────────────── */
a.mp-mention { color: #6495ed; text-decoration: none; font-weight: 600; }
a.mp-mention:hover { opacity: 0.8; text-decoration: underline; }

/* ── @Mention autocomplete dropdown ───────────────────────── */
.mp-mention-dropdown {
    position: fixed; z-index: 9999; display: none;
    background: #1e1e1e; border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px; overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    max-width: 280px; min-width: 180px;
}
.mp-mention-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; cursor: pointer;
    transition: background 0.1s;
}
.mp-mention-item:hover, .mp-mention-item.active {
    background: rgba(100,149,237,0.15);
}
.mp-mention-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
    background: rgba(255,255,255,0.08);
}
.mp-mention-info { display: flex; flex-direction: column; min-width: 0; }
.mp-mention-handle {
    font-size: 0.82rem; font-weight: 700; color: #6495ed;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mp-mention-name {
    font-size: 0.72rem; color: rgba(255,255,255,0.45);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mp-topic-body s, .mp-comment-text s,
.mp-card-preview s, .mp-recent-topic-preview s { opacity: 0.7; }

/* ── Colors ────────────────────────────────────────────────── */
.mp-color-red { color: #e74c3c; }
.mp-color-green { color: #2ecc71; }
.mp-color-blue { color: #3498db; }
.mp-color-gold { color: #f5c518; }
.mp-color-orange { color: #e67e22; }
.mp-color-purple { color: #9b59b6; }
.mp-color-cyan { color: #1abc9c; }
.mp-color-pink { color: #e91e63; }

/* ── Sizes ─────────────────────────────────────────────────── */
.mp-size-medium { font-size: 1.1em; }
.mp-size-large { font-size: 1.3em; }

/* ── Tables ────────────────────────────────────────────────── */
.mp-table-wrap { overflow-x: auto; margin: 8px 0; -webkit-overflow-scrolling: touch; }
.mp-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.mp-table th {
    background: rgba(245,197,24,0.12); color: rgba(255,255,255,0.85);
    font-weight: 700; text-align: left; padding: 8px 12px;
    border-bottom: 2px solid rgba(245,197,24,0.25);
}
.mp-table td {
    padding: 6px 12px; color: rgba(255,255,255,0.65);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mp-table tr:nth-child(even) td { background: rgba(255,255,255,0.03); }
.mp-table tr:nth-child(odd) td { background: rgba(255,255,255,0.06); }

/* ── Blockquotes ───────────────────────────────────────────── */
.mp-blockquote {
    border-left: 3px solid rgba(245,197,24,0.5);
    background: rgba(255,255,255,0.03); padding: 8px 14px;
    margin: 8px 0; color: rgba(255,255,255,0.6);
    font-size: 0.88rem; line-height: 1.55;
}

/* ── Code ──────────────────────────────────────────────────── */
.mp-code-inline {
    font-family: 'Courier New', Courier, monospace;
    background: rgba(255,255,255,0.08); padding: 1px 6px;
    border-radius: 3px; font-size: 0.88em;
}
.mp-code-block {
    font-family: 'Courier New', Courier, monospace;
    background: rgba(0,0,0,0.3); padding: 12px 16px;
    border-radius: 6px; font-size: 0.84rem; line-height: 1.5;
    overflow-x: auto; margin: 8px 0; white-space: pre;
    color: rgba(255,255,255,0.75);
}

/* ── Horizontal rule ───────────────────────────────────────── */
.mp-hr {
    border: none; height: 1px; margin: 12px 0; opacity: 1;
    background: linear-gradient(90deg, transparent, rgba(245,197,24,0.4), transparent);
}

/* ── Headings ──────────────────────────────────────────────── */
.mp-h3 {
    font-family: 'Josefin Sans', sans-serif; font-size: 1.15rem;
    font-weight: 700; color: #fff; margin: 14px 0 8px; line-height: 1.3;
}
.mp-h4 {
    font-family: 'Josefin Sans', sans-serif; font-size: 1.0rem;
    font-weight: 700; color: rgba(255,255,255,0.85); margin: 10px 0 6px; line-height: 1.3;
}
/* Suppress the extra <br> left over after a heading from a blank source line */
.mp-h3 + br, .mp-h4 + br { display: none; }

/* ── Lists ─────────────────────────────────────────────────── */
/* Specificity (0,1,2) beats .content ul li (0,1,2) via cascade order */
.mp-list { margin: 6px 0; padding-left: 20px; list-style: none; }
ul.mp-list li {
    position: relative; padding-left: 14px; margin-bottom: 3px;
    font-size: 0.88rem; color: rgba(255,255,255,0.65); line-height: 1.5;
}
ul.mp-list li::before {
    content: ''; position: absolute; left: 0; top: 8px;
    width: 5px; height: 5px; border-radius: 50%; background: #f5c518;
}

/* ── Spoiler ───────────────────────────────────────────────── */
.mp-spoiler {
    background: rgba(255,255,255,0.08); padding: 2px 8px;
    border-radius: 4px; cursor: pointer; transition: all 0.2s;
}
.mp-spoiler:not(.revealed) {
    color: transparent; text-shadow: 0 0 8px rgba(255,255,255,0.3);
}
.mp-spoiler:not(.revealed)::before {
    content: '[ spoiler — click to reveal ]';
    color: rgba(255,255,255,0.35); text-shadow: none;
    font-size: 0.8em; font-style: italic;
}
.mp-spoiler.revealed { color: inherit; text-shadow: none; }

/* ── Embed container ───────────────────────────────────────── */
.mp-embed-container {
    margin: 12px 0; border-radius: 10px; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
    animation: mp-embed-fadein 0.4s ease;
    display: flex; flex-direction: column;
}
/* Reset global element styles that leak from site CSS (Caveat font, colors, etc.) */
.mp-embed-container p,
.mp-embed-container h1, .mp-embed-container h2,
.mp-embed-container h3, .mp-embed-container h4,
.mp-embed-container h5, .mp-embed-container h6 {
    font-family: inherit; color: inherit; opacity: 1;
    text-transform: none; letter-spacing: normal; text-align: inherit;
    display: block; width: auto; margin: 0; font-optical-sizing: auto;
}
.mp-embed-container table { font-family: inherit; }
.mp-embed-loading {
    display: flex; align-items: center; justify-content: center;
    padding: 40px; color: rgba(255,255,255,0.3); font-size: 0.84rem;
}
.mp-embed-error {
    padding: 16px; color: rgba(255,255,255,0.4); font-size: 0.82rem;
    text-align: center; font-style: italic;
}
@keyframes mp-embed-fadein { from { opacity: 0; } to { opacity: 1; } }