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

   The same complaint the client raised on cardastrology.com, and the same
   cause: the base is 1.9rem, but component after component sets a smaller
   size of its own - 1.3rem, 1.4rem, 1.5rem, 1.7rem - and greys it off with
   var(--text-muted) or a hand-picked #444 / #555 / #777. The headings shout
   and the sentences underneath are too small and too faint to read.

   So there is one rule for all of it, the figures the client settled on:

       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 value, so it
   follows the palette if that is ever changed.

   It is written once, here, and loaded last. No page has to be touched, 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 - weight, spacing, alignment - is left exactly as it was.

   .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 and the account sidebar are navigation, not
                         reading text, and several carry white text on a dark
                         background - a dark colour would make them disappear
     dark panels         the banner overlay, the course hero, the testimonial
                         slider, the CTA band and the gallery lightbox, for the
                         same reason
     stat tiles          two-word labels under a big number; they wrap
     tables, labels      left at their own size so no table starts overflowing
                         and no form goes loose
     the fingerprint     that report is a dense, self-contained layout with its
     report              own stylesheet and its own scale; resizing its text
                         would break the bands and tables it is built from

   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):not(:is(.topbar, #site-header, .header-div, .footer-div, .breadcrumb, .ud-sidebar, .ud-stats, .pg-banner-overlay, .course-detail-hero, .cd-meta, .slider-group, .svc-cta-band, .mg-lb, .lst-thumb-fallback, .fp-page) *) {
    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):not(:is(.topbar, #site-header, .header-div, .footer-div, .breadcrumb, .ud-sidebar, .ud-stats, .pg-banner-overlay, .course-detail-hero, .cd-meta, .slider-group, .svc-cta-band, .mg-lb, .lst-thumb-fallback, .fp-page) *) {
        font-size:   16px !important;
        line-height: 1.6 !important;
    }
}