/* ==========================================================================
   Site-wide typeface
   Lexend (same as the header nav) for every piece of text on the site.
   Change --site-font here to swap it everywhere.

   The Google Fonts <link> for these families sits in the <head> of
   _Layout.cshtml and of the stand-alone pages (ForgotPassword,
   CreateNewPass, OTPVerify).

   Why :where() + !important:
     · !important beats the many per-section font-family rules across
       index.css / page CSS files, whatever order they load in.
     · :where() keeps the specificity at zero, so any rule that ALSO uses
       !important (the handwritten "Caveat"/script accents) still wins.
     · Icon fonts (Font Awesome, Bootstrap Icons, Glyphicons) and code
       blocks are excluded so their glyphs don't break.
   ========================================================================== */
:root {
    --site-font: "Lexend", "Noto Sans Devanagari", "Segoe UI", Arial, sans-serif;
    --para-font: var(--site-font);
}

:where(html, body, body *:not(i, .fa, .fas, .far, .fab, .bi, [class^="bi-"], [class*=" bi-"], .glyphicon, code, pre, kbd, samp)) {
    font-family: var(--site-font) !important;
}

/* Paragraphs (and inline text inside them) use --para-font. Same zero
   specificity as above, but later in source order, so it wins. */
:where(p, p *:not(i, .fa, .fas, .far, .fab, .bi, [class^="bi-"], [class*=" bi-"], .glyphicon, code, pre, kbd, samp)) {
    font-family: var(--para-font) !important;
}

/* Every paragraph's text is black (#000000) — EXCEPT paragraphs that sit on
   a dark or photo background, which keep their own light colour so they
   stay readable. If you add a new dark section, add its class to the list
   inside :not(...) below. Zero specificity (:where) + !important, same as
   the font rules above. */
:where(p:not(:is(
        .sdh-promo, .sdh-modal-head,          /* header: dark mega-menu card, orange popup head */
        .smh-slide,                           /* home: hero slider over photos  */
        #why-choose,                          /* home: "Why choose us" photo band */
        .hww-section,                         /* home: dark "how we work" band  */
        .sdh-cb__band,                        /* home: blog section photo band  */
        .hc-contact__panel,                   /* home: dark contact panel       */
        .sdh-about .cta,                      /* About: dark CTA strip          */
        #sd-services .cta,                    /* Services: navy CTA strip       */
        .contact-banner, .quick-contact-section /* Contact: photo banner, teal strip */
    ) *)) {
    color: #000000 !important;
}

/* Every paragraph / sub-heading text is 17px. Small label-style <p>s
   (eyebrows above headings, tags, badges, field labels) keep their size. */
:where(p:not([class*="eyebrow"], [class*="label"], [class*="-tag"], [class*="badge"], [class*="kicker"])) {
    font-size: 17px !important;
}

/* Every paragraph is justified (flush to both left and right edges). */
:where(p) {
    text-align: justify !important;
    text-justify: inter-word;
}