/* ==========================================================================
   Body text, in one place (client, 2026-10-25)
   ==========================================================================

   Every page had worked out its own size for ordinary reading text. The base
   was 1.9rem, but component after component cut it down - 1.3rem, 1.4rem,
   1.45rem, 1.55rem - and greyed it off with var(--text-muted). The result is
   what the client sees: a site whose headings shout and whose sentences are
   too small and too faint to read comfortably.

   So there is now one rule for all of it - the figures the client settled on
   (2026-10-29), the same ones .lead-text carries in pages.css:

       font-size   1.8rem    (18px - the html base is 62.5%, so 1rem = 10px)
       line-height 1.6
       color       var(--text)

   The colour is the theme's body-text token rather than a flat #111, so it
   still follows Admin > Settings if the palette is ever changed.

   It is written once, here, and loaded last. Nothing has to be changed page by
   page, and a component that sets its own smaller size no longer wins - which
   is the whole point, so these three declarations carry !important. Everything
   else about a component - its weight, spacing, alignment - is left alone.

   .body-text is the same rule as a class, for markup that wants it explicitly.

   WHAT IS LEFT OUT, and why:

     headings            h1-h6 keep their own scale; this is body text only
     chrome              the top bar, the header and its menu, the footer, the
                         breadcrumb, the floating WhatsApp button and the
                         account sidebar are navigation, not reading text, and
                         several of them are white text on a dark background -
                         #111 would make them disappear
     dark panels         heroes, CTA bands and the like, for the same reason
     buttons and badges  they are <a> and <span>, which this never touches
     tables, labels      left at their own size so no table starts overflowing
                         and no form goes loose; say the word and they join in
     stat tiles          the counters on the account pages are two-word labels
                         under a big number; at 1.8rem they wrapped

   The two halves of the selector must touch, with no space between them: a
   space would mean "inside", and the rule would land on the wrong elements.
   ========================================================================== */

/* Reading text … */
:is(p, li, dd, dt, blockquote, figcaption, address, summary, .body-text, .lead-text):not(:is(.topbar, #site-header, .header-div, .footer-div, .breadcrumb, .wa-float, .ud-sidebar, .ud-stats, .cr-hero, .pc-hero, .cr-cta-band, .cr-guide, .cr-tile, .svc-cta, .ab-hero, .ab-vm-card, .aa-cta, .sidebar-cta, .talk-us, .ck-page-header, .course-detail-hero, .pkg-summary-header, .slider-group) *) {
    font-size:   1.8rem !important;
    line-height: 1.6 !important;
    color:       var(--text) !important;
}

/* A phone shrinks the root to 50%, so 1.8rem would come out at 14.4px -
   smaller than the text this rule exists to enlarge. Hold it in pixels there
   instead, at the same line-height. */
@media (max-width: 575px) {
    :is(p, li, dd, dt, blockquote, figcaption, address, summary, .body-text, .lead-text):not(:is(.topbar, #site-header, .header-div, .footer-div, .breadcrumb, .wa-float, .ud-sidebar, .ud-stats, .cr-hero, .pc-hero, .cr-cta-band, .cr-guide, .cr-tile, .svc-cta, .ab-hero, .ab-vm-card, .aa-cta, .sidebar-cta, .talk-us, .ck-page-header, .course-detail-hero, .pkg-summary-header, .slider-group) *) {
        font-size:   16px !important;
        line-height: 1.6 !important;
    }
}