/* ==========================================================================
   Tegra Forge – flow & scale layer
   Loaded after style.css. Establishes one fluid type scale, a readable
   measure, consistent gutters, and fixes mobile clipping. Keeps the brand
   (dark / orange / Spline Sans Mono) untouched.
   ========================================================================== */

:root {
  /* type scale (min → max across 360px → 1440px) */
  --tf-text:   clamp(1rem,     0.95rem + 0.25vw, 1.125rem);  /* 16 → 18  body */
  --tf-lede:   clamp(1.125rem, 1rem    + 0.6vw,  1.5rem);    /* 18 → 24  intro text */
  --tf-h4:     clamp(1.375rem, 1.2rem  + 0.9vw,  1.75rem);   /* 22 → 28  card titles */
  --tf-h3:     clamp(1.75rem,  1.4rem  + 1.6vw,  2.5rem);    /* 28 → 40  sub-sections, hero line */
  --tf-h2:     clamp(2.25rem,  1.6rem  + 3vw,    4rem);      /* 36 → 64  section titles */
  --tf-h1:     clamp(2.5rem,   1.8rem  + 4vw,    5rem);      /* 40 → 80  page titles */

  --tf-measure: 68ch;                              /* comfortable line length */
  --tf-gutter:  clamp(1rem, 3vw, 3rem);            /* side padding */
  --tf-section: clamp(3rem, 6vw, 6rem);            /* vertical rhythm */
}

/* --- base ---------------------------------------------------------------- */
html { overflow-x: clip; }
body {
  font-size: var(--tf-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .card-title {
  overflow-wrap: break-word;
  text-wrap: balance;
}
p, li, .display-7, .mbr-text, .card-text {
  font-size: var(--tf-text) !important;
  line-height: 1.6 !important;
}
a.btn, .btn.display-7 { font-size: var(--tf-text) !important; }

/* --- headings ------------------------------------------------------------ */
.display-1,
.tft-service-title,
.tft-main-header .main-title h2,
.tft-step-hero .main-title h2 {
  font-size: var(--tf-h1) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em;
}
.display-2,
.home .title-box h2,
.home .title-box h4,
.services .tft-services-content > h4,
.tft-content h2,
footer .contact-section h4 {
  font-size: var(--tf-h2) !important;
  line-height: 1.1 !important;
}
.tft-content h3,
.how-it-works .card-text-wrap h4,
.tft-promo h2,
.home main .tft-slogan,
.home main .tft-slogan * {
  font-size: var(--tf-h3) !important;
  line-height: 1.2 !important;
}
.display-5,
.card-title,
h5.card-title,
.tft-content h4,
.key-content .tft-content h3 {
  font-size: var(--tf-h4) !important;
  line-height: 1.25 !important;
}
.display-4,
.main-text,
.tft-excerpt,
.tft-excerpt p,
.tft-about-us-excerpt,
.tft-service-content .tft-excerpt,
.tft-step-hero .main-title > div > p {
  font-size: var(--tf-lede) !important;
  line-height: 1.45 !important;
}
.tft-content .key-benefits .wp-block-list li,
.tft-service-content .tft-content ul li,
.key-content .tft-content ul li {
  font-size: var(--tf-lede) !important;
  line-height: 1.4 !important;
}
.tft-content h2, .tft-content h3, .tft-content h4 {
  margin-top: 1.25em !important;
  margin-bottom: 0.5em !important;
  padding-top: 0 !important;
}
.tft-content p { line-height: 1.6 !important; margin-bottom: 1em; }

/* --- measure & gutters --------------------------------------------------- */
.tft-content,
.key-content,
.tft-about-us-excerpt,
.tft-excerpt,
.home .title-box p,
footer .contact-section p {
  max-width: var(--tf-measure);
}
footer .contact-section p { width: auto; margin: 0.75em auto 1.25em; }
footer .contact-section { padding: var(--tf-section) var(--tf-gutter); }

/* pages whose content block sits full-bleed: give it a centred column */
.page-template-steps .tft-content,
.page-template-solutions .tft-content,
.page-template-key .tft-content,
.page .structurem5.cid-uNFcg95XcN > .tft-content {
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--tf-gutter);
  padding-right: var(--tf-gutter);
}
.tft-service-content { padding: var(--tf-gutter) !important; }

/* --- hero (home) --------------------------------------------------------- */
.home main > .row { margin-left: 0 !important; margin-right: 0 !important; }
.home main > .row > .col-content { padding-left: 0; padding-right: 0; }
.home main .tft-slogan { padding: 0.75em var(--tf-gutter) 0.75em var(--tf-gutter); max-width: min(100%, 34ch); }

/* --- cards --------------------------------------------------------------- */
.card-row, .card-row .item, .card-row .card, .key-services .card,
.card-text-wrap, .item-wrapper, .tft-services-wrapper .item {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.card-title, .card-text { white-space: normal !important; }
.how-it-works .item-img img,
.tft-services-wrapper .item-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.how-it-works .card-text-wrap { padding: 1.25rem var(--tf-gutter) 0; }

/* --- partners strip ------------------------------------------------------ */
.partners { padding: calc(var(--tf-section) / 2) 0; }
.partners .partners-links img { height: 56px; width: auto; max-width: 180px; object-fit: contain; }

/* --- section rhythm ------------------------------------------------------ */
.home .how-it-works-title .title-wrap,
.home .features3 .title-wrap {
  padding-top: var(--tf-section);
  padding-bottom: calc(var(--tf-section) / 2);
}
.structurem5.cid-uNFcg95XcN { padding-top: var(--tf-section) !important; padding-bottom: var(--tf-section) !important; }

/* --- phones -------------------------------------------------------------- */
@media (max-width: 640px) {
  .home .title-box h2, .home .title-box h4 { font-size: var(--tf-h2) !important; line-height: 1.1 !important; }
  .tft-main-header .main-title { max-width: 100% !important; padding: 2em var(--tf-gutter) 1.25em !important; }
  .tft-service-content { display: block !important; }
  .tft-service-content .tft-excerpt, .tft-service-content .tft-content { padding: 0 !important; }
  .tft-service-content .tft-content { margin-top: 1.5rem; }
  .home .item-wrapper { padding-bottom: 4.5rem; }
}

/* --- stragglers pinned by higher-specificity rules in style.css ---------- */
.services .tft-services-wrapper .item h5.card-title,
.tft-services-wrapper h5.card-title {
  font-size: var(--tf-h4) !important;
  line-height: 1.25 !important;
}
.partners h2.wp-block-heading,
.widget h2.wp-block-heading,
.tft-content h2.wp-block-heading,
.tft-content .key-benefits h2 {
  font-size: var(--tf-h3) !important;
  line-height: 1.2 !important;
}

/* --- inner pages: one centred content column ----------------------------- */
.page:not(.home) .header1 > .container-fluid,
.tft-service-content,
.page:not(.home) .structurem5.cid-uNFcg95XcN > .tft-content {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.tft-content .key-benefits h2 {
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  text-wrap: balance;
  padding-left: 0 !important;
  padding-right: 1rem;
}

/* --- child-page grid on Solutions / category pages ----------------------- */
.tft-child-pages { margin-bottom: 0; border-bottom: none; }
.tft-child-pages .card-title a { color: inherit; text-decoration: none; }
.tft-child-pages .item-img { display: block; aspect-ratio: 16/7; overflow: hidden; background: #333; }
.tft-child-pages .item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- long single-word titles on phones; collapse stacked section padding -- */
@media (max-width: 640px) {
  :root { --tf-h1: clamp(1.9rem, 8.5vw, 2.75rem); }
  .tft-main-header .main-title h2, .tft-service-title { overflow-wrap: normal; }
}
.structurem5.cid-uNFcg95XcN + .structurem5.cid-uNFcg95XcN { padding-top: 0 !important; }
.page .header1.structurem5.cid-uNFcg95XcN { padding-bottom: calc(var(--tf-section) / 2) !important; }

/* --- outrank !important rules in style.css media queries (≤1280 / ≤960) ---
   (the template classes live on <body>, so they must be written as body.xxx) */
html body.page-template-solutions .tft-main-header .main-title-wrapper .main-title h2,
html body .tft-main-header .main-title-wrapper .main-title h2,
html body .tft-main-header .tft-service-title,
html body.single-service .tft-main-header .tft-service-title {
  font-size: var(--tf-h1) !important;
  line-height: 1.05 !important;
}
html body.page .tft-content h2, html body.single .tft-content h2 { font-size: var(--tf-h2) !important; line-height: 1.1 !important; }
html body.page .tft-content h2.wp-block-heading, html body.single .tft-content h2.wp-block-heading,
html body.page-template-solutions .tft-content .key-benefits h2,
html body.page .tft-content .key-benefits h2 { font-size: var(--tf-h3) !important; line-height: 1.2 !important; padding: 0 1rem 0 0 !important; }
html body.page .tft-content h3, html body.single .tft-content h3 { font-size: var(--tf-h3) !important; line-height: 1.2 !important; }
html body.page .tft-content h4, html body.single .tft-content h4 { font-size: var(--tf-h4) !important; line-height: 1.25 !important; }

/* --- service page "Tech" / "In-depth solution" sub-heads ----------------- */
html body.page .tft-content .tech h2,
html body.page .tft-content .in-depth-solution h2,
html body.page .tft-service-content .tft-content .tech h2,
html body.page .tft-service-content .tft-content .in-depth-solution h2,
html body.single .tft-content .tech h2,
html body.single .tft-content .in-depth-solution h2 {
  font-size: var(--tf-h3) !important;
  line-height: 1.2 !important;
}
html body.page .tft-content .wp-block-columns .tech h2,
html body.page .tft-content .wp-block-columns .in-depth-solution h2,
html body.page .tft-content .wp-block-columns h2.wp-block-heading,
html body.page .tft-content .key-benefits + .wp-block-columns h2 {
  font-size: var(--tf-h3) !important;
  line-height: 1.2 !important;
}

/* --- About/Solutions grid card titles (outranks nested 2rem !important) --- */
html body .services .tft-services-content .tft-services-wrapper .item .item-wrapper .card-text-wrap h5.card-title,
html body .services .tft-services-wrapper h5.card-title {
  font-size: var(--tf-h4) !important;
  line-height: 1.25 !important;
}

/* --- default page template: breathing room above the title ---------------- */
html body.page-template-default .tft-main-header .container-fluid {
  padding-top: calc(var(--tf-section) / 1.5);
  padding-bottom: calc(var(--tf-section) / 3);
}
