/* ==========================================================================
   Univik Blog styles  -  /assets/css/blog.css
   Layered on top of bootstrap.min.css + style.css.
   Load order in each blog page: bootstrap -> style -> blog.
   Only blog specific components live here. Buttons, cards, accordion,
   grid and colour helpers come from the existing style.css.
   ========================================================================== */

:root{
  --blog-ink:#1e293b;
  --blog-body:#334155;
  --blog-muted:#64748b;
  --blog-line:#e2e8f0;
  --blog-green:#2da876;  --blog-green-d:#065f46;  --blog-green-l:#ecfdf5;  --blog-green-b:#a7f3d0;
  --blog-blue:#2563eb;   --blog-blue-d:#1e40af;   --blog-blue-l:#eff6ff;   --blog-blue-b:#bfdbfe;
  --blog-amber:#f59e0b;  --blog-amber-d:#92400e;  --blog-amber-l:#fffbeb;  --blog-amber-b:#fde68a;
  --blog-red:#b91c1c;    --blog-red-l:#fef2f2;    --blog-red-b:#fecaca;
  --blog-brand:#e11f26;
}

/* ---- Reading progress bar (top of page) ---- */
.read-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--blog-green);z-index:1080;transition:width .1s linear}

/* ---- Hero / masthead ---- */
.blog-hero{background:#fff;box-shadow:none}
.blog-cat{display:inline-block;background:#fde8e9;color:var(--blog-brand);font-weight:700;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;padding:5px 14px;border-radius:999px;text-decoration:none}
.blog-cat:hover{background:#fbd5d7;color:var(--blog-brand)}
.blog-title{font-weight:800;color:var(--blog-ink);line-height:1.18;font-size:clamp(1.7rem,4vw,2.6rem)}
.blog-meta{color:var(--blog-muted);font-size:.95rem}
.blog-meta .author-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover}
.blog-meta strong{color:var(--blog-ink)}
.blog-featured{margin-top:6px}
.blog-featured img{width:100%;height:auto;border-radius:16px;border:1px solid rgba(30,41,59,.10)}

/* ---- Article typography ---- */
.blog-content{font-size:1.08rem;line-height:1.78;color:#1f2937;font-weight:400;letter-spacing:.001em}
.blog-content h2{font-size:clamp(1.4rem,2.4vw,1.7rem);font-weight:800;color:var(--blog-ink);margin:2.8rem 0 .85rem;padding-bottom:.45rem;border-bottom:2px solid var(--blog-line);scroll-margin-top:90px}
.blog-content h3{font-size:1.26rem;font-weight:700;color:var(--blog-ink);margin:1.9rem 0 .6rem;scroll-margin-top:90px}
.blog-content p{margin:0 0 1.15rem}
.blog-content ul,.blog-content ol{margin:0 0 1.25rem 1.25rem;padding:0}
.blog-content li{margin-bottom:.5rem}
.blog-content a{color:var(--blog-blue);text-decoration:underline;text-underline-offset:2px}
.blog-content a:hover{color:var(--blog-blue-d)}
.blog-content img{max-width:100%;height:auto}
.blog-content code{background:#f1f5f9;border-radius:5px;padding:.12em .4em;font-size:.9em;color:#0f172a;overflow-wrap:anywhere}
.blog-content pre{background:#0f172a;color:#e2e8f0;border-radius:12px;padding:16px 18px;overflow:auto;margin:0 0 1.25rem;font-size:.9rem;line-height:1.6}
.blog-content pre code{background:none;color:inherit;padding:0}
.blog-content>*:first-child{margin-top:0}
.blog-content strong{font-weight:700;color:var(--blog-ink)}
.blog-content mark{background:linear-gradient(180deg,transparent 42%,#fde68a 42%);color:inherit;padding:0 .15em;border-radius:3px}

/* ---- Quick answer box ---- */
.quick-answer{background:var(--blog-green-l);border:1px solid var(--blog-green-b);border-radius:14px;padding:20px 22px;margin:0 0 28px}
.quick-answer .qa-label{display:block;font-weight:800;color:var(--blog-green-d);text-transform:uppercase;font-size:.78rem;letter-spacing:.05em;margin-bottom:6px}
.quick-answer p{margin:0}

/* ---- Callouts (tip / warning / info / key) ---- */
.callout{border-radius:12px;padding:16px 18px;margin:26px 0;border:2px solid var(--blog-muted);background:#f8fafc}
.callout .callout-title{font-weight:700;margin-bottom:4px}
.callout p:last-child{margin-bottom:0}
.callout-tip{border-color:var(--blog-green);background:var(--blog-green-l)} .callout-tip .callout-title{color:var(--blog-green-d)}
.callout-info{border-color:var(--blog-blue);background:var(--blog-blue-l)} .callout-info .callout-title{color:var(--blog-blue-d)}
.callout-warning{border-color:var(--blog-amber);background:var(--blog-amber-l)} .callout-warning .callout-title{color:var(--blog-amber-d)}
.callout-danger{border-color:var(--blog-red);background:var(--blog-red-l)} .callout-danger .callout-title{color:var(--blog-red)}

/* ---- Figures / infographics ---- */
.blog-figure{margin:28px 0;text-align:center}
.blog-figure .fig-inner{display:inline-block;background:#fff;padding:10px;border:1px solid rgba(30,41,59,.14);border-radius:14px;box-shadow:0 4px 16px rgba(30,41,59,.08);max-width:100%}
.blog-figure .fig-inner img{display:block;max-width:100%;height:auto;border-radius:8px}
.blog-figcaption{font-size:.92rem;color:var(--blog-muted);font-style:italic;margin-top:10px}

/* ---- Info card grid (reusable point cards) ---- */
.blog-cards{display:flex;flex-wrap:wrap;gap:14px;margin:24px 0}
.blog-cards .bcard{flex:1 1 240px;min-width:220px;border:1px solid var(--blog-line);border-radius:14px;padding:18px 20px;background:#fff}
.blog-cards .bcard .bcard-title{font-weight:700;color:var(--blog-ink);margin-bottom:6px}
.blog-cards .bcard.is-green{border-color:var(--blog-green-b);background:var(--blog-green-l)}
.blog-cards .bcard.is-blue{border-color:var(--blog-blue-b);background:var(--blog-blue-l)}
.blog-cards .bcard.is-amber{border-color:var(--blog-amber-b);background:var(--blog-amber-l)}
.blog-cards .bcard.is-red{border-color:var(--blog-red-b);background:var(--blog-red-l)}

/* ---- Video embed (responsive 16:9) ---- */
.video-wrap{position:relative;width:100%;aspect-ratio:16/9;margin:26px 0;border-radius:14px;overflow:hidden;box-shadow:0 6px 20px rgba(30,41,59,.12);background:#000}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---- Numbered step list ---- */
.step-list{list-style:none;counter-reset:step;padding-left:0;margin:24px 0}
.step-list>li{position:relative;padding:2px 0 20px 56px;counter-increment:step;margin:0}
.step-list>li::before{content:counter(step);position:absolute;left:0;top:0;width:38px;height:38px;background:var(--blog-green);color:#fff;font-weight:700;border-radius:50%;display:flex;align-items:center;justify-content:center}
.step-list>li:not(:last-child)::after{content:"";position:absolute;left:18px;top:42px;bottom:0;width:2px;background:var(--blog-line)}
.step-list .step-title{font-weight:700;color:var(--blog-ink);display:block;margin-bottom:2px}

/* ---- Pull quote ---- */
.pullquote{border:2px solid var(--blog-green);border-radius:12px;padding:16px 20px;margin:28px 0;font-size:1.28rem;font-weight:600;color:var(--blog-ink);font-style:italic;line-height:1.5;background:var(--blog-green-l)}

/* ---- Comparison / data tables ---- */
.blog-content .blog-table{width:100%;border-collapse:collapse;margin:24px 0;font-size:.97rem}
.blog-content .blog-table thead th{background:var(--blog-blue-d);color:#fff !important;text-align:left;padding:11px 14px;border:1px solid var(--blog-blue-d)}
.blog-content .blog-table tbody td{border:1px solid var(--blog-line);padding:10px 14px;vertical-align:top}
.blog-content .blog-table tbody tr:nth-child(even){background:#f8fafc}
.table-scroll{overflow-x:auto}

/* ---- Product CTA block ---- */
.blog-cta{background:var(--blog-green-l);border:1px solid var(--blog-green-b);border-radius:16px;padding:28px 26px;margin:32px 0;text-align:center}
.blog-cta .cta-h{font-weight:800;color:var(--blog-green-d);font-size:1.2rem;margin-bottom:8px}
.blog-cta p{color:var(--blog-body);margin-bottom:18px}
/* CTA buttons: explicit normal + hover so .blog-content a cannot repaint them */
.blog-content .btn{text-decoration:none !important;display:inline-flex;align-items:center;justify-content:center;min-height:46px;line-height:1.2;box-sizing:border-box;font-weight:700;border-radius:8px;transition:background .15s,color .15s,border-color .15s}
.blog-content .btn_green{background:#2da876 !important;border:2px solid #2da876;color:#fff !important}
.blog-content .btn_green:hover{background:#249066 !important;border-color:#249066;color:#fff !important}
.blog-content .btn_red_outline{background:#fff !important;border:2px solid #dc3545;color:#dc3545 !important}
.blog-content .btn_red_outline:hover{background:#dc3545 !important;border-color:#dc3545;color:#fff !important}
@media (max-width:575.98px){.blog-cta .btn{width:100%}.blog-cta .btn.ms-2{margin-left:0 !important;margin-top:10px}}

/* ---- Sidebar (TOC + widgets) ---- */
.blog-sidebar{position:sticky;top:88px}
.side-box{background:#f8fafc;border:1px solid var(--blog-line);border-radius:14px;padding:20px 22px;margin-bottom:20px}
.side-box .side-title{font-weight:800;color:var(--blog-green-d);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid var(--blog-green-b)}
.toc-list{list-style:none;padding:0;margin:0;counter-reset:toc}
.toc-list li{margin-bottom:0;line-height:1.4;counter-increment:toc}
.toc-list a{color:var(--blog-muted);text-decoration:none;font-size:.92rem;display:flex;gap:9px;align-items:baseline;padding:6px 8px;border-radius:8px}
.toc-list a::before{content:counter(toc);font-weight:700;font-size:.78rem;color:var(--blog-green-d);min-width:17px;text-align:right}
.toc-list a:hover{color:var(--blog-green-d);background:var(--blog-green-l)}
.toc-list a.active{color:var(--blog-green-d);font-weight:700;background:var(--blog-green-l)}
.toc-list a.active::before{color:var(--blog-green-d)}
.side-cta{background:linear-gradient(160deg,#065f46,#2da876);color:#fff;border:none}
.side-cta .side-title,.side-cta p{color:#fff}
.side-cta p{font-size:.95rem;margin-bottom:14px}
.side-cta .btn{background:#fff !important;color:var(--blog-green-d) !important;border:none;font-weight:700}
.side-cta .btn:hover{background:var(--blog-green-l) !important;color:var(--blog-green-d) !important}
.side-cta .btn svg use{fill:var(--blog-green-d)}

/* ---- Related posts ---- */
.related-card{display:block;background:#fff;border:1px solid var(--blog-line);border-radius:12px;padding:13px 15px;margin-bottom:12px;text-decoration:none;color:var(--blog-ink);transition:border-color .15s,box-shadow .15s}
.related-card:hover{border-color:var(--blog-green);box-shadow:0 4px 14px rgba(30,41,59,.08);color:var(--blog-ink)}
.related-card .rc-cat{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--blog-brand);font-weight:700}
.related-card .rc-title{font-weight:600;font-size:.98rem;line-height:1.35;margin-top:2px}

/* ---- FAQ accordion (Q and A treatment) ---- */
.blog-content .accordion-item{border:1px solid var(--blog-line);border-radius:12px;margin-bottom:12px;overflow:hidden;background:#fff}
.blog-content .accordion-item:first-of-type,.blog-content .accordion-item:last-of-type{border-radius:12px}
.blog-content .accordion-header{margin:0}
.blog-content .accordion-button{font-weight:700;color:var(--blog-ink);background:#fff;padding:16px 18px;gap:12px;box-shadow:none}
.blog-content .accordion-button::after{margin-left:auto}
.blog-content .accordion-button:not(.collapsed){background:var(--blog-green-l);color:var(--blog-green-d);box-shadow:none}
.blog-content .accordion-button:focus{box-shadow:none;border-color:var(--blog-green-b)}
.blog-content .accordion-button .faq-q{flex-shrink:0;width:28px;height:28px;border-radius:8px;background:var(--blog-green-d);color:#fff;font-weight:800;font-size:.85rem;display:inline-flex;align-items:center;justify-content:center}
.blog-content .accordion-body{background:#f8fafc;border-top:2px solid var(--blog-green-b);padding:16px 18px;display:flex;gap:12px;align-items:flex-start;font-size:1.02rem}
.blog-content .accordion-body::before{content:"A";flex-shrink:0;width:28px;height:28px;border-radius:8px;background:var(--blog-blue-d);color:#fff;font-weight:800;font-size:.85rem;display:inline-flex;align-items:center;justify-content:center}

/* ---- Author box ---- */
.author-box{background:#f8fafc;border:1px solid var(--blog-line);border-radius:16px;padding:24px;margin:38px 0 0;display:flex;gap:18px;align-items:flex-start}
.author-box .author-avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;flex-shrink:0}
.author-box .author-name{font-weight:800;color:var(--blog-ink)}
.author-box p{margin:.4rem 0 0;font-size:.97rem;color:var(--blog-body)}

/* ---- Back to top ---- */
.back-top{position:fixed;right:20px;bottom:24px;width:46px;height:46px;border-radius:50%;background:var(--blog-green);color:#fff;border:none;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(6,95,70,.35);opacity:0;visibility:hidden;transform:translateY(10px);transition:.2s;z-index:1050;cursor:pointer}
.back-top.show{opacity:1;visibility:visible;transform:translateY(0)}

/* ---- Responsive ---- */
@media (max-width:991.98px){
  .blog-sidebar{position:static;top:auto;margin-top:34px}
}

/* ===================== Blog index (listing + pagination) ===================== */
/* Reuses site tokens (brand red pill, blog-title clamp, related-card DNA, green accents)
   so the listing belongs to the same system as the article pages. */
.blog-index-hero{background:#fff}
.blog-lede{color:var(--blog-muted);font-size:1.1rem;line-height:1.7;max-width:640px;margin:14px auto 0}
.blog-search{max-width:540px;margin:24px auto 0;position:relative}
.blog-search input{width:100%;padding:.85rem 1rem .85rem 2.7rem;border:1px solid var(--blog-line);border-radius:10px;font-size:1rem;color:var(--blog-ink);background:#fff;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}
.blog-search input:focus{outline:none;border-color:var(--blog-green);box-shadow:0 0 0 3px rgba(45,168,118,.13)}
.blog-search svg{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--blog-muted)}
.blog-count{text-align:center;color:var(--blog-muted);font-size:.88rem;margin:16px 0 0}

.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:8px 0 0}
@media (max-width:991.98px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:575.98px){.post-grid{grid-template-columns:1fr}}
.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--blog-line);border-radius:14px;padding:20px 22px;text-decoration:none;color:var(--blog-ink);transition:border-color .15s,box-shadow .15s,transform .15s}
.post-card:hover{border-color:var(--blog-green);box-shadow:0 6px 18px rgba(30,41,59,.08);transform:translateY(-2px)}
.post-card .pc-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:11px;flex-wrap:wrap}
.post-card .pc-cat{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--blog-brand);font-weight:700}
.post-card .pc-read{font-size:.8rem;color:var(--blog-muted);white-space:nowrap}
.post-card .pc-title{font-weight:700;font-size:1.14rem;line-height:1.4;color:var(--blog-ink);margin:0 0 14px}
.post-card:hover .pc-title{color:var(--blog-green-d)}
.post-card .pc-meta{margin-top:auto;font-size:.85rem;color:var(--blog-muted)}
.post-empty{grid-column:1/-1;text-align:center;color:var(--blog-muted);padding:2.5rem 0}

.blog-pagination{display:flex;justify-content:center;align-items:center;gap:.4rem;flex-wrap:wrap;margin:40px 0 8px;padding:0;list-style:none}
.blog-pagination a,.blog-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 .8rem;border-radius:9px;font-weight:600;font-size:.92rem;text-decoration:none;box-sizing:border-box}
.blog-pagination a{color:var(--blog-body);border:1px solid var(--blog-line);background:#fff;transition:border-color .15s,color .15s,background .15s}
.blog-pagination a:hover{border-color:var(--blog-green);color:var(--blog-green-d);background:var(--blog-green-l)}
.blog-pagination .is-current{background:var(--blog-green);color:#fff;border:1px solid var(--blog-green)}
.blog-pagination .is-gap{border:none;min-width:auto;padding:0 .25rem;color:var(--blog-muted)}
.blog-pagination .pg-edge{font-weight:700}
@media (max-width:575.98px){.blog-pagination .pg-edge-label{display:none}.blog-pagination a,.blog-pagination span{min-width:38px;height:38px;padding:0 .55rem}}