/* ==========================================================================
   WEBZELIA: Blog article styles
   Every class starts with "bl-" so nothing clashes with web.css or
   custom-websites.css. Load order: web.css first, then this file.
   ========================================================================== */

.bl-wrap{ max-width:1220px; margin:0 auto; padding:0 24px; }

/* ---------- Reading progress bar ---------- */
.bl-progress{ position:fixed; top:0; left:0; width:100%; height:4px; z-index:1000; background:transparent; pointer-events:none; }
.bl-progress span{ display:block; height:100%; width:0; background:linear-gradient(90deg, var(--blue), var(--sky)); transition:width .1s linear; }

/* ---------- Article hero ---------- */
.bl-hero{ background:var(--paper); border-bottom:1px solid var(--border); padding:56px 0 0; }
.bl-crumbs{ font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-soft); margin-bottom:20px; }
.bl-crumbs a{ color:var(--blue); }
.bl-crumbs a:hover{ text-decoration:underline; }
.bl-hero-text{ max-width:860px; }
.bl-cat{ display:inline-block; font-family:var(--font-mono); font-size:.74rem; color:var(--blue); background:var(--tint); border:1px solid var(--border); padding:6px 14px; border-radius:20px; margin-bottom:18px; }
.bl-hero h1{ font-family:var(--font-display); font-size:clamp(2rem,4.4vw,3.3rem); font-weight:600; color:var(--navy); line-height:1.12; margin-bottom:20px; }
.bl-excerpt{ font-size:var(--fs-md); color:var(--text-soft); line-height:var(--lh-loose); max-width:720px; margin-bottom:26px; }
.bl-meta{ display:flex; flex-wrap:wrap; gap:10px 26px; font-size:var(--fs-sm); color:var(--text-soft); padding-bottom:34px; }
.bl-meta span{ display:inline-flex; align-items:center; gap:8px; }
.bl-meta i{ color:var(--blue); }
.bl-cover{ margin-bottom:-1px; }
.bl-cover img{ width:100%; max-height:460px; aspect-ratio:21/9; object-fit:cover; border-radius:var(--radius-md) var(--radius-md) 0 0; border:1px solid var(--border); border-bottom:none; }

/* ---------- Layout ---------- */
.bl-main{ background:var(--bg); padding:64px 0 90px; }
.bl-layout{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:56px; align-items:start; }

/* ---------- Article body ---------- */
.bl-article{ min-width:0; max-width:760px; }
.bl-article h2{ font-family:var(--font-display); font-size:clamp(1.5rem,2.6vw,2rem); font-weight:600; color:var(--navy); line-height:1.2; margin:52px 0 16px; scroll-margin-top:100px; }
.bl-article h3{ font-family:var(--font-display); font-size:var(--fs-lg); font-weight:600; color:var(--navy); margin:30px 0 10px; }
.bl-article p{ font-size:1.06rem; color:var(--text); line-height:1.85; margin-bottom:20px; }
.bl-article ul, .bl-article ol{ margin:0 0 24px 0; padding-left:0; }
.bl-article li{ position:relative; font-size:1.02rem; color:var(--text); line-height:1.75; padding-left:28px; margin-bottom:12px; }
.bl-article ul li::before{ content:''; position:absolute; left:4px; top:.72em; width:8px; height:8px; border-radius:50%; background:var(--blue); }
.bl-article ol{ counter-reset:blitem; }
.bl-article ol li{ counter-increment:blitem; }
.bl-article ol li::before{ content:counter(blitem); position:absolute; left:0; top:.2em; width:22px; height:22px; border-radius:50%; background:var(--navy); color:#fff; font-size:.72rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.bl-article a{ color:var(--blue); font-weight:600; border-bottom:1px solid rgba(22,115,230,.3); }
.bl-article a:hover{ border-bottom-color:var(--blue); }
.bl-article strong{ color:var(--navy); }

.bl-takeaways{ background:var(--paper); border:1px solid var(--border); border-left:4px solid var(--blue); border-radius:var(--radius-md); padding:26px 28px; margin-bottom:34px; }
.bl-takeaways h2{ margin:0 0 14px !important; font-size:var(--fs-lg) !important; }
.bl-takeaways li{ margin-bottom:8px; }

.bl-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:28px 0 34px; }
.bl-stat{ background:var(--navy); border-radius:var(--radius-md); padding:22px 18px; text-align:center; }
.bl-stat strong{ display:block; font-family:var(--font-display); font-size:2rem; color:var(--sky) !important; line-height:1.1; margin-bottom:6px; }
.bl-stat span{ font-size:var(--fs-xs); color:rgba(255,255,255,.8); line-height:1.4; display:block; }

.bl-callout{ background:var(--tint); border:1px solid var(--border); border-radius:var(--radius-md); padding:22px 26px; margin:30px 0; }
.bl-callout p{ margin:0 !important; font-size:1rem !important; }
.bl-callout strong{ display:block; font-family:var(--font-display); font-size:var(--fs-md); margin-bottom:6px; }

.bl-table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--paper); margin:26px 0 30px; }
.bl-table{ width:100%; border-collapse:collapse; min-width:560px; }
.bl-table th, .bl-table td{ padding:15px 18px; text-align:left; font-size:var(--fs-sm); border-bottom:1px solid var(--border); vertical-align:top; line-height:1.55; }
.bl-table thead th{ background:var(--navy); color:#fff; font-family:var(--font-display); font-size:var(--fs-base); }
.bl-table tbody th{ color:var(--navy); font-weight:700; }
.bl-table td{ color:var(--text-soft); }
.bl-table tr:last-child th, .bl-table tr:last-child td{ border-bottom:none; }
.bl-good{ color:#176B57 !important; font-weight:700; }

.bl-checklist{ background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-md); padding:26px 28px; margin:26px 0 30px; }
.bl-checklist li{ padding-left:34px; margin-bottom:0; padding-top:11px; padding-bottom:11px; border-bottom:1px solid var(--border); }
.bl-checklist li:last-child{ border-bottom:none; }
.bl-checklist li::before{ content:'\f00c' !important; font-family:'Font Awesome 6 Free'; font-weight:900; background:var(--tint) !important; color:var(--blue); width:22px !important; height:22px !important; border-radius:6px !important; left:0 !important; top:13px !important; font-size:.65rem; display:flex; align-items:center; justify-content:center; }

/* ---------- Share row ---------- */
.bl-share{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:44px 0 0; padding:22px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.bl-share strong{ font-family:var(--font-display); color:var(--navy); margin-right:6px; }
.bl-share a, .bl-share button{
    width:40px; height:40px; border-radius:50%; border:1px solid var(--border) !important; background:var(--paper); color:var(--navy);
    display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:1rem; transition:all .25s;
}
.bl-share a:hover, .bl-share button:hover{ background:var(--blue); color:#fff; border-color:var(--blue) !important; transform:translateY(-2px); }
.bl-copied{ font-size:var(--fs-xs); color:#176B57; font-weight:700; opacity:0; transition:opacity .3s; }
.bl-copied.show{ opacity:1; }

/* ---------- FAQ ---------- */
.bl-faq{ display:flex; flex-direction:column; gap:10px; margin-top:22px; }
.bl-faq details{ border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--paper); overflow:hidden; }
.bl-faq summary{ list-style:none; cursor:pointer; padding:18px 52px 18px 20px; position:relative; font-family:var(--font-display); font-size:var(--fs-md); font-weight:600; color:var(--navy); }
.bl-faq summary::-webkit-details-marker{ display:none; }
.bl-faq summary::after{ content:'+'; position:absolute; right:18px; top:50%; transform:translateY(-50%); width:26px; height:26px; border-radius:50%; border:2px solid var(--navy); display:flex; align-items:center; justify-content:center; font-family:var(--font-body); font-size:1.1rem; line-height:1; color:var(--navy); }
.bl-faq details[open] summary::after{ content:'\2212'; background:var(--blue); border-color:var(--blue); color:#fff; }
.bl-faq details p{ padding:0 20px 20px; margin:0; font-size:var(--fs-sm); color:var(--text-soft); line-height:var(--lh-loose); }

/* ---------- Author box ---------- */
.bl-author{ display:flex; gap:20px; align-items:center; background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-md); padding:24px; margin-top:44px; }
.bl-author img{ width:76px; height:76px; border-radius:50%; object-fit:cover; background:var(--tint); flex-shrink:0; border:1px solid var(--border); }
.bl-author h3{ font-family:var(--font-display); font-size:var(--fs-md); color:var(--navy); margin:0 0 6px !important; }
.bl-author p{ font-size:var(--fs-sm) !important; color:var(--text-soft) !important; line-height:1.65 !important; margin:0 !important; }

/* ---------- Sidebar ---------- */
.bl-side{ position:sticky; top:100px; display:flex; flex-direction:column; gap:22px; }
.bl-card{ background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-md); padding:24px; }
.bl-card h3{ font-family:var(--font-display); font-size:var(--fs-md); color:var(--navy); margin-bottom:14px; font-weight:600; }
.bl-toc ol{ list-style:none; margin:0; padding:0; max-height:46vh; overflow-y:auto; }
.bl-toc li{ margin:0; }
.bl-toc a{ display:block; font-size:var(--fs-sm); color:var(--text-soft); padding:9px 12px; border-left:3px solid var(--border); line-height:1.4; transition:all .2s; }
.bl-toc a:hover{ color:var(--blue); }
.bl-toc a.active{ color:var(--navy); font-weight:700; border-left-color:var(--blue); background:var(--tint); }
.bl-toc-mobile{ display:none; background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-md); margin-bottom:28px; }
.bl-toc-mobile summary{ cursor:pointer; list-style:none; padding:16px 20px; font-family:var(--font-display); font-weight:600; color:var(--navy); }
.bl-toc-mobile summary::-webkit-details-marker{ display:none; }
.bl-toc-mobile ol{ list-style:none; padding:0 20px 16px; margin:0; }
.bl-toc-mobile a{ display:block; padding:8px 0; font-size:var(--fs-sm); color:var(--text-soft); border-bottom:1px solid var(--border); }

.bl-agency{ background:var(--navy); border-color:var(--navy); color:#fff; }
.bl-agency h3{ color:#fff; font-size:var(--fs-lg); margin-bottom:10px; }
.bl-agency > p{ font-size:var(--fs-sm); color:rgba(255,255,255,.8); line-height:1.7; margin-bottom:18px; }
.bl-contact-line{ display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-top:1px solid rgba(255,255,255,.15); font-size:var(--fs-sm); color:rgba(255,255,255,.88); line-height:1.5; }
.bl-contact-line i{ color:var(--sky); width:16px; margin-top:4px; }
.bl-contact-line a{ color:#fff; }
.bl-contact-line a:hover{ color:var(--sky); }
.bl-agency .bl-btn{ width:100%; justify-content:center; margin-top:16px; }

.bl-btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-body); font-weight:700; font-size:var(--fs-sm); padding:13px 26px; border-radius:40px; border:2px solid transparent; cursor:pointer; transition:transform .25s, background .25s, color .25s; }
.bl-btn--solid{ background:var(--blue); color:#fff; }
.bl-btn--solid:hover{ background:var(--blue-dark); transform:translateY(-3px); }
.bl-btn--line{ border-color:rgba(255,255,255,.5); color:#fff; }
.bl-btn--line:hover{ background:#fff; color:var(--navy); transform:translateY(-3px); }

.bl-mini-list li{ margin-bottom:12px; }
.bl-mini-list a{ display:flex; gap:12px; align-items:center; font-size:var(--fs-sm); font-weight:600; color:var(--navy); line-height:1.4; }
.bl-mini-list a:hover{ color:var(--blue); }
.bl-mini-list i{ color:var(--blue); }

/* ---------- Related articles ---------- */
.bl-related{ background:var(--paper); border-top:1px solid var(--border); padding:80px 0; }
.bl-related h2{ font-family:var(--font-display); font-size:var(--fs-section); font-weight:600; color:var(--navy); margin-bottom:36px; }
.bl-related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.bl-post{ display:flex; flex-direction:column; background:var(--bg); border:1px solid var(--border); border-top:3px solid var(--blue); border-radius:var(--radius-sm); overflow:hidden; transition:transform .3s, box-shadow .3s; }
.bl-post:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.bl-post img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.bl-post-body{ padding:20px 22px 24px; }
.bl-post small{ display:block; font-family:var(--font-mono); font-size:.7rem; color:var(--blue); margin-bottom:8px; }
.bl-post h3{ font-family:var(--font-display); font-size:var(--fs-md); color:var(--navy); line-height:1.3; margin-bottom:8px; font-weight:600; }
.bl-post p{ font-size:var(--fs-sm); color:var(--text-soft); line-height:1.6; }

/* ---------- Free audit contact section ---------- */
.bl-audit{ background:var(--bg); padding:90px 0; border-top:1px solid var(--border); }
.bl-audit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.bl-tag{ display:inline-block; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--blue); margin-bottom:14px; }
.bl-audit h2{ font-family:var(--font-display); font-size:var(--fs-section); font-weight:600; color:var(--navy); line-height:1.15; margin-bottom:16px; }
.bl-audit-info > p{ font-size:var(--fs-md); color:var(--text-soft); line-height:var(--lh-loose); margin-bottom:26px; max-width:500px; }
.bl-ticks li{ display:flex; gap:12px; align-items:flex-start; padding:9px 0; font-size:var(--fs-sm); color:var(--text); }
.bl-ticks i{ color:var(--blue); margin-top:4px; }
.bl-detail{ display:flex; gap:14px; margin-top:22px; align-items:flex-start; }
.bl-detail i{ color:var(--blue); width:18px; margin-top:4px; }
.bl-detail h4{ font-size:var(--fs-sm); font-weight:700; color:var(--navy); margin-bottom:2px; }
.bl-detail span, .bl-detail a{ font-size:var(--fs-sm); color:var(--text-soft); }
.bl-detail a:hover{ color:var(--blue); }
.bl-form{ background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-md); padding:34px; box-shadow:var(--shadow); }
.bl-form h3{ font-family:var(--font-display); font-size:var(--fs-lg); color:var(--navy); margin-bottom:6px; font-weight:600; }
.bl-form-note{ display:block; font-size:var(--fs-sm); color:var(--text-soft); margin-bottom:22px; }
.bl-form form{ display:flex; flex-direction:column; gap:16px; }
.bl-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.bl-form label{ display:block; font-size:var(--fs-xs); font-weight:700; color:var(--navy); margin-bottom:6px; }
.bl-form input, .bl-form textarea{ width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); font-family:var(--font-body); font-size:var(--fs-sm); transition:border-color .25s, box-shadow .25s; }
.bl-form input:focus, .bl-form textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(22,115,230,.15); }
.bl-form button{ padding:14px; background:var(--blue); color:#fff; border:2px solid var(--blue); border-radius:var(--radius-sm); font-weight:700; font-size:var(--fs-sm); cursor:pointer; transition:all .25s; }
.bl-form button:hover{ background:var(--navy); border-color:var(--navy); }
.bl-form button:disabled{ opacity:.7; cursor:wait; }

/* ---------- Back to top ---------- */
.bl-top{ position:fixed; left:20px; bottom:24px; width:44px; height:44px; border-radius:50%; border:none; background:var(--navy); color:#fff; cursor:pointer; z-index:850; box-shadow:0 8px 20px rgba(10,42,92,.3); opacity:0; visibility:hidden; transform:translateY(10px); transition:all .3s; }
.bl-top.show{ opacity:1; visibility:visible; transform:none; }
.bl-top:hover{ background:var(--blue); }

/* ---------- Responsive ---------- */
@media (max-width:1020px){
    .bl-layout{ grid-template-columns:1fr; gap:40px; }
    .bl-side{ position:static; }
    .bl-toc{ display:none; }
    .bl-toc-mobile{ display:block; }
    .bl-article{ max-width:none; }
    .bl-related-grid{ grid-template-columns:1fr 1fr; }
    .bl-audit-grid{ grid-template-columns:1fr; gap:36px; }
}
@media (max-width:640px){
    .bl-hero{ padding-top:36px; }
    .bl-main{ padding:40px 0 64px; }
    .bl-stats{ grid-template-columns:1fr; }
    .bl-related-grid, .bl-row{ grid-template-columns:1fr; }
    .bl-author{ flex-direction:column; text-align:center; }
    .bl-form{ padding:24px; }
    .bl-cover img{ aspect-ratio:16/10; }
    .bl-top{ left:14px; bottom:14px; }
}
@media print{
    .bl-side, .bl-progress, .bl-top, .bl-share, .bl-audit, .bl-related{ display:none !important; }
}