/* ============================================================================
   articleEnhancements.css  ·  feature/article-display
   Additive layer for the public article pages. Loaded by the two article views
   (BLZN.cshtml → BLZN "افق آبی" default theme; Index.cshtml → adds .bx-jjs for
   JamJamshid's navy identity). Every class is `bx-` prefixed and uses
   <div>/<a>/<button> (never bare <section>/<figure>) so the shared bare-element
   rules (section{}, article section{}) in farsiLayoutStyle.css can never collide
   with it. Brand theme is chosen by the .bx-scope wrapper class in each view.
   ============================================================================ */

/* Default theme = BLZN "افق آبی" (gold horizon accent). --bx-gold is the accent, --bx-gold-2 its
   gradient companion. A per-brand theme flips these via a higher-specificity selector. */
.bx-scope{
  --bx-ink:#14283A; --bx-paper:#FBF9F5; --bx-card:#FFFFFF;
  --bx-gold:#C57A1C; --bx-gold-ink:#9A5D12; --bx-gold-soft:#F5E9D3; --bx-gold-2:#E4A94A;
  --bx-blue:#1C5A82; --bx-muted:#6C7681; --bx-line:#E8E1D4; --bx-mist:#EEF3F5;
  --bx-good:#2E7D57;
}
/* Dark vars MUST target .bx-scope (not html) — otherwise the base .bx-scope{} block, being a
   nearer ancestor, would win and the components would stay light on a dark page. */
html[data-theme="dark"] .bx-scope{
  --bx-ink:#E9EEF1; --bx-paper:#0E1A24; --bx-card:#15242F; --bx-line:#22323F;
  --bx-muted:#93A1AC; --bx-blue:#5AA0CE; --bx-mist:#152530; --bx-gold-soft:#2A2216;
}
/* JamJamshid theme — its own navy/blue identity instead of BLZN's gold. */
.bx-scope.bx-jjs{
  --bx-ink:#152B44;
  --bx-gold:#2C6FA8; --bx-gold-ink:#1E4E7D; --bx-gold-soft:#E3EEF6; --bx-gold-2:#5AA0DE;
  --bx-blue:#1E4E7D;
}
html[data-theme="dark"] .bx-scope.bx-jjs{
  --bx-ink:#E9EEF1; --bx-gold:#5AA0DE; --bx-gold-ink:#8FC0EC; --bx-gold-soft:#152838;
  --bx-gold-2:#7DB8EA; --bx-blue:#7DB8EA;
}
/* Dark overrides — scoped to this page only (file not loaded elsewhere). */
html[data-theme="dark"] body{ background:#0E1A24; color:#E9EEF1; }
html[data-theme="dark"] article section div,
html[data-theme="dark"] article section h3,
html[data-theme="dark"] article h1,
html[data-theme="dark"] main header h1{ color:#E9EEF1; }
html[data-theme="dark"] .article-nav{ background:#0E1A24; border-bottom-color:#22323F; }
html[data-theme="dark"] .nav-title,
html[data-theme="dark"] .nav-social-link{ color:#C9D4DC; }
html[data-theme="dark"] .article-meta{ color:#93A1AC; border-color:#22323F; }

/* reading progress */
.bx-progress{position:fixed; inset-block-start:0; inset-inline:0; height:3px; z-index:1200; background:transparent; pointer-events:none}
.bx-progress__bar{height:100%; width:0; background:linear-gradient(90deg,var(--bx-gold),var(--bx-gold-2)); transition:width .05s linear}

/* theme toggle — floating, always reachable, out of the shared nav's way */
.bx-theme-fab{position:fixed; inset-block-end:18px; inset-inline-start:18px; z-index:1100}
.bx-theme-btn{width:42px; height:42px; border-radius:12px; border:1px solid var(--bx-line); background:var(--bx-card);
  color:var(--bx-muted); cursor:pointer; display:inline-grid; place-items:center; box-shadow:0 6px 20px -8px rgba(20,40,58,.35)}
.bx-theme-btn:hover{color:var(--bx-gold-ink); border-color:var(--bx-gold)}
.bx-theme-btn svg{width:18px; height:18px}
html[data-theme="dark"] .bx-theme-btn{background:#15242F; border-color:#22323F}

/* category eyebrow */
.bx-eyebrow{display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:0 0 14px}
.bx-cat{font:700 13px/1 'Vazirmatn',sans-serif; color:var(--bx-gold-ink); background:var(--bx-gold-soft);
  padding:6px 13px; border-radius:999px; text-decoration:none}
.bx-cat:hover{filter:brightness(.97)}
.bx-cat--lead{background:var(--bx-gold); color:#fff}

/* AI provenance badge in the meta row */
.bx-ai-badge{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--bx-blue);
  background:var(--bx-mist); border:1px solid var(--bx-line); padding:6px 11px; border-radius:999px}
.bx-ai-badge svg{width:14px; height:14px; flex:0 0 auto}
.bx-ai-badge b{color:var(--bx-ink)}

/* smart summary card — the reading anchor */
.bx-summary{position:relative; background:linear-gradient(180deg,var(--bx-card),var(--bx-paper));
  border:1px solid var(--bx-line); border-radius:16px; padding:22px 24px 20px; margin:26px 0;
  box-shadow:0 10px 34px -24px rgba(20,40,58,.35)}
.bx-summary::before{content:""; position:absolute; inset-block:16px; inset-inline-start:0; width:4px;
  border-radius:4px; background:linear-gradient(180deg,var(--bx-gold),var(--bx-gold-2))}
.bx-summary__h{display:flex; align-items:center; gap:10px; margin-bottom:11px; flex-wrap:wrap}
.bx-summary__h svg{width:20px; height:20px; color:var(--bx-gold); flex:0 0 auto}
.bx-summary__h b{font-size:16.5px; font-weight:800; color:var(--bx-ink)}
.bx-summary__h .bx-ai-note{margin-inline-start:auto; font:500 11px/1 ui-monospace,Consolas,monospace;
  letter-spacing:.02em; color:var(--bx-muted)}
.bx-summary p{margin:0; font-size:16px; line-height:2.05; color:var(--bx-ink)}

/* share rail (sticky, start side) + responsive inline fallback */
.bx-rail{position:sticky; top:96px; display:flex; flex-direction:column; gap:10px; align-items:center; margin-top:6px}
.bx-rail__lbl{font:600 10.5px/1 ui-monospace,Consolas,monospace; letter-spacing:.12em; color:var(--bx-muted)}
.bx-share{width:44px; height:44px; border-radius:12px; border:1px solid var(--bx-line); background:var(--bx-card);
  display:grid; place-items:center; cursor:pointer; text-decoration:none; transition:transform .15s,border-color .15s,background .15s}
.bx-share svg{width:20px; height:20px; color:var(--bx-muted)}
.bx-share:hover{transform:translateY(-2px); border-color:var(--bx-gold)}
.bx-share:hover svg{color:var(--bx-gold-ink)}
.bx-share.tg:hover{background:#229ED9; border-color:#229ED9} .bx-share.tg:hover svg{color:#fff}
.bx-share.x:hover{background:#111; border-color:#111} .bx-share.x:hover svg{color:#fff}
.bx-share.wa:hover{background:#25D366; border-color:#25D366} .bx-share.wa:hover svg{color:#fff}
.bx-share.copied{background:var(--bx-good); border-color:var(--bx-good)} .bx-share.copied svg{color:#fff}

/* share rail lives in a flex wrapper next to the article on wide screens */
.bx-articleflex{display:flex; gap:30px; align-items:flex-start; max-width:1080px; margin:0 auto; padding:0 20px}
.bx-articleflex > .bx-railcol{flex:0 0 auto; padding-top:34px}
.bx-articleflex > .bx-maincol{flex:1 1 auto; min-width:0}
@media(max-width:960px){
  .bx-articleflex{display:block; padding:0}
  .bx-railcol{display:none}
}

/* inline share row (mobile / fallback) */
.bx-share-inline{display:none; gap:10px; align-items:center; margin:20px 0; padding-top:16px; border-top:1px solid var(--bx-line)}
.bx-share-inline .bx-share{width:42px; height:42px}
@media(max-width:960px){ .bx-share-inline{display:flex} }

/* keyword tags */
.bx-tags{display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:32px 0 6px; padding-top:20px; border-top:1px solid var(--bx-line)}
.bx-tags__lbl{font-weight:800; font-size:14px; color:var(--bx-ink); margin-inline-end:4px}
.bx-tag{font-size:13.5px; color:var(--bx-ink); background:var(--bx-mist); border:1px solid var(--bx-line);
  padding:6px 13px; border-radius:8px; text-decoration:none; transition:.15s}
.bx-tag:hover{border-color:var(--bx-gold); color:var(--bx-gold-ink)}
.bx-tag::before{content:"#"; color:var(--bx-muted); margin-inline-end:2px}

/* source / provenance disclosure */
.bx-source{display:flex; gap:14px; align-items:flex-start; background:var(--bx-card); border:1px solid var(--bx-line);
  border-radius:14px; padding:16px 18px; margin:24px 0}
.bx-source__ic{flex:0 0 auto; width:40px; height:40px; border-radius:11px; background:var(--bx-mist);
  display:grid; place-items:center; color:var(--bx-blue)}
.bx-source__ic svg{width:20px; height:20px}
.bx-source__t{font-size:14.5px; line-height:1.85; color:var(--bx-muted)}
.bx-source__t b{color:var(--bx-ink)}
.bx-source__t a{color:var(--bx-blue); font:500 13px/1.6 ui-monospace,Consolas,monospace; word-break:break-all}

/* related strip */
.bx-related{border-top:1px solid var(--bx-line); margin-top:40px; padding-top:8px}
.bx-related__h{display:flex; align-items:baseline; gap:12px; margin:26px 0 18px; flex-wrap:wrap}
.bx-related__h b{font-size:21px; font-weight:800; color:var(--bx-ink)}
.bx-related__h span{font-size:13px; color:var(--bx-muted)}
.bx-rgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:720px){ .bx-rgrid{grid-template-columns:1fr} }
.bx-rcard{background:var(--bx-card); border:1px solid var(--bx-line); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; text-decoration:none; transition:transform .15s,box-shadow .15s}
.bx-rcard:hover{transform:translateY(-3px); box-shadow:0 16px 34px -22px rgba(20,40,58,.32)}
.bx-rcard__band{height:6px; background:linear-gradient(90deg,var(--bx-gold),var(--bx-gold-2))}
.bx-rcard__b{padding:15px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1}
.bx-rcard__cat{font:700 11.5px/1 'Vazirmatn',sans-serif; color:var(--bx-gold-ink)}
.bx-rcard__t{font-size:15.5px; font-weight:700; line-height:1.7; color:var(--bx-ink); text-wrap:balance}

/* typography polish for the body (scoped so it doesn't fight shared rules) */
.bx-scope article section div{ font-size:19px; line-height:2.08; }
.bx-scope article section div p{ margin:0 0 20px; max-width:64ch; }
.bx-scope article section blockquote{ margin:30px 0; padding-inline-start:20px;
  border-inline-start:4px solid var(--bx-gold); font-size:22px; font-weight:700; line-height:1.85; color:var(--bx-ink); }
@media(max-width:768px){ .bx-scope article section div{ font-size:17px; line-height:2.0; } }

/* focus visibility for all new interactive elements */
.bx-scope a:focus-visible, .bx-scope button:focus-visible,
.bx-theme-btn:focus-visible, .bx-share:focus-visible{
  outline:2.5px solid var(--bx-gold); outline-offset:3px; border-radius:4px;
}

/* entrance motion (respect reduced-motion) */
@media(prefers-reduced-motion:no-preference){
  .bx-fade{opacity:0; transform:translateY(12px); animation:bxRise .6s cubic-bezier(.2,.7,.2,1) forwards}
  .bx-fade.d1{animation-delay:.05s} .bx-fade.d2{animation-delay:.12s}
  @keyframes bxRise{to{opacity:1; transform:none}}
}