/* Sudama News type and spacing system: the single source for font sizes, line heights and text spacing.
   To change a size, change its token here. Elsewhere use var(--fs-*), var(--lh-*) and var(--space-*), never raw values.
   Loaded after every other stylesheet (see _shared/head.php), so the role rules below take precedence. */

:root{
  /* Font sizes: desktop */
  --fs-display:36px;  /* home hero headline */
  --fs-h1:32px;       /* page title */
  --fs-h2:24px;       /* section heading */
  --fs-h3:20px;       /* sidebar box title, lead card title */
  --fs-h4:18px;       /* listing card title */
  --fs-h5:16px;       /* standard card title */
  --fs-h6:14px;       /* compact list title */
  --fs-prose:18px;    /* article and static page text */
  --fs-body:16px;     /* default paragraph */
  --fs-sm:14px;       /* excerpts, general UI text */
  --fs-meta:12px;     /* dates, views, breadcrumbs */
  --fs-xs:11px;       /* badges */

  /* Line heights: Devanagari matras clip below 1.3 */
  --lh-tight:1.3;
  --lh-snug:1.4;
  --lh-normal:1.5;
  --lh-relaxed:1.7;
  --lh-prose:1.8;

  /* Spacing scale (names match the existing mt-* / mb-* / pt-* / pb-* utilities) */
  --space-xs:4px;
  --space-sm:8px;
  --space-md:16px;
  --space-lg:20px;
  --space-xl:24px;
  --space-xxl:40px;

  /* Spacing roles */
  --gap-title:12px;     /* page title to the text below it */
  --gap-heading:16px;   /* section or box heading to its content */
  --gap-paragraph:20px; /* between paragraphs of long text */
  --gap-section:32px;   /* between sections of a page */
  --gap-box:16px;       /* between sidebar boxes */
  --pad-box:20px;       /* inside boxes */
}

/* Font sizes and spacing roles: mobile */
html[data-platform="wap"]{
  --fs-display:24px;--fs-h1:26px;--fs-h2:20px;--fs-h3:18px;--fs-h4:16px;--fs-h5:15px;
  --gap-section:24px;--pad-box:16px;
}
@media (max-width:767px){
  :root{
    --fs-display:24px;--fs-h1:26px;--fs-h2:20px;--fs-h3:18px;--fs-h4:16px;--fs-h5:15px;
    --gap-section:24px;--pad-box:16px;
  }
}

/* Base elements */
body{font-size:var(--fs-sm);line-height:var(--lh-normal)}
h1,html[lang][data-platform] h1{font-size:var(--fs-h1);line-height:var(--lh-tight);font-weight:700}
h2,html[lang][data-platform] h2{font-size:var(--fs-h2);line-height:var(--lh-tight);font-weight:700}
h3,html[lang][data-platform] h3{font-size:var(--fs-h3);line-height:var(--lh-snug);font-weight:700}
h4,html[lang][data-platform] h4{font-size:var(--fs-h4);line-height:var(--lh-snug);font-weight:600}
h5,html[lang][data-platform] h5{font-size:var(--fs-h5);line-height:var(--lh-normal);font-weight:600}
h6,html[lang][data-platform] h6{font-size:var(--fs-h6);line-height:var(--lh-normal);font-weight:600}
p{font-size:var(--fs-body);line-height:var(--lh-relaxed)}
button,input,select,textarea{font-size:var(--fs-sm)}

/* Page title: same size, weight and gap on every page */
html[lang][data-platform] .tp-in h1,
html[lang][data-platform] .ap2-txt h1,
html[lang][data-platform] .nf-hero h1{margin:0 0 var(--gap-title)}

/* Section headings */
html[lang][data-platform] .more-head h2,
html[lang][data-platform] .sec-head h2,
html[lang][data-platform] .vs-head h2,
html[lang][data-platform] .tp-sec-h h2,
html[lang][data-platform] .ap-h,
html[lang][data-platform] .fp-head h2,
html[lang][data-platform] .sp-body h2,
html[lang][data-platform] .ws-empty h2{font-size:var(--fs-h2);line-height:var(--lh-tight);font-weight:700}
html[lang][data-platform] .tp-sec-h,
html[lang][data-platform] .ap-h,
html[lang][data-platform] .fp-head{margin-bottom:var(--gap-heading)}

/* Box headings */
html[lang][data-platform] .ls-box h2,
html[lang][data-platform] .side-box h2,
html[lang][data-platform] .col-1 h2,
html[lang][data-platform] .rf-head h2,
html[lang][data-platform] .follow-box h2,
html[lang][data-platform] .more-links h2,
html[lang][data-platform] .share-end h2{font-size:var(--fs-h3);line-height:var(--lh-snug);font-weight:700}
html[lang][data-platform] .ls-box h2,
html[lang][data-platform] .more-links h2,
html[lang][data-platform] .share-end h2{margin:0 0 var(--gap-heading)}

/* Card titles: the heading tags take the size of the link inside them, so line spacing stays even */
html[lang][data-platform] .featured-banner h2,
html[lang][data-platform] .featured-banner .heading-h2,
html[lang][data-platform] .hero-grid .featured-banner .heading-h2{font-size:var(--fs-display);line-height:var(--lh-tight)}
html[lang][data-platform] .listing-card h2,
html[lang][data-platform] .listing-card .t-heading{font-size:var(--fs-h4);line-height:var(--lh-snug);font-weight:600}
html[lang][data-platform] .card-title,
html[lang][data-platform] .card-title .t-heading,
html[lang][data-platform] .nc-title,
html[lang][data-platform] .nr-title,
html[lang][data-platform] .pr-h,
html[lang][data-platform] .pr-h .t-heading{font-size:var(--fs-h5);line-height:var(--lh-normal);font-weight:600}

/* Compact lists: the same size in every sidebar and in the footer */
html[lang][data-platform] .col-1 .pr-h,
html[lang][data-platform] .col-1 .pr-h .t-heading,
html[lang][data-platform] .side-box .pr-h,
html[lang][data-platform] .side-box .pr-h .t-heading,
html[lang][data-platform] .ls-box .pr-h,
html[lang][data-platform] .ls-box .pr-h .t-heading,
html[lang][data-platform] .ls-box .t-heading,
html[lang][data-platform] .footer-popular .t-heading{font-size:var(--fs-h6);line-height:var(--lh-normal);font-weight:600}

/* Long text: articles and static pages */
html[lang][data-platform] .news-detail-content p,
html[lang][data-platform] .news-detail-content li,
html[lang][data-platform] .news-detail-content strong,
html[lang][data-platform] .sp-body p,
html[lang][data-platform] .sp-body li,
html[lang][data-platform] .sp-body strong{font-size:var(--fs-prose);line-height:var(--lh-prose)}
html[lang][data-platform] .news-detail-content p,
html[lang][data-platform] .sp-body p{margin:0 0 var(--gap-paragraph)}
html[lang][data-platform] .sp-body h2{margin:var(--gap-section) 0 var(--gap-title)}

/* Intro and supporting text */
html[lang][data-platform] .tp-in p,
html[lang][data-platform] .ap2-bio,
html[lang][data-platform] .nf-hero p,
html[lang][data-platform] .ws-empty p{font-size:var(--fs-body);line-height:var(--lh-relaxed)}
html[lang][data-platform] .rf-text{font-size:var(--fs-sm);line-height:var(--lh-relaxed)}
html[lang][data-platform] .listing-card p,
html[lang][data-platform] .ls-box p{font-size:var(--fs-sm);line-height:var(--lh-normal)}

/* Labels and buttons */
html[lang][data-platform] .listing-cat{font-size:var(--fs-meta);line-height:var(--lh-normal)}
html[lang][data-platform] .tp-join-btn{font-size:var(--fs-sm)}

/* Breadcrumbs and metadata */
html[lang][data-platform] .breadcrumb,
html[lang][data-platform] .breadcrumb li,
html[lang][data-platform] .breadcrumb a,
html[lang][data-platform] .nc-meta,
html[lang][data-platform] .nc-meta time,
html[lang][data-platform] .nc-meta span{font-size:var(--fs-meta);line-height:var(--lh-normal)}
html[lang][data-platform] .featured-banner .overlay-info,
html[lang][data-platform] .featured-banner .overlay-info *{font-size:var(--fs-sm)}
html[lang][data-platform] .breadcrumb,
html[lang][data-platform] .blog-detail .breadcrumb{padding:var(--gap-title) 0}
html[lang][data-platform] .breadcrumb li::after{height:auto;margin-top:0;line-height:1;transform:translateY(-50%)}

/* Boxes and sections */
html[lang][data-platform] .ls-box,
html[lang][data-platform] .blog-detail .article-side .side-box,
html[lang][data-platform] .more-links,
html[lang][data-platform] .share-end{padding:var(--pad-box)}
html[lang][data-platform] .ls-box{margin-bottom:var(--gap-box)}
html[lang][data-platform] .blog-detail .related-news,
html[lang][data-platform] .blog-detail .more-block,
html[lang][data-platform] .blog-detail .more-links,
html[lang][data-platform] .share-end{margin-top:var(--gap-section)}