/* =========================================================
   SachBolo — article design, 2026
   ---------------------------------------------------------
   This REPLACES assets/css/article.css on the article page.
   It is not a set of overrides: it owns the whole article
   layout, so no rule from the old file can reach back in.

   That mattered for more than tidiness. The old stylesheet let
   the article column grow wider than the phone, so the right
   edge of every headline and paragraph was cut off — patching
   over it with max-width rules never caught every path. Here
   the box model is written once, from the outside in, and
   nothing is allowed to exceed the screen.

   ⚠️ article.css is linked from includes/article/Render.php and
   NOWHERE else, so this file cannot affect the home page, the
   category pages or the admin. The old file is still on disk:
   swapping the one <link> back restores it exactly.

   The brief (owner, 2026-09-24): "it look very old … i want
   news fonts … 45 year can read … add colours … i want
   complete redesign".
   ========================================================= */

/* ---------------------------------------------------------
   1. Tokens
   --------------------------------------------------------- */
:root{
  /* Colour. The old palette was a borrowed corporate blue on a
     clinical grey. This one is the paper's own: ink, a news red,
     and a saffron rule, on a warm white — pure #fff glares under
     an Indian afternoon and is the wrong ground for long reading. */
  --ink:#14181F;
  --ink-2:#39424F;
  --muted:#6B7480;
  --paper:#FFFCF7;
  --surface:#FFFFFF;
  --navy:#0B2545;
  --red:#C8102E;
  --red-dark:#9C0C24;
  --red-wash:#FDF2F3;
  --saffron:#E8A33D;
  --saffron-wash:#FFF8EC;
  --line:#E6DFD4;
  --line-2:#F2ECE3;

  /* Type. The site had NO web font at all — it fell back to whatever
     the phone had, which is correct and completely without character.
     Martel is a Devanagari serif with real newspaper weight; Mukta is
     an open Devanagari sans with a tall x-height, built for screens.
     Both carry Latin, so a mixed Hindi/English line stays in one voice. */
  --display:"Martel","Noto Serif Devanagari",Georgia,"Times New Roman",serif;
  --text:"Mukta","Noto Sans Devanagari",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* The reader's own size, moved by the A− / A+ buttons and remembered.
     Everything in the article is expressed against it, so one number
     scales the body, its headings and its lists together. */
  --reading:20px;

  --gutter:16px;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(20,24,31,.05),0 8px 24px rgba(20,24,31,.06);
  --measure:38em;   /* a line length the eye can return from */
}

/* ---------------------------------------------------------
   2. The page box
   ---------------------------------------------------------
   Written first and applied to everything, because the bug this
   redesign had to end was horizontal overflow: one element wider
   than the screen cuts the right edge off the whole article.
   --------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  max-width:100%;
  overflow-x:hidden;      /* the last defence; the rules below mean it should never fire */
}

body{
  font-family:var(--text);
  color:var(--ink);
  background:var(--paper);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

img,video,iframe,svg,canvas{ max-width:100%; height:auto; }
/* A flex or grid child refuses to shrink below its content unless told,
   which is how one long word pushes a whole column past the screen. */
.article-container *,.article-layout > *{ min-width:0; }

*:focus-visible{ outline:3px solid rgba(200,16,46,.45); outline-offset:2px; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

.skip-link{
  position:absolute;top:-48px;left:0;z-index:200;
  background:var(--navy);color:#fff;padding:10px 14px;text-decoration:none;border-radius:0 0 8px 0;
}
.skip-link:focus{ top:0; }

/* ---------------------------------------------------------
   3. The section strip
   ---------------------------------------------------------
   Colour by section, so the eye finds its way by hue before it has
   read the word. The tint is on the underline and the active label
   only — filling every chip would turn navigation into confetti.
   --------------------------------------------------------- */
.sb-scrollmenu{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 0 var(--saffron);
}
.sb-scrollmenu__inner{ padding:4px 8px; }
.sb-scrollmenu__link{
  font-family:var(--text);
  font-weight:600;
  font-size:1.0625rem;
  color:var(--ink-2);
  padding:13px 13px 10px;
  border-bottom:3px solid transparent;
  white-space:nowrap;
  text-decoration:none;
  transition:color .18s ease,border-color .18s ease;
}
.sb-scrollmenu__link:hover{ color:var(--red); border-bottom-color:var(--saffron); }
.sb-scrollmenu__link.is-active,.sb-scrollmenu__link[aria-current="page"]{
  color:var(--red); border-bottom-color:var(--red);
}
/* Hues spaced around the wheel, each dark enough to read on white,
   applied by position so the markup needs no change. */
.sb-scrollmenu__inner > *:nth-child(7n+1):hover{ --sec:#C8102E; }
.sb-scrollmenu__inner > *:nth-child(7n+2):hover{ --sec:#0B6E4F; }
.sb-scrollmenu__inner > *:nth-child(7n+3):hover{ --sec:#1A5FB4; }
.sb-scrollmenu__inner > *:nth-child(7n+4):hover{ --sec:#8B3A9E; }
.sb-scrollmenu__inner > *:nth-child(7n+5):hover{ --sec:#B45309; }
.sb-scrollmenu__inner > *:nth-child(7n+6):hover{ --sec:#0F766E; }
.sb-scrollmenu__inner > *:nth-child(7n+7):hover{ --sec:#BE185D; }
.sb-scrollmenu__inner > *:hover .sb-scrollmenu__link,
.sb-scrollmenu__inner > *:hover.sb-scrollmenu__link{
  color:var(--sec,var(--red)); border-bottom-color:var(--sec,var(--red));
}

/* ---------------------------------------------------------
   4. The article shell
   --------------------------------------------------------- */
.article-container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:22px var(--gutter) 48px;
}

.article-header{ margin:0 0 6px; }

/* Kept for screen readers and structured data only. */
.article-breadcrumb{
  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;
}

/* ---------- the headline ---------- */
.article-title,
.article-container h1{
  font-family:var(--display);
  font-weight:800;
  color:var(--ink);
  /* Devanagari carries matras above and below the line. The old 1.25
     made them collide, which reads as "old" more than any colour choice. */
  line-height:1.34;
  letter-spacing:0;
  font-size:clamp(1.8rem,5.4vw,2.9rem);
  margin:.2em 0 .5em;
  text-wrap:balance;
  overflow-wrap:anywhere;
}

/* ---------- byline ---------- */
.article-meta-block{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  background:var(--surface);
  border:1px solid var(--line);
  border-left:4px solid var(--red);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  margin:0 0 20px;
}
.author-info{ display:flex;align-items:center;gap:10px;min-width:0; }
.author-card{ display:flex;gap:10px;align-items:center;text-decoration:none;color:inherit;min-width:0; }
.author-avatar{
  width:46px;height:46px;flex:0 0 46px;border-radius:50%;object-fit:cover;
  border:2px solid var(--line-2);
}
.author-details{ display:flex;flex-direction:column;gap:2px;min-width:0; }
.author-name{ font-family:var(--text);font-weight:700;color:var(--navy);font-size:1.05rem;line-height:1.3; }
.article-date,.article-ago{ color:var(--muted);font-size:.92rem;line-height:1.3; }
.article-ago{ opacity:1; }

.article-actions{ display:flex;flex-wrap:wrap;align-items:center;gap:10px;width:100%; }
.share-button{
  font-family:var(--text);font-weight:600;
  border:1px solid var(--line);background:var(--surface);color:var(--navy);
  border-radius:9px;padding:9px 16px;cursor:pointer;font-size:.98rem;
}
.share-button:hover{ border-color:var(--red);background:var(--red-wash);color:var(--red); }
.share-buttons{ display:flex;flex-wrap:wrap;gap:8px; }
.share-btn{
  width:40px;height:40px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  transition:border-color .15s ease,background .15s ease;
}
.share-btn:hover{ border-color:var(--red);background:var(--red-wash); }
.share-btn svg{ width:19px;height:19px;fill:currentColor; }

/* ---------- अक्षर: the reader's own size ---------- */
.sb-textsize{ display:inline-flex;align-items:center;gap:6px;margin-left:auto; }
.sb-textsize__label{ font-size:.88rem;color:var(--muted); }
.sb-textsize button{
  font-family:var(--text);
  min-width:44px;height:40px;
  border:1px solid var(--line);background:var(--surface);color:var(--navy);
  border-radius:9px;font-weight:700;font-size:1rem;cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.sb-textsize button:hover{ background:var(--red-wash);border-color:var(--red);color:var(--red); }

/* ---------------------------------------------------------
   5. Layout
   ---------------------------------------------------------
   One column by default and a sidebar only when there is honestly
   room for one. The old file did the reverse — a 65/30 split as the
   base, undone by a media query — which is the kind of arrangement
   that overflows the moment a breakpoint is missed.
   --------------------------------------------------------- */
.article-layout{ display:block; }
.article-content-wrapper{ width:100%;max-width:100%; }
.article-sidebar{ width:100%;max-width:100%;margin-top:32px; }
.article-blank{ display:none; }

@media (min-width:1100px){
  .article-layout{ display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start; }
  .article-sidebar{ margin-top:0;position:sticky;top:88px; }
}

.article-full{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:0;
  overflow:hidden;      /* the hero's corners, and a hard stop for anything inside */
  box-shadow:var(--shadow);
}

/* ---------- hero ---------- */
/* ⚠️ Hero uploads are small and inconsistent (673×378 on one story, against 1200×675 body
   images). A fixed ratio with object-fit means a short or a tall one is always framed the same
   way, instead of the page changing shape from story to story. */
.article-hero{ position:relative;width:100%;margin:0;line-height:0;background:var(--line-2); }
.article-hero img{ width:100%;aspect-ratio:16/9;object-fit:cover;display:block;height:auto; }
.hero-overlay{ display:none; }   /* the headline is above the picture, not printed on it */

.article-inner{ padding:22px var(--gutter) 6px; }

/* The standfirst: the one paragraph that says why this story matters. */
.article-excerpt{
  font-family:var(--text);
  font-size:calc(var(--reading) * .95);
  line-height:1.75;
  color:var(--ink-2);
  background:var(--saffron-wash);
  border-left:4px solid var(--saffron);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:14px 16px;
  margin:0 0 26px;
  max-width:var(--measure);
}

/* ---------------------------------------------------------
   6. The article itself
   ---------------------------------------------------------
   The part the reader came for, and the part the brief was about.
   It has to be readable by someone in their forties, on a phone,
   in daylight.

   ⚠️ `.styled-content` is the div the renderer wraps every body in.
   It used to carry an inline 16px / system-ui / 1.5 — an inline style
   beats every stylesheet, which is why the site could not be restyled
   at all. Content.php no longer writes those defaults; these rules are
   what govern now.
   --------------------------------------------------------- */
.article-body,
.article-body .styled-content{
  font-family:var(--text);
  font-size:var(--reading);
  line-height:1.9;
  color:var(--ink);
  font-weight:400;
  background:transparent;
  max-width:var(--measure);
  overflow-wrap:anywhere;
}
.article-body{ padding:0 var(--gutter) 26px; }

/*
 * ⚠️ Stories arrive as a handful of <p> holding many <br> — the writer's paragraph breaks are
 * line breaks. Content.php::normalizeParagraphs() now turns runs of <br> into real paragraphs,
 * so this margin is the ONLY thing setting the gap between them. Before that repair the same
 * article carried about 76px of empty space between blocks at this size, which read as an
 * unfinished page rather than a set article.
 */
.article-body p,
.article-body .styled-content p{ margin:0 0 1.05em; }

/* The story visibly ends, instead of just stopping. */
.article-body .styled-content > p:last-of-type::after{
  content:"\00a0\00a0\25C6";
  color:var(--red);
  font-size:.7em;
  vertical-align:.15em;
}

.article-body h2,.article-body h3,.article-body h4{
  font-family:var(--display);
  font-weight:700;
  color:var(--navy);
  line-height:1.42;
  margin:1.9em 0 .55em;
  text-wrap:balance;
}
.article-body h2{ font-size:1.45em; }
.article-body h3{ font-size:1.22em; }
.article-body h4{ font-size:1.08em; }

.article-body a{
  color:var(--red);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1.5px;
}
.article-body a:hover{ color:var(--red-dark); }
.article-body strong,.article-body b{ font-weight:700;color:var(--ink); }

.article-body ul,.article-body ol{ padding-left:1.35em;margin:0 0 1.15em; }
.article-body li{ margin:0 0 .5em; }
.article-body li::marker{ color:var(--red); }

.article-body blockquote{
  font-family:var(--display);
  font-size:1.06em;
  line-height:1.6;
  color:var(--ink-2);
  border-left:4px solid var(--saffron);
  background:var(--saffron-wash);
  margin:1.7em 0;
  padding:1em 1.2em;
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}

/*
 * Pictures, all the same width.
 *
 * ⚠️ The uploads are wildly inconsistent — measured on one story: 380×213, 1200×675, 1200×675,
 * and a HERO of only 673×378. With no width set, each rendered at its own natural size, so the
 * column went ragged: a full-width photograph, then a small one floating in the middle, then
 * another full-width one. That raggedness is most of what read as "unfinished".
 *
 * Every picture now fills the column. A 380px original upscaled to ~660px is a little soft,
 * which is the lesser problem: an article whose pictures are all different widths never looks
 * set, however sharp each one is. ⛔ The real cure is upstream — the intake should not accept a
 * 380px image as an article picture.
 */
.article-body figure,.article-body .wp-block-image{
  margin:1.8em 0;
  max-width:100%;
  width:100%;
}
.article-body img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--radius-sm);
  background:var(--line-2);   /* a quiet placeholder while it loads, not a white hole */
}
.article-body figcaption{
  font-size:.92rem;color:var(--muted);line-height:1.55;
  padding:9px 2px 0;
  border-left:3px solid var(--saffron);
  padding-left:10px;
  margin-top:10px;
}

/* Wide things get to scroll inside their own box rather than
   dragging the whole page sideways with them. */
.article-body table,.article-body pre{ display:block;overflow-x:auto;max-width:100%; }
.article-body table{ border-collapse:collapse;font-size:.95em; }
.article-body th,.article-body td{ border:1px solid var(--line);padding:9px 11px;text-align:left; }
.article-body th{ background:var(--line-2);font-weight:700; }

/* ---------------------------------------------------------
   7. Around the article
   --------------------------------------------------------- */
.author-box{
  display:flex;gap:16px;align-items:flex-start;
  margin:28px var(--gutter);padding:16px;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--paper);box-shadow:none;
}
.author-box .author-name{ font-size:1.1rem;margin:0 0 6px; }
.author-box .author-name a{ color:var(--navy);text-decoration:none; }
.author-bio{ margin:0 0 8px;font-size:.98rem;line-height:1.6;color:var(--ink-2); }

/* Section headings on the blocks that follow the story. */
.sb-related-h,.sb-mostread-h,.sb-exc__title,.vg4-title,.vg-head{
  font-family:var(--display);
  font-weight:800;
  color:var(--navy);
  font-size:1.3rem;
  line-height:1.35;
  margin:0 0 14px;
  padding-bottom:8px;
  border-bottom:3px solid var(--saffron);
}

.sb-related,.sb-mostread{ margin:30px var(--gutter); }
.sb-related-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));
  gap:16px;
}
.sb-related-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  overflow:hidden;
  transition:border-color .18s ease,transform .18s ease;
}
.sb-related-card:hover{ border-color:var(--red);transform:translateY(-2px); }
.sb-related-card img{ width:100%;aspect-ratio:16/10;object-fit:cover;display:block; }
.sb-related-card a{ color:var(--ink);text-decoration:none;font-weight:600;line-height:1.5; }

/* ---------------------------------------------------------
   7b. The sidebar
   ---------------------------------------------------------
   ⛔ The audit's worst finding. "Recommended Products" and "VastuGuruji
   Blogs" render as a heading, a hairline and then NOTHING — their tracks
   are filled by script from another site and often stay empty — while
   "Exclusive Articles" sits on "Loading…" indefinitely. Three empty
   boxes down the side of every story is why a finished page reads as a
   half-built one, and it had nothing to do with the article itself.

   Two things here. Each widget is given a real card so it looks
   deliberate when it DOES fill, and `.is-empty` (set by the script in
   Render.php when a track never fills) takes it off the page entirely.
   An empty box promises something and then breaks the promise; no box
   promises nothing, which is honest.
   --------------------------------------------------------- */
.article-sidebar .sticky-sidebar{ display:flex;flex-direction:column;gap:20px; }

.vg-widget,.sb-exc,.sachwh-container,.vg-slider4{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  max-width:100%;
  overflow:hidden;
}
.sb-ad-desktop{ max-width:100%;overflow:hidden; }

/* Nothing arrived, and nothing is shown. */
.vg-widget.is-empty,.sb-exc.is-empty,.vg-slider4.is-empty{ display:none!important; }

/* While it is genuinely still coming, a quiet line — not a dead "Loading…". */
.sb-exc__loading{
  color:var(--muted);
  font-size:.95rem;
  padding:10px 0;
}

/* ---------------------------------------------------------
   8. Sizes
   --------------------------------------------------------- */
@media (min-width:640px){
  :root{ --gutter:24px; }
}
@media (min-width:1024px){
  :root{ --reading:21px; }
}
/* On a desktop the column had room to spare while the type stayed at phone
   proportions, so the page read as a narrow strip of small text beside a wide
   sidebar. The measure and the headline both grow with the screen. */
@media (min-width:1100px){
  :root{ --measure:34em; }
  .article-title,.article-container h1{ font-size:clamp(2.2rem,2.6vw,3.2rem); }
  .article-inner{ padding:28px 30px 8px; }
  .article-body{ padding:0 30px 34px; }
  .author-box,.sb-related,.sb-mostread{ margin-left:30px;margin-right:30px; }
}
@media (max-width:420px){
  :root{ --gutter:14px; }
  .article-meta-block{ padding:11px 12px; }
  .sb-textsize{ margin-left:0; }
}

@media print{
  .sb-scrollmenu,.sachb-navbar,.article-actions,.article-sidebar,
  .sb-related,.sb-mostread,.vg-widget,.vg-slider4,.sb-exc{ display:none!important; }
  .article-full{ border:0;box-shadow:none; }
  .article-body{ font-size:12pt;line-height:1.6; }
}