/* =====================================================================
   Paras Interiors — typography standard
   ---------------------------------------------------------------------
   ONE responsive scale for the whole site. Loads LAST so it wins over the
   scattered legacy sizes (the audit found 13 different h2 sizes across the
   theme). Every size is a clamp(): smallest on a 360px phone, largest on
   desktop, fluid in between — no breakpoint stacking, no inversions.

   To change the site's type, EDIT THE TOKENS BELOW — nothing else.

   Exempt on purpose:
   - the hero (.paras-hero__*) — display type with its own scale in hero.css
   - the enquiry-card heading (.enq-heading) — owned by forms.css
   - the fold sheet-numbers (.pi-band__num) — owned by wide-layout.css
   ===================================================================== */

/* =====================================================================
   §CLS — metric-matched font fallback
   ---------------------------------------------------------------------
   The Google Fonts CSS loads with display=swap: text paints instantly in
   a fallback, then Poppins arrives and the page REFLOWS. Lighthouse
   blamed 0.137 of the home page's 0.140 CLS on "Web font loaded" — the
   single biggest Core Web Vitals defect on the site.

   Measured on this site: the same string renders 3286px in Poppins vs
   3050px in Arial at 100px — Poppins is 7.7% WIDER, so every line of the
   page grows when it swaps in. This fallback re-renders local Arial at
   107.7% so it occupies Poppins' width; the swap then changes glyph
   shapes but not layout. Nothing is downloaded — `local()` only.

   Do NOT "simplify" this to plain sans-serif: that reinstates the shift.
   ===================================================================== */
@font-face{
  font-family:'Poppins-fallback';
  src:local('Arial');
  size-adjust:107.7%;      /* 3286.4 / 3050.1 — measured, not guessed */
  ascent-override:92%;
  descent-override:30%;
  line-gap-override:0%;
}
/* MONTSERRAT is the body font (the theme sets body{font-family:Montserrat}),
   so it — not Poppins — is what reflows `body.home`: it is the bulk of the
   page's text. Measured: 3661px vs Arial's 3345px = 9.5% wider. Fixing only
   the headings left CLS unmoved (0.139 → 0.143); this is the one that counts. */
@font-face{
  font-family:'Montserrat-fallback';
  src:local('Arial');
  size-adjust:109.5%;      /* 3661.1 / 3344.6 — measured */
  ascent-override:85%;
  descent-override:22%;
  line-gap-override:0%;
}
/* FRAUNCES is the display serif for h1–h3, the hero title and pull-quotes.
   Metric-matched to local Georgia (serif→serif) so the swap changes glyph
   shapes, not layout — headings are the only Fraunces consumer, and the big
   body/Montserrat CLS fix is untouched. size-adjust measured in-browser
   (Fraunces vs Georgia, same string) — see the value note. */
@font-face{
  font-family:'Fraunces-fallback';
  src:local('Georgia');
  size-adjust:106.5%;      /* measured in-browser: Fraunces 2676.5 / Georgia 2512.5 = 1.065 */
  ascent-override:92%;
  descent-override:24%;
  line-gap-override:0%;
}

:root{
  /* FONT ROLES — one edit re-voices the site.
     display  = Fraunces serif (h1–h3, hero, pull-quotes) — the premium voice
     body     = Montserrat (self-hosted by the parent theme) — paragraphs, h4–h6
     label    = the micro-label sans (kickers, buttons, stats). Poppins is kept
                for these for now; flip to body to retire Poppins later. */
  --pi-font-display:'Fraunces','Fraunces-fallback',Georgia,serif;
  --pi-font-body:   'Montserrat','Montserrat-fallback',system-ui,sans-serif;
  --pi-font-label:  'Poppins','Poppins-fallback',sans-serif;

  /* WEIGHT SCALE — two roles, no more: display headings (h1–h3) carry the
     page, labels (h4–h6) sit under them. Both are applied !important below.
     Without it, the builder's inline `font-weight` and the parent theme beat
     this file — which is how the home page ended up with 500, 600 AND 700
     across nine heading signatures. */
  --pi-fw-display: 500;
  --pi-fw-label:   600;

  --pi-fs-h1:   clamp(30px, 24px + 2.2vw, 50px);
  --pi-fs-h2:   clamp(25px, 20px + 1.8vw, 40px);
  --pi-fs-h3:   clamp(20px, 17px + 1.1vw, 28px);
  --pi-fs-h4:   clamp(17px, 15.5px + .6vw, 21px);
  --pi-fs-h5:   clamp(15px, 14px + .4vw, 17px);
  --pi-fs-body: clamp(15px, 14.4px + .25vw, 16.5px);
  --pi-fs-small:13px;
  --pi-lh-head: 1.22;
  --pi-lh-body: 1.65;
}

/* Put the matched fallback into the BODY stack. The theme declares
   body{font-family:"Montserrat",sans-serif} in its own CSS, which every
   paragraph inherits — so the fallback has to be injected here, at the root,
   or the swap keeps reflowing the whole document. */
body,
body.body_style_wide,
.page_content_wrap p, .post_content p,
.page_content_wrap li, .post_content li{
  font-family:'Montserrat', 'Montserrat-fallback', sans-serif;
}

/* ---- headings --------------------------------------------------------- */
.page_content_wrap h1, .post_content h1{
  font-size:var(--pi-fs-h1) !important;
  line-height:var(--pi-lh-head) !important;
  font-weight:var(--pi-fw-display) !important;   /* display sits lighter; !important or inline styles win */
}
.page_content_wrap h2, .post_content h2,
.post_content.entry-content h2{
  font-size:var(--pi-fs-h2) !important;
  line-height:var(--pi-lh-head) !important;
  font-weight:var(--pi-fw-display) !important;   /* display sits lighter; !important or inline styles win */
}
.page_content_wrap h3, .post_content h3,
.post_content.entry-content h3{
  font-size:var(--pi-fs-h3) !important;
  line-height:1.3 !important;
  font-weight:var(--pi-fw-display) !important;   /* display sits lighter; !important or inline styles win */
}
.page_content_wrap h4, .post_content h4{
  font-size:var(--pi-fs-h4) !important;
  line-height:1.35 !important;
  font-weight:var(--pi-fw-label) !important;
}
.page_content_wrap h5, .post_content h5{
  font-size:var(--pi-fs-h5) !important;
  line-height:1.4 !important;
  font-weight:var(--pi-fw-label) !important;
}

/* the nearby-locations feature title keeps a step of extra presence */
.post_content.entry-content h2.paras-nearby-title{
  font-size:clamp(28px, 23px + 2vw, 44px) !important;
  line-height:1.2 !important;
}

/* ---- component titles (sanctioned exceptions) --------------------------
   Semantic h2/h3 used as CARD titles must not inflate to document scale.
   Every exception lives HERE, sized from the same tokens. */
.page_content_wrap h2.blog-post-title,
.page_content_wrap .post-item h2{
  font-size:var(--pi-fs-h4) !important;   /* post-card titles (author page) */
  line-height:1.4 !important;
}
.page_content_wrap h2.section-title{
  font-size:var(--pi-fs-h3) !important;   /* "Posts by …" section label */
}
.page_content_wrap h1.author-name{
  font-size:var(--pi-fs-h1) !important;
}
.page_content_wrap .related-posts-section h3{
  font-size:var(--pi-fs-h3) !important;
}
.page_content_wrap h4.realted-blog-title,
.page_content_wrap h4.realted-blog-title a{
  font-size:var(--pi-fs-h4) !important;
  line-height:1.4 !important;
}

/* ---- body copy -------------------------------------------------------- */
.page_content_wrap p, .post_content p,
.page_content_wrap li, .post_content li{
  font-size:var(--pi-fs-body);
  line-height:var(--pi-lh-body);
}

/* ---- editorial reading measure -----------------------------------------
   Premium body copy holds a comfortable measure (~66ch), never the full
   container width. Caps the builder's text columns; centered intros keep
   their centering (just narrower), left-aligned prose gets the measure.
   Desktop only — on phones the column is already within measure and the
   cap would just add awkward right-hand void. */
@media (min-width:768px){
  /* Cap the measure AND centre the capped box by default. Earlier this only
     centred columns carrying `.vc_align_center`, but the builder centres via
     inline text-align on the children (no class) — so every centred block
     left-parked into an empty right half. Centring the box is safe: only
     wide centred columns actually exceed 66ch and get capped; narrower
     left-aligned copy is already under the measure, so `auto` is a no-op. */
  .post_content .wpb_text_column > .wpb_wrapper,
  .entry-content .wpb_text_column > .wpb_wrapper{ max-width:var(--pi-measure); margin-inline:auto; }
}

/* ---- alignment standard ------------------------------------------------
   Long-form copy reads left-aligned on phones; the builder centers many
   paragraphs for the desktop composition, which turns ragged and hard to
   scan on a 360px screen. Headings keep their designed alignment. */
@media (max-width:767px){
  .post_content .wpb_text_column p{
    text-align:left !important;
  }
}


/* ---- h6: the kicker/label level ------------------------------------------
   h6 had NO rule in this file, so every one took whatever the theme or an
   inline style handed it: "Contact info" and "Hello There!" came out
   Inconsolata 700 while the FAQ questions came out Poppins 600 — two fonts
   and two weights for one level. */
.page_content_wrap h6, .post_content h6{
  font-size:var(--pi-fs-h5) !important;
  line-height:1.4 !important;
  font-weight:var(--pi-fw-label) !important;
}

/* ---- one family for every heading ----------------------------------------
   The builder hard-codes `font-family:Abril Fatface` inline on two headings
   (a face this site never loads, so they silently fell back — but their inline
   weight:700 stuck), and the theme puts its mono Inconsolata on sc_title
   subtitles. Headings are Poppins. The mono voice keeps its own deliberate
   homes (drafting labels, .pi-hours) — this rule only covers h1–h6. */
/* h1–h3 carry the page in the Fraunces serif — the single biggest premium
   lever. h4–h6 stay in the body sans (Montserrat) so small headings, card
   titles and kickers keep a clean neutral voice under the serif. */
.page_content_wrap h1, .page_content_wrap h2, .page_content_wrap h3,
.post_content h1, .post_content h2, .post_content h3{
  font-family:var(--pi-font-display) !important;
  letter-spacing:-.015em;
}
.page_content_wrap h1, .post_content h1{ letter-spacing:-.02em; line-height:1.1 !important; }
.page_content_wrap h4, .page_content_wrap h5, .page_content_wrap h6,
.post_content h4, .post_content h5, .post_content h6{
  font-family:var(--pi-font-body) !important;
}