/* ==========================================================================
   JURNALISMETRO — EDITORIAL TYPOGRAPHY SYSTEM
   --------------------------------------------------------------------------
   Dimuat setelah style-desktop.css / style-mobile.css dan uiux-fixes.css (QA2).
   Hanya mengatur tipografi: font family, size, weight, line-height, spacing
   teks. Tidak mengubah container, grid, sidebar, thumbnail, warna, dark mode,
   infinite scroll, markup, query, atau widget.

   Font:
   - Heading : Inter (variable, 400–700), lokal WOFF2, subset latin + latin-ext.
   - Body    : Source Sans 3 (variable, 400–700), lokal WOFF2, subset sama.
   Lisensi SIL Open Font License 1.1 ada di assets/fonts/OFL-*.txt.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Font lokal
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/Inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/Inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/SourceSans3-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/SourceSans3-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2) Token tipografi
   -------------------------------------------------------------------------- */
:root {
  --jm-font-heading: "Inter", Arial, sans-serif;
  --jm-font-body: "Source Sans 3", Arial, sans-serif;

  /* Skala artikel — desktop */
  --jm-type-h1: 38px;
  --jm-type-h1-lh: 1.2;
  --jm-type-h2: 28px;
  --jm-type-h2-lh: 1.3;
  --jm-type-h3: 23px;
  --jm-type-h3-lh: 1.3;
  --jm-type-h4: 19px;
  --jm-type-h4-lh: 1.4;
  --jm-type-body: 18px;
  --jm-type-body-lh: 1.7;
  --jm-type-caption: 14px;
  --jm-type-caption-lh: 1.5;
  --jm-type-meta: 13px;
  --jm-type-meta-lh: 1.4;

  /* Skala artikel — mobile */
  --jm-type-h1-m: 29px;
  --jm-type-h2-m: 23px;
  --jm-type-h3-m: 20px;
  --jm-type-h4-m: 18px;
  --jm-type-body-m: 17px;
  --jm-type-caption-m: 13px;
  --jm-type-meta-m: 12.5px;

  /* Homepage — desktop */
  --jm-home-hero: 30px;
  --jm-home-hero-lh: 1.25;
  --jm-home-small: 19px;
  --jm-home-small-lh: 1.35;
  --jm-home-list: 18px;
  --jm-home-list-lh: 1.4;
  --jm-home-grid: 17px;
  --jm-home-grid-lh: 1.4;
  --jm-home-grid-lead: 18px;
  --jm-home-widget: 16px;
  --jm-home-label: 11.5px;
  --jm-home-meta: 13px;

  /* Homepage — mobile */
  --jm-home-hero-m: 22px;
  --jm-home-small-m: 17px;
  --jm-home-list-m: 16.5px;
  --jm-home-grid-m: 16px;
  --jm-home-widget-m: 16px;
  --jm-home-label-m: 11px;
  --jm-home-meta-m: 12.5px;
}

/* --------------------------------------------------------------------------
   3) Dasar
   -------------------------------------------------------------------------- */
body {
  font-family: var(--jm-font-body);
}
button,
input,
select,
textarea {
  font-family: inherit;
}
h1, h2, h3, h4, h5, h6,
.headline-title,
.grid-title,
.list-title,
.article-title,
.popularpos-title,
.widget-title,
.brand-title,
.author-name,
.comments_title,
.comment-reply-title {
  font-family: var(--jm-font-heading);
}

/* Peta font lama: style-desktop.css / style-mobile.css masih menyebut
   Poppins/Lato. Setelah enqueue Google Fonts dihapus, setiap selector itu
   dipetakan eksplisit agar tidak jatuh ke sans-serif generik.
   Poppins (judul/UI) -> Inter; Lato (teks) -> Source Sans 3. */
.index-title,
.featuredpos-title,
.redaksi-title,
.redaksi2-title,
.foto-title,
.pagination-post,
.archive .cat-item:first-child .cat-title,
.archive.author .author-name h1,
.error-wrap,
.error-btn,
.primary-menu nav > ul > li > a,
.primary-menu .sub-menu a,
.secondary-menu a,
.footer-nav ul li a {
  font-family: var(--jm-font-heading);
}
.desc-text p,
input.search-text,
.tag-post ul li a,
.label-view,
.footer-copyright,
#comments,
#respond,
.error-desc,
.polling-post-text,
.polling-post-box,
.redaksi,
.archive.author .author-bio {
  font-family: var(--jm-font-body);
}

/* --------------------------------------------------------------------------
   4) Halaman artikel / page
   -------------------------------------------------------------------------- */
body.single:not(.mobile) .header-post .title-post h1,
body.page:not(.mobile) .header-post .title-post h1 {
  font-family: var(--jm-font-heading);
  font-size: var(--jm-type-h1);
  line-height: var(--jm-type-h1-lh);
  font-weight: 700;
  letter-spacing: -.012em;
}
body.single.mobile .header-post .title-post h1,
body.page.mobile .header-post .title-post h1 {
  font-family: var(--jm-font-heading);
  font-size: var(--jm-type-h1-m);
  line-height: var(--jm-type-h1-lh);
  font-weight: 700;
  letter-spacing: -.008em;
}

body.single .post-detail,
body.page .post-detail {
  font-family: var(--jm-font-body);
  color: inherit;
}
body.single:not(.mobile) .post-detail,
body.page:not(.mobile) .post-detail {
  font-size: var(--jm-type-body);
  line-height: var(--jm-type-body-lh);
}
body.single.mobile .post-detail,
body.page.mobile .post-detail {
  font-size: var(--jm-type-body-m);
  line-height: var(--jm-type-body-lh);
}

/* Hormati pilihan ukuran font artikel bawaan tema, bila dipakai. */
body.single:not(.mobile) .post-detail.font-17,
body.page:not(.mobile) .post-detail.font-17 { font-size: 17px; }
body.single:not(.mobile) .post-detail.font-15,
body.page:not(.mobile) .post-detail.font-15 { font-size: 15px; }
body.single:not(.mobile) .post-detail.font-13,
body.page:not(.mobile) .post-detail.font-13 { font-size: 13px; }

body.single:not(.mobile) .post-detail h1,
body.page:not(.mobile) .post-detail h1 {
  font-family: var(--jm-font-heading);
  font-size: var(--jm-type-h1);
  line-height: var(--jm-type-h1-lh);
  font-weight: 700;
  margin: 1.4em 0 .55em;
}
body.single:not(.mobile) .post-detail h2,
body.page:not(.mobile) .post-detail h2 {
  font-family: var(--jm-font-heading);
  font-size: var(--jm-type-h2);
  line-height: var(--jm-type-h2-lh);
  font-weight: 700;
  margin: 1.5em 0 .55em;
}
body.single:not(.mobile) .post-detail h3,
body.page:not(.mobile) .post-detail h3 {
  font-family: var(--jm-font-heading);
  font-size: var(--jm-type-h3);
  line-height: var(--jm-type-h3-lh);
  font-weight: 700;
  margin: 1.4em 0 .5em;
}
body.single:not(.mobile) .post-detail h4,
body.page:not(.mobile) .post-detail h4 {
  font-family: var(--jm-font-heading);
  font-size: var(--jm-type-h4);
  line-height: var(--jm-type-h4-lh);
  font-weight: 600;
  margin: 1.3em 0 .45em;
}

body.single.mobile .post-detail h1,
body.page.mobile .post-detail h1 {
  font-family: var(--jm-font-heading);
  font-size: var(--jm-type-h1-m);
  line-height: var(--jm-type-h1-lh);
  font-weight: 700;
  margin: 1.3em 0 .5em;
}
body.single.mobile .post-detail h2,
body.page.mobile .post-detail h2 {
  font-family: var(--jm-font-heading);
  font-size: var(--jm-type-h2-m);
  line-height: var(--jm-type-h2-lh);
  font-weight: 700;
  margin: 1.4em 0 .5em;
}
body.single.mobile .post-detail h3,
body.page.mobile .post-detail h3 {
  font-family: var(--jm-font-heading);
  font-size: var(--jm-type-h3-m);
  line-height: var(--jm-type-h3-lh);
  font-weight: 700;
  margin: 1.3em 0 .45em;
}
body.single.mobile .post-detail h4,
body.page.mobile .post-detail h4 {
  font-family: var(--jm-font-heading);
  font-size: var(--jm-type-h4-m);
  line-height: var(--jm-type-h4-lh);
  font-weight: 600;
  margin: 1.2em 0 .4em;
}

body.single .post-detail h1:first-child,
body.single .post-detail h2:first-child,
body.single .post-detail h3:first-child,
body.single .post-detail h4:first-child,
body.page .post-detail h1:first-child,
body.page .post-detail h2:first-child,
body.page .post-detail h3:first-child,
body.page .post-detail h4:first-child {
  margin-top: 0;
}

body.single .post-detail p,
body.page .post-detail p {
  font-family: var(--jm-font-body);
  font-weight: 400;
  text-align: left;
  margin: 0 0 1.05em;
}
body.single .post-detail li,
body.page .post-detail li {
  font-family: var(--jm-font-body);
  line-height: 1.65;
  margin-bottom: .35em;
}
body.single .post-detail blockquote,
body.page .post-detail blockquote {
  font-family: var(--jm-font-body);
  line-height: 1.6;
}

/* Panjang baris nyaman baca (±60–75 karakter). Hanya blok teks yang dibatasi;
   lebar kolom, gambar, tabel, dan layout artikel tidak berubah. */
body.single .post-detail > p,
body.single .post-detail > ul,
body.single .post-detail > ol,
body.single .post-detail > blockquote,
body.page .post-detail > p,
body.page .post-detail > ul,
body.page .post-detail > ol,
body.page .post-detail > blockquote {
  max-width: 64ch;
}

/* Caption foto */
body.single .article-featured figcaption,
body.single .post-detail figcaption,
body.page .article-featured figcaption,
body.page .post-detail figcaption {
  font-family: var(--jm-font-body);
  font-size: var(--jm-type-caption);
  line-height: var(--jm-type-caption-lh);
  font-weight: 400;
}
body.single.mobile .article-featured figcaption,
body.single.mobile .post-detail figcaption,
body.page.mobile .article-featured figcaption,
body.page.mobile .post-detail figcaption {
  font-size: var(--jm-type-caption-m);
}

/* Deskripsi, byline, waktu, breadcrumb, tag */
body.single .article-description,
body.page .article-description {
  font-family: var(--jm-font-body);
  font-size: var(--jm-type-body);
  line-height: 1.55;
  font-weight: 400;
}
body.single.mobile .article-description,
body.page.mobile .article-description {
  font-size: var(--jm-type-body-m);
}
body.single .author-box,
body.single .prop-pos time,
body.single .breadcrumb ul li a,
body.single .post-tag ul li a,
body.single .footer-share .share-label,
body.page .author-box,
body.page .prop-pos time,
body.page .breadcrumb ul li a,
body.page .post-tag ul li a {
  font-family: var(--jm-font-body);
  font-size: var(--jm-type-meta);
  line-height: var(--jm-type-meta-lh);
  font-weight: 400;
}
body.single.mobile .author-box,
body.single.mobile .prop-pos time,
body.single.mobile .breadcrumb ul li a,
body.single.mobile .post-tag ul li a,
body.page.mobile .author-box,
body.page.mobile .prop-pos time,
body.page.mobile .breadcrumb ul li a,
body.page.mobile .post-tag ul li a {
  font-size: var(--jm-type-meta-m);
}

/* --------------------------------------------------------------------------
   5) Homepage — desktop
   -------------------------------------------------------------------------- */
/* Catatan specificity: selector di bawah sengaja "dicerminkan" persis dari
   blok QA2 (mis. `.headline .headline-big`) agar menang seri pada cascade.
   typography.css dimuat setelah uiux-fixes.css, jadi specificity sama = menang.
   Jangan menyederhanakan selector ini tanpa menguji ulang. */
body.home:not(.mobile) .headline .headline-big .headline-title {
  font-family: var(--jm-font-heading);
  font-size: var(--jm-home-hero);
  line-height: var(--jm-home-hero-lh);
  font-weight: 700;
  letter-spacing: -.015em;
}
body.home:not(.mobile) .headline-small .headline-title {
  font-family: var(--jm-font-heading);
  font-size: var(--jm-home-small);
  line-height: var(--jm-home-small-lh);
  font-weight: 700;
  letter-spacing: -.008em;
}
body.home:not(.mobile) .main-box > .widget.list .list-title {
  font-family: var(--jm-font-heading);
  font-size: var(--jm-home-list);
  line-height: var(--jm-home-list-lh);
  font-weight: 600;
}
body.home:not(.mobile) .grid-title {
  font-family: var(--jm-font-heading);
  font-size: var(--jm-home-grid);
  line-height: var(--jm-home-grid-lh);
  font-weight: 600;
}
body.home:not(.mobile) .grid-item:first-child .grid-title {
  font-family: var(--jm-font-heading);
  font-size: var(--jm-home-grid-lead);
  line-height: 1.3;
  font-weight: 600;
}
body.home:not(.mobile) .widget.article .article-title {
  font-family: var(--jm-font-heading);
  font-size: var(--jm-home-list);
  line-height: 1.4;
  font-weight: 600;
}
body.home .main-box > .widget > .widget-header .widget-title,
body.home .sidebar .widget-title {
  font-family: var(--jm-font-heading);
  font-size: var(--jm-home-widget);
  line-height: 1.3;
  font-weight: 700;
}
body.home .sidebar .list-title,
body.home .sidebar .popularpos-title {
  font-family: var(--jm-font-heading);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 600;
}
body.home .headline .headline-big .headline-category,
body.home .headline-small .headline-category,
body.home .widget.article .list-category,
body.home .widget.article .list-category a,
body.home .main-box > .widget.list .list-category,
body.home:not(.mobile) .grid-category {
  font-family: var(--jm-font-body);
  font-size: var(--jm-home-label);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .045em;
}
body.home .headline .headline-big .headline-date,
body.home:not(.mobile) .headline-small .headline-date,
body.home:not(.mobile) .grid-meta,
body.home:not(.mobile) .main-box > .widget.list .list-meta,
body.home:not(.mobile) .widget.article .list-meta {
  font-family: var(--jm-font-body);
  font-size: var(--jm-home-meta);
  line-height: var(--jm-type-meta-lh);
  font-weight: 400;
}
body.home .sidebar .list-meta {
  font-size: 12.5px;
}

/* --------------------------------------------------------------------------
   6) Homepage — mobile
   -------------------------------------------------------------------------- */
/* Selector dicerminkan dari QA2 (lihat catatan di bagian desktop). */
body.home.mobile .headline .headline-big .headline-title {
  font-family: var(--jm-font-heading);
  font-size: var(--jm-home-hero-m);
  line-height: var(--jm-home-hero-lh);
  font-weight: 700;
  letter-spacing: -.01em;
}
body.home.mobile .headline-small .headline-title {
  font-family: var(--jm-font-heading);
  font-size: var(--jm-home-small-m);
  line-height: var(--jm-home-small-lh);
  font-weight: 700;
}
body.home.mobile .main-box > .widget.list .list-title {
  font-family: var(--jm-font-heading);
  font-size: var(--jm-home-list-m);
  line-height: 1.45;
  font-weight: 600;
}
body.home.mobile .grid-title {
  font-family: var(--jm-font-heading);
  font-size: var(--jm-home-grid-m);
  line-height: 1.45;
  font-weight: 600;
}
body.home.mobile .widget.article .article-title {
  font-family: var(--jm-font-heading);
  font-size: var(--jm-home-list-m);
  line-height: 1.45;
  font-weight: 600;
}
body.home.mobile .main-box > .widget > .widget-header .widget-title,
body.home.mobile .sidebar .widget-title {
  font-family: var(--jm-font-heading);
  font-size: var(--jm-home-widget-m);
  line-height: 1.3;
  font-weight: 700;
}
body.home.mobile .sidebar .list-title,
body.home.mobile .sidebar .popularpos-title {
  font-family: var(--jm-font-heading);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 600;
}
body.home.mobile .headline .headline-big .headline-category,
body.home.mobile .headline-small .headline-category,
body.home.mobile .main-box > .widget.list .list-category,
body.home.mobile .grid-category {
  font-family: var(--jm-font-body);
  font-size: var(--jm-home-label-m);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .04em;
}
body.home.mobile .headline .headline-big .headline-date,
body.home.mobile .headline-small .headline-date,
body.home.mobile .grid-meta,
body.home.mobile .main-box > .widget.list .list-meta,
body.home.mobile .widget.article .list-meta {
  font-family: var(--jm-font-body);
  font-size: var(--jm-home-meta-m);
  line-height: var(--jm-type-meta-lh);
  font-weight: 400;
}
body.home.mobile .sidebar .list-meta {
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   7) Kategori, arsip, tag, pencarian, author
   -------------------------------------------------------------------------- */
body:not(.home) .main-box .headline-title {
  font-family: var(--jm-font-heading);
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
}
body:not(.home) .main-box .article-title {
  font-family: var(--jm-font-heading);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
}
body:not(.home) .main-box .list-title {
  font-family: var(--jm-font-heading);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 600;
}
body:not(.home) .main-box .grid-title {
  font-family: var(--jm-font-heading);
  font-size: 17px;
  line-height: 1.4;
  font-weight: 600;
}
body:not(.home) .main-box > .widget > .widget-header .widget-title,
body:not(.home) .sidebar .widget-title {
  font-family: var(--jm-font-heading);
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;
}
body:not(.home) .sidebar .list-title,
body:not(.home) .sidebar .popularpos-title {
  font-family: var(--jm-font-heading);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 600;
}
body:not(.home) .main-box .list-category,
body:not(.home) .main-box .headline-category,
body:not(.home) .main-box .grid-category,
body:not(.home) .sidebar .list-category,
body:not(.home) .sidebar .list-category a {
  font-family: var(--jm-font-body);
  font-size: 11.5px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .045em;
}
body:not(.home) .main-box .list-meta,
body:not(.home) .main-box .headline-date,
body:not(.home) .main-box .grid-meta,
body:not(.home) .sidebar .list-meta {
  font-family: var(--jm-font-body);
  font-size: 13px;
  line-height: var(--jm-type-meta-lh);
  font-weight: 400;
}

body.mobile:not(.home) .main-box .headline-title { font-size: 21px; }
body.mobile:not(.home) .main-box .article-title { font-size: 17px; }
body.mobile:not(.home) .main-box .list-title { font-size: 16px; }
body.mobile:not(.home) .main-box .grid-title { font-size: 16px; }
body.mobile:not(.home) .main-box > .widget > .widget-header .widget-title,
body.mobile:not(.home) .sidebar .widget-title { font-size: 16px; }
body.mobile:not(.home) .main-box .list-category { font-size: 11px; }
body.mobile:not(.home) .sidebar .list-category,
body.mobile:not(.home) .sidebar .list-category a { font-size: 11px; letter-spacing: .04em; }
body.mobile:not(.home) .main-box .list-meta,
body.mobile:not(.home) .main-box .headline-date,
body.mobile:not(.home) .main-box .grid-meta,
body.mobile:not(.home) .sidebar .list-meta { font-size: 12.5px; }

/* --------------------------------------------------------------------------
   8) Mode gelap
   --------------------------------------------------------------------------
   Hanya properti tipografi. Warna tetap diatur tema dan uiux-fixes.css agar
   kontras QA2 tidak berubah.
   -------------------------------------------------------------------------- */
body.darkmode .post-detail,
body.darkmode .post-detail p,
body.darkmode .post-detail li,
body.darkmode .article-description,
body.darkmode .author-box,
body.darkmode .prop-pos time,
body.darkmode .breadcrumb ul li a {
  font-family: var(--jm-font-body);
}