/*
 * WordPress article typography — Be Vietnam Pro
 * Scope: wrap the post body in <div class="on_singhj">…</div>.
 * Load Be Vietnam Pro in the theme first; this file supplies fallbacks.
 */

.on_singhj {
  --article-text: #242a32;
  --article-heading: #152538;
  --article-muted: #667482;
  --article-accent: #0866a5;
  --article-border: #dce4ea;
  --article-soft: #f4f8fb;
  box-sizing: border-box;
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
  color: var(--article-text);
  font-family: "Be Vietnam Pro", Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.85;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

.on_singhj *,
.on_singhj *::before,
.on_singhj *::after {
  box-sizing: border-box;
}

.on_singhj > :first-child { margin-top: 0; }
.on_singhj > :last-child { margin-bottom: 0; }

.on_singhj p { margin: 0 0 1.15em; }
.on_singhj :is(p, li) { text-align: left; }
.on_singhj p:empty { display: none; }

/* News-style lead paragraph: add class="article-lead" to the intro. */
.on_singhj .article-lead {
  color: var(--article-heading);
  font-size: 1.1em;
  font-weight: 600;
  line-height: 1.7;
}

.on_singhj :is(h1, h2, h3, h4, h5, h6) {
  margin: 1.6em 0 .65em;
  color: var(--article-heading);
  font-family: inherit;
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: -.02em;
  text-wrap: pretty;
}
.on_singhj h1 { font-size: clamp(1.65rem, 3vw, 2.15rem); margin-top: 0; }
.on_singhj h2 { font-size: clamp(1.35rem, 2.5vw, 1.65rem); }
.on_singhj h3 { font-size: clamp(1.18rem, 2vw, 1.35rem); }
.on_singhj h4 { font-size: 1.08rem; }
.on_singhj :is(h5, h6) { font-size: 1rem; }
.on_singhj :is(h1, h2, h3, h4, h5, h6) + p { margin-top: 0; }

.on_singhj a {
  color: var(--article-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.on_singhj a:hover { color: #074a77; }
.on_singhj a:focus-visible { outline: 2px solid var(--article-accent); outline-offset: 3px; }
.on_singhj strong, .on_singhj b { font-weight: 700; }
.on_singhj small { font-size: .85em; }
.on_singhj mark { background: #fff0ae; padding: .05em .2em; }

.on_singhj :is(ul, ol) { margin: 0 0 1.25em; padding-left: 1.55em; }
.on_singhj li { margin: 0 0 .4em; padding-left: .15em; }
.on_singhj li::marker { color: var(--article-accent); }
.on_singhj li > :is(ul, ol) { margin: .45em 0 .65em; }
.on_singhj li > p { margin-bottom: .5em; }

.on_singhj :is(blockquote, .wp-block-quote) {
  margin: 1.7em 0;
  padding: .7em 1.3em;
  border-left: 4px solid var(--article-accent);
  border-radius: 0 8px 8px 0;
  background: var(--article-soft);
  color: var(--article-heading);
  font-size: 1.04em;
  font-style: normal;
}
.on_singhj blockquote p:last-of-type { margin-bottom: 0; }
.on_singhj :is(blockquote cite, .wp-block-quote__citation) {
  display: block;
  margin-top: .6em;
  color: var(--article-muted);
  font-size: .82em;
  font-style: normal;
}
.on_singhj hr, .on_singhj .wp-block-separator {
  height: 0;
  margin: 2em 0;
  border: 0;
  border-top: 1px solid var(--article-border);
}

/* Photos and captions from Classic editor and Gutenberg. */
.on_singhj img { max-width: 100%; height: auto; }
.on_singhj :is(figure, .wp-caption, .wp-block-image) {
  max-width: 100%;
  margin: 1.6em auto;
}
.on_singhj :is(figure, .wp-caption, .wp-block-image) img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: 5px;
}
.on_singhj :is(figcaption, .wp-caption-text, .wp-block-image figcaption,
                  .wp-block-gallery figcaption) {
  margin: .65em auto 0;
  color: var(--article-muted);
  font-size: .82em;
  line-height: 1.65;
  text-align: center;
}
.on_singhj .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.on_singhj :is(.alignleft, .alignright) { max-width: 45%; margin-top: .35em; margin-bottom: 1em; }
.on_singhj .alignleft { float: left; margin-right: 1.3em; }
.on_singhj .alignright { float: right; margin-left: 1.3em; }
.on_singhj::after { content: ""; display: block; clear: both; }
.on_singhj .wp-block-gallery { margin: 1.6em 0; }
.on_singhj .wp-block-gallery img { border-radius: 5px; }

/* Tables remain scrollable on narrow screens. */
.on_singhj :is(table, .wp-block-table table) {
  width: 100%;
  margin: 1.6em 0;
  border: 1px solid var(--article-border);
  border-collapse: collapse;
  font-size: .92em;
  line-height: 1.65;
}
.on_singhj .wp-block-table { max-width: 100%; margin: 1.6em 0; overflow-x: auto; }
.on_singhj .wp-block-table table { margin: 0; }
.on_singhj :is(th, td) { padding: .75em .9em; border: 1px solid var(--article-border); text-align: left; vertical-align: top; }
.on_singhj th { background: var(--article-soft); color: var(--article-heading); font-weight: 700; }
.on_singhj tr:nth-child(even) td { background: #fafcfd; }

.on_singhj :is(pre, code, kbd, samp) { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.on_singhj pre {
  max-width: 100%;
  margin: 1.4em 0;
  padding: 1em 1.2em;
  overflow-x: auto;
  border-radius: 8px;
  background: #f1f5f8;
  font-size: .82em;
  line-height: 1.6;
}
.on_singhj :not(pre) > code { padding: .1em .3em; border-radius: 3px; background: #f1f5f8; font-size: .88em; }

/* Embedded videos and social posts. */
.on_singhj :is(iframe, video) { max-width: 100%; }
.on_singhj :is(.wp-block-embed, .wp-block-video) { max-width: 100%; margin: 1.6em 0; }
.on_singhj .wp-block-embed.is-type-video .wp-block-embed__wrapper { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.on_singhj .wp-block-embed.is-type-video .wp-block-embed__wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.on_singhj .wp-block-video video { display: block; width: 100%; height: auto; }

@media (max-width: 640px) {
  .on_singhj { font-size: 16px; line-height: 1.8; }
  .on_singhj :is(h1, h2, h3, h4, h5, h6) { margin-top: 1.4em; }
  .on_singhj :is(.alignleft, .alignright) { float: none; display: block; max-width: 100%; margin: 1.4em auto; }
  .on_singhj :is(blockquote, .wp-block-quote) { padding: .75em 1em; }
  .on_singhj :is(table, .wp-block-table table) { font-size: .85em; }
  .on_singhj table:not(.wp-block-table table) { display: block; max-width: 100%; overflow-x: auto; }
}