/* ===========================================================
BadanFit — Blog article pages
Load AFTER supplement.css:
Maps the old blog classes onto the supplement design tokens.
=========================================================== */
/* ---------- Plain wrappers (no double boxes) ---------- */
.blog-details-text .secondary-info-box,
.blog-details-text .blog-intro{
background:none;border:0;padding:0;margin:0;border-radius:0;
}
.blog-details-text > section{margin:0;}
/* ---------- Callout boxes → supplement callout look ---------- */
.term-box,.green-note-box,.info-box,.research-box,.references-box{
background:var(--art-surface);border:1px solid var(--art-border);
border-inline-start:4px solid var(--art-green-bright);
border-radius:12px;padding:18px 20px;margin:24px 0;
color:var(--art-muted);direction:rtl;text-align:right;
}
.research-box{border-inline-start-color:#5fa8d3;}
.term-box p,.green-note-box p,.info-box p,.research-box p,.references-box p{color:var(--art-muted);}
.term-box>*:last-child,.green-note-box>*:last-child,.info-box>*:last-child,
.research-box>*:last-child,.references-box>*:last-child,
.callout-green-box>*:last-child{margin-bottom:0;}
/* box titles (p.term-title / p.note-title / p.toc-title) */
.blog-details-text .term-title,
.blog-details-text .note-title,
.blog-details-text .toc-title{
font-size:17px;font-weight:700;color:var(--art-green-bright);margin:0 0 10px;
}
.blog-details-text .warning-box .note-title{color:#e07a5f;}
.blog-details-text .research-box .term-title,
.blog-details-text .research-box h5{color:#5fa8d3;}
/* ---------- Data tables → supplement table look ---------- */
.table-wrap{margin:22px 0;overflow-x:auto;border-radius:12px;}
.data-table{width:100%;border-collapse:collapse;font-size:15px;color:var(--art-text);}
.data-table caption{
caption-side:top;text-align:right;color:var(--art-muted);
font-size:13px;padding:0 0 10px;
}
.data-table th,
.data-table td{
padding:14px 16px;text-align:start;vertical-align:top;
border:0;border-bottom:1px solid var(--art-border);
}
.data-table thead th{background:var(--art-surface-2);color:#fff;font-weight:700;}
.data-table tbody tr{background:var(--art-surface);}
.data-table tbody tr:hover{background:var(--art-surface-2);}
.blog-details-text .data-table td,
.blog-details-text .data-table th{font-size:15px;line-height:1.8;}
.verdict-good{color:var(--art-green-bright);font-weight:700;}
.verdict-mid{color:#f2c94c;font-weight:700;}
.verdict-bad{color:#e07a5f;font-weight:700;}
/* ---------- References block ---------- */
.blog-details-text .refs-aside p{font-size:13px;color:var(--art-muted);margin:14px 0 0;}
.blog-details-text .refs-aside .references-list{margin:0;}
/* ---------- FAQ marker (fixes broken glyph in supplement.css) ---------- */
.blog-details-text .faq-item h3::before{content:"\061F";}
/* ---------- Preloader (old blog pages) — hidden ---------- */
#preloader{display:none!important;}
/* ---------- Video cards ---------- */
.bf-video-card{margin:26px 0;}
.bf-video-wrap{
position:relative;width:100%;aspect-ratio:16/9;background:var(--art-surface);
border:1px solid var(--art-border);border-radius:var(--art-radius);overflow:hidden;
}
.bf-video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;background:var(--art-surface);}
.bf-video-cover{
position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;
cursor:pointer;background:transparent;display:block;transition:opacity .3s,visibility .3s;
}
.bf-video-cover-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;}
.bf-video-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,26,.1) 0%,rgba(10,14,26,.65) 100%);}
.bf-video-play{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
width:74px;height:74px;border-radius:50%;background:var(--art-green-bright);
box-shadow:0 6px 24px rgba(208,242,82,.35);transition:transform .25s,box-shadow .25s;
}
.bf-video-play::before{
content:"";position:absolute;top:50%;left:50%;transform:translate(-40%,-50%);
border-style:solid;border-width:14px 0 14px 23px;border-color:transparent transparent transparent var(--art-bg);
}
.bf-video-cover:hover .bf-video-play,
.bf-video-cover:focus-visible .bf-video-play{transform:translate(-50%,-50%) scale(1.08);box-shadow:0 8px 30px rgba(208,242,82,.5);}
.bf-video-cover:focus-visible{outline:2px solid var(--art-green-bright);outline-offset:3px;}
.bf-video-label{
position:absolute;left:0;right:0;bottom:16px;z-index:2;color:#fff;
font-size:14px;font-weight:600;text-align:center;text-shadow:0 2px 6px rgba(0,0,0,.6);
}
.bf-video-wrap.is-playing .bf-video-cover{opacity:0;visibility:hidden;pointer-events:none;}
.blog-details-text .bf-video-caption{margin-top:10px;color:var(--art-muted);font-size:13px;text-align:center;line-height:1.8;}
.blog-details-text .bf-video-caption p{color:var(--art-muted);font-size:13px;text-align:center;margin:0;}
@media (max-width:576px){
.bf-video-play{width:58px;height:58px;}
.bf-video-play::before{border-width:11px 0 11px 18px;}
.bf-video-label{font-size:12px;bottom:10px;}
}
/* ---------- selenium-table → same look as data-table ---------- */
.selenium-table{width:100%;border-collapse:collapse;font-size:15px;color:var(--art-text);margin:22px 0;}
.selenium-table th,
.selenium-table td{padding:14px 16px;text-align:start;vertical-align:top;border:0;border-bottom:1px solid var(--art-border);}
.selenium-table thead th{background:var(--art-surface-2);color:#fff;font-weight:700;}
.selenium-table tbody tr{background:var(--art-surface);}
.selenium-table tbody tr:hover{background:var(--art-surface-2);}
.blog-details-text .selenium-table td,
.blog-details-text .selenium-table th{font-size:15px;line-height:1.8;}
/* ---------- Quote box ---------- */
.blog-details-quote{
position:relative;background:var(--art-surface);border:1px solid var(--art-border);
border-inline-start:4px solid var(--art-green-bright);border-radius:12px;
padding:20px 22px;margin:24px 0;direction:rtl;text-align:right;
}
.blog-details-quote .quote-icon{margin-bottom:10px;}
.blog-details-quote .quote-icon img{width:28px;height:auto;opacity:.6;display:block;}
.blog-details-text .blog-details-quote p{color:var(--art-text);font-size:17px;font-style:italic;margin:0 0 10px;}
.blog-details-quote span{color:var(--art-green-bright);font-size:14px;font-weight:700;}
/* ---------- Bootstrap row/col cards → related-card grid ---------- */
.blog-details-text .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:18px 0 24px;}
.blog-details-text .row>[class*="col-"]{width:auto;max-width:none;padding:0;}
.blog-details-text .row .callout-green-box{
height:100%;margin:0;background:var(--art-surface);border:1px solid var(--art-border);
transition:transform .2s,border-color .2s;
}
.blog-details-text .row .callout-green-box:hover{border-color:var(--art-green);}
.blog-details-text .row .callout-green-box h3{font-size:16px;margin:0 0 10px;}
.blog-details-text .row .callout-green-box p{font-size:14px;line-height:1.8;margin:0 0 12px;}
.blog-details-text .row .callout-green-box a{font-weight:700;border:0;}
/* ---------- Breadcrumb links green ---------- */
.breadcrumb-item a{color:var(--art-green);}
/* ---------- Title that is not an (p.hero-title role=heading) ---------- */
.article-body .article-title{
font-size:clamp(28px,4vw,40px);font-weight:900;line-height:1.35;
color:#fff;margin:0 0 18px;padding:0;border:0;direction:rtl;text-align:right;
}
/* ---------- Visually-hidden SEO heading ---------- */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}
/* ---------- green-info-box → callout ---------- */
.green-info-box{
background:var(--art-surface);border:1px solid var(--art-border);
border-inline-start:4px solid var(--art-green-bright);border-radius:12px;
padding:18px 20px;margin:24px 0;color:var(--art-muted);direction:rtl;text-align:right;
}
.blog-details-text .green-info-box p{color:var(--art-text);margin:0;}
.green-info-box strong{color:var(--art-green-bright);}
/* ---------- AI chat call-to-action ---------- */
.ai-chat-cta{
background:var(--art-surface);border:1px solid var(--art-border);border-radius:var(--art-radius);
padding:30px 22px;margin:32px 0;text-align:center;
}
.blog-details-text .ai-chat-cta h2{border:0;padding:0;margin:0 0 16px;text-align:center;font-size:22px;}
.blog-details-text .ai-chat-cta p{color:var(--art-muted);text-align:center;max-width:680px;margin:0 auto 22px;}
.blog-details-text .ai-chat-cta a{
display:inline-block;background:var(--art-green-bright);color:var(--art-bg);border:0;
padding:14px 34px;border-radius:10px;font-weight:700;font-size:16px;
box-shadow:0 4px 18px rgba(208,242,82,.25);transition:transform .2s,box-shadow .2s;
}
.blog-details-text .ai-chat-cta a:hover{color:var(--art-bg);transform:translateY(-2px);box-shadow:0 6px 24px rgba(208,242,82,.4);}
/* ---------- bf-faq accordion (kept clickable) ---------- */
.bf-faq{margin:40px 0;direction:rtl;text-align:right;}
.bf-faq-item{
background:var(--art-surface);border:1px solid var(--art-border);
border-radius:12px;margin-bottom:14px;overflow:hidden;
}
.bf-faq-q{
width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;
background:transparent;border:0;padding:18px 20px;cursor:pointer;direction:rtl;text-align:right;
color:#fff;font-family:inherit;font-size:17px;font-weight:800;
}
.bf-faq-q:hover{color:var(--art-green-bright);}
.bf-faq-q:focus-visible{outline:2px solid var(--art-green-bright);outline-offset:-2px;}
.bf-faq-icon{color:var(--art-green-bright);font-size:20px;flex-shrink:0;transition:transform .3s;}
.bf-faq-item.active .bf-faq-icon{transform:rotate(45deg);}
.bf-faq-a{max-height:0;overflow:hidden;padding:0 20px;transition:max-height .35s ease;}
.bf-faq-item.active .bf-faq-a{max-height:800px;padding-bottom:18px;}
.blog-details-text .bf-faq-a p{color:var(--art-muted);font-size:15px;line-height:1.85;margin:0;}
/* ---------- Plain tables (no class, inline styles removed) → data-table look ---------- */
.blog-details-text table:not([class]){width:100%;border-collapse:collapse;font-size:15px;color:var(--art-text);margin:0;}
.blog-details-text table:not([class]) th,
.blog-details-text table:not([class]) td{
padding:14px 16px;text-align:start;vertical-align:top;line-height:1.8;font-size:15px;
border:0;border-bottom:1px solid var(--art-border);
}
.blog-details-text table:not([class]) thead th{background:var(--art-surface-2);color:#fff;font-weight:700;}
.blog-details-text table:not([class]) tbody tr{background:var(--art-surface);}
.blog-details-text table:not([class]) tbody tr:hover{background:var(--art-surface-2);}
.blog-details-text table:not([class]) td:first-child{color:#fff;font-weight:600;}
/* ---------- Custom inline video players (div overlay) ---------- */
.bf-video-play>span{display:none;}
.blog-details-text .bf-video-card>p{color:var(--art-muted);font-size:13px;text-align:center;margin:10px 0 0;}
/* ---------- Old in-article title block (.bh-text h1) → subtitle ---------- */
.blog-details-text .bh-text h1{
font-size:clamp(20px,2.4vw,24px);font-weight:800;line-height:1.5;color:#fff;
margin:0 0 8px;padding:0;border:0;text-align:right;
}
.blog-details-text .row:has(> [class*="col-"] > .bh-text){display:block;margin:0 0 10px;}
/* ---------- comparison-box / comparison-item → compare cards ---------- */
.comparison-box{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:22px 0;}
.comparison-item{background:var(--art-surface-2);border:1px solid var(--art-border);border-radius:12px;padding:18px 20px;}
.blog-details-text .comparison-item h3{margin-top:0;font-size:17px;}
.comparison-item>*:last-child{margin-bottom:0;}
.blog-details-text .comparison-item li{font-size:15px;}
/* ---------- comparison cards: one per row (contents differ a lot in length) ---------- */
.comparison-box{grid-template-columns:1fr;}