/* ════════════════════════════════════════════════════════════
   HTML ডেসক্রিপশনের স্টাইল — assets/css/rich-content.css
   পোর্টফোলিও ডেসক্রিপশনে ব্যবহৃত HTML ট্যাগগুলো সুন্দর দেখানোর জন্য
   (ডার্ক ও লাইট — দুই থিমেই কাজ করে)
   ════════════════════════════════════════════════════════════ */

.rt-content {
    --rt-accent: var(--accent, var(--acc, #3B82F6));
    --rt-text:   var(--text, #E2E9FF);
    --rt-soft:   var(--text2, var(--muted, #8892C0));
    --rt-line:   var(--border, rgba(130, 150, 210, .22));
    --rt-tint:   var(--card2, var(--card, #0F1428));

    color: var(--rt-soft);
    font-size: .95rem;
    line-height: 1.85;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ── প্যারাগ্রাফ ─────────────────────────────────────── */
.rt-content p { margin: 0 0 15px; }
.rt-content p:last-child { margin-bottom: 0; }

/* ── হেডিং ───────────────────────────────────────────── */
.rt-content h2,
.rt-content h3,
.rt-content h4,
.rt-content h5,
.rt-content h6 {
    color: var(--rt-text);
    font-family: var(--font-heading, inherit);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.01em;
    margin: 28px 0 12px;
}
.rt-content h2:first-child,
.rt-content h3:first-child,
.rt-content h4:first-child { margin-top: 0; }

.rt-content h2 {
    font-size: 1.26rem;
    padding-bottom: 9px;
    border-bottom: 2px solid var(--rt-line);
    position: relative;
}
.rt-content h2::after {
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    width: 52px; height: 2px;
    background: var(--rt-accent);
    border-radius: 2px;
}
.rt-content h3 {
    font-size: 1.08rem;
    padding-left: 11px;
    border-left: 3px solid var(--rt-accent);
}
.rt-content h4 { font-size: .98rem; color: var(--rt-accent); }
.rt-content h5,
.rt-content h6 {
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--rt-soft);
}

/* ── টেক্সট ফরম্যাটিং ────────────────────────────────── */
.rt-content strong, .rt-content b { color: var(--rt-text); font-weight: 700; }
.rt-content em, .rt-content i { font-style: italic; }
.rt-content u { text-decoration-color: var(--rt-accent); text-underline-offset: 3px; }
.rt-content s, .rt-content del { opacity: .65; }
.rt-content mark {
    background: rgba(59, 130, 246, .26);
    color: var(--rt-text);
    padding: 1px 5px;
    border-radius: 4px;
}
.rt-content small { font-size: .84em; opacity: .85; }
.rt-content abbr { text-decoration: underline dotted; cursor: help; }

/* ── লিংক ────────────────────────────────────────────── */
.rt-content a {
    color: var(--rt-accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(59, 130, 246, .45);
    transition: color .2s, border-color .2s;
}
.rt-content a:hover { border-bottom-color: var(--rt-accent); }
.rt-content a[target="_blank"]::after { content: " \2197"; font-size: .8em; opacity: .75; }

/* ── লিস্ট ───────────────────────────────────────────── */
.rt-content ul,
.rt-content ol { margin: 0 0 16px; padding-left: 22px; }
.rt-content li { margin-bottom: 7px; }
.rt-content li:last-child { margin-bottom: 0; }

.rt-content ul { list-style: none; padding-left: 4px; }
.rt-content ul > li { position: relative; padding-left: 20px; }
.rt-content ul > li::before {
    content: "";
    position: absolute;
    left: 2px; top: .68em;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--rt-accent);
}
.rt-content ol { list-style: decimal; padding-left: 22px; }
.rt-content li > ul, .rt-content li > ol { margin-top: 7px; }

.rt-content dl { margin: 0 0 16px; }
.rt-content dt { color: var(--rt-text); font-weight: 600; margin-top: 10px; }
.rt-content dd { margin: 2px 0 0 18px; }

/* ── ব্লককোট ─────────────────────────────────────────── */
.rt-content blockquote {
    margin: 20px 0;
    padding: 13px 18px;
    border-left: 3px solid var(--rt-accent);
    border-radius: 0 9px 9px 0;
    background: rgba(59, 130, 246, .08);
    color: var(--rt-text);
    font-style: italic;
}
.rt-content blockquote p:last-child { margin-bottom: 0; }

/* ── কোড ─────────────────────────────────────────────── */
.rt-content code {
    font-family: ui-monospace, Consolas, "Courier New", monospace;
    font-size: .86em;
    padding: 2px 6px;
    border-radius: 5px;
    background: rgba(59, 130, 246, .12);
    color: var(--rt-accent);
    border: 1px solid rgba(59, 130, 246, .22);
}
.rt-content pre {
    margin: 18px 0;
    padding: 15px 17px;
    border-radius: 9px;
    background: rgba(3, 6, 16, .75);
    border: 1px solid var(--rt-line);
    overflow-x: auto;
    font-size: .84rem;
    line-height: 1.65;
}
.rt-content pre code {
    background: none; border: none; padding: 0;
    color: #d7e2ff; font-size: .84rem;
}
.rt-content kbd {
    font-family: ui-monospace, monospace;
    font-size: .78em;
    padding: 2px 6px;
    border-radius: 5px;
    border: 1px solid var(--rt-line);
    border-bottom-width: 2px;
    background: var(--rt-tint);
    color: var(--rt-text);
}

/* ── ছবি / ফিগার ────────────────────────────────────── */
.rt-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 18px 0;
    border-radius: 9px;
    border: 1px solid var(--rt-line);
}
.rt-content figure { margin: 20px 0; }
.rt-content figure img { margin: 0 0 8px; }
.rt-content figcaption {
    font-size: .8rem;
    text-align: center;
    color: var(--rt-soft);
    opacity: .9;
}

/* ── হরাইজন্টাল রুল ─────────────────────────────────── */
.rt-content hr {
    border: 0;
    height: 1px;
    margin: 24px 0;
    background: linear-gradient(90deg, transparent, var(--rt-line) 15%, var(--rt-line) 85%, transparent);
}

/* ── টেবিল ───────────────────────────────────────────── */
.rt-table-wrap {
    margin: 18px 0;
    overflow-x: auto;
    border: 1px solid var(--rt-line);
    border-radius: 9px;
    -webkit-overflow-scrolling: touch;
}
.rt-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
    min-width: 320px;
}
/* <thead> ছাড়া লেখা টেবিলেও হেডার সেল সুন্দর দেখাবে */
.rt-content th {
    background: rgba(59, 130, 246, .12);
    color: var(--rt-text);
    font-weight: 700;
    text-align: left;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.rt-content thead th { white-space: nowrap; }
.rt-content th,
.rt-content td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--rt-line);
    vertical-align: top;
}
.rt-content tbody tr:last-child td { border-bottom: 0; }
.rt-content tbody tr:nth-child(even) { background: rgba(127, 145, 190, .06); }

/* ── details / summary ──────────────────────────────── */
.rt-content details {
    margin: 16px 0;
    padding: 12px 16px;
    border: 1px solid var(--rt-line);
    border-radius: 9px;
}
.rt-content summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--rt-text);
    outline: none;
}
.rt-content details[open] summary { margin-bottom: 10px; }

/* ── মোবাইল ─────────────────────────────────────────── */
@media (max-width: 640px) {
    .rt-content { font-size: .9rem; line-height: 1.8; }
    .rt-content h2 { font-size: 1.1rem; }
    .rt-content h3 { font-size: .99rem; }
    .rt-content th, .rt-content td { padding: 8px 10px; }
    .rt-content table { font-size: .82rem; }
    .rt-content > table { display: block; overflow-x: auto; white-space: nowrap; }
}