/* =====================================================================
   Vriksha site-wide typography (2026-11-04)
   One text system for every module, modelled on the Solutions pages.
   Loaded after the theme + mobile-app.css. Rules are prefixed with
   "html body" so they beat the theme and page-level <style> blocks
   without !important. Only light-background text gets a colour; dark
   sections keep their own white text.
   ===================================================================== */
:root {
    --vt-ink:   #0a1121;   /* headings */
    --vt-body:  #4b5563;   /* paragraphs and lists */
    --vt-muted: #6b7280;   /* captions */
    --vt-grad:      linear-gradient(90deg, #a033ff 0%, #3b82f6 100%);  /* brand gradient (homepage hero) */
    --vt-grad-dark: linear-gradient(90deg, #d8b4fe 0%, #93c5fd 100%);  /* same hues, lifted for dark backgrounds */
}

/* ---------- 1. Pasted-document fonts never override Poppins ----------
   Content pasted from Word/LibreOffice carries Calibri / Carlito /
   Liberation Serif via .western/.cjk/.ctl classes, <font face> or inline styles. */
html body .western, html body .cjk, html body .ctl, html body font[face],
html body :is(p, li, span, h1, h2, h3, h4, h5, h6, td, th, strong, em, b, a, div, blockquote)[style*="font-family"] {
    font-family: inherit !important;
}
html body :is(p.western, li > p.western, p.cjk, p.ctl) { margin-bottom: .35em; line-height: 1.7 !important; color: var(--vt-body) !important; }
/* About slider titles asked for proxima-nova, which is never loaded (fell back to Arial) */
html body .navtitle h4 { font-family: inherit; }

/* ---------- 2. Section titles (H2) ---------- */
html body :is(.offer-text, .cab-booking-text, .create-text, .Procedure-text, .Personalised-text,
              .standalone-text h2, .standalone-odd-text h2, .development-area > h2,
              .section-title > h2.title, .about-right-roots > h2, .vriksha-right-area > h2,
              .Upgrade_world-area > h2, .section-content > h2, .service_top_contents > h2,
              .service_bottom_contents > h2, h2.sol-title,
                  .faq-area-bg h2, .home_cooks_right_area h2) {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
/* colour only where the section is light (dark sol-title / banners keep white) */
html body :is(.offer-text, .cab-booking-text, .create-text, .Procedure-text, .Personalised-text,
              .standalone-text h2, .standalone-odd-text h2, .development-area > h2,
              .section-title > h2.title, .about-right-roots > h2, .vriksha-right-area > h2,
              .Upgrade_world-area > h2, .section-content > h2,
              .service_top_contents > h2, .service_bottom_contents > h2,
              .faq-area-bg h2, .home_cooks_right_area h2) {
    color: var(--vt-ink);
}

/* ---------- 3. Sub-section titles (H3 level) ---------- */
html body :is(.case-right-text, .Fully_Customizable_text, .Ecosystem-text, .Smart-text, .Recording-text,
              .job-section-card > h3, h2.western, h3.western,
              .standalone-text h3, .standalone-odd-text h3) {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--vt-ink);
}
html body .Recording-text { font-size: 20px; }

/* ---------- 4. Body text ---------- */
html body :is(.standalone-text p, .standalone-text li, .standalone-odd-text p, .standalone-odd-text li,
              #meta-origin p, #meta-origin li,
              .case-right-para, .service-para, .Mobile-App-text1, .Mobile-App-text2,
              .Mobile-Application-text p, .Fully_Customizable_para, .Procedure-para, .Procedure-para1,
              .e-commerce_text, .corona-para, .Ecosystem-para, .industries-heading, .project_description p,
              .Smart-para, .product-text1, .product-text2, .Navigate-text, .Vriksha-para, .growing-para1,
              .pro_subtitle p, .margin-left-20 > p, .job-section-card li, .job-section-card p,
              .what-next-content p, .content-area > p, .content-area > ul > li, .content-area > ol > li) {
    font-size: 16px;
    line-height: 1.7;
    font-weight: 400;
    color: var(--vt-body);
}
/* long-form blog reading gets a touch more air */
html body :is(.content-area > p, .content-area > ul > li, .content-area > ol > li) { line-height: 1.8; }
/* coloured labels keep their colour, just the size is unified */
html body .fully-responsive-text { font-size: 16px; line-height: 1.6; }

/* Intro line under a section title */
html body :is(.offer-para, .navtitle > p) {
    font-size: 18px;
    line-height: 1.6;
    color: var(--vt-body);
}
/* Case-study summaries and testimonials: one quote style */
html body .case_studies_masonry > p { font-size: 17px; line-height: 1.7; font-weight: 400; color: #374151; }
html body .testimoni-description p.description { font-size: 17px; line-height: 1.7; color: #374151; }

/* ---------- 5. Gradient keywords (one brand gradient everywhere) ---------- */
html body :is(.create-text span, .service_top_contents > h2 span, .service_bottom_contents > h2 span,
              .header-area .title span, .empower_content h4 span, .lp-highlight,
              .case_contents h3, .case_count h1, .case_count .counter-number, .asdf h1, .asdf .counter-number) {
    background: var(--vt-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
/* dark sections: same gradient, lighter so it stays readable */
/* (promo banners keep their own white/orange text: their whole headline is built from spans) */
html body .scta-heading span {
    background: var(--vt-grad-dark);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
/* reusable utility for future titles: <span class="text-gradient">word</span> */
html body .text-gradient {
    background: var(--vt-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------- 6. Tablet ----------
   responsive.css forces every h1-h4 with !important per breakpoint (tablet h2 26px,
   phones h2 = h3 = 20px, no hierarchy). The section/sub-section titles we manage get
   a real scale instead, so these few size rules need !important too. */
@media (max-width: 991px) {
    html body :is(.offer-text, .cab-booking-text, .create-text, .Procedure-text, .Personalised-text,
                  .standalone-text h2, .standalone-odd-text h2, .development-area > h2,
                  .section-title > h2.title, .about-right-roots > h2, .vriksha-right-area > h2,
                  .Upgrade_world-area > h2, .section-content > h2, .service_top_contents > h2,
                  .service_bottom_contents > h2, h2.sol-title,
                  .faq-area-bg h2, .home_cooks_right_area h2) { font-size: 28px !important; line-height: 1.3 !important; }
    html body :is(.case-right-text, .Fully_Customizable_text, .Ecosystem-text, .Smart-text, .Recording-text,
                  .job-section-card > h3, h2.western, h3.western,
                  .standalone-text h3, .standalone-odd-text h3) { font-size: 20px !important; line-height: 1.35 !important; }
    html body :is(.offer-para, .navtitle > p) { font-size: 17px; }
}

/* ---------- 7. Phone ---------- */
@media (max-width: 767px) {
    html body :is(.offer-text, .cab-booking-text, .create-text, .Procedure-text, .Personalised-text,
                  .standalone-text h2, .standalone-odd-text h2, .development-area > h2,
                  .section-title > h2.title, .about-right-roots > h2, .vriksha-right-area > h2,
                  .Upgrade_world-area > h2, .section-content > h2, .service_top_contents > h2,
                  .service_bottom_contents > h2, h2.sol-title,
                  .faq-area-bg h2, .home_cooks_right_area h2) { font-size: 22px !important; line-height: 1.3 !important; }
    html body :is(.case-right-text, .Fully_Customizable_text, .Ecosystem-text, .Smart-text, .Recording-text,
                  .job-section-card > h3, h2.western, h3.western,
                  .standalone-text h3, .standalone-odd-text h3) { font-size: 18px !important; line-height: 1.35 !important; }
    html body :is(.standalone-text p, .standalone-text li, .standalone-odd-text p, .standalone-odd-text li,
                  #meta-origin p, #meta-origin li,
                  .case-right-para, .service-para, .Mobile-App-text1, .Mobile-App-text2,
                  .Mobile-Application-text p, .Fully_Customizable_para, .Procedure-para, .Procedure-para1,
                  .e-commerce_text, .corona-para, .Ecosystem-para, .industries-heading, .project_description p,
                  .Smart-para, .product-text1, .product-text2, .Navigate-text, .Vriksha-para, .growing-para1,
                  .pro_subtitle p, .margin-left-20 > p, .job-section-card li, .job-section-card p,
                  .what-next-content p, .content-area > p, .content-area > ul > li, .content-area > ol > li,
                  .fully-responsive-text) { font-size: 16px; line-height: 1.65; }
    html body :is(.offer-para, .navtitle > p, .case_studies_masonry > p, .testimoni-description p.description) { font-size: 16px; }
}

/* ---------- 8. Blog article headings: one ladder at every width ---------- */
html body .content-area > h2 { font-size: 24px !important; line-height: 1.35 !important; font-weight: 700; color: var(--vt-ink); }
html body .content-area > h3 { font-size: 19px !important; line-height: 1.4 !important; font-weight: 700; }
@media (max-width: 991px) {
    html body .content-area > h2 { font-size: 22px !important; }
    html body .content-area > h3 { font-size: 18px !important; }
}
@media (max-width: 767px) {
    html body .content-area > h2 { font-size: 20px !important; }
    html body .content-area > h3 { font-size: 17px !important; }
}

/* ---------- 9. Pasted "Key Features" headings (LibreOffice h2.western) ---------- */
html body :is(.standalone-text, .standalone-odd-text, #meta-origin) :is(h2.western, h3.western) {
    font-size: 22px !important; line-height: 1.35 !important; font-weight: 600 !important; color: var(--vt-ink) !important;
}
@media (max-width: 991px) { html body :is(.standalone-text, .standalone-odd-text, #meta-origin) :is(h2.western, h3.western) { font-size: 20px !important; } }
@media (max-width: 767px) { html body :is(.standalone-text, .standalone-odd-text, #meta-origin) :is(h2.western, h3.western) { font-size: 18px !important; } }

/* ---------- 10. Solutions card titles stay card-sized on small screens ----------
   (responsive.css blows every h3 up to 20-22px !important below 1024px) */
@media (max-width: 991px) {
    html body :is(.sol-card > h3, .sol-step-text > h3, a.sol-tile > h3) { font-size: 17px !important; line-height: 1.35 !important; }
    html body :is(.sol-card.sol-off > h3, .sol-plan > h3, .sol-calc > h3) { font-size: 19px !important; line-height: 1.35 !important; }
}