/* =========================================================
   Site typography - every page except the Home page
   =========================================================
   Loaded only on non-Home pages, and every rule is scoped to
   the `toh-type` body class added alongside it, so the Home
   page is untouched.

   This file changes font family, weight, line height and
   letter spacing only. It sets no colour, no size that moves a
   box, no margin, padding, position, display or transition.

   Two mechanisms, on purpose:

   1. The theme routes 561 of its 577 font-family declarations
      through --tp-ff-* variables. Redefining those variables
      swaps the typeface across every component at once - nav,
      buttons, cards, forms, headings, body - without editing a
      single layout rule.

   2. The polish rules below are scoped with :where(), which
      contributes no specificity. They therefore behave like
      element defaults: any existing utility class the theme
      already puts on an element (fw-500, lh-160-per, fs-18 and
      friends) still wins, so deliberate per-component choices
      are preserved.
   ========================================================= */

/* ---------- 1. Font stack -------------------------------- */
.toh-type {
  --toh-ff-display: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --toh-ff-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Display / headings */
  --tp-ff-heading: var(--toh-ff-display);
  --tp-ff-jakarta: var(--toh-ff-display);
  --tp-ff-familjen: var(--toh-ff-display);

  /* Body / UI */
  --tp-ff-body: var(--toh-ff-text);
  --tp-ff-p: var(--toh-ff-text);
  --tp-ff-inter: var(--toh-ff-text);
  --tp-ff-dm: var(--toh-ff-text);
  --tp-ff-poppins: var(--toh-ff-text);
  --tp-ff-sora: var(--toh-ff-text);

  /* Deliberately left alone:
       --tp-ff-fontawesome            icon glyphs - remapping breaks icons
       --tp-ff-clash-*                self-hosted display face that does load
       --tp-ff-morganite-*            self-hosted ultra-condensed face; a
                                      substitute would be far wider and would
                                      move layout
       --tp-ff-teko / phudu / funnel  condensed display faces, same reason
       --tp-ff-playfair               the italic serif accent, kept as an accent */
}

/* Crisper stems at large sizes, and proper kerning/ligatures. */
.toh-type {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* Tabular figures wherever numbers are read as data, so digits align. */
.toh-type .purecounter,
.toh-type .tp-about-md-expreance-count h2 {
  font-variant-numeric: tabular-nums;
}

/* ---------- 2. Heading hierarchy -------------------------
   Larger headings get tighter tracking and leading; smaller
   ones get looser, which is what keeps a scale feeling
   deliberate rather than uniformly squashed. */
:where(.toh-type) h1 {
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

:where(.toh-type) h2 {
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.025em;
}

:where(.toh-type) h3 {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

:where(.toh-type) h4 {
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.015em;
}

:where(.toh-type) h5,
:where(.toh-type) h6 {
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* ---------- 3. Body copy ---------------------------------
   1.65 is a hair looser than the theme's 26px-on-16px (1.625),
   so paragraph blocks keep their height while reading better. */
:where(.toh-type) p,
:where(.toh-type) li,
:where(.toh-type) dd,
:where(.toh-type) blockquote {
  line-height: 1.65;
  letter-spacing: 0;
}

:where(.toh-type) strong,
:where(.toh-type) b {
  font-weight: 600;
}

/* ---------- 4. Navigation --------------------------------- */
:where(.toh-type) .tp-main-menu ul li a,
:where(.toh-type) .tp-megamenu-list ul li a,
:where(.toh-type) .tp-offcanvas-menu nav ul li a,
:where(.toh-type) .tp-footer-menu ul li a {
  font-family: var(--tp-ff-p);
  font-weight: 500;
  letter-spacing: 0.005em;
}

:where(.toh-type) .tp-megamenu-title,
:where(.toh-type) .tp-offcanvas-title {
  font-family: var(--toh-ff-display);
  letter-spacing: -0.01em;
}

/* ---------- 5. Buttons ------------------------------------ */
:where(.toh-type) button,
:where(.toh-type) .tp-btn-lg,
:where(.toh-type) .tp-btn-xl,
:where(.toh-type) .tp-btn-cst,
:where(.toh-type) .cst-btn,
:where(.toh-type) .upd-btn-black-radius,
:where(.toh-type) .upd-btn-black-square,
:where(.toh-type) .btn-cta {
  font-family: var(--tp-ff-p);
  font-weight: 600;
  letter-spacing: 0.005em;
}

/* ---------- 6. Forms and labels --------------------------- */
:where(.toh-type) input,
:where(.toh-type) select,
:where(.toh-type) textarea,
:where(.toh-type) label,
:where(.toh-type) legend,
:where(.toh-type) .nice-select,
:where(.toh-type) .nice-select .list li {
  font-family: var(--tp-ff-p);
  letter-spacing: 0;
}

:where(.toh-type) label {
  font-weight: 500;
}

:where(.toh-type) ::placeholder {
  font-family: var(--tp-ff-p);
  font-weight: 400;
}

/* ---------- 7. Small text and eyebrows --------------------
   Short uppercase labels need positive tracking to stay legible. */
:where(.toh-type) .tp-section-subtitle,
:where(.toh-type) .ais-section-subtitle,
:where(.toh-type) .badge-label,
:where(.toh-type) .section-divider,
:where(.toh-type) .card-name,
:where(.toh-type) .blog-category,
:where(.toh-type) .per-month {
  font-family: var(--tp-ff-p);
  letter-spacing: 0.04em;
}

/* ---------- 8. Blocks with their own hardcoded stacks -----
   These two set a font stack directly rather than through the
   theme variables, so they need naming to join the system. */
.toh-type .privacy-policy-wrapper,
.toh-type .privacy-policy-wrapper p,
.toh-type .privacy-policy-wrapper li,
.toh-type .privacy-policy-wrapper td,
.toh-type .privacy-policy-wrapper th {
  font-family: var(--tp-ff-p);
}

.toh-type .privacy-policy-wrapper h1,
.toh-type .privacy-policy-wrapper h2,
.toh-type .privacy-policy-wrapper h3 {
  font-family: var(--toh-ff-display);
}

.toh-type .faq-section,
.toh-type .faq-section .faq-question,
.toh-type .faq-section .faq-answer,
.toh-type .faq-section p,
.toh-type .faq-section li {
  font-family: var(--tp-ff-p);
}

.toh-type .faq-section h2,
.toh-type .faq-section h3,
.toh-type .faq-section .faq-question {
  font-family: var(--toh-ff-display);
  letter-spacing: -0.015em;
}