/* =========================================================
   AN-NIKMAH MULTILINGUAL TYPOGRAPHY SYSTEM
   Visual typography only — does not alter page copy/content.
   Latin: Merriweather + Inter
   Khmer: Noto Serif Khmer + Noto Sans Khmer
   Arabic: Noto Naskh Arabic + Noto Sans Arabic
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=Noto+Naskh+Arabic:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@400;500;600;700&family=Noto+Sans+Khmer:wght@400;500;600;700&family=Noto+Serif+Khmer:wght@400;500;600;700&display=swap');

:root{
  --type-body:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --type-heading:'Merriweather',Georgia,'Times New Roman',serif;
  --type-ui:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --type-body-size:16px;
  --type-body-leading:1.72;
  --type-heading-leading:1.22;
  --type-heading-track:-.018em;
  --type-ui-track:0;
}

html[lang="km"]{
  --type-body:'Noto Sans Khmer','Khmer OS System',sans-serif;
  --type-heading:'Noto Sans Khmer','Khmer OS System',sans-serif;
  --type-ui:'Noto Sans Khmer','Khmer OS System',sans-serif;
  --type-body-size:16px;
  --type-body-leading:1.82;
  --type-heading-leading:1.38;
  --type-heading-track:0;
  --type-ui-track:0;
}

html[lang="ar"]{
  --type-body:'Noto Sans Arabic','Tahoma','Arial',sans-serif;
  --type-heading:'Noto Naskh Arabic','Amiri','Times New Roman',serif;
  --type-ui:'Noto Sans Arabic','Tahoma','Arial',sans-serif;
  --type-body-size:16px;
  --type-body-leading:1.86;
  --type-heading-leading:1.34;
  --type-heading-track:0;
  --type-ui-track:0;
}

html[lang="id"],html[lang="en"]{
  --type-body:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --type-heading:'Merriweather',Georgia,'Times New Roman',serif;
  --type-ui:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

html{font-size:var(--type-body-size);text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{
  font-family:var(--type-body) !important;
  font-size:1rem !important;
  line-height:var(--type-body-leading) !important;
  font-kerning:normal;
  text-rendering:optimizeLegibility;
}

/* Body copy */
p,li,dd,dt,input,textarea,select,label{
  font-family:var(--type-body) !important;
}
p{line-height:var(--type-body-leading) !important}

/* Editorial headings */
h1,h2,h3,
.hero h1,
.section-head h2,
.ux-page-hero h1,
.public-page-hero h1,
.article-hero h1,
.ed-about-copy h2,
.ed-feature-copy h3,
.ed-impact-quote h2,
.ed-program-content h2,
.ed-country-head h2{
  font-family:var(--type-heading) !important;
  font-weight:700 !important;
  line-height:var(--type-heading-leading) !important;
  letter-spacing:var(--type-heading-track) !important;
  text-wrap:balance;
}

/* UI text remains sans for clarity */
.site-topbar,.brand-title,.brand-sub,
.nav-group>a,.nav-group>button,.dropdown-panel a,
.mobile-item>a,.mobile-item>button,.mobile-submenu a,
.lang-option,.btn,.tab-btn,.eyebrow,.link-arrow,
.stat-card b,.stat-card span,.story-tag,.breadcrumb,
.public-news-date,.public-research-date,.footer-grid h4,
.form-group label,.back-link,.share-panel h4{
  font-family:var(--type-ui) !important;
  letter-spacing:var(--type-ui-track) !important;
}

/* Stable desktop scale */
.hero h1{
  font-size:clamp(2.65rem,4.65vw,4.25rem) !important;
  max-width:850px !important;
}
.hero p{
  font-size:1.04rem !important;
  line-height:1.78 !important;
  max-width:660px !important;
}
.section-head h2{
  font-size:clamp(1.95rem,3.1vw,2.85rem) !important;
}
.section-head p{
  font-size:.98rem !important;
  line-height:1.78 !important;
}
.ux-page-hero h1,.public-page-hero h1{
  font-size:clamp(2.25rem,4vw,3.35rem) !important;
}
.ux-page-hero p,.public-page-hero p{
  font-size:1rem !important;
  line-height:1.76 !important;
}
.article-hero h1{
  font-size:clamp(2.15rem,4.15vw,3.55rem) !important;
}
.article-content{
  font-family:var(--type-body) !important;
  font-size:1.02rem !important;
  line-height:1.9 !important;
}
.ed-about-copy h2,.ed-program-content h2{
  font-size:clamp(1.9rem,2.9vw,2.65rem) !important;
}
.ed-feature-copy h3{
  font-size:clamp(1.65rem,2.6vw,2.25rem) !important;
}
.ed-impact-quote h2{
  font-size:clamp(2rem,3.25vw,2.9rem) !important;
}
.ed-program h3,.ed-lead-main-copy h3{
  font-size:1.28rem !important;
  line-height:1.35 !important;
}
.ed-country-head h2{font-size:1.55rem !important}
.public-news-card:first-child h4,.public-research-card:first-child h4{
  font-family:var(--type-heading) !important;
  font-size:1.6rem !important;
  line-height:1.45 !important;
  letter-spacing:var(--type-heading-track) !important;
}

/* Navigation and UI scale */
.brand-title{font-size:.92rem !important;line-height:1.28 !important;font-weight:700 !important}
.brand-sub{font-size:.61rem !important;line-height:1.35 !important}
.nav-group>a,.nav-group>button{font-size:.80rem !important;line-height:1.3 !important}
.dropdown-panel a{font-size:.82rem !important;line-height:1.42 !important}
.mobile-item>a,.mobile-item>button,.mobile-submenu a{font-size:.92rem !important;line-height:1.5 !important}
.btn{font-size:.84rem !important;line-height:1.25 !important}
.eyebrow{font-size:.69rem !important;line-height:1.45 !important}
.tab-btn{font-size:.82rem !important}
.stat-card b{font-size:2.05rem !important;line-height:1.1 !important}
.stat-card span{font-size:.66rem !important;line-height:1.45 !important}
.form-group label{font-size:.83rem !important}

/* Khmer optical compensation */
html[lang="km"] .hero h1{font-size:clamp(2.15rem,4vw,3.35rem) !important;line-height:1.42 !important}
html[lang="km"] .hero p{font-size:1rem !important;line-height:1.9 !important}
html[lang="km"] .section-head h2{font-size:clamp(1.75rem,2.75vw,2.35rem) !important;line-height:1.46 !important}
html[lang="km"] .ux-page-hero h1,
html[lang="km"] .public-page-hero h1{font-size:clamp(1.95rem,3.6vw,2.8rem) !important;line-height:1.44 !important}
html[lang="km"] .article-hero h1{font-size:clamp(1.9rem,3.65vw,2.9rem) !important;line-height:1.46 !important}
html[lang="km"] .ed-about-copy h2,
html[lang="km"] .ed-program-content h2{font-size:clamp(1.7rem,2.55vw,2.2rem) !important;line-height:1.48 !important}
html[lang="km"] .ed-feature-copy h3{font-size:clamp(1.48rem,2.35vw,2rem) !important;line-height:1.48 !important}
html[lang="km"] .public-news-card:first-child h4,
html[lang="km"] .public-research-card:first-child h4{font-size:1.42rem !important;line-height:1.58 !important}
html[lang="km"] .nav-group>a,
html[lang="km"] .nav-group>button{font-size:.84rem !important;line-height:1.55 !important}
html[lang="km"] .brand-title{font-size:.88rem !important;line-height:1.55 !important}
html[lang="km"] .btn{font-size:.87rem !important;line-height:1.5 !important}
html[lang="km"] .eyebrow{font-size:.71rem !important;letter-spacing:0 !important;text-transform:none !important;line-height:1.65 !important}
html[lang="km"] .stat-card span{letter-spacing:0 !important;text-transform:none !important;font-size:.72rem !important}

/* Arabic optical compensation */
html[lang="ar"] .hero h1{font-size:clamp(2.25rem,4.2vw,3.55rem) !important;line-height:1.38 !important}
html[lang="ar"] .hero p{font-size:1.05rem !important;line-height:1.92 !important}
html[lang="ar"] .section-head h2{font-size:clamp(1.85rem,2.9vw,2.5rem) !important;line-height:1.42 !important}
html[lang="ar"] .ux-page-hero h1,
html[lang="ar"] .public-page-hero h1{font-size:clamp(2rem,3.7vw,2.95rem) !important;line-height:1.4 !important}
html[lang="ar"] .article-hero h1{font-size:clamp(1.95rem,3.8vw,3.05rem) !important;line-height:1.42 !important}
html[lang="ar"] .ed-about-copy h2,
html[lang="ar"] .ed-program-content h2{font-size:clamp(1.75rem,2.65vw,2.3rem) !important;line-height:1.44 !important}
html[lang="ar"] .ed-feature-copy h3{font-size:clamp(1.55rem,2.4vw,2.05rem) !important;line-height:1.44 !important}
html[lang="ar"] .public-news-card:first-child h4,
html[lang="ar"] .public-research-card:first-child h4{font-size:1.48rem !important;line-height:1.55 !important}
html[lang="ar"] .nav-group>a,
html[lang="ar"] .nav-group>button{font-size:.87rem !important;line-height:1.55 !important}
html[lang="ar"] .brand-title{font-size:.91rem !important;line-height:1.55 !important}
html[lang="ar"] .btn{font-size:.9rem !important;line-height:1.45 !important}
html[lang="ar"] .eyebrow{font-size:.74rem !important;letter-spacing:0 !important;text-transform:none !important;line-height:1.6 !important}
html[lang="ar"] .stat-card span{letter-spacing:0 !important;text-transform:none !important;font-size:.74rem !important}

/* Avoid Latin tracking rules leaking into Khmer/Arabic */
html[lang="km"] h1,html[lang="km"] h2,html[lang="km"] h3,
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,
html[lang="km"] .brand-sub,html[lang="ar"] .brand-sub,
html[lang="km"] .story-tag,html[lang="ar"] .story-tag{
  letter-spacing:0 !important;
}

/* Responsive type scale */
@media(max-width:1120px){
  .nav-group>a,.nav-group>button{font-size:.76rem !important}
  html[lang="km"] .nav-group>a,html[lang="km"] .nav-group>button,
  html[lang="ar"] .nav-group>a,html[lang="ar"] .nav-group>button{font-size:.81rem !important}
}

@media(max-width:700px){
  body{font-size:.975rem !important}
  .hero h1{font-size:clamp(2rem,9vw,2.85rem) !important;line-height:1.2 !important}
  .hero p{font-size:.97rem !important;line-height:1.75 !important}
  .section-head h2{font-size:clamp(1.7rem,7vw,2.15rem) !important;line-height:1.28 !important}
  .section-head p{font-size:.95rem !important;line-height:1.72 !important}
  .ux-page-hero h1,.public-page-hero h1{font-size:clamp(1.85rem,8vw,2.45rem) !important}
  .article-hero h1{font-size:clamp(1.85rem,8vw,2.55rem) !important}
  .brand-title{font-size:.80rem !important}
  .btn{font-size:.83rem !important}

  html[lang="km"] .hero h1{font-size:clamp(1.78rem,7.9vw,2.42rem) !important;line-height:1.48 !important}
  html[lang="km"] .hero p{font-size:.96rem !important;line-height:1.92 !important}
  html[lang="km"] .section-head h2{font-size:clamp(1.55rem,6.5vw,2rem) !important;line-height:1.5 !important}
  html[lang="km"] .ux-page-hero h1,html[lang="km"] .public-page-hero h1,
  html[lang="km"] .article-hero h1{font-size:clamp(1.62rem,7vw,2.18rem) !important;line-height:1.48 !important}
  html[lang="km"] .brand-title{font-size:.77rem !important;line-height:1.5 !important}

  html[lang="ar"] .hero h1{font-size:clamp(1.9rem,8.2vw,2.58rem) !important;line-height:1.42 !important}
  html[lang="ar"] .hero p{font-size:1rem !important;line-height:1.92 !important}
  html[lang="ar"] .section-head h2{font-size:clamp(1.62rem,6.7vw,2.08rem) !important;line-height:1.44 !important}
  html[lang="ar"] .ux-page-hero h1,html[lang="ar"] .public-page-hero h1,
  html[lang="ar"] .article-hero h1{font-size:clamp(1.72rem,7.2vw,2.28rem) !important;line-height:1.43 !important}
  html[lang="ar"] .brand-title{font-size:.8rem !important;line-height:1.5 !important}
}

@media(max-width:480px){
  .brand-title{font-size:.74rem !important;max-width:205px !important}
  .hero h1{font-size:clamp(1.85rem,9.7vw,2.5rem) !important}
  .section-head h2{font-size:clamp(1.62rem,8vw,2rem) !important}
  .stat-card b{font-size:1.9rem !important}
  html[lang="km"] .brand-title{font-size:.71rem !important}
  html[lang="ar"] .brand-title{font-size:.74rem !important}
}

/* Mobile reading scale — aligned with the approved UX specification */
@media(max-width:700px){
  body{font-size:16px !important;line-height:1.9 !important}

  html[lang] h1,
  html[lang] .hero h1,
  html[lang] .ux-page-hero h1,
  html[lang] .public-page-hero h1,
  html[lang] .article-hero h1{
    font-size:clamp(24px,7.2vw,28px) !important;
    line-height:1.5 !important;
  }

  html[lang] h2,
  html[lang] .section-head h2,
  html[lang] .ux-prose h2,
  html[lang] .ed-about-copy h2,
  html[lang] .ed-program-content h2,
  html[lang] .ed-impact-quote h2{
    font-size:clamp(20px,5.7vw,22px) !important;
    line-height:1.55 !important;
  }

  html[lang] h3,
  html[lang] .ed-feature-copy h3,
  html[lang] .program-description h3,
  html[lang] .ed-program h3,
  html[lang] .ed-lead-main-copy h3{
    font-size:18px !important;
    line-height:1.55 !important;
  }

  p,li,dd,dt,input,textarea,select{
    font-size:16px !important;
    line-height:1.9 !important;
  }

  .btn,.tab-btn,.lang-option{
    font-size:15px !important;
    line-height:1.5 !important;
  }

  .nav-group>a,.nav-group>button,
  .mobile-item>a,.mobile-item>button,.mobile-submenu a{
    font-size:15px !important;
    line-height:1.6 !important;
  }

  .form-group label{font-size:15px !important;line-height:1.6 !important}
  table,th,td{font-size:14px !important;line-height:1.7 !important}
  small,.text-small,
  html[lang] .eyebrow,
  html[lang] .stat-card span{font-size:13px !important;line-height:1.7 !important}

  html[lang="km"] h1,html[lang="km"] h2,html[lang="km"] h3,
  html[lang="km"] .brand-title{font-family:'Noto Sans Khmer','Khmer OS System',sans-serif !important}
  html[lang="km"] h1,html[lang="km"] h2,html[lang="km"] h3{font-weight:600 !important}
  html[lang="km"] .brand-title{font-size:13px !important;line-height:1.55 !important}
  html[lang="km"] .program-description,
  html[lang="km"] .program-description p,
  html[lang="km"] .program-description li{font-size:16px !important;line-height:1.9 !important}
}