/* ==========================================================
   SCINOV Africa — Article page, two-column edition
   Left: white article card (cover on top, title, body, share)
   Right: solid navy sticky "Other Updates" column
   Palette from the logo: navy, orange, green.
   ========================================================== */
   @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
.scinov-article-page {
    --sn-navy: #14246e;
    --sn-navy-deep: #0b1745;
    --sn-orange: #f26a1b;
    --sn-orange-soft: #fff1e8;
    --sn-green: #2f8f3a;
    --sn-green-soft: #eaf6ec;
    --sn-ink: #1f2638;
    --sn-muted: #647089;
    --sn-line: #e8ebf3;
    background:
        radial-gradient(rgba(20,36,110,.07) 1.4px, transparent 1.8px) 0 0 / 22px 22px,
        #f3f6fb;
    color: var(--sn-ink);
    padding: clamp(20px, 4vw, 56px) 16px 72px;
    position: relative;
}

.scinov-read-progress {
    position: fixed; top: 0; left: 0; height: 4px; width: 0;
    background: linear-gradient(90deg, var(--sn-green), var(--sn-orange));
    z-index: 9999; transition: width .1s linear;
}

/* ---------- Two columns ---------- */
.scinov-article-layout {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, 1fr) 330px;
    gap: 30px; align-items: start;
}

/* ---------- Left column: article card ---------- */
.scinov-article-main {
    background: #fff; border-radius: 26px; min-width: 0; overflow: hidden;
    box-shadow: 0 28px 60px -34px rgba(11,23,69,.45);
}

/* Cover sits at the top of the card, full-bleed */
.scinov-article-cover { margin: 0; position: relative; }
.scinov-article-cover img {
    display: block; width: 100%; height: auto;
    max-height: 480px; min-height: 180px; object-fit: cover; background: var(--sn-line);
}
.scinov-article-cover::after {
    /* brand stripe along the image's bottom edge */
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px;
    background: linear-gradient(90deg, var(--sn-navy) 0 40%, var(--sn-orange) 40% 70%, var(--sn-green) 70% 100%);
}

.scinov-article-head { padding: clamp(24px, 4vw, 48px) clamp(22px, 5vw, 56px) 0; }

.scinov-article-breadcrumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: .84rem; color: var(--sn-muted); margin-bottom: 20px;
}
.scinov-article-breadcrumbs a { color: var(--sn-navy); font-weight: 600; text-decoration: none; }
.scinov-article-breadcrumbs a:hover { color: var(--sn-orange); }
.scinov-article-current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

.scinov-article-category {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--sn-orange); color: #fff; font-weight: 700; font-size: .75rem;
    letter-spacing: .1em; text-transform: uppercase;
    padding: 7px 15px; border-radius: 999px; margin-bottom: 16px;
}

.scinov-article-title {
    font-size: clamp(1.9rem, 3.8vw, 2.9rem); line-height: 1.14;
    letter-spacing: -.02em; font-weight: 800; color: var(--sn-navy); margin: 0 0 22px;font-family: "Poppins", sans-serif;
}

.scinov-article-meta { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 8px; }
.scinov-article-meta-item {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--sn-green-soft); color: var(--sn-navy);
    padding: 7px 14px; border-radius: 999px; font-size: .86rem; font-weight: 600;
}
.scinov-article-meta-item i { color: var(--sn-green); }
.scinov-article-meta-item.scinov-reading-time { background: var(--sn-orange-soft); }
.scinov-article-meta-item.scinov-reading-time i { color: var(--sn-orange); }

/* ---------- Body ---------- */
.scinov-article-body {
    padding: clamp(26px, 4vw, 40px) clamp(22px, 5vw, 56px) 8px;
    font-size: clamp(1.04rem, .8vw + .88rem, 1.17rem);
    line-height: 1.9; color: var(--sn-ink); overflow-wrap: anywhere;
}
.scinov-article-body > * { margin-top: 0; margin-bottom: 1.4em; }

.scinov-article-body > p:first-of-type::first-letter {
    float: left; font-size: 3.6em; line-height: .85;
    padding: .06em .12em 0 0; font-weight: 800; color: var(--sn-orange);
}

.scinov-article-body h2, .scinov-article-body h3, .scinov-article-body h4 {
    color: var(--sn-navy); line-height: 1.25; letter-spacing: -.01em;
    margin-top: 2em; margin-bottom: .6em; scroll-margin-top: 90px;
}
.scinov-article-body h2 { font-size: 1.65em; padding-left: 16px; border-left: 5px solid var(--sn-orange); }
.scinov-article-body h3 { font-size: 1.3em; }
.scinov-article-body h4 { font-size: 1.05em; color: var(--sn-green); text-transform: uppercase; letter-spacing: .07em; }

.scinov-article-body a {
    color: var(--sn-navy); font-weight: 600; text-decoration: underline;
    text-decoration-color: var(--sn-orange); text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.scinov-article-body a:hover { color: var(--sn-orange); }

.scinov-article-body ul, .scinov-article-body ol { padding-left: 1.5em; }
.scinov-article-body li { margin-bottom: .55em; }
.scinov-article-body ul li::marker { color: var(--sn-orange); }
.scinov-article-body ol li::marker { color: var(--sn-green); font-weight: 800; }

.scinov-article-body blockquote {
    margin: 2em 0; padding: 24px 28px; background: var(--sn-green-soft);
    border-left: 5px solid var(--sn-green); border-radius: 0 16px 16px 0;
    color: var(--sn-navy-deep); font-size: 1.07em; font-style: italic;
}
.scinov-article-body blockquote p:last-child { margin-bottom: 0; }

.scinov-article-body img, .scinov-article-body video, .scinov-article-body iframe {
    max-width: 100%; height: auto; border-radius: 14px; display: block; margin-left: auto; margin-right: auto;
}
.scinov-article-body figure { margin-left: 0; margin-right: 0; }
.scinov-article-body figcaption { font-size: .88rem; color: var(--sn-muted); text-align: center; margin-top: 10px; }
.scinov-article-body hr {
    border: 0; height: 4px; width: 100px; margin: 2.6em auto; border-radius: 4px;
    background: linear-gradient(90deg, var(--sn-navy), var(--sn-orange), var(--sn-green));
}
.scinov-article-body table { width: 100%; border-collapse: collapse; font-size: .95em; display: block; overflow-x: auto; }
.scinov-article-body th { background: var(--sn-navy); color: #fff; text-align: left; }
.scinov-article-body th, .scinov-article-body td { padding: 10px 14px; border: 1px solid var(--sn-line); }
.scinov-article-body tr:nth-child(even) td { background: #f6f8fc; }

/* ---------- Share (inside the card, soft green) ---------- */
.scinov-article-share {
    margin: 36px clamp(22px, 5vw, 56px) clamp(24px, 4vw, 48px);
    padding: clamp(22px, 3vw, 32px); text-align: center;
    background: var(--sn-green-soft); border: 2px solid #cfe9d3; border-radius: 20px;
}
.scinov-article-share-heading { margin: 0 0 8px; font-size: 1.4rem; color: var(--sn-navy); }
.scinov-article-share-description { margin: 0 auto 20px; max-width: 48ch; color: var(--sn-muted); }
.scinov-article-share-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.scinov-article-share-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 17px;
    border-radius: 999px; border: 2px solid var(--sn-navy); background: #fff; color: var(--sn-navy);
    font: inherit; font-size: .9rem; font-weight: 700; text-decoration: none; cursor: pointer;
    transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.scinov-article-share-btn:hover, .scinov-article-share-btn:focus-visible {
    transform: translateY(-2px); background: var(--sn-navy); color: #fff; outline: none;
}
.scinov-article-share-btn.scinov-share-native { background: var(--sn-orange); border-color: var(--sn-orange); color: #fff; }
.scinov-article-share-btn.scinov-share-native:hover { background: var(--sn-green); border-color: var(--sn-green); }
.scinov-article-share-status { display: block; min-height: 1.4em; margin-top: 14px; font-size: .9rem; color: var(--sn-green); font-weight: 600; }

/* ---------- Right column: solid navy sidebar ---------- */
.scinov-article-sidebar { position: sticky; top: 24px; }
.scinov-article-sidebar-card {
    background: var(--sn-navy); color: #fff; border-radius: 26px;
    padding: 30px 24px 26px; position: relative; overflow: hidden;
    background-image:
        radial-gradient(circle at 100% 0, rgba(242,106,27,.45), transparent 48%),
        radial-gradient(rgba(255,255,255,.11) 1.6px, transparent 2px);
    background-size: auto, 16px 16px;
    box-shadow: 0 28px 60px -34px rgba(11,23,69,.7);
}
.scinov-article-sidebar-card::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px;
    background: linear-gradient(90deg, var(--sn-green) 0 50%, var(--sn-orange) 50% 100%);
}
.scinov-article-sidebar-heading { margin: 0; font-size: 1.4rem; color: #fff; }
.scinov-article-sidebar-heading::after {
    content: ""; display: block; width: 48px; height: 4px; margin-top: 10px;
    border-radius: 4px; background: var(--sn-orange);
}
.scinov-article-sidebar-subtitle { font-size: .92rem; color: rgba(255,255,255,.78); line-height: 1.6; margin: 14px 0 20px; }
.scinov-article-related-list { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; }
/* Styles whatever get_latest_bog_items_columnV5() outputs */
.scinov-article-related-list a {
    display: block; padding: 13px 16px; border-radius: 14px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
    color: #fff; font-weight: 600; font-size: .95rem; line-height: 1.4; text-decoration: none;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.scinov-article-related-list a:hover { background: var(--sn-orange); border-color: var(--sn-orange); transform: translateX(4px); }
.scinov-article-related-list img { max-width: 100%; height: auto; border-radius: 10px; margin-bottom: 8px; }

/* ---------- Responsive / print ---------- */
@media (max-width: 980px) {
    .scinov-article-layout { grid-template-columns: minmax(0, 1fr) 270px; gap: 20px; }
}
@media (max-width: 820px) {
    .scinov-article-layout { grid-template-columns: 1fr; }
    .scinov-article-sidebar { position: static; }
}
@media (max-width: 560px) {
    .scinov-article-main, .scinov-article-sidebar-card { border-radius: 20px; }
    .scinov-article-share-btn { flex: 1 1 calc(50% - 10px); justify-content: center; }
    .scinov-article-body > p:first-of-type::first-letter { font-size: 3em; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print {
    .scinov-read-progress, .scinov-article-share, .scinov-article-sidebar { display: none; }
    .scinov-article-layout { display: block; }
    .scinov-article-main { box-shadow: none; }
}