/* Sitewide article layout and typography contract.
 * The visual language stays intact; this layer standardizes reading measure,
 * type scale and natural wrapping across plain, practical and legacy Posts.
 */

body.mgt-editorial-post {
  --mgt-article-reading: 820px;
  --mgt-article-title: 1180px;
  --mgt-article-media: 1120px;
  --mgt-article-measure: 70ch;
  --mgt-article-prose: min(var(--mgt-article-measure), var(--mgt-article-reading));
  --mgt-article-body: clamp(1.125rem, 1.09rem + 0.16vw, 1.1875rem);
  --mgt-article-lead: clamp(1.25rem, 1.16rem + 0.35vw, 1.45rem);
  --mgt-article-h1: clamp(2.35rem, 1.65rem + 2.7vw, 4rem);
  --mgt-article-h2: clamp(1.625rem, 1.48rem + 0.62vw, 2rem);
  --mgt-article-h3: clamp(1.25rem, 1.17rem + 0.3vw, 1.5rem);
}

body.mgt-editorial-post main {
  font-family: "Onest Variable", Onest, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

body.mgt-editorial-post main :where(h1, h2, h3, h4) {
  min-width: 0;
  hyphens: none;
  overflow-wrap: break-word;
  text-wrap: wrap;
  text-wrap: pretty;
}

body.mgt-editorial-post main h1 {
  font-size: var(--mgt-article-h1);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* Final editorial authority. Historical saved markup and late component CSS
 * may still contain old 760/780 weights. They must not change the hierarchy
 * from article to article or between desktop and mobile. */
body.mgt-editorial-post main h1 { font-weight: 800 !important; }
body.mgt-editorial-post main h2 { font-weight: 700 !important; }
body.mgt-editorial-post main :where(h3, h4) { font-weight: 700 !important; }

/* Service typography follows one calm UI role regardless of component age. */
body.mgt-editorial-post main :where(
  .mg-eyebrow,
  .mg-kicker,
  .mg-affiliate-card__kicker,
  .mg-practical-toc strong,
  .mgt-auto-toc strong,
  .mg-practical-faq summary,
  .mg-chip,
  .mg-route-card-meta span
) {
  font-weight: 600 !important;
}

body.mgt-editorial-post main :where(
  .mg-button,
  .mg-btn,
  .wp-element-button,
  .mg-affiliate-card__button
) {
  font-weight: 600 !important;
}

body.mgt-editorial-post main .mg-practical-algorithm article::before,
body.mgt-editorial-post main .mgt-auto-toc a::before {
  font-weight: 600 !important;
}

body.mgt-editorial-post main :where(p, li) {
  text-align: start;
  hyphens: none;
  text-wrap: wrap;
  text-wrap: pretty;
}

/* Gutenberg Post Content must not own the narrower sitewide content size. */
body.mgt-editorial-post .mgt-article-shell {
  width: 100%;
  max-width: none !important;
  margin-right: 0;
  margin-left: 0;
}

body.mgt-editorial-post .mgt-article-shell > .mgt-editorial-content {
  width: 100%;
  max-width: none !important;
  margin-right: 0;
  margin-left: 0;
}

body.mgt-editorial-post .mgt-article-shell > .mgt-article-title {
  width: min(calc(100% - (2 * var(--mgt-gutter, 24px))), var(--mgt-article-title)) !important;
  max-width: var(--mgt-article-title) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

/* Plain Posts: display headings can use the wide track; prose keeps a reading measure. */
body.mgt-editorial-post:not(.mg-practical-article):not(.mgt-legacy-components)
  .mgt-editorial-content > :where(h1, .wp-block-heading:first-child) {
  width: min(calc(100% - (2 * var(--mgt-gutter, 24px))), var(--mgt-article-title)) !important;
  max-width: var(--mgt-article-title) !important;
}

body.mgt-editorial-post:not(.mg-practical-article):not(.mgt-legacy-components)
  .mgt-editorial-content > :where(h2, h3, h4, .wp-block-buttons, .wp-block-details, .wp-block-table) {
  width: min(calc(100% - (2 * var(--mgt-gutter, 24px))), var(--mgt-article-reading)) !important;
  max-width: var(--mgt-article-reading) !important;
}

body.mgt-editorial-post:not(.mg-practical-article):not(.mgt-legacy-components)
  .mgt-editorial-content > h2,
body.mgt-auto-toc-article .mgt-auto-toc-main > h2 {
  font-size: var(--mgt-article-h2);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

body.mgt-editorial-post:not(.mg-practical-article):not(.mgt-legacy-components)
  .mgt-editorial-content > h3,
body.mgt-auto-toc-article .mgt-auto-toc-main > h3 {
  font-size: var(--mgt-article-h3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.012em;
}

body.mgt-editorial-post:not(.mg-practical-article):not(.mgt-legacy-components)
  .mgt-editorial-content > :where(p, ul, ol, blockquote, pre) {
  width: min(calc(100% - (2 * var(--mgt-gutter, 24px))), var(--mgt-article-prose)) !important;
  max-width: var(--mgt-article-prose) !important;
}

body.mgt-editorial-post:not(.mg-practical-article):not(.mgt-legacy-components)
  .mgt-editorial-content > :where(p, ul, ol) {
  color: #34433c;
  font-size: var(--mgt-article-body);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
}

body.mgt-editorial-post:not(.mg-practical-article):not(.mgt-legacy-components)
  .mgt-editorial-content > p {
  margin-bottom: 0;
}

body.mgt-editorial-post:not(.mg-practical-article):not(.mgt-legacy-components)
  .mgt-editorial-content > p + p {
  margin-top: 0.85em;
}

body.mgt-editorial-post:not(.mg-practical-article):not(.mgt-legacy-components)
  .mgt-editorial-content > p:first-of-type {
  color: #26372f;
  font-size: var(--mgt-article-lead);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.005em;
}

body.mgt-editorial-post:not(.mg-practical-article):not(.mgt-legacy-components)
  .mgt-editorial-content > :where(.wp-block-image, figure) {
  width: min(calc(100% - (2 * var(--mgt-gutter, 24px))), var(--mgt-article-media)) !important;
  max-width: var(--mgt-article-media) !important;
}

body.mgt-editorial-post main figcaption,
body.mgt-editorial-post main .mg-photo-credit {
  color: var(--mgt-muted, #66716b);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
}

body.mgt-editorial-post main blockquote {
  font-size: clamp(1.125rem, 1.08rem + 0.2vw, 1.3rem);
  font-weight: 600;
  line-height: 1.4;
}

body.mgt-editorial-post main :where(table, .mg-table) {
  font-variant-numeric: tabular-nums;
}

body.mgt-editorial-post main :where(p, li, blockquote) a:not(.wp-element-button):not(.mg-button):not(.mg-btn) {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

body.mgt-editorial-post main :where(.mgt-auto-toc, .mg-practical-toc, .mg-toc) a {
  text-decoration: none;
}

/* Long plain Posts keep TOC geometry independent from the actual prose measure. */
body.mgt-auto-toc-article {
  --mgt-auto-toc-reading: var(--mgt-article-reading);
}

body.mgt-auto-toc-article .mgt-auto-toc-main > :where(p, ul, ol, blockquote, pre) {
  width: min(100%, var(--mgt-article-prose));
  max-width: var(--mgt-article-prose);
}

body.mgt-auto-toc-article .mgt-auto-toc-main > :where(p, ul, ol) {
  color: #34433c;
  font-size: var(--mgt-article-body);
  font-weight: 400;
  line-height: 1.6;
}

body.mgt-auto-toc-article .mgt-auto-toc-main > p {
  margin-bottom: 0;
}

body.mgt-auto-toc-article .mgt-auto-toc-main > p + p {
  margin-top: 0.85em;
}

/* Intro paragraphs align with the same left rail as the content + TOC grid. */
body.mgt-auto-toc-article:not(.mg-practical-article):not(.mgt-legacy-components)
  .mgt-editorial-content > p {
  width: min(calc(100% - (2 * var(--mgt-gutter, 24px))), var(--mgt-article-prose)) !important;
  max-width: var(--mgt-article-prose) !important;
}

@media (min-width: 1241px) {
  body.mgt-auto-toc-article:not(.mg-practical-article):not(.mgt-legacy-components)
    .mgt-editorial-content > p {
    margin-right: auto !important;
    margin-left: max(
      var(--mgt-gutter, 24px),
      calc((100% - var(--mgt-auto-toc-layout, 1160px)) / 2)
    ) !important;
  }
}

/* Practical articles keep their existing component geometry and share the type scale. */
body.mg-practical-article {
  --mgt-practical-reading: var(--mgt-article-reading);
  --mgt-practical-title: var(--mgt-article-title);
}

:is(body.mg-practical-article, main) .mg-practical-hero-copy {
  width: min(100%, var(--mgt-practical-title)) !important;
  max-width: var(--mgt-practical-title) !important;
}

:is(body.mg-practical-article, main) .mg-practical-hero-copy h1 {
  width: 100%;
  max-width: 100% !important;
  margin-bottom: 1rem;
}

:is(body.mg-practical-article, main) .mg-practical-hero-copy > p:not(.mg-eyebrow) {
  width: min(100%, var(--mgt-article-prose));
  max-width: var(--mgt-article-prose) !important;
  color: #26372f;
  font-size: var(--mgt-article-lead);
  font-weight: 500;
  line-height: 1.42;
}

:is(body.mg-practical-article, main) .mg-eyebrow {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

:is(body.mg-practical-article, main) .mg-practical-meta {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
}

:is(body.mg-practical-article, main) .mg-practical-content .mg-practical-section > h2,
:is(body.mg-practical-article, main) .mg-practical-next > h2 {
  max-width: none;
  margin-bottom: 0.7em;
  font-size: var(--mgt-article-h2);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

:is(body.mg-practical-article, main) .mg-practical-content .mg-practical-section > h3 {
  margin-top: 1.7em;
  margin-bottom: 0.55em;
  font-size: var(--mgt-article-h3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.012em;
}

:is(body.mg-practical-article, main) .mg-practical-content .mg-practical-section > :where(p, ul, ol) {
  width: min(100%, var(--mgt-article-prose));
  max-width: var(--mgt-article-prose);
  color: #34433c;
  font-size: var(--mgt-article-body);
  font-weight: 400;
  line-height: 1.6;
}

:is(body.mg-practical-article, main) .mg-practical-content .mg-practical-section > p {
  margin: 0 0 0.9em;
}

:is(body.mg-practical-article, main) .mg-practical-toc strong {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

:is(body.mg-practical-article, main) .mg-practical-toc a {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
}

/* Legacy Posts retain their compositions; type roles are normalized without redesigning cards. */
body.mgt-editorial-post.mgt-legacy-components .mgt-editorial-content > :where(
  .mg-hero,
  .mg-compact-hero,
  .mg-section
) {
  width: 100% !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

body.mgt-editorial-post.mgt-legacy-components :where(.mg-hero-grid, .mg-compact-hero-grid) > * {
  min-width: 0;
}

body.mgt-legacy-components :where(.mg-hero h1, .mg-compact-hero h1) {
  width: 100%;
  max-width: 100% !important;
}

body.mgt-editorial-post.mgt-legacy-components :where(.mg-hero-lead, .mg-compact-hero p) {
  max-width: var(--mgt-article-prose);
  font-size: var(--mgt-article-lead);
  font-weight: 500;
  line-height: 1.42;
}

body.mgt-editorial-post.mgt-legacy-components :where(.mg-eyebrow, .mg-kicker) {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

body.mgt-editorial-post.mgt-legacy-components .mg-section-head h2 {
  font-weight: 700;
  text-wrap: pretty;
}

body.mgt-editorial-post.mgt-legacy-components .mg-section-head > p:not(.mg-eyebrow) {
  max-width: var(--mgt-article-prose);
  font-size: var(--mgt-article-body);
  font-weight: 400;
  line-height: 1.6;
}

body.mgt-editorial-post.mgt-legacy-components :where(.mg-button, .wp-block-button__link) {
  font-weight: 600 !important;
}

@media (max-width: 880px) {
  body.mgt-editorial-post {
    --mgt-article-reading: 100%;
    --mgt-article-title: 100%;
    --mgt-article-media: 100%;
    --mgt-article-measure: 100%;
  }
}

@media (max-width: 600px) {
  body.mgt-editorial-post {
    --mgt-article-h1: clamp(2.1rem, 8.8vw, 2.55rem);
    --mgt-article-h2: clamp(1.5rem, 6.8vw, 1.85rem);
  }
}