/* BharatNews — custom design layer on top of Tailwind (Play CDN).
   Brand palette, Hindi typography, glassmorphism, and reveal animations. */

:root {
  --brand: #c1121f;         /* signature news red */
  --brand-dark: #780000;
  --accent: #003049;
  --ink: #1a1a1a;
  --muted: #6b7280;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Noto Sans Devanagari', 'Hind', system-ui, sans-serif;
  color: var(--ink);
  background: #f7f7f8;
}
.dark body { background: #0b0f14; color: #e5e7eb; }

/* Headlines use a slightly tighter Devanagari face */
.font-head { font-family: 'Tiro Devanagari Hindi', 'Noto Serif Devanagari', serif; }

/* Brand helpers */
.text-brand { color: var(--brand); }
.bg-brand { background-color: var(--brand); }
.border-brand { border-color: var(--brand); }

/* Glass card */
.glass {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.4);
}
.dark .glass {
  background: rgba(17,24,39,0.6);
  border-color: rgba(255,255,255,0.08);
}

/* Section heading with the red tab */
.section-title {
  position: relative;
  padding-left: 0.9rem;
  font-weight: 800;
}
.section-title::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 1.15em;
  background: var(--brand);
  border-radius: 3px;
}

/* Breaking ticker */
.ticker-mask { overflow: hidden; white-space: nowrap; }
.ticker-track { display: inline-block; padding-left: 100%; animation: ticker 28s linear infinite; }
.ticker-track:hover { animation-play-state: paused; }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

/* Card hover lift */
.news-card { transition: transform .25s ease, box-shadow .25s ease; }
.news-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px -10px rgba(0,0,0,.25); }

/* Line clamp helpers */
.clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* Reveal-on-scroll initial state (Motion One animates to visible) */
.reveal { opacity: 0; transform: translateY(16px); }

/* Reading progress bar */
#read-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--brand); z-index: 60; transition: width .1s linear; }

/* Skeleton shimmer */
.skeleton { background: linear-gradient(90deg,#e5e7eb 25%,#f3f4f6 37%,#e5e7eb 63%); background-size:400% 100%; animation: shimmer 1.4s ease infinite; }
.dark .skeleton { background: linear-gradient(90deg,#1f2937 25%,#374151 37%,#1f2937 63%); background-size:400% 100%; }
@keyframes shimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }

/* Article prose tweaks */
/* Inherit the container's size so the article page's अ− / अ+ controls (which set font-size on
   #article-body) actually take effect — a fixed size here silently overrode them. */
.prose-hi p { margin: 0 0 1.1rem; line-height: 2; font-size: inherit; }
.prose-hi h2 { font-weight: 800; font-size: 1.5rem; margin: 1.6rem 0 .8rem; }
.prose-hi img { border-radius: .75rem; margin: 1rem 0; }

/* ============================================================================
   Site footer — self-contained component (does not rely on Tailwind grid/
   responsive utilities, which are purged out of the production build).
   ============================================================================ */
/* Footer colours are theme tokens: light by default, dark under html.dark (the site's class-based
   toggle). The footer used to be hardcoded dark, so it stayed dark in light mode. */
.site-footer {
  --ft-bg:#f1f5f9; --ft-body:#475569; --ft-head:#0f172a; --ft-muted:#64748b; --ft-faint:#94a3b8;
  --ft-border:rgba(15,23,42,.10); --ft-chip:rgba(15,23,42,.04); --ft-chip-bd:rgba(15,23,42,.12);
  --ft-hover:#0f172a; --ft-bottom-bg:rgba(15,23,42,.04);
  background:var(--ft-bg); color:var(--ft-body); font-size:14px; margin-top:0;
}
.dark .site-footer {
  --ft-bg:#0b1220; --ft-body:#cbd5e1; --ft-head:#fff; --ft-muted:#94a3b8; --ft-faint:#64748b;
  --ft-border:rgba(255,255,255,.08); --ft-chip:rgba(255,255,255,.06); --ft-chip-bd:rgba(255,255,255,.14);
  --ft-hover:#fff; --ft-bottom-bg:rgba(0,0,0,.25);
}
.site-footer a { transition:color .15s ease; }
/* Match the site content container (max-w-7xl mx-auto px-4) so footer columns line up
   with the header/hero above them. Horizontal padding only (via longhand) so it never
   overrides the vertical padding each section sets on the same .ft-wrap element. */
.site-footer .ft-wrap { max-width:80rem; margin:0 auto; padding-left:1rem; padding-right:1rem; }
.site-footer .ft-accent { height:4px; background:linear-gradient(90deg,var(--brand),#ef4444,#f59e0b); }

/* Newsletter band */
.ft-news-band { border-bottom:1px solid var(--ft-border); }
.ft-news { display:flex; flex-direction:column; gap:1.25rem; padding-top:2rem; padding-bottom:2rem; }
@media (min-width:768px){ .ft-news{ flex-direction:row; align-items:center; justify-content:space-between; } }
.ft-news-info { display:flex; gap:1rem; align-items:flex-start; }
.ft-news-ic { width:3rem; height:3rem; border-radius:.75rem; display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; flex-shrink:0; background:color-mix(in srgb, var(--brand) 18%, transparent); color:var(--brand); }
.ft-news-info h3 { color:var(--ft-head); font-weight:700; font-size:1.125rem; line-height:1.25; }
.ft-news-info p { color:var(--ft-muted); font-size:.875rem; margin-top:.15rem; }
.ft-news form { display:flex; width:100%; }
@media (min-width:768px){ .ft-news form{ width:auto; min-width:400px; } }
.ft-news input { flex:1; padding:.75rem 1rem; border-radius:.75rem 0 0 .75rem; background:var(--ft-chip);
  border:1px solid var(--ft-chip-bd); color:var(--ft-head); }
.ft-news input::placeholder { color:var(--ft-faint); }
.ft-news input:focus { outline:none; border-color:var(--brand); background:var(--ft-chip); }
.ft-news button { padding:.75rem 1.5rem; border-radius:0 .75rem .75rem 0; background:var(--brand); color:#fff;
  font-weight:600; white-space:nowrap; border:none; cursor:pointer; }
.ft-news button:hover { background:var(--brand-dark); }

/* Main columns */
.ft-main { display:grid; grid-template-columns:repeat(2,1fr); gap:2.5rem 2rem; padding-top:3rem; padding-bottom:3rem; }
@media (min-width:640px){ .ft-main{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px){ .ft-main{ grid-template-columns:2fr 1fr 1fr 1fr 1fr; } }
.ft-brand { grid-column:1 / -1; }
@media (min-width:640px){ .ft-brand{ grid-column:span 3; } }
@media (min-width:1024px){ .ft-brand{ grid-column:auto; } }
.ft-brand-name { font-size:1.5rem; font-weight:800; color:var(--ft-head); margin-bottom:.75rem; }
.ft-brand-name .accent { color:var(--brand); }
.ft-about { color:var(--ft-muted); line-height:1.65; margin-bottom:1.25rem; max-width:24rem; }
.ft-contact { display:flex; flex-direction:column; gap:.55rem; margin-bottom:1.5rem; }
.ft-contact > div { display:flex; align-items:center; gap:.75rem; color:var(--ft-muted); }
.ft-contact i { color:var(--brand); width:1rem; text-align:center; }
.ft-contact a:hover { color:var(--ft-hover); }
.ft-follow { color:var(--ft-faint); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; margin-bottom:.75rem; }
.ft-social { display:flex; flex-wrap:wrap; gap:.55rem; }
.ft-social a { width:2.5rem; height:2.5rem; border-radius:9999px !important; background:var(--ft-chip) !important;
  border:1px solid var(--ft-chip-bd) !important; display:flex; align-items:center; justify-content:center;
  color:var(--ft-body); transition:all .18s ease; }
.ft-social a:hover { color:#fff; transform:translateY(-2px); }
.ft-social a.fb:hover { background:#1877f2 !important; border-color:#1877f2 !important; }
.ft-social a.x:hover  { background:#111827 !important; border-color:#374151 !important; }
.ft-social a.yt:hover { background:#ff0000 !important; border-color:#ff0000 !important; }
.ft-social a.ig:hover { background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888) !important; border-color:#dc2743 !important; }
.ft-social a.tg:hover { background:#26a5e4 !important; border-color:#26a5e4 !important; }
.ft-social a.wa:hover { background:#25d366 !important; border-color:#25d366 !important; }

.ft-col h4 { color:var(--ft-head); font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.07em; margin-bottom:1rem; }
.ft-col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.ft-col a { color:var(--ft-muted); display:flex; align-items:center; gap:.5rem; }
.ft-col a:hover { color:var(--ft-hover); }
.ft-col a i { width:1rem; text-align:center; color:var(--ft-faint); }

/* Trust strip */
.ft-trust { border-top:1px solid var(--ft-border); }
.ft-trust .ft-wrap { display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.75rem 2rem; padding-top:1.15rem; padding-bottom:1.15rem; font-size:.75rem; color:var(--ft-muted); }
.ft-trust span { display:flex; align-items:center; gap:.5rem; }
.ft-trust i { color:var(--brand); }

/* Bottom bar */
.ft-bottom { border-top:1px solid var(--ft-border); background:var(--ft-bottom-bg); }
.ft-bottom .ft-wrap { display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  gap:.75rem; padding-top:1.15rem; padding-bottom:1.15rem; font-size:.75rem; color:var(--ft-faint); }
@media (min-width:640px){ .ft-bottom .ft-wrap{ flex-direction:row; } }
.ft-bottom span { display:flex; align-items:center; gap:.4rem; }
.ft-bottom i.heart { color:var(--brand); }
.ft-bottom button { background:none; border:none; color:inherit; cursor:pointer; display:flex; align-items:center; gap:.35rem; }
.ft-bottom button:hover { color:var(--ft-hover); }

/* ---- Gallery lightbox ----------------------------------------------------
   Self-contained, like .site-footer: the built tailwind.css is purged, and the
   classes this needs (bg-black/90, z-[90], max-h-[90vh]) are NOT in it — which
   is why the old overlay had no backdrop and no stacking context. Owning the
   CSS here keeps it working regardless of what a future purge keeps. */
.lb { position:fixed; inset:0; z-index:90; display:none; background:rgba(0,0,0,.92); }
.lb.open { display:block; }
body.lb-lock { overflow:hidden; }

.lb-stage { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:3.5rem 1rem 5rem; overflow:auto; }
.lb-stage img { max-width:100%; max-height:100%; border-radius:.5rem; object-fit:contain; transition:transform .18s ease; cursor:zoom-in; }
.lb-stage img.zoomed { transform:scale(2); cursor:zoom-out; max-width:none; max-height:none; }

.lb-btn { position:absolute; z-index:2; display:grid; place-items:center; width:2.75rem; height:2.75rem;
  border:1px solid rgba(255,255,255,.18); border-radius:9999px; background:rgba(255,255,255,.08);
  color:#fff; font-size:1.1rem; cursor:pointer; transition:background .15s ease; }
.lb-btn:hover { background:rgba(255,255,255,.2); }
.lb-btn:disabled { opacity:.3; cursor:default; }
.lb-close { top:1rem; right:1rem; }
.lb-prev { left:1rem; top:50%; transform:translateY(-50%); }
.lb-next { right:1rem; top:50%; transform:translateY(-50%); }

.lb-bar { position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; align-items:center; gap:.75rem;
  padding:.75rem 1rem; background:linear-gradient(transparent, rgba(0,0,0,.75)); color:#fff; }
.lb-bar .lb-zoom { position:static; width:2.25rem; height:2.25rem; font-size:.95rem; flex:none; }
.lb-count { font-size:.8rem; opacity:.75; flex:none; }
.lb-cap { font-size:.85rem; opacity:.9; margin-inline-start:auto; text-align:end; }
@media (max-width:640px){ .lb-cap { display:none; } .lb-stage { padding:3.5rem .5rem 4.5rem; } }

/* ---- Article reactions (आपकी प्रतिक्रिया) --------------------------------
   Each reaction owns its colour and animates on hover/press. Self-contained for
   the same reason as the lightbox: arbitrary Tailwind colour/scale utilities do
   not survive the purge, so they cannot be relied on here. */
.react-btn { display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .8rem; border-radius:9999px;
  border:1px solid rgba(125,125,125,.35); background:transparent; cursor:pointer; font-size:.875rem;
  color:#6b7280; line-height:1.4;
  transition:transform .16s cubic-bezier(.2,.8,.3,1.5), background .16s ease, border-color .16s ease, color .16s ease; }
.react-btn .emo { font-size:1.15rem; display:inline-block; line-height:1;
  /* Emoji are colour glyphs already; keep them vivid even when the pill is grey. */
  filter:saturate(1.15); }
.react-btn span { font-variant-numeric:tabular-nums; font-weight:700; }
.react-btn:hover { transform:translateY(-2px); }
.react-btn:active { transform:scale(.93); }
.react-btn:hover .emo { animation:react-wiggle .45s ease; }
.react-btn.reacted { font-weight:700; }
.react-btn.reacted .emo { animation:react-pop .4s cubic-bezier(.2,.8,.3,1.6), react-breathe 2.4s ease-in-out .4s infinite; }

/* Colour per reaction — applied on hover and once chosen. */
.react-btn[data-type="like"]  { --rc:#2563eb; }
.react-btn[data-type="love"]  { --rc:#e11d48; }
.react-btn[data-type="wow"]   { --rc:#d97706; }
.react-btn[data-type="sad"]   { --rc:#4f46e5; }
.react-btn[data-type="angry"] { --rc:#ea580c; }
.react-btn:hover, .react-btn.reacted { color:var(--rc); border-color:var(--rc); background:color-mix(in srgb, var(--rc) 12%, transparent); }
/* color-mix is widely supported, but keep a plain fallback for older engines. */
@supports not (color: color-mix(in srgb, red 10%, transparent)) {
  .react-btn:hover, .react-btn.reacted { background:rgba(125,125,125,.12); }
}

@keyframes react-pop { 0%{transform:scale(1)} 45%{transform:scale(1.45) rotate(-8deg)} 100%{transform:scale(1)} }
@keyframes react-wiggle { 0%,100%{transform:rotate(0)} 30%{transform:rotate(-12deg)} 60%{transform:rotate(10deg)} }
@media (prefers-reduced-motion: reduce) {
  .react-btn, .react-btn .emo { transition:none; }
  .react-btn:hover { transform:none; }
  .react-btn:hover .emo, .react-btn.reacted .emo { animation:none; }
}

/* The chosen reaction keeps a slow breathe so the bar feels alive without nagging. */
@keyframes react-breathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.14)} }