/* ================================================================
   Article typography and designed blocks

   Loaded by the public article page AND by the admin editor, so the
   editing surface is the article — what a reporter sees while typing is
   what publishes, rather than a rough approximation of it.

   ── A note on Nepali fonts ──────────────────────────────────────
   Every family offered here is Unicode. Preeti and Kantipur are not:
   they are legacy fonts that paint Devanagari shapes onto Latin
   letters, so "नेपाल" is really stored as "g]kfn". It looks right on a
   machine with the font installed and is meaningless everywhere else —
   Google cannot index it, site search cannot find it, screen readers
   read nonsense, and it breaks the moment somebody copies it into
   Facebook. That is why they are not in this list.
   ================================================================ */

:root {
  /* Devanagari-first stacks. Each ends in a system Nepali font
     (Kalimati and Mangal are installed on most machines in Nepal) so
     text still reads properly before the web font arrives, or if it
     never does. */
  --art-font-mukta:    'Mukta', 'Kalimati', 'Nirmala UI', 'Mangal', system-ui, sans-serif;
  --art-font-notosans: 'Noto Sans Devanagari', 'Kalimati', 'Nirmala UI', 'Mangal', system-ui, sans-serif;
  --art-font-notoserif:'Noto Serif Devanagari', 'Kalimati', 'Mangal', Georgia, serif;
  --art-font-tiro:     'Tiro Devanagari Hindi', 'Noto Serif Devanagari', 'Kalimati', Georgia, serif;
  --art-font-kalimati: 'Kalimati', 'Mangal', 'Nirmala UI', system-ui, sans-serif;

  /* Latin-first stacks, for English copy and for anyone who simply
     prefers them. Each still falls back to a Devanagari face so mixed
     text never drops to a box glyph. */
  --art-font-times:    'Times New Roman', Times, 'Kalimati', serif;
  --art-font-georgia:  Georgia, 'Times New Roman', 'Kalimati', serif;
  --art-font-merri:    'Merriweather', Georgia, 'Kalimati', serif;
  --art-font-inter:    'Inter', system-ui, 'Kalimati', sans-serif;
  --art-font-arial:    Arial, Helvetica, 'Kalimati', sans-serif;

  /* What an article uses unless the customizer says otherwise.
     The customizer writes --art-size-base only; the reduction on phones
     is derived from it below, so a chosen size still shrinks on a small
     screen instead of overriding the media query. */
  --art-font:       var(--art-font-mukta);
  --art-font-head:  var(--art-font-mukta);
  --art-size-base:  17.5px;
  --art-size:       var(--art-size-base);
  --art-leading:    1.9;
}

/* ── The body copy ─────────────────────────────────────────────── */
.article-content {
  font-family: var(--art-font);
  font-size: var(--art-size);
  line-height: var(--art-leading);
  color: var(--text, #1e293b);
  /* Devanagari sits taller than Latin; without a little extra room the
     matras above and below the line collide with the next line. */
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

.article-content h2,
.article-content h3,
.article-content h4 {
  font-family: var(--art-font-head);
  font-weight: 700;
  line-height: 1.45;
  color: var(--dark, #0f172a);
}
.article-content h2 { font-size: 1.32em; margin: 1.9em 0 .6em; }
.article-content h3 { font-size: 1.14em; margin: 1.6em 0 .5em; }
.article-content h4 { font-size: 1.02em; margin: 1.4em 0 .4em; }

.article-content p     { margin: 0 0 1.15em; }
.article-content a     { color: var(--primary, #2563eb); text-decoration: underline; text-underline-offset: 2px; }
.article-content img   { max-width: 100%; height: auto; border-radius: var(--radius, 8px); margin: 1.6em auto; display: block; }
.article-content hr    { border: 0; border-top: 1px solid var(--border, #e2e8f0); margin: 2.2em 0; }

/* ── Typefaces a writer can apply to a passage ─────────────────
   The site-wide choice lives in Themes > Customize; these are for the
   occasional paragraph that wants to differ — a quote in a serif, an
   English insert, a standfirst. */
.art-f-mukta     { font-family: var(--art-font-mukta); }
.art-f-notosans  { font-family: var(--art-font-notosans); }
.art-f-notoserif { font-family: var(--art-font-notoserif); }
.art-f-tiro      { font-family: var(--art-font-tiro); }
.art-f-kalimati  { font-family: var(--art-font-kalimati); }
.art-f-times     { font-family: var(--art-font-times); }
.art-f-georgia   { font-family: var(--art-font-georgia); }
.art-f-merri     { font-family: var(--art-font-merri); }
.art-f-inter     { font-family: var(--art-font-inter); }
.art-f-arial     { font-family: var(--art-font-arial); }

/* ── Sizes a writer can apply to a selection ───────────────────── */
.art-sm  { font-size: .875em; }
.art-md  { font-size: 1em; }
.art-lg  { font-size: 1.15em; }
.art-xl  { font-size: 1.35em; }
.art-2xl { font-size: 1.6em; line-height: 1.4; }

/* ── Colours a writer can apply ────────────────────────────────
   A fixed palette rather than a free colour picker: it keeps the
   paper looking like one publication, and it stays readable in dark
   mode, which an arbitrary hex value cannot be relied on to do. */
.art-c-default { color: inherit; }
.art-c-muted   { color: var(--text-muted, #64748b); }
.art-c-brand   { color: var(--primary, #2563eb); }
.art-c-red     { color: #c81e2b; }
.art-c-green   { color: #0f7b4f; }
.art-c-amber   { color: #a15c00; }
.art-c-navy    { color: #123a6b; }
.art-mark      { background: #fff3b8; padding: .05em .25em; border-radius: 3px; color: inherit; }

/* ── Plain quote ───────────────────────────────────────────────── */
.article-content blockquote {
  margin: 1.8em 0;
  padding: .9em 1.4em;
  border-left: 4px solid var(--primary, #2563eb);
  background: var(--border-light, #f1f5f9);
  border-radius: 0 var(--radius, 8px) var(--radius, 8px) 0;
  color: var(--text-muted, #64748b);
  font-style: italic;
}
.article-content blockquote p:last-child { margin-bottom: 0; }

/* ── Pull quote ────────────────────────────────────────────────
   The big one, for the line worth stopping on. The mark is drawn
   rather than typed so it never gets selected or copied with the
   quote itself. */
.art-pullquote {
  position: relative;
  margin: 2.2em 0;
  padding: 1.6em 1.6em 1.3em 3.2em;
  border: 0;
  border-top: 3px solid var(--primary, #2563eb);
  border-bottom: 1px solid var(--border, #e2e8f0);
  background: linear-gradient(180deg, rgba(37,99,235,.045), transparent 70%);
  font-family: var(--art-font-tiro);
  font-size: 1.3em;
  line-height: 1.55;
  font-style: normal;
  color: var(--dark, #0f172a);
  border-radius: 0;
}
.art-pullquote::before {
  content: '\201C';
  position: absolute;
  left: .42em; top: .12em;
  font-family: Georgia, serif;
  font-size: 2.9em;
  line-height: 1;
  color: var(--primary, #2563eb);
  opacity: .32;
}
.art-pullquote p { margin: 0 0 .5em; }
.art-pullquote cite,
.art-pullquote .art-attrib {
  display: block;
  margin-top: .7em;
  font-family: var(--art-font);
  font-size: .62em;
  font-style: normal;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
}
.art-pullquote cite::before,
.art-pullquote .art-attrib::before { content: '— '; }

/* ── Key points ────────────────────────────────────────────────
   The "what you need to know" box that sits near the top of a long
   story. Numbered by CSS so a writer can reorder lines freely. */
.art-keypoints {
  margin: 2em 0;
  padding: 1.15em 1.4em 1.15em 1.5em;
  background: var(--border-light, #f1f5f9);
  border: 1px solid var(--border, #e2e8f0);
  border-left: 4px solid var(--primary, #2563eb);
  border-radius: var(--radius, 8px);
}
.art-keypoints > .art-keypoints-title,
.art-keypoints > h4 {
  margin: 0 0 .7em;
  font-family: var(--art-font-head);
  font-size: .78em;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--primary, #2563eb);
}
.art-keypoints ul,
.art-keypoints ol { margin: 0; padding: 0; list-style: none; counter-reset: art-kp; }
.art-keypoints li {
  position: relative;
  margin: 0 0 .62em;
  padding-left: 1.9em;
  font-size: .95em;
  line-height: 1.68;
}
.art-keypoints li:last-child { margin-bottom: 0; }
.art-keypoints li::before {
  counter-increment: art-kp;
  content: counter(art-kp);
  position: absolute;
  left: 0; top: .18em;
  width: 1.32em; height: 1.32em;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--primary, #2563eb);
  color: #fff;
  font-family: var(--art-font-head);
  font-size: .72em;
  font-weight: 700;
  line-height: 1;
}

/* ── Fact box ──────────────────────────────────────────────────
   Background a reader may want but the narrative does not need. */
.art-factbox {
  margin: 2em 0;
  padding: 1.2em 1.4em;
  background: #fffdf5;
  border: 1px solid #f0e2b8;
  border-radius: var(--radius, 8px);
  box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,.1));
}
.art-factbox > .art-factbox-title,
.art-factbox > h4 {
  margin: 0 0 .55em;
  font-family: var(--art-font-head);
  font-size: .88em;
  font-weight: 700;
  color: #8a6d00;
  display: flex; align-items: center; gap: .45em;
}
.art-factbox > .art-factbox-title::before,
.art-factbox > h4::before { content: 'ℹ'; font-size: 1.05em; }
.art-factbox p:last-child { margin-bottom: 0; }
.art-factbox { font-size: .95em; }

/* ── Data table ────────────────────────────────────────────────
   A wide table must scroll inside its own box; letting it push the
   article wider is what breaks a phone layout. The wrapper is what
   scrolls, so the table keeps its own column widths. */
.art-table-wrap {
  margin: 2em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 8px);
}
.article-content table,
.art-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-family: var(--art-font);
  font-size: .93em;
  background: var(--bg-card, #fff);
}
.art-table-wrap > table { border: 0; }
.article-content th,
.art-table th {
  padding: .72em .9em;
  text-align: left;
  font-family: var(--art-font-head);
  font-weight: 700;
  font-size: .93em;
  letter-spacing: .02em;
  color: #fff;
  background: var(--primary, #2563eb);
  border: 0;
  white-space: nowrap;
}
.article-content td,
.art-table td {
  padding: .68em .9em;
  border: 0;
  border-top: 1px solid var(--border, #e2e8f0);
  vertical-align: top;
}
.article-content tbody tr:nth-child(even) td,
.art-table tbody tr:nth-child(even) td { background: var(--border-light, #f1f5f9); }
.article-content tbody tr:hover td,
.art-table tbody tr:hover td { background: rgba(37,99,235,.07); }
.art-table caption,
.article-content table caption {
  caption-side: bottom;
  padding: .7em .9em;
  font-size: .82em;
  color: var(--text-muted, #64748b);
  text-align: left;
}

/* ── Lists in the body ─────────────────────────────────────────── */
.article-content ul,
.article-content ol { padding-left: 1.5em; margin: 0 0 1.15em; }
.article-content li { margin-bottom: .45em; }
.article-content ul > li::marker { color: var(--primary, #2563eb); }

/* ── Code, kept from the previous stylesheet ───────────────────── */
.article-content code {
  background: var(--border-light, #f1f5f9);
  padding: .12em .4em;
  border-radius: 4px;
  font-size: .88em;
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
}
.article-content pre {
  background: var(--dark, #0f172a);
  color: #e2e8f0;
  padding: 1.1em 1.2em;
  border-radius: var(--radius, 8px);
  overflow-x: auto;
  margin: 0 0 1.15em;
}
.article-content pre code { background: none; color: inherit; }

/* ── Staff bar on the public article page ──────────────────────── */
.staff-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 8px 12px;
  border: 1px dashed var(--primary, #2563eb);
  border-radius: var(--radius, 8px);
  background: rgba(37,99,235,.06);
  font-size: 12.5px;
}
.staff-bar-who { font-weight: 600; color: var(--primary, #2563eb); }
.staff-bar-status {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--warning, #f59e0b);
  color: #3d2c00;
}
.staff-bar-btn {
  margin-left: auto;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--primary, #2563eb);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
.staff-bar-btn:hover { background: var(--primary-dark, #1d4ed8); color: #fff; }
.staff-bar-link { color: var(--text-muted, #64748b); text-decoration: none; }
.staff-bar-link:hover { text-decoration: underline; }

/* ── Preview bar ───────────────────────────────────────────────
   Shown when the admin is previewing a page, so a draft is never
   mistaken for the live site. Sticky, because the whole point is that
   it stays true however far down you read. */
.preview-bar {
  position: sticky;
  top: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 16px;
  background: #1e293b;
  color: #e2e8f0;
  font-size: 13px;
}
.preview-bar-tag {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--warning, #f59e0b);
  color: #3d2c00;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.preview-bar-text strong { color: #fbbf24; }
.preview-bar-btn {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 999px;
  background: #fff;
  color: #1e293b;
  text-decoration: none;
  font-weight: 600;
  font-size: 12.5px;
}
.preview-bar-btn:hover { background: var(--warning, #f59e0b); color: #3d2c00; }
@media (max-width: 575.98px) {
  .preview-bar-btn { margin-left: 0; }
}

/* ── Phones ────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  :root { --art-size: calc(var(--art-size-base) - 1px); --art-leading: 1.82; }
  .art-pullquote { padding: 1.2em 1.1em 1em 2.5em; font-size: 1.15em; }
  .art-pullquote::before { font-size: 2.3em; left: .35em; }
  .art-keypoints, .art-factbox { padding: 1em 1.05em; }
  .staff-bar-btn { margin-left: 0; }
}

/* ── Dark mode ─────────────────────────────────────────────────
   The two tinted boxes are the only places with a hardcoded light
   background, so they are the only ones that need restating. */
@media (prefers-color-scheme: dark) {
  .art-factbox { background: #2a2415; border-color: #5c4c1e; }
  .art-factbox > .art-factbox-title, .art-factbox > h4 { color: #e6c55c; }
  .art-mark { background: #6b5a00; color: #fff8d6; }
  .art-pullquote { background: linear-gradient(180deg, rgba(96,165,250,.09), transparent 70%); }
}