/**
 * Hindi typography & reading UX — additive layer.
 * Safe to keep when design pass rewrites portal.css layout/color.
 */

:root {
  --font-body: 'Noto Sans Devanagari', 'Source Sans 3', sans-serif;
  --font-display: 'Noto Serif Devanagari', 'Noto Sans Devanagari', serif;
  --font-ui: 'Source Sans 3', 'Noto Sans Devanagari', sans-serif;
  --font: var(--font-body);

  /* Modular type scale (rem) — tuned for Devanagari x-height */
  --step--1: 0.8125rem;  /* 13 */
  --step-0: 1rem;         /* 16 */
  --step-1: 1.125rem;     /* 18 */
  --step-2: 1.3125rem;    /* 21 */
  --step-3: 1.5625rem;    /* 25 */
  --step-4: 1.875rem;     /* 30 */
  --step-5: 2.25rem;      /* 36 */
  --step-6: 2.75rem;      /* 44 */

  --leading-tight: 1.35;
  --leading-snug: 1.5;
  --leading-body: 1.8;
  --leading-article: 1.9;

  /* ~65–72 Devanagari aksaras / comfortable Latin chars */
  --measure: 38rem;
  --measure-wide: 42rem;

  --tap-min: 44px;
  --nav-sticky-shadow: 0 1px 0 color-mix(in srgb, var(--line) 80%, transparent),
    0 8px 24px -12px rgba(33, 41, 35, 0.18);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  font-optical-sizing: auto;
  font-feature-settings: 'kern' 1, 'liga' 1;
  hanging-punctuation: first allow-end;
}

/* —— Display / brand —— */
.brand-tagline,
.hero h2,
.single-article h1,
.section-heading h1,
.section-heading h2,
.latest-title h2,
.region-card h2,
.newsletter h2,
.dialog h2,
.empty-state h1,
.empty-state h2,
.results-title {
  font-family: var(--font-display);
  text-wrap: balance;
  letter-spacing: -0.01em;
}

.brand-tag,
.eyebrow,
.live-pill,
.ticker strong,
.time,
.ist-date {
  font-family: var(--font-ui);
  font-feature-settings: 'tnum' 1, 'kern' 1;
}

.brand-tag {
  letter-spacing: 0.18em;
}

/* —— Article reading column —— */
.single-article {
  max-width: var(--measure-wide);
  margin-inline: auto;
}

.single-article h1 {
  font-size: clamp(var(--step-4), 4.2vw, var(--step-6));
  font-weight: 700;
  line-height: var(--leading-snug);
  margin: 0.35em 0 0.5em;
  max-width: 22em;
}

.entry-content {
  max-width: var(--measure);
  font-size: var(--step-1);
  line-height: var(--leading-article);
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}

.entry-content > * + * {
  margin-block-start: 1.05em;
}

.entry-content p {
  margin: 0;
}

.entry-content h2 {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  line-height: var(--leading-snug);
  margin-block: 1.4em 0.55em;
  text-wrap: balance;
}

.entry-content h3 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: var(--leading-snug);
  margin-block: 1.25em 0.45em;
}

.entry-content h4 {
  font-size: var(--step-1);
  font-weight: 700;
  margin-block: 1.1em 0.4em;
}

.entry-content ul,
.entry-content ol {
  padding-inline-start: 1.35em;
}

.entry-content li + li {
  margin-block-start: 0.35em;
}

.entry-content blockquote {
  margin: 1.25em 0;
  padding: 0.65em 0 0.65em 1.1em;
  border-inline-start: 3px solid var(--red);
  font-size: 1.05em;
  line-height: var(--leading-body);
  color: color-mix(in srgb, var(--ink) 88%, var(--muted));
}

.entry-content a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
}

.entry-content a:hover {
  color: var(--red);
}

/* —— Card / list hierarchy —— */
.image-card h2,
.news-grid h2 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-snug);
  text-wrap: balance;
}

.text-story h3,
.list-card h3 {
  font-family: var(--font-body);
  font-weight: 600;
  line-height: var(--leading-snug);
  text-wrap: pretty;
}

.hero h2 {
  font-size: clamp(var(--step-3), 3.2vw, var(--step-5));
  font-weight: 700;
  line-height: var(--leading-snug);
}

.section-heading h1,
.section-heading h2 {
  font-size: var(--step-2);
  font-weight: 700;
}

/* —— Search / empty / 404 —— */
.search-panel form {
  align-items: stretch;
}

.search-panel input[type='search'],
.search-form input[type='search'] {
  min-height: var(--tap-min);
  font-size: var(--step-0);
  border-radius: 4px;
}

.search-panel .solid-button,
.search-form .solid-button,
.search-form button {
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding-inline: 1.15rem;
}

.empty-state {
  max-width: 34rem;
  margin-inline: auto;
  padding: 3rem 1.5rem;
}

.empty-state h1,
.empty-state h2 {
  font-size: clamp(var(--step-3), 3vw, var(--step-4));
  margin: 0 0 0.55em;
}

.empty-state p {
  font-size: var(--step-0);
  line-height: var(--leading-body);
  color: var(--muted);
  margin: 0 0 1.25em;
}

.empty-state .solid-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  margin-bottom: 1.25em;
}

.empty-state .search-form {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.5rem;
}

.empty-state .search-form label {
  width: 100%;
  font-size: var(--step--1);
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.empty-state .search-form input[type='search'] {
  flex: 1 1 14rem;
  min-width: 0;
  border: 1px solid var(--line);
  background: #fff;
  padding: 0.65rem 0.85rem;
}

.results-kicker {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--muted);
  margin: -0.5rem 0 1.25rem;
  letter-spacing: 0.02em;
}

.results-title {
  font-size: var(--step-3);
  font-weight: 700;
  margin: 0 0 0.35em;
}

/* —— Sticky nav usability —— */
.nav-shell {
  position: sticky;
  top: 0;
  z-index: 40;
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.nav-shell.is-stuck {
  box-shadow: var(--nav-sticky-shadow);
}

.nav {
  -webkit-overflow-scrolling: touch;
  scroll-padding-inline: 1rem;
  gap: clamp(1rem, 3vw, 1.75rem);
}

.nav a,
.nav button,
.rs-menu a {
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  padding-block: 0.65rem;
  white-space: nowrap;
}

.nav .rs-menu {
  gap: clamp(1rem, 3vw, 1.6rem);
}

/* —— Tap targets (mobile-first minimums) —— */
.icon-button {
  width: var(--tap-min);
  height: var(--tap-min);
  min-width: var(--tap-min);
  min-height: var(--tap-min);
}

.solid-button,
.outline-button,
.share-bar a,
.share-bar button,
.pagination .page-numbers {
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chip {
  min-height: 2.25rem;
  padding-inline: 0.95rem;
  display: inline-flex;
  align-items: center;
}

.district-strip {
  scroll-snap-type: x proximity;
  gap: 0.5rem;
}

.district-strip .chip {
  scroll-snap-align: start;
}

.utility a,
.footer-links a {
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
}

.skip-link:focus {
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
}

/* —— Meta / share readability —— */
.meta {
  font-size: var(--step--1);
  line-height: 1.45;
  gap: 0.4rem 0.55rem;
}

.share-bar {
  gap: 0.5rem;
}

.source-box {
  max-width: var(--measure);
  line-height: var(--leading-body);
}

/* —— Mobile refinements —— */
@media (max-width: 700px) {
  body {
    font-size: 0.96875rem; /* ~15.5 — Devanagari breathes on narrow screens */
  }

  .entry-content {
    font-size: 1.0625rem;
    line-height: 1.92;
  }

  .single-article {
    margin-block: 1.25rem 2.5rem;
    padding-inline: 0;
  }

  .single-article h1 {
    font-size: clamp(1.55rem, 7vw, 2rem);
    max-width: none;
  }

  .nav {
    min-height: var(--tap-min);
    gap: 1.15rem;
    padding-block: 0;
  }

  .nav a,
  .nav button,
  .rs-menu a {
    padding-block: 0.75rem;
    font-size: 0.875rem;
  }

  .mast-actions .icon-button {
    width: var(--tap-min);
    height: var(--tap-min);
  }

  .search-panel {
    padding-block: 0.85rem;
  }

  .empty-state {
    padding: 2.25rem 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-shell {
    transition: none;
  }
}