/* ============================================================
   Mauritius Finance — site-wide type scale
   ------------------------------------------------------------
   The site had no heading scale: Kadence's global h1/h2 sat at
   17.6px (smaller than body text) and every section set its own
   pixel size per block. This establishes one system.

   Font FAMILIES are deliberately untouched — Montserrat for
   headings, Source Sans Pro for body, Heebo for navigation all
   continue to come from the Kadence global settings.
   ============================================================ */

:root{
  --mf-type-h1: 40px;
  --mf-type-h2: 32px;
  --mf-type-h3: 24px;
  --mf-type-h4: 20px;
  --mf-type-h5: 18px;
  --mf-type-h6: 16px;
  --mf-type-body: 18px;
  --mf-type-small: 16px;

  /* Listing/card titles (post grid, carousel, archive loops).
     Tune these two rather than the rules further down.
     --mf-type-card was 18px until the homepage news carousel moved to a
     4-up layout with the image on top; at ~288px card width 18px read as
     too heavy, so it sits at 16px. */
  --mf-type-card: 16px;
  --mf-type-card-archive: 24px;
}

body{
  font-size: var(--mf-type-body);
  line-height: 1.65;
}

.entry-content p,
.wp-block-kadence-column p,
.site-content p{
  font-size: var(--mf-type-body);
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6{
  font-family: var(--global-heading-font-family, Montserrat, sans-serif);
  line-height: 1.25;
  font-weight: 700;
}

/* Page/post title only — NOT .entry-title generally, which Kadence also uses
   for card titles inside post grids and archive loops. */
h1{ font-size: var(--mf-type-h1); line-height: 1.15; }
.single-entry .entry-header .entry-title{ font-size: var(--mf-type-h1); line-height: 1.15; }
h2{ font-size: var(--mf-type-h2); line-height: 1.2; }
h3{ font-size: var(--mf-type-h3); line-height: 1.3; }
h4{ font-size: var(--mf-type-h4); line-height: 1.35; }
h5{ font-size: var(--mf-type-h5); line-height: 1.4; }
h6{ font-size: var(--mf-type-h6); line-height: 1.45; }

/* Tablet */
@media (max-width: 1024px){
  :root{
    --mf-type-h1: 34px;
    --mf-type-h2: 28px;
    --mf-type-h3: 22px;
    --mf-type-card-archive: 22px;
  }
}

/* Mobile */
@media (max-width: 600px){
  :root{
    --mf-type-h1: 28px;
    --mf-type-h2: 24px;
    --mf-type-h3: 20px;
    --mf-type-h4: 18px;
    --mf-type-body: 17px;
    --mf-type-card-archive: 20px;
  }
}

/* ------------------------------------------------------------
   Listing / card titles
   ------------------------------------------------------------
   Kadence sets these as hardcoded pixel values that sit OUTSIDE
   the scale and do not respond to the breakpoints above:

     - post grid + carousel cards ... 14px  (smaller than body)
     - archive loop entries ......... 30px  (exceeds the page h1
                                             between ~480-600px,
                                             where h1 drops to 28px)

   Both are pulled into the scale here, one step below the page
   heading. Because these override per-block "title size" controls,
   change --mf-type-card / --mf-type-card-archive in :root above
   rather than editing the block in the editor.
   ------------------------------------------------------------ */

/* Post grid / carousel cards — beats Kadence's per-block
   .kt-post-loop<id> .kt-blocks-post-grid-item .entry-title (0,3,0). */
.kt-post-grid-wrap .kt-blocks-post-grid-item .kt-blocks-post-grid-item-inner .entry-title,
.kt-blocks-post-grid-item .kt-blocks-post-grid-item-inner header .entry-title{
  font-size: var(--mf-type-card);
  line-height: 1.35;
}

/* Archive loop entries — beats the theme's
   .loop-entry.type-post h2.entry-title (0,3,1). */
body .loop-entry.type-post h2.entry-title,
body .loop-entry .entry-header .entry-title{
  font-size: var(--mf-type-card-archive);
  line-height: 1.3;
}

/* The custom sections carry their own deliberate scale; leave them be. */
.mfifc h2, .mfcx h2, .mfjs h2, .mfdt h2,
.mfifc h3, .mfcx h3, .mfjs h3, .mfdt h3,
.mfifc p,  .mfcx p,  .mfjs p,  .mfdt p{
  font-size: inherit;
}
.mfifc .mfifc-title, .mfcx .mfcx-title, .mfjs .mfjs-title, .mfdt .mfdt-head h2{
  font-size: var(--mf-type-h2);
  line-height: 1.2;
}
.mfifc .mfifc-lede, .mfcx .mfcx-lede, .mfdt .mfdt-lede{
  font-size: var(--mf-type-body);
}