/* =============================================================================
   Valunxt — UAE typography: the scale

   The type SCALE for the UAE home page and every page under /en-ae/services/.
   Loaded through `site_css`, which HeadAssets emits LAST, and scoped by
   `body.vxn-uae-type` — a class the same helper adds, so a page can never get
   one without the other. See lib/uae-typography.ts.

   ---------------------------------------------------------------------------
   THE FAMILY IS NOT SET HERE

   It used to be — Forum on h1/h2, Asap Sharp on everything else — and both
   went on client instruction (20260910). The market now runs one face, Inter
   (Sanomat Sans until 20260917), and it is declared in valunxt-uae-face.css,
   which is applied to EVERY /en-ae/ page, not only the ones on this scale.
   The split is deliberate: the
   About, Contact, Blogs and Industries pages were to change face and nothing
   else, so the sheet that changes sizes must not travel with the one that
   changes the family. withUaeType() loads both; withUaeFace() loads only that
   one.

   ---------------------------------------------------------------------------
   WHY `body.vxn-uae-type` AND NOT PLAIN TAGS

   Specificity, measured rather than assumed. The theme sets bare tags through
   `.elementor-kit-5 h1` — (0,1,1) — and the shared brand sheet sets
   `.vxn-svc-card__title` — (0,1,0) with `!important`. A plain `h1 {}` is
   (0,0,1) and loses to both. `body.vxn-uae-type h1` is (0,1,2), which clears
   them, and being scoped to the class means nothing here can reach /en-in/ or
   any page outside this market.

   ---------------------------------------------------------------------------
   WHAT THIS SHEET DOES AND DOES NOT WIN

   SIZES: the scale below is the BASELINE. It beats the theme and the kit, so
   every heading that was never explicitly sized now sits on the scale — which
   is most of them. It does NOT beat a page that sizes a heading on purpose:
   `.abk-root .abk-hero__title` is (0,2,0) and outranks (0,1,2). That is
   deliberate — the bespoke heroes and section heads were art-directed section
   by section, and flattening them to a 58px h1 would undo that work. If the
   scale should be absolute instead, raise these to `body.vxn-uae-type h1` with
   an added `:not(#\9)` or strip the page-level sizes; both are one pass.

   WEIGHT is not set here any more. It was — 500 on every heading, at (0,3,2)
   — until the client asked for 400 on every heading on every UAE page, which
   is a wider reach than this sheet has. The rule moved to valunxt-uae-face.css
   (THE HEADING WEIGHT), which every /en-ae/ page loads; it is written at the
   same (0,3,2) and wins for the same reasons.
   ============================================================================= */

/* =============================================================================
   1. THE SCALE

   A major-third ramp (×1.25) with the steps rounded to whole pixels and each
   one clamped so it holds from 360px to 1600px without a media query.

     h1   36 -> 58    1.14   the page's one title
     h2   28 -> 42    1.20   section heads
     h3   21 -> 27    1.32   block heads
     h4   18 -> 21    1.38   card titles
     h5   16 -> 18    1.45
     h6   15          1.50   eyebrows and labels, tracked out
     body 16          1.70

   Line height tightens as size grows, which is what keeps a 58px title from
   reading as double-spaced and a 15px label from reading as cramped.

   Every size and line height here is unchanged from the two-family version of
   this sheet. The weight column is gone: every heading is 400, set by the face
   sheet for the whole market, and with weight flat across all six SIZE is the
   only thing carrying the hierarchy — 58 / 42 / 27 / 21 / 18 / 15 at the top
   of the clamps. Shrink any two neighbours toward each other and the levels
   stop reading as different.
   ============================================================================= */

body.vxn-uae-type {
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
}

body.vxn-uae-type h1 {
  font-size: clamp(36px, 4.4vw, 58px) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.01em;
}

body.vxn-uae-type h2 {
  font-size: clamp(28px, 3.2vw, 42px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.008em;
}

body.vxn-uae-type h3 {
  font-size: clamp(21px, 2.1vw, 27px) !important;
  line-height: 1.32 !important;
  letter-spacing: -0.006em;
}

body.vxn-uae-type h4 {
  font-size: clamp(18px, 1.6vw, 21px) !important;
  line-height: 1.38 !important;
  letter-spacing: -0.004em;
}

body.vxn-uae-type h5 {
  font-size: clamp(16px, 1.3vw, 18px) !important;
  line-height: 1.45 !important;
}

body.vxn-uae-type h6 {
  font-size: 15px !important;
  line-height: 1.5 !important;
  letter-spacing: 0.02em;
}

/* =============================================================================
   2b. WEIGHT — moved

   This block set 500 on h1-h6 at (0,3,2), because a page rule such as
   `.abk-root .abk-appr__h` (0,2,0) outranked the (0,1,2) the sizes above use
   and three headings on /accounting-bookkeeping/ kept the page's own weight.
   The same rule, at the same specificity, now sets 400 from
   valunxt-uae-face.css so that it reaches every UAE page rather than only the
   ones on this scale. Nothing here sets a weight; the crumb below is the one
   exception, and it is not a heading.
   ============================================================================= */

/* ---- The breadcrumb line -------------------------------------------------
   Not a heading, but it sits in the hero with one and was left at whatever the
   theme gave it — 400 on the shared hero, which at that size over a photograph
   reads as thin. 500 is what separates it from body copy without competing
   with the title under it.

   Two markups are covered because the section has two heroes: the shared
   PageHeroSection, which renders its crumbs as `.elementor-heading-title`
   spans inside the captured 3752 container, and the bespoke pages, which
   render their own `__crumb` nav. */
body.vxn-uae-type.vxn-uae-type [class$="__crumb"],
body.vxn-uae-type.vxn-uae-type [class*="__crumb "],
body.vxn-uae-type.vxn-uae-type [class$="__crumb"] a,
body.vxn-uae-type.vxn-uae-type [class*="__crumb "] a,
body.vxn-uae-type.vxn-uae-type .elementor-3752 span.elementor-heading-title,
body.vxn-uae-type.vxn-uae-type .elementor-3752 span.elementor-heading-title a {
  font-weight: 500 !important;
}

/* Elementor renders most headings as `.elementor-heading-title` inside the tag,
   and the kit sizes THAT rather than the tag. Without this the scale above
   would be set on an element whose only child overrides it. The child inherits
   here instead. */
body.vxn-uae-type h1 .elementor-heading-title,
body.vxn-uae-type h2 .elementor-heading-title,
body.vxn-uae-type h3 .elementor-heading-title,
body.vxn-uae-type h4 .elementor-heading-title,
body.vxn-uae-type h5 .elementor-heading-title,
body.vxn-uae-type h6 .elementor-heading-title {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit;
}

/* Body copy. Not `!important`: a section that sets its own paragraph size is
   making a design decision, and unlike a heading there is no scale for it to
   break. */
body.vxn-uae-type p {
  line-height: 1.7;
}

body.vxn-uae-type small {
  font-size: 13px;
  line-height: 1.6;
}

/* =============================================================================
   3. RHYTHM

   Headings keep their own margins wherever a page sets them; this only supplies
   a sane default for the ones that do not, so a bare h2 followed by a p is not
   two blocks touching.
   ============================================================================= */

body.vxn-uae-type h1,
body.vxn-uae-type h2,
body.vxn-uae-type h3,
body.vxn-uae-type h4,
body.vxn-uae-type h5,
body.vxn-uae-type h6 {
  text-wrap: balance;
}