/* Shared article typography for long-form pages (delivery stories). Mirrors the blog article styles. */
.blog-article {
    font-size: 16px;
    line-height: 1.8;
    color: #374151;
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.blog-article h2 {
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    color: #1e2a3a;
    margin: 2.4rem 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid #f0f0f0;
}
.blog-article h3 {
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    color: #1e2a3a;
    margin: 1.8rem 0 .6rem;
}
.blog-article h2:first-child,
.blog-article h3:first-child { margin-top: 0; }
.blog-article p { margin: 0 0 1.1rem; color: #4b5563; }
.blog-article > p:first-of-type { font-size: 1.08rem; color: #374151; }
.blog-article ul, .blog-article ol { margin: 0 0 1.3rem; padding-left: 1.4rem; }
.blog-article li { margin-bottom: .5rem; color: #4b5563; line-height: 1.7; }
.blog-article strong { color: #1e2a3a; font-weight: 600; }
.blog-article a { color: #e74c3c; text-decoration: none; font-weight: 500; }
.blog-article a:hover { text-decoration: underline; }
.blog-article img { max-width: 100%; height: auto; border-radius: 10px; }
.blog-article em { color: #6b7280; }

.blog-article table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1.5rem 0 2rem;
    font-size: 15px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}
.blog-article table thead th {
    background: #1e2a3a;
    color: #fff;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .6px;
    text-align: left;
}
.blog-article table tbody td {
    padding: 12px 16px;
    border-top: 1px solid #eef0f3;
    vertical-align: top;
    color: #4b5563;
}
.blog-article table tbody td:first-child {
    width: 32%;
    font-weight: 600;
    color: #1e2a3a;
    background: #f9fafb;
}
.blog-article table tbody tr:first-child td { border-top: 0; }

/* Phones: keep the table readable instead of squeezing the columns together. */
@media (max-width: 575.98px) {
    .blog-article { font-size: 15px; }
    .blog-article h2 { font-size: 1.25rem; }
    .blog-article table, .blog-article table tbody, .blog-article table tr, .blog-article table td { display: block; width: 100%; }
    .blog-article table thead { display: none; }
    .blog-article table tbody td:first-child { width: 100%; padding-bottom: 2px; background: transparent; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: #6b7280; }
    .blog-article table tbody td:last-child { padding-top: 2px; border-top: 0; border-bottom: 1px solid #eef0f3; }
}

/* Share buttons, tags, author card and related cards (same look as the blog) */
.share-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%; color: #fff; text-decoration: none; font-size: 14px;
    transition: transform .2s, box-shadow .2s;
}
.share-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.15); color: #fff; }
.share-btn.facebook { background: #1877f2; }
.share-btn.twitter { background: #1da1f2; }
.share-btn.linkedin { background: #0077b5; }
.share-btn.whatsapp { background: #25d366; }

.blog-tag {
    display: inline-block; padding: 4px 12px; background: #f3f4f6; color: #6b7280; border-radius: 20px;
    font-size: 12px; font-weight: 500; text-decoration: none; margin: 3px 2px; transition: all .2s;
}
.blog-tag:hover { background: #e74c3c; color: #fff; }

.author-card { background: linear-gradient(135deg, #f8fafc, #f0f4f8); border-radius: 12px; border: 1px solid #e5e7eb; }

.related-card { border-radius: 10px; border: 1px solid #f0f0f0; transition: box-shadow .2s, transform .2s; height: 100%; }
.related-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); transform: translateY(-2px); }