/* Nipun India — public site design system (articles, hubs, course & center pages).
   Works alongside the Tailwind CDN used by includes/header.php. */

:root {
  --ni-navy: #002443;
  --ni-navy-2: #00315c;
  --ni-navy-deep: #001a33;
  --ni-gold: #eaad3a;
  --ni-gold-soft: #fdf4e3;
  --ni-ink: #1f2937;
  --ni-ink-2: #4b5563;
  --ni-muted: #6b7280;
  --ni-line: #e5e7eb;
  --ni-surface: #ffffff;
  --ni-page: #f7f8fb;
  --ni-green: #047857;
  --ni-green-soft: #ecfdf5;
  --ni-blue-soft: #eff6ff;
  --ni-red-soft: #fef2f2;
  --ni-radius: 16px;
  --ni-shadow: 0 1px 2px rgba(0, 36, 67, .06), 0 8px 24px -12px rgba(0, 36, 67, .18);
}

/* ---------- Page hero ---------- */
.ni-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(1200px 400px at 90% -10%, rgba(234, 173, 58, .22), transparent 60%),
    radial-gradient(800px 300px at -10% 110%, rgba(0, 114, 255, .18), transparent 60%),
    linear-gradient(135deg, var(--ni-navy) 0%, var(--ni-navy-deep) 100%);
  padding: 56px 0 64px;
}
@media (min-width: 768px) { .ni-hero { padding: 80px 0 88px; } }
.ni-hero__inner { max-width: 880px; margin: 0 auto; padding: 0 16px; }
.ni-hero__crumbs { font-size: .8125rem; color: rgba(255, 255, 255, .7); margin-bottom: 18px; }
.ni-hero__crumbs a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.ni-hero__crumbs a:hover { color: var(--ni-gold); }
.ni-hero__crumbs span { margin: 0 6px; opacity: .5; }
.ni-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ni-navy); background: var(--ni-gold);
  padding: 6px 12px; border-radius: 999px;
}
.ni-hero h1 {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700; line-height: 1.18; letter-spacing: -.01em;
  font-size: clamp(1.75rem, 4.2vw, 2.75rem);
  margin: 16px 0 14px;
}
.ni-hero__lede { font-size: 1.0625rem; line-height: 1.7; color: rgba(255, 255, 255, .86); max-width: 720px; }
.ni-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; font-size: .875rem; color: rgba(255, 255, 255, .78); }
.ni-meta a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(234, 173, 58, .7); text-underline-offset: 3px; }
.ni-meta i { color: var(--ni-gold); margin-right: 6px; }

/* ---------- Article layout ---------- */
.ni-article-wrap { background: var(--ni-page); padding: 40px 0 72px; }
.ni-article-grid { max-width: 1160px; margin: 0 auto; padding: 0 16px; display: grid; gap: 32px; }
@media (min-width: 1024px) { .ni-article-grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; } }
.ni-article-main {
  background: var(--ni-surface); border: 1px solid var(--ni-line); border-radius: var(--ni-radius);
  box-shadow: var(--ni-shadow); padding: 24px 18px;
  min-width: 0;
}
@media (min-width: 768px) { .ni-article-main { padding: 44px 52px; } }
.ni-aside { display: none; }
@media (min-width: 1024px) { .ni-aside { display: block; } }
.ni-aside__sticky { position: sticky; top: 140px; display: grid; gap: 20px; }
.ni-card {
  background: var(--ni-surface); border: 1px solid var(--ni-line); border-radius: var(--ni-radius);
  box-shadow: var(--ni-shadow); padding: 20px;
}
.ni-card h3, .ni-card h4 { font-family: 'Poppins', system-ui, sans-serif; color: var(--ni-navy); font-weight: 700; }

/* Table of contents */
.ni-toc__title { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ni-muted); margin-bottom: 10px; }
.ni-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.ni-toc li { counter-increment: toc; }
.ni-toc a {
  display: flex; gap: 10px; padding: 7px 8px; border-radius: 8px;
  font-size: .875rem; line-height: 1.4; color: var(--ni-ink-2); text-decoration: none;
}
.ni-toc a::before { content: counter(toc, decimal-leading-zero); font-weight: 700; color: var(--ni-gold); font-variant-numeric: tabular-nums; }
.ni-toc a:hover, .ni-toc a.is-active { background: var(--ni-gold-soft); color: var(--ni-navy); }
.ni-toc--inline { border: 1px solid var(--ni-line); border-radius: 12px; padding: 16px; margin: 0 0 28px; background: #fbfcfe; }
@media (min-width: 1024px) { .ni-toc--inline { display: none; } }

/* Prose */
.ni-prose { color: var(--ni-ink); font-size: 1.0625rem; line-height: 1.8; overflow-wrap: break-word; }
.ni-prose > * + * { margin-top: 1.1em; }
.ni-prose h2 {
  font-family: 'Poppins', system-ui, sans-serif; color: var(--ni-navy);
  font-size: clamp(1.35rem, 2.6vw, 1.7rem); line-height: 1.3; font-weight: 700;
  margin-top: 2.2em; padding-top: .4em; scroll-margin-top: 140px;
}
.ni-prose h3 {
  font-family: 'Poppins', system-ui, sans-serif; color: var(--ni-navy-2);
  font-size: 1.2rem; line-height: 1.4; font-weight: 600; margin-top: 1.8em; scroll-margin-top: 140px;
}
.ni-prose p { margin-bottom: 0; }
.ni-prose a { color: #0b5cad; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(11, 92, 173, .35); }
.ni-prose a:hover { text-decoration-color: currentColor; }
.ni-prose strong { color: #111827; }
.ni-prose ul, .ni-prose ol { padding-left: 1.4em; }
.ni-prose ul { list-style: disc; }
.ni-prose ol { list-style: decimal; }
.ni-prose li { margin: .4em 0; padding-left: .2em; }
.ni-prose li::marker { color: var(--ni-gold); font-weight: 700; }
.ni-prose code { background: #f3f4f6; border: 1px solid var(--ni-line); border-radius: 6px; padding: .1em .4em; font-size: .9em; }
.ni-prose pre { background: #0f172a; color: #e2e8f0; border-radius: 12px; padding: 16px; overflow-x: auto; font-size: .9rem; line-height: 1.6; }
.ni-prose pre code { background: none; border: 0; padding: 0; color: inherit; }
.ni-prose blockquote { border-left: 4px solid var(--ni-gold); background: var(--ni-gold-soft); padding: 14px 18px; border-radius: 0 12px 12px 0; color: var(--ni-ink); }
.ni-prose hr { border: 0; border-top: 1px solid var(--ni-line); margin: 2.4em 0; }
.ni-prose .ni-lede { font-size: 1.2rem; line-height: 1.75; color: #111827; }

/* Tables */
.ni-table-wrap { overflow-x: auto; border: 1px solid var(--ni-line); border-radius: 12px; -webkit-overflow-scrolling: touch; }
.ni-table-wrap table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.55; min-width: 520px; }
.ni-table-wrap th { background: var(--ni-navy); color: #fff; text-align: left; font-weight: 600; padding: 12px 14px; }
.ni-table-wrap td { padding: 11px 14px; border-top: 1px solid var(--ni-line); vertical-align: top; }
.ni-table-wrap tr:nth-child(even) td { background: #fafbfc; }

/* Callouts */
.ni-callout { border-radius: 14px; padding: 18px 20px; border: 1px solid; font-size: 1rem; line-height: 1.7; }
.ni-callout__title { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 6px; font-family: 'Poppins', system-ui, sans-serif; }
.ni-callout > :last-child { margin-bottom: 0; }
.ni-callout ul { margin-top: .4em; }
.ni-callout--tip { background: var(--ni-green-soft); border-color: #a7f3d0; }
.ni-callout--tip .ni-callout__title { color: var(--ni-green); }
.ni-callout--info { background: var(--ni-blue-soft); border-color: #bfdbfe; }
.ni-callout--info .ni-callout__title { color: #1d4ed8; }
.ni-callout--warn { background: #fffbeb; border-color: #fde68a; }
.ni-callout--warn .ni-callout__title { color: #b45309; }
.ni-callout--danger { background: var(--ni-red-soft); border-color: #fecaca; }
.ni-callout--danger .ni-callout__title { color: #b91c1c; }

/* Key takeaways */
.ni-takeaways { background: linear-gradient(135deg, #fffaf0, #fff); border: 1px solid #f3d9a4; border-radius: 14px; padding: 20px 22px; }
.ni-takeaways h2, .ni-takeaways .ni-takeaways__title { margin: 0 0 8px; padding: 0; font-size: 1.05rem; color: var(--ni-navy); font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; }
.ni-takeaways ul { margin: 0; padding-left: 1.2em; }

/* Steps */
.ni-steps { list-style: none !important; padding: 0 !important; counter-reset: step; display: grid; gap: 14px; }
.ni-steps > li { counter-increment: step; position: relative; padding: 16px 16px 16px 60px !important; margin: 0 !important; background: #fbfcfe; border: 1px solid var(--ni-line); border-radius: 12px; }
.ni-steps > li::before {
  content: counter(step); position: absolute; left: 16px; top: 15px;
  width: 30px; height: 30px; border-radius: 50%; background: var(--ni-navy); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: .875rem;
}
.ni-steps > li::marker { content: none; }

/* Checklist */
.ni-checklist { list-style: none !important; padding-left: 0 !important; }
.ni-checklist li { position: relative; padding-left: 30px !important; }
.ni-checklist li::before { content: "\2713"; position: absolute; left: 0; top: .05em; width: 20px; height: 20px; border-radius: 6px; background: var(--ni-green-soft); color: var(--ni-green); font-weight: 800; font-size: .8rem; display: grid; place-items: center; }

/* FAQ */
.ni-faq { display: grid; gap: 10px; }
.ni-faq details { border: 1px solid var(--ni-line); border-radius: 12px; background: #fff; }
.ni-faq summary { cursor: pointer; list-style: none; padding: 14px 44px 14px 16px; font-weight: 600; color: var(--ni-navy); position: relative; }
.ni-faq summary::-webkit-details-marker { display: none; }
.ni-faq summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 1.3rem; color: var(--ni-gold); }
.ni-faq details[open] summary::after { content: "\2212"; }
.ni-faq details > div { padding: 0 16px 16px; color: var(--ni-ink-2); line-height: 1.75; }

/* Sources & byline box */
.ni-sources { border-top: 1px solid var(--ni-line); margin-top: 40px; padding-top: 24px; font-size: .9375rem; }
.ni-sources h2 { margin: 0 0 10px !important; padding: 0 !important; font-size: 1.05rem !important; }
.ni-sources ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ni-sources li::before { content: "\2197"; color: var(--ni-gold); margin-right: 8px; font-weight: 700; }
.ni-byline-box { display: flex; gap: 16px; align-items: flex-start; background: #f8fafc; border: 1px solid var(--ni-line); border-radius: 14px; padding: 18px; margin-top: 32px; }
.ni-byline-box__icon { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 12px; background: var(--ni-navy); color: var(--ni-gold); display: grid; place-items: center; font-size: 1.25rem; }
.ni-byline-box p { margin: 0; font-size: .9375rem; line-height: 1.65; color: var(--ni-ink-2); }
.ni-byline-box strong { color: var(--ni-navy); }

/* Related grid */
.ni-related { margin-top: 40px; }
.ni-related__title { font-family: 'Poppins', system-ui, sans-serif; color: var(--ni-navy); font-weight: 700; font-size: 1.2rem; margin-bottom: 14px; }
.ni-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ni-tile {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none;
  background: #fff; border: 1px solid var(--ni-line); border-radius: 14px; padding: 18px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.ni-tile:hover { border-color: var(--ni-gold); box-shadow: var(--ni-shadow); transform: translateY(-2px); }
.ni-tile__tag { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #b7791f; }
.ni-tile__title { font-family: 'Poppins', system-ui, sans-serif; font-weight: 600; color: var(--ni-navy); line-height: 1.4; }
.ni-tile__desc { font-size: .875rem; color: var(--ni-muted); line-height: 1.6; }
.ni-tile__meta { margin-top: auto; font-size: .8rem; color: var(--ni-muted); }

/* Sections on hub / listing pages */
.ni-section { padding: 56px 0; }
.ni-section--alt { background: var(--ni-page); }
.ni-container { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
.ni-section__head { max-width: 760px; margin-bottom: 28px; }
.ni-section__head h2 { font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; color: var(--ni-navy); font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.25; }
.ni-section__head p { color: var(--ni-ink-2); margin-top: 10px; line-height: 1.7; }

/* Stat tiles (live DB numbers only) */
.ni-stats { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .ni-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ni-stat { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; padding: 16px; }
.ni-stat__value { font-family: 'Poppins', system-ui, sans-serif; font-size: 1.75rem; font-weight: 700; color: var(--ni-gold); font-variant-numeric: tabular-nums; line-height: 1.1; }
.ni-stat__label { font-size: .8125rem; color: rgba(255, 255, 255, .8); margin-top: 6px; }
.ni-stats--light .ni-stat { background: #fff; border-color: var(--ni-line); box-shadow: var(--ni-shadow); }
.ni-stats--light .ni-stat__value { color: var(--ni-navy); }
.ni-stats--light .ni-stat__label { color: var(--ni-muted); }
.ni-stat-note { font-size: .75rem; color: rgba(255, 255, 255, .6); margin-top: 10px; }
.ni-stats--light + .ni-stat-note { color: var(--ni-muted); }

/* Buttons & chips */
.ni-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; border-radius: 12px; padding: 12px 20px; text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s; }
.ni-btn--gold { background: var(--ni-gold); color: var(--ni-navy); box-shadow: 0 6px 18px -6px rgba(234, 173, 58, .6); }
.ni-btn--gold:hover { transform: translateY(-1px); background: #f0b94f; }
.ni-btn--ghost { border: 1px solid rgba(255, 255, 255, .4); color: #fff; }
.ni-btn--ghost:hover { background: rgba(255, 255, 255, .08); }
.ni-btn--navy { background: var(--ni-navy); color: #fff; }
.ni-btn--navy:hover { background: var(--ni-navy-2); }
.ni-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: #f1f5f9; color: var(--ni-ink-2); text-decoration: none; border: 1px solid transparent; }
.ni-chip:hover, .ni-chip.is-active { background: var(--ni-gold-soft); color: var(--ni-navy); border-color: #f3d9a4; }

/* Center cards */
.ni-center { background: #fff; border: 1px solid var(--ni-line); border-radius: 14px; padding: 18px; display: grid; gap: 10px; }
.ni-center__name { font-family: 'Poppins', system-ui, sans-serif; font-weight: 600; color: var(--ni-navy); line-height: 1.35; }
.ni-center__addr { font-size: .9rem; color: var(--ni-ink-2); line-height: 1.6; }
.ni-center__badge { justify-self: start; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ni-green); background: var(--ni-green-soft); padding: 4px 10px; border-radius: 999px; }

/* Reading progress */
.ni-progress { position: fixed; left: 0; top: 0; height: 3px; width: 0; background: var(--ni-gold); z-index: 100; transition: width .1s linear; }

@media print {
  .ni-aside, .ni-progress, .floating-buttons, header, footer, .announcement-ticker { display: none !important; }
  .ni-article-main { box-shadow: none; border: 0; }
}