/* Linktrust Enhancer — Frontend Styles */

/* ── Base article typography ────────────────────────── */
.entry-content section,
.post-content section,
article section {
    margin-bottom: 2.5em;
}

.entry-content p,
.post-content p,
article p {
    line-height: 1.75;
    margin-bottom: 1.2em;
}

/* ── Comparison tables ──────────────────────────────── */
.entry-content table,
.post-content table,
article table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 0.95em;
    line-height: 1.6;
}
.entry-content table thead,
.post-content table thead,
article table thead {
    background: #2d3748;
    color: #fff;
}
.entry-content table th,
.post-content table th,
article table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.entry-content table td,
.post-content table td,
article table td {
    padding: 10px 16px;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: top;
}
.entry-content table tbody tr:nth-child(even),
.post-content table tbody tr:nth-child(even),
article table tbody tr:nth-child(even) {
    background: #f8f9fa;
}
.entry-content table tbody tr:hover,
.post-content table tbody tr:hover,
article table tbody tr:hover {
    background: #edf2f7;
}

/* Responsive tables */
@media (max-width: 600px) {
    .entry-content table,
    .post-content table,
    article table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Blockquotes ────────────────────────────────────── */
.entry-content blockquote,
.post-content blockquote,
article blockquote {
    border-left: 4px solid #3182ce;
    background: #f7fafc;
    padding: 16px 20px;
    margin: 1.5em 0;
    border-radius: 0 6px 6px 0;
    font-style: italic;
    color: #4a5568;
    line-height: 1.7;
}
.entry-content blockquote p:last-child,
.post-content blockquote p:last-child,
article blockquote p:last-child {
    margin-bottom: 0;
}

/* ── Lists ──────────────────────────────────────────── */
.entry-content ul,
.post-content ul,
article ul,
.entry-content ol,
.post-content ol,
article ol {
    margin: 1em 0;
    padding-left: 1.5em;
    line-height: 1.75;
}
.entry-content li,
.post-content li,
article li {
    margin-bottom: 0.5em;
}

/* ── Key takeaways box (inline styled div from AI) ──── */
.entry-content > div[style*="border-left"],
.post-content > div[style*="border-left"],
article > div[style*="border-left"],
section > div[style*="border-left"] {
    border-radius: 6px;
    margin-bottom: 2em;
}

/* ── Table of Contents ──────────────────────────────── */
.ae-toc {
    background: #f8f9fa;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px 24px;
    margin: 24px 0;
    max-width: 600px;
}
.ae-toc h2 {
    font-size: 1.1em;
    margin: 0 0 12px 0;
    color: #2d3748;
}
.ae-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ae-toc li {
    margin: 6px 0;
    line-height: 1.5;
}
.ae-toc li.ae-toc-sub {
    padding-left: 20px;
    font-size: 0.93em;
}
.ae-toc a {
    color: #3182ce;
    text-decoration: none;
    border-bottom: 1px dotted #a0aec0;
}
.ae-toc a:hover {
    color: #2c5282;
    border-bottom-style: solid;
}

/* ── Author Box ─────────────────────────────────────── */
.ae-author-box {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #f7fafc;
    border-top: 3px solid #3182ce;
    padding: 20px;
    margin: 40px 0 24px;
    border-radius: 0 0 8px 8px;
}
.ae-author-box a {
    color: #2d3748;
    text-decoration: none;
}
.ae-author-box a:hover {
    color: #3182ce;
}
.ae-author-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #3182ce;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    font-weight: 700;
    flex-shrink: 0;
}
.ae-author-info {
    flex: 1;
}
.ae-author-name {
    display: block;
    font-size: 1.05em;
    margin-bottom: 4px;
    color: #2d3748;
}
.ae-author-bio {
    margin: 0;
    color: #4a5568;
    font-size: 0.92em;
    line-height: 1.5;
}

/* ── Related Articles ───────────────────────────────── */
.ae-related {
    background: #f8f9fa;
    border-left: 4px solid #3182ce;
    padding: 20px;
    margin: 30px 0;
    border-radius: 0 8px 8px 0;
}
.ae-related h3 {
    margin: 0 0 12px 0;
    color: #2d3748;
    font-size: 1.05em;
}
.ae-related ul {
    margin: 0;
    padding-left: 20px;
}
.ae-related li {
    margin: 6px 0;
}
.ae-related a {
    color: #3182ce;
    text-decoration: none;
}
.ae-related a:hover {
    text-decoration: underline;
}

/* ── Figures ─────────────────────────────────────────── */
figure {
    margin: 1.5em 0;
    padding: 0;
}
figure img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}
figure figcaption {
    font-size: 0.88em;
    color: #718096;
    margin-top: 6px;
    font-style: italic;
}

/* ── Links in content ───────────────────────────────── */
.entry-content a,
.post-content a,
article a {
    color: #3182ce;
    text-decoration: underline;
    text-decoration-color: #bee3f8;
    text-underline-offset: 2px;
}
.entry-content a:hover,
.post-content a:hover,
article a:hover {
    color: #2c5282;
    text-decoration-color: #3182ce;
}

/* ── Headings spacing ───────────────────────────────── */
.entry-content h2,
.post-content h2,
article h2 {
    margin-top: 2em;
    margin-bottom: 0.75em;
}
.entry-content h3,
.post-content h3,
article h3 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

/* ── FAQ section styling ────────────────────────────── */
.entry-content h3 + p,
.post-content h3 + p,
article h3 + p {
    margin-top: 0.3em;
}

/* ── Smooth scroll ──────────────────────────────────── */
html {
    scroll-behavior: smooth;
}